/* ══════════════════════════════════════════════════════════════
   Carboneum — app.css
   Feuille de style unique de l'application (/app).
   Regroupe, dans l'ordre exact de la cascade d'origine :
     1. style.css        base : composants et mise en page
     2. style-modern.css calque « modern »
     3. style-pro.css    calque « pro » (fenêtre flottante, ombres, rayons)
     4. style-boost.css  calque « boost » (sidebar, tableau de bord)
     5. styles qui étaient intégrés à app.html (bandeau cookies, sync, ISO)
   Tous les tokens (:root) sont réunis ci-dessous, une seule fois.
   Les fonds reprennent ceux de la page landing (index.html).
   ══════════════════════════════════════════════════════════════ */

:root {

  /* Rampe verte (marque) */
  --c-50: #E9F9F1;
  --c-100: #C6F0DC;
  --c-200: #90E0B6;
  --c-300: #57CC8C;
  --c-400: #22B673;
  --c-500: #189A5E;
  --c-600: #107A49;

  /* Couleurs sémantiques */
  --primary: var(--c-400);
  --primary-dim: var(--c-300);
  --primary-dark: var(--c-500);
  --em: var(--c-400);
  --em-dim: var(--c-100);
  --sky: var(--c-300);
  --amber: #D97706;
  --rose: #DC2626;
  --rose-dim: rgba(178,58,46,0.12);
  --violet: #7C3AED;
  --ai: var(--c-300);
  --warn: var(--amber);
  --amber-dim: #fef3c7;
  --amber-bg: #fffbeb;
  --amber-dark: #92400e;
  --accent: #F0803C;
  --accent-dark: #C9631F;

  /* Fonds */
  --bg: #F4F7F5;  /* = landing (--ground) */
  --bg-1: #FFFFFF;  /* = landing (--paper) */
  --bg-2: #EEF3F0;  /* = landing (encart) */
  --bg-3: rgba(63,160,106,0.06);
  --bg-4: rgba(63,160,106,0.10);
  --bg-5: rgba(21,24,26,0.10);
  --bg-dark: var(--c-600);
  --surface-2: var(--bg-2);
  --card-bg: var(--bg-1);
  --card: var(--bg-1);
  --card-2: var(--bg-2);

  /* Texte et bordures */
  --txt: #1B211D;
  --txt-2: #4C564F;
  --txt-3: #7C8880;
  --txt-inv: #FFFFFF;
  --border: #DCE7DE;
  --border-2: #E9F1EB;

  /* Typographie */
  --fh: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --fm: 'JetBrains Mono','SF Mono','Fira Code',monospace;

  /* Ombres, rayons, mouvement */
  --shadow-sm: 0 1px 2px rgba(20,38,28,0.05);
  --shadow: 0 1px 3px rgba(20,38,28,0.05), 0 4px 14px rgba(20,38,28,0.05);
  --shadow-lg: 0 2px 6px rgba(20,38,28,0.06), 0 16px 40px rgba(20,38,28,0.10);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --tr: all .22s var(--ease);
  --ease: cubic-bezier(.22,1,.36,1);

  /* Zones sûres (encoches mobiles) */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Autres */
  --frame: #DFE7E3;  /* cadre autour de la fenêtre de l'app (desktop) */
}


/* ══════════════════════════════════════════════════════════════
   1. BASE (ex style.css)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Carboneum v5.3 — style.css (Complet modernisé)
   Rampe Vert Carbone : #F0FDF8 → #BBFADE → #86EFBB → #3DD68C → #1DB97A → #0F8F5A → #065C39
   ══════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES : Rampe Vert Carbone ───────────────────── */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:93.75%}
body{font-family:var(--fh);background:var(--bg);color:var(--txt);font-size:.95rem;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
a{color:var(--primary);text-decoration:none;transition:var(--tr)}a:hover{color:var(--primary-dark)}
button{font-family:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a,input[type=checkbox],input[type=radio],select{touch-action:manipulation}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}

.hidden{display:none!important}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.text-center{text-align:center}.w-full{width:100%}
.mh{max-height:60vh;max-height:60dvh;overflow-y:auto}

#splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
#splash.out{opacity:0;visibility:hidden}
.sp-inner{text-align:center;padding:2rem}
.sp-logo{width:72px;height:72px;margin:0 auto 1.5rem;animation:sp-pulse 2s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.sp-title{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--c-400),var(--c-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.4rem}
.sp-sub{color:var(--txt-3);font-size:.95rem;margin-bottom:2rem}
.sp-bar{width:200px;height:4px;background:var(--bg-5);border-radius:2px;margin:0 auto 1rem;overflow:hidden}
.sp-prog{height:100%;width:0%;background:linear-gradient(90deg,var(--c-400),var(--c-300));border-radius:2px;transition:width .4s ease}
.sp-status{color:var(--txt-3);font-size:.82rem}

#launch-overlay{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .3s,visibility .3s}
#launch-overlay.out{opacity:0;visibility:hidden}
.launch-overlay-inner{text-align:center}
.launch-overlay-inner .iso-spinner{width:32px;height:32px;border-width:3px;margin:0 auto .75rem}
.launch-overlay-text{color:var(--txt-3);font-size:.85rem}

#auth-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:1rem;padding-top:calc(1rem + var(--sat));padding-bottom:calc(1rem + var(--sab));padding-left:calc(1rem + var(--sal));padding-right:calc(1rem + var(--sar))}
.auth-bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--c-600) 0%,var(--c-500) 50%,var(--c-400) 100%);opacity:.95}
.auth-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 420px;max-width:1100px;width:92%;background:var(--bg-1);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;min-height:unset;max-height:90vh}
.auth-hero{padding:3rem 2.5rem;background:linear-gradient(160deg,var(--c-600),var(--c-500));color:#fff;display:flex;flex-direction:column;justify-content:center}
.auth-hero-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}
.auth-hero-brand{font-size:1.4rem;font-weight:700}
.auth-hero-pitch h2{font-size:1.6rem;font-weight:700;margin-bottom:1rem;line-height:1.3}
.auth-hero-pitch p{color:var(--c-100);font-size:.95rem;line-height:1.6;margin-bottom:2rem}
.auth-hero-feats{display:grid;gap:1rem}
.auth-feat{display:flex;align-items:center;gap:.75rem;font-size:.9rem}
.auth-feat-ico{width:36px;height:36px;background:rgba(255,255,255,.12);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9)}
.auth-panel{padding:1.5rem 2rem;display:flex;flex-direction:column;overflow-y:auto;max-height:90vh}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:.8rem;border-bottom:2px solid var(--border-2);padding-bottom:.4rem}
.auth-tab{padding:.5rem 1rem;font-size:.9rem;font-weight:600;color:var(--txt-3);border-radius:var(--r-sm);transition:var(--tr);cursor:pointer;background:none;border:none}
.auth-tab:hover{color:var(--primary)}
.auth-tab.active{color:var(--primary);background:var(--bg-3)}
.auth-form{flex:1;display:flex;flex-direction:column}
.auth-form-title{font-size:1.15rem;font-weight:700;margin-bottom:.15rem;color:var(--txt);display:flex;align-items:center;gap:.35rem}
.auth-form-sub{color:var(--txt-3);font-size:.82rem;margin-bottom:.8rem}
.auth-sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.2rem}
.auth-sc{padding:.3rem .2rem;text-align:center;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);font-size:.7rem;color:var(--txt-2);background:var(--bg-1)}
.auth-sc span{display:flex;align-items:center;justify-content:center;height:1.4rem;margin-bottom:.1rem;color:var(--primary)}
.auth-sc:hover{border-color:var(--c-300);background:var(--c-50)}
.auth-sc.active{border-color:var(--primary);background:var(--bg-3);color:var(--primary);font-weight:600}
.auth-demo{text-align:center;margin-top:auto;padding-top:.8rem;color:var(--txt-3);font-size:.78rem}
.auth-demo a{color:var(--primary);font-weight:600;cursor:pointer}
.auth-demo a:hover{text-decoration:underline}
.auth-footer-legal{text-align:center;padding:.8rem 0 0;font-size:.78rem;color:var(--txt-3)}
.auth-footer-legal a{color:var(--txt-3);text-decoration:underline}
.auth-footer-legal a:hover{color:var(--primary)}
.auth-legal{font-size:.76rem;color:var(--txt-3);line-height:1.5;margin:-.2rem 0 .6rem}
.auth-legal a{color:var(--primary);text-decoration:underline}

.f-group{margin-bottom:.6rem}
.f-label{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;color:var(--txt-2);margin-bottom:.3rem}

.f-input,.f-select{
  width:100%;padding:.5rem .7rem;
  border:1px solid var(--border);border-radius:10px;
  background:var(--bg-1);color:var(--txt);font-size:.85rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  outline:none;
}
.f-input:hover,.f-select:hover{border-color:var(--c-200)}
.f-input:focus,.f-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--bg-1), 0 0 0 4px rgba(47,125,84,.15);
}
.f-input::placeholder{color:var(--txt-3);opacity:.65}
.f-input:disabled,.f-select:disabled{background:var(--bg-2);color:var(--txt-3);cursor:not-allowed;border-color:var(--border-2)}

.f-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23708A7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:15px;
  padding-right:1.8rem;cursor:pointer;
}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.f-row.pdc-fields{grid-template-columns:1fr 90px 110px;align-items:center}
.f-hint{font-size:.72rem;color:var(--txt-3);margin-top:.2rem;display:flex;align-items:center;gap:.25rem}

.f-err{
  display:flex;align-items:center;gap:.4rem;
  color:#991b1b;font-size:.75rem;
  background:rgba(178,58,46,.08);
  border:1px solid rgba(178,58,46,.18);border-radius:9px;
  overflow:hidden;
  max-height:0;margin-top:0;padding:0 .6rem;opacity:0;
  transition:max-height .18s ease,opacity .15s ease,margin-top .18s ease,padding .18s ease;
}
.f-err.show{max-height:80px;margin-top:.3rem;padding:.4rem .6rem;opacity:1}

.f-check{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.82rem;color:var(--txt-2)}
.f-check input[type="checkbox"],.f-check input[type="radio"]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}

.btn-auth{
  width:100%;padding:.62rem 1.2rem;
  background:linear-gradient(135deg,var(--c-400),var(--c-500));
  color:#fff;font-weight:600;font-size:.88rem;border-radius:11px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 2px 10px rgba(47,125,84,.25);
  border:none;cursor:pointer;margin-top:.25rem;letter-spacing:-.005em;
  position:relative;overflow:hidden;
}
.btn-auth:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(47,125,84,.32)}
.btn-auth:active{transform:translateY(0);box-shadow:0 2px 8px rgba(47,125,84,.25)}
.btn-auth:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-sm{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.38rem .7rem;background:var(--bg-1);color:var(--txt-2);
  font-size:.78rem;font-weight:500;border-radius:9px;
  border:1px solid var(--border-2);transition:var(--tr);cursor:pointer;
}
.btn-sm:hover{background:var(--c-50);border-color:var(--primary);color:var(--primary-dark)}
.btn-sm:active{transform:scale(.97)}
.btn-sm i{flex-shrink:0}
.btn-sm.danger{color:#991b1b;border-color:rgba(178,58,46,.25)}
.btn-sm.danger:hover{background:rgba(178,58,46,.07);border-color:#dc2626;color:#dc2626}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.38rem .6rem;background:transparent;color:var(--txt-2);
  font-size:.78rem;font-weight:500;border-radius:9px;border:none;
  transition:var(--tr);cursor:pointer;
}
.btn-ghost:hover{background:var(--bg-2);color:var(--primary)}

.btn-p{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;background:var(--bg-3);color:var(--primary);font-size:.82rem;font-weight:600;border-radius:var(--r-sm);border:1.5px solid var(--c-200);transition:var(--tr);cursor:pointer}
.btn-p:hover{background:var(--bg-4);border-color:var(--primary)}

.btn-ai{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;background:linear-gradient(135deg,var(--c-400),var(--c-500));color:#fff;font-size:.85rem;font-weight:600;border-radius:var(--r-sm);transition:var(--tr);box-shadow:0 2px 8px rgba(47,125,84,.2);border:none;cursor:pointer;position:relative;overflow:hidden}
.btn-ai:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(47,125,84,.3)}

.btn-edit{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:transparent;color:var(--txt-3);transition:var(--tr);cursor:pointer;border:none}
.btn-edit:hover{background:var(--bg-3);color:var(--primary)}

.btn-del{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:transparent;color:var(--rose);transition:var(--tr);cursor:pointer;border:none}
.btn-del:hover{background:var(--rose-dim)}

.btn-cl{padding:.5rem 1rem;background:var(--bg-2);color:var(--txt-2);font-size:.85rem;font-weight:500;border-radius:var(--r-sm);border:1.5px solid var(--border);transition:var(--tr);cursor:pointer}
.btn-sec{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;background:var(--bg-1);color:var(--txt-2);font-size:.8rem;font-weight:500;border-radius:var(--r-sm);border:1.5px solid var(--border-2);transition:var(--tr);cursor:pointer}
.btn-sec:hover{background:var(--bg-2);border-color:var(--primary);color:var(--primary-dark)}
.btn-sec:disabled{opacity:.5;cursor:not-allowed}
.btn-cl:hover{background:var(--bg-3)}

.btn-ok{padding:.5rem 1rem;background:linear-gradient(135deg,var(--c-400),var(--c-500));color:#fff;font-size:.85rem;font-weight:600;border-radius:var(--r-sm);transition:var(--tr);box-shadow:0 2px 6px rgba(47,125,84,.2);border:none;cursor:pointer;position:relative;overflow:hidden}
.btn-ok:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(47,125,84,.3)}

#app button:disabled,
#app button[disabled],
#app select:disabled,
#app select[disabled]{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:auto;
  transform:none !important;
  box-shadow:none !important;
  filter:saturate(.6);
}
#app button:disabled:hover,
#app button[disabled]:hover,
#app select:disabled:hover,
#app select[disabled]:hover{
  background:inherit;
  color:inherit;
  border-color:inherit;
  transform:none;
  box-shadow:none;
}
#app .btn-sm:disabled:hover,#app .btn-sm[disabled]:hover{background:var(--bg-1);border-color:var(--border-2);color:var(--txt-2)}
#app .btn-p:disabled:hover,#app .btn-p[disabled]:hover{background:var(--bg-3);border-color:var(--c-200);color:var(--primary)}
#app .btn-edit:disabled:hover,#app .btn-edit[disabled]:hover{background:transparent;color:var(--txt-3)}
#app .btn-del:disabled:hover,#app .btn-del[disabled]:hover{background:transparent;color:var(--rose)}
#app .btn-ai:disabled:hover,#app .btn-ai[disabled]:hover{background:linear-gradient(135deg,var(--c-400),var(--c-500))}
#app .btn-ok:disabled:hover,#app .btn-ok[disabled]:hover{background:linear-gradient(135deg,var(--c-400),var(--c-500))}
#app .ie-sel:disabled:hover,#app .ie-sel[disabled]:hover{background:var(--bg-1);border-color:var(--border)}

.ico-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:var(--bg-2);color:var(--txt-2);border:1px solid var(--border-2);transition:var(--tr);cursor:pointer;position:relative;z-index:53;pointer-events:auto;touch-action:manipulation}
.ico-btn:hover{background:var(--bg-3);color:var(--primary)}

#app{display:flex;min-height:100vh;min-height:100dvh}

.sidebar{width:240px;background:linear-gradient(180deg,var(--c-600),#053d26);color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh;height:100dvh;height:-webkit-fill-available;z-index:50;transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;overscroll-behavior-x:none;padding-bottom:calc(.25rem + var(--sab));padding-left:var(--sal);will-change:transform;transform:translateX(0);touch-action:pan-y pinch-zoom;box-shadow:4px 0 24px rgba(0,0,0,.15), inset -1px 0 0 rgba(255,255,255,.06)}
.sidebar::-webkit-scrollbar{width:2px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}

.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px) saturate(0.9);-webkit-backdrop-filter:blur(4px) saturate(0.9);z-index:45;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.sidebar-backdrop.active{opacity:1;visibility:visible;pointer-events:auto}

.sb-top{padding:.4rem .75rem .25rem;flex:1;position:relative;z-index:51;pointer-events:auto}
.brand{display:flex;align-items:center;gap:.5rem;padding:.3rem .2rem;margin-bottom:.5rem;cursor:pointer;transition:var(--tr);border-radius:var(--r-sm)}
.brand:hover{background:rgba(255,255,255,.06)}
.brand-ico{width:26px;height:26px;flex-shrink:0}
.brand-name{font-size:.95rem;font-weight:700;color:#fff}
.brand-tag{font-size:.62rem;color:var(--c-200);display:block;margin-top:0}

.nav-group{--grp-c:var(--c-300);margin-bottom:.1rem}

.nav-sec{display:flex;align-items:center;justify-content:space-between;gap:.35rem;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--grp-c);opacity:.95;padding:.3rem .75rem .1rem;cursor:pointer;user-select:none;border-radius:var(--r-sm);transition:var(--tr)}
.nav-sec::before{content:'';width:3px;height:1rem;border-radius:2px;background:var(--grp-c);flex-shrink:0;margin-right:.5rem;box-shadow:0 0 6px 0 color-mix(in srgb, var(--grp-c) 70%, transparent)}
.nav-sec span{flex:1;min-width:0}
.nav-sec:hover{opacity:1;background:color-mix(in srgb, var(--grp-c) 12%, transparent)}
.nav-sec:focus-visible{outline:2px solid var(--grp-c);outline-offset:1px}
.nav-sec-chev{flex-shrink:0;opacity:.7;color:var(--grp-c);transition:transform .22s ease}
.nav-group.collapsed .nav-sec-chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav-sec{opacity:.55}
.nav-group>nav{border-left:2px solid color-mix(in srgb, var(--grp-c) 30%, transparent);margin-left:.75rem;padding-left:.25rem}

nav{padding:0 .4rem .25rem;overflow:hidden;transition:max-height .25s ease}
.ni{display:flex;align-items:center;gap:.4rem;padding:.28rem .65rem;border-radius:var(--r-sm);color:var(--c-100);font-size:.78rem;cursor:pointer;transition:var(--tr);margin-bottom:.04rem;position:relative;border-left:2px solid transparent;overflow:hidden}
.ni::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--c-300);border-radius:0 3px 3px 0;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ni:hover::before,.ni.active::before{transform:translateY(-50%) scaleY(1)}
.ni:hover{background:rgba(255,255,255,.08);color:#fff}
.ni.active{background:linear-gradient(90deg,color-mix(in srgb, var(--grp-c,var(--c-300)) 18%, transparent),color-mix(in srgb, var(--grp-c,var(--c-300)) 5%, transparent));color:#fff;font-weight:600;border-left-color:var(--grp-c)}
/* FIX (retour explicite avec capture d'écran — 3 icônes de la sidebar
   plus grandes que les autres : Structure & Accès, Fournisseurs,
   Données ESG) : cette règle ciblait uniquement la balise <i> — or
   Lucide REMPLACE entièrement <i data-lucide="X"> par un <svg> une
   fois converti (el.replaceWith(svg), voir renderIconsScoped/
   _iconBuild dans app_min.js). Une fois converti, le sélecteur ".ni i"
   ne correspond donc plus à RIEN : ni la taille, ni flex-shrink, ni
   l'opacité ne s'appliquaient au SVG final, pour AUCUNE icône de la
   sidebar. Que ça n'ait affecté visiblement que 3 icônes tient au
   contenu réel de leurs données Lucide (viewBox/attributs par défaut
   propres à chaque icône) — les 16px ci-dessous s'appliquent
   maintenant explicitement au SVG rendu, sans dépendre de la
   traduction de data-size par le convertisseur JS.
   width/height directement dans cette règle de base (pas seulement en
   media query mobile, où elle était jusqu'ici) : l'icône doit être
   correctement dimensionnée aussi sur desktop. */
.ni i,.ni svg{flex-shrink:0;opacity:.8;width:16px;height:16px}
/* AJOUT (retour explicite — carte "Où j'en suis" du tableau de bord,
   chevauchements + aspect peu professionnel) : voir readiness-
   dashboard.js pour le détail du bug d'icône (même cause que le
   correctif sidebar ci-dessus) — .readiness-ico contraint explicitement
   la taille du SVG produit, plutôt que de compter sur un attribut
   size="N" sans effet réel une fois l'icône convertie. */
.readiness-ico{width:12px;height:12px;flex-shrink:0}
.readiness-section{margin-bottom:.7rem}
.readiness-section--deadlines{padding-top:.6rem;border-top:1px solid var(--border)}
.readiness-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-3)}
.readiness-pct{font-weight:700;letter-spacing:0;text-transform:none}
.readiness-track{height:5px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-bottom:.55rem}
.readiness-track-fill{height:100%;border-radius:999px;transition:width .4s ease}
.readiness-items{display:flex;flex-wrap:wrap;gap:.35rem}
.readiness-item{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:999px;font-size:.76rem;font-weight:500;line-height:1;white-space:nowrap;transition:var(--tr,.15s ease);border:1px solid transparent}
.readiness-item--em{background:var(--em-dim);color:var(--em)}
.readiness-item--muted{background:var(--bg-2);color:var(--txt-3)}
.readiness-item[data-readiness-nav]{cursor:pointer}
.readiness-item[data-readiness-nav]:hover{border-color:currentColor;filter:brightness(.95)}
.readiness-deadlines{display:flex;flex-direction:column;gap:.3rem}
.readiness-deadline{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--txt-2)}
.readiness-deadline strong{margin-left:auto;font-weight:600;white-space:nowrap;padding-left:.6rem}
.readiness-deadline--rose strong{color:var(--rose)}
.readiness-deadline--amber strong{color:var(--amber)}
.readiness-deadline--muted strong{color:var(--txt-2)}
.readiness-deadline .readiness-ico{color:var(--txt-3)}
.readiness-disclaimer{font-size:.68rem;color:var(--txt-3);margin-top:.55rem}
.readiness-disclaimer summary{cursor:pointer;list-style:none}
.readiness-disclaimer summary::-webkit-details-marker{display:none}
.readiness-disclaimer summary::after{content:" ▸"}
.readiness-disclaimer[open] summary::after{content:" ▾"}
.readiness-disclaimer p{margin:.35rem 0 0;line-height:1.45}
.readiness-item[data-readiness-nav]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* AJOUT (retour explicite — "donner un peu plus de style au sidebar") :
   l'icône active suit désormais la couleur d'accent du groupe (comme le
   fond et la bordure gauche le font déjà) au lieu de rester grise à
   simple opacité réduite — cohérent avec .ni.active ci-dessous, sans
   toucher à la structure ni au comportement existants. */
.ni.active i,.ni.active svg{opacity:1;color:var(--grp-c,var(--c-300))}
.ni:hover i,.ni:hover svg{opacity:1}
.ni-cnt{margin-left:auto;font-size:.65rem;background:rgba(255,255,255,.1);padding:.08rem .3rem;border-radius:8px;color:#fff;font-weight:600;flex-shrink:0;align-self:center;line-height:1}
.ni-badge{font-size:.6rem;padding:.08rem .3rem;border-radius:4px;font-weight:700;margin-left:.3rem;flex-shrink:0;align-self:center;line-height:1}
.ni-badge.ai{background:linear-gradient(135deg,var(--c-300),var(--c-400));color:#fff}
.ni-badge.iso{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}

.sb-foot{padding:.35rem .75rem .25rem;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:51;pointer-events:auto}

.user-tile{display:flex;align-items:center;gap:.45rem;padding:.3rem .4rem;border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);margin-bottom:.2rem;position:relative;z-index:52;pointer-events:auto;touch-action:manipulation}
.user-tile:hover{background:rgba(255,255,255,.08)}
.user-tile:active{background:rgba(255,255,255,.12)}
.user-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--c-400),var(--c-300));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.user-nm{font-size:.78rem;font-weight:600;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-rl{font-size:.68rem;color:var(--c-200);opacity:.8;display:block}

.logout-btn{width:100%;padding:.35rem;display:flex;align-items:center;justify-content:center;gap:.35rem;background:rgba(255,255,255,.06);color:var(--c-100);font-size:.72rem;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.1);transition:var(--tr);cursor:pointer;position:relative;z-index:52;pointer-events:auto;touch-action:manipulation;min-height:32px}
.logout-btn:hover{background:rgba(178,58,46,.15);color:#ff9e9e;border-color:rgba(178,58,46,.3)}
.logout-btn:active{background:rgba(178,58,46,.25);transform:scale(.98)}

.sb-privacy-link{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;padding:.3rem .2rem;font-size:.7rem;color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s}
.sb-privacy-link:hover{color:rgba(255,255,255,.85)}

.cw{flex:1;margin-left:240px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

.topbar{
  position:sticky;
  top:12px;
  margin:0 1.25rem;
  width:calc(100% - 2.5rem);
  height:56px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 3px rgba(21,24,26,.04), 0 8px 24px rgba(21,24,26,.06);
  z-index:40;
  padding:0 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
}

.hmbg{
  display:none;width:36px;height:36px;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:transparent;color:var(--txt-2);
  cursor:pointer;border:none;transition:var(--tr);
}
.hmbg:hover{background:var(--bg-2);color:var(--primary)}

.tb-ttl h1{font-size:1.05rem;font-weight:700;color:var(--txt);letter-spacing:-.01em;line-height:1.4;min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{font-size:.78rem;color:var(--txt-3)}.tb-ttl{min-width:0;flex:1;max-width:100%;overflow:hidden}

.tb-acts{display:flex;align-items:center;gap:.55rem;min-height:40px;flex-wrap:wrap}

.yr-pill{min-width:110px;
  display:flex;align-items:center;gap:.35rem;
  padding:.3rem .55rem .3rem .65rem;
  background:var(--bg-2);
  border:1px solid var(--border-2);
  border-radius:20px;
  transition:var(--tr);
}
.yr-pill:hover{border-color:var(--primary);background:var(--c-50)}
.yr-pill i[data-lucide="calendar-range"]{color:var(--primary);flex-shrink:0}

.yr-pill-sel{
  appearance:none;
  background:transparent;
  border:none;
  outline:none;
  color:var(--txt);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  padding:.1rem .3rem .1rem 0;
  max-width:90px;
}
.yr-pill-sel option{background:var(--bg-1);color:var(--txt)}

.yr-pill-add{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--bg-1);
  border:1px solid var(--border-2);
  color:var(--primary);
  cursor:pointer;
  transition:var(--tr);
  flex-shrink:0;
}
.yr-pill-add:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.06)}

.q-pill{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:var(--bg-2);border-radius:20px;border:1px solid var(--border-2);font-size:.78rem;color:var(--txt-2)}
.q-dot{width:8px;height:8px;border-radius:50%;background:var(--em);animation:pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite;box-shadow:0 0 0 0 rgba(47,125,84,.4)}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(47,125,84,.4)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(47,125,84,0)}}

.act-btn-ai{min-width:120px;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;
  background:linear-gradient(135deg,var(--c-400),var(--c-500));
  color:#fff;font-size:.82rem;font-weight:600;
  border-radius:var(--r-sm);
  transition:var(--tr);
  box-shadow:0 2px 8px rgba(47,125,84,.22);
  border:none;cursor:pointer;
  position:relative;overflow:hidden;
}
.act-btn-ai:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(47,125,84,.32)}
.act-btn-ai i{flex-shrink:0}

.act-btn-p{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;
  background:var(--bg-1);color:var(--txt);
  font-size:.82rem;font-weight:500;
  border-radius:var(--r-sm);
  border:1.5px solid var(--border);
  transition:var(--tr);cursor:pointer;
}
.act-btn-p:hover{border-color:var(--primary);color:var(--primary);background:var(--c-50)}

.exp-wrap{position:relative}
.exp-dd{
  position:absolute;right:0;top:calc(100% + 6px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:.4rem;min-width:220px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:var(--tr);z-index:60;
}
.exp-dd.open{opacity:1;visibility:visible;transform:translateY(0)}
.exp-dd button{
  width:100%;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .7rem;border-radius:var(--r-sm);
  font-size:.82rem;color:var(--txt);background:transparent;
  transition:var(--tr);cursor:pointer;border:none;text-align:left;
}
.exp-dd button:hover{background:var(--bg-3);color:var(--primary)}
.exp-dd hr{border:none;border-top:1px solid var(--border-2);margin:.3rem 0}

.main{flex:1;padding:1.25rem 1.5rem 2rem;overflow-y:auto;padding-top:1rem} /* >= .topbar's sticky top offset (12px) pour éviter le chevauchement */

.sec{display:none;content-visibility:auto;contain-intrinsic-size:0 600px;animation:fadeIn .3s ease}
.sec.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  padding:1.25rem;
  margin-bottom:1rem;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;
  box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);
  animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both;
}
.card:hover{
  box-shadow:0 1px 2px rgba(21,24,26,.04), 0 8px 32px rgba(21,24,26,.10), inset 0 1px 0 rgba(255,255,255,.8);
}

.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.ct{font-size:.92rem;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.cm{font-size:.78rem;color:var(--txt-3);font-weight:500}
.chw{position:relative;min-height:220px}
.chw.sm{min-height:200px;max-height:320px}

.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:1rem}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1rem;contain:layout style}

#kpi-grid{grid-template-columns:repeat(5,1fr)}
#kpi-grid .kpi{min-height:64px;padding:.65rem .75rem}
#kpi-grid .kpi-ic{width:22px;height:22px;border-radius:7px;margin-bottom:.3rem}
#kpi-grid .kpi-ic svg{width:12px;height:12px}
#kpi-grid .kpi-l{font-size:.66rem;margin-bottom:.15rem}
#kpi-grid .kpi-v{font-size:1.1rem}
#kpi-grid .kpi-u{font-size:.62rem}
#kpi-grid .kpi-t{font-size:.6rem;margin-top:.15rem}

.kpi{min-height:90px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  padding:1rem 1.1rem;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;
  box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);
  animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both;
}
.kpi::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--kc,var(--primary)) 6%, transparent), transparent 60%);
  pointer-events:none;
}
.kpi:hover{
  border-color:color-mix(in srgb, var(--kc,var(--primary)) 45%, var(--border-2));
  box-shadow:0 8px 22px rgba(15,40,30,.07);
  transform:translateY(-2px);
}

.kpi-ic{
  width:30px;height:30px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--kc,var(--primary)) 14%, transparent);
  color:var(--kc,var(--primary));
  margin-bottom:.55rem;
  position:relative;z-index:1;
}

.kpi-l{font-size:.76rem;color:var(--txt-3);margin-bottom:.25rem;font-weight:500;position:relative;z-index:1}
.kpi-v{font-family:var(--fm);font-size:1.55rem;font-weight:700;color:var(--txt);line-height:1.15;position:relative;z-index:1;text-shadow:0 0 20px color-mix(in srgb, var(--kc,var(--primary)) 20%, transparent);transition:text-shadow .3s ease}
.kpi:hover .kpi-v{text-shadow:0 0 30px color-mix(in srgb, var(--kc,var(--primary)) 35%, transparent)}
.kpi-u{font-size:.72rem;color:var(--txt-3);margin-left:.2rem;font-weight:500}
.kpi-t{font-size:.7rem;color:var(--kc,var(--txt-3));margin-top:.3rem;font-weight:600;position:relative;z-index:1}

@keyframes cardEnter{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.card:nth-child(1),.kpi:nth-child(1){animation-delay:.03s}
.card:nth-child(2),.kpi:nth-child(2){animation-delay:.06s}
.card:nth-child(3),.kpi:nth-child(3){animation-delay:.09s}
.card:nth-child(4),.kpi:nth-child(4){animation-delay:.12s}
.card:nth-child(5),.kpi:nth-child(5){animation-delay:.15s}
.card:nth-child(6),.kpi:nth-child(6){animation-delay:.18s}

.iso-list{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0;min-height:60px}
.iso-empty{padding:2rem 1rem;text-align:center;color:var(--txt-3);font-size:.85rem}

.project-card-v2{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);padding:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.project-card-v2::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c-400),var(--c-300));opacity:.7;transition:opacity .3s ease}
.project-card-v2:hover{box-shadow:var(--shadow-lg);border-color:var(--c-200);transform:translateY(-4px)}
.project-card-v2:hover::before{opacity:1}
.project-card-v2 .project-header-v2{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1rem 1.2rem .6rem;flex-wrap:wrap}
.project-card-v2 .project-name-v2{font-weight:700;font-size:1rem;color:var(--txt);line-height:1.3;flex:1;min-width:0;word-break:break-word}
.project-card-v2 .project-type-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:20px;font-size:.72rem;font-weight:700;flex-shrink:0;white-space:nowrap}
.project-card-v2 .project-type-badge.reduction{background:linear-gradient(135deg,rgba(47,125,84,.12),rgba(93,158,118,.08));color:var(--c-500);border:1px solid rgba(47,125,84,.25)}
.project-card-v2 .project-type-badge.removal{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(56,189,248,.08));color:#0ea5e9;border:1px solid rgba(14,165,233,.25)}
.project-card-v2 .project-metrics-v2{display:flex;flex-wrap:wrap;gap:.5rem;padding:.6rem 1.2rem;background:var(--bg-2);margin:0 .8rem;border-radius:var(--r-sm)}
.project-card-v2 .project-metric-v2{display:flex;align-items:baseline;gap:.3rem;font-size:.8rem;color:var(--txt-2)}
.project-card-v2 .project-metric-v2 strong{font-weight:600;color:var(--txt)}
.project-card-v2 .project-metric-v2 .metric-value{font-family:var(--fm);font-weight:700;color:var(--primary)}
.project-card-v2 .project-metric-v2 .metric-arrow{color:var(--txt-3);font-size:.75rem}
.project-card-v2 .project-meta-v2{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;font-size:.75rem;color:var(--txt-3);padding:.6rem 1.2rem .4rem;border-top:1px solid var(--border-2);margin-top:.3rem}
.project-card-v2 .project-meta-item{display:flex;align-items:center;gap:.35rem}
.project-card-v2 .project-meta-item i{width:14px;height:14px;opacity:.6}
.project-card-v2 .project-additionality-v2{font-size:.72rem;color:var(--amber);background:rgba(194,121,58,.06);padding:.35rem .7rem;border-radius:var(--r-sm);margin:.3rem 1.2rem;display:flex;align-items:flex-start;gap:.4rem;line-height:1.4}
.project-card-v2 .project-additionality-v2 i{width:14px;height:14px;flex-shrink:0;margin-top:.1rem}
.project-card-v2 .project-additionality-v2 .add-text{flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.project-progress-bar{width:100%;height:6px;background:var(--bg-5);border-radius:3px;overflow:hidden;margin:.3rem 1.2rem .5rem;max-width:calc(100% - 2.4rem)}
.project-progress-fill{height:100%;border-radius:3px;transition:width .6s ease;background:linear-gradient(90deg,var(--c-400),var(--c-300));box-shadow:0 0 8px color-mix(in srgb, var(--primary) 30%, transparent)}
.project-progress-fill.reduction{background:linear-gradient(90deg,var(--c-400),var(--c-300))}
.project-progress-fill.removal{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.reduction-indicator{display:flex;align-items:center;gap:.5rem;padding:.4rem 1.2rem;font-size:.8rem}
.reduction-indicator .ri-label{color:var(--txt-3);font-size:.72rem}
.reduction-indicator .ri-value{font-family:var(--fm);font-weight:700;color:var(--em)}
.reduction-indicator .ri-pct{font-family:var(--fm);font-weight:600;font-size:.78rem;padding:.15rem .4rem;border-radius:4px;background:rgba(47,125,84,.1);color:var(--c-500)}
.reduction-indicator .ri-pct.negative{background:rgba(178,58,46,.1);color:var(--rose)}

.product-card-v2{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);padding:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.product-card-v2::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c-300),var(--c-400));opacity:.7;transition:opacity .3s ease}
.product-card-v2:hover{box-shadow:var(--shadow-lg);border-color:var(--c-200);transform:translateY(-4px)}
.product-card-v2:hover::before{opacity:1}
.product-card-v2 .product-header-v2{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1rem 1.2rem .5rem;flex-wrap:wrap}
.product-card-v2 .product-name-v2{font-weight:700;font-size:1rem;color:var(--txt);line-height:1.3;flex:1;min-width:0;word-break:break-word}
.product-card-v2 .product-fu-badge{font-family:var(--fm);font-size:.72rem;color:var(--primary);background:linear-gradient(135deg,var(--bg-3),var(--bg-4));padding:.25rem .6rem;border-radius:16px;border:1px solid var(--c-200);flex-shrink:0;white-space:nowrap}
.product-card-v2 .product-pcf-v2{padding:.3rem 1.2rem .6rem;display:flex;align-items:baseline;gap:.4rem}
.product-card-v2 .product-pcf-value{font-family:var(--fm);font-size:1.5rem;font-weight:700;color:var(--em);line-height:1}
.product-card-v2 .product-pcf-unit{font-size:.78rem;color:var(--txt-3);font-weight:500}
.product-card-v2 .product-details-v2{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.78rem;color:var(--txt-2);padding:.5rem 1.2rem;background:var(--bg-2);margin:0 .8rem;border-radius:var(--r-sm)}
.product-card-v2 .product-detail-v2{display:flex;align-items:center;gap:.3rem}
.product-card-v2 .product-detail-v2 strong{font-weight:600;color:var(--txt)}
.product-card-v2 .product-detail-v2 .detail-icon{width:14px;height:14px;opacity:.5;color:var(--primary)}
.product-card-v2 .product-uncertainty-v2{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--amber);padding:.4rem 1.2rem .2rem}
.product-card-v2 .product-uncertainty-v2 i{width:14px;height:14px}
.product-card-v2 .product-contrib-v2{font-size:.72rem;color:var(--txt-3);padding:.4rem 1.2rem;line-height:1.5;border-top:1px solid var(--border-2);margin-top:.3rem}
.product-card-v2 .product-contrib-v2 .contrib-label{font-weight:600;color:var(--txt-2);display:flex;align-items:center;gap:.3rem;margin-bottom:.2rem}
.product-card-v2 .product-contrib-v2 .contrib-label i{width:14px;height:14px;opacity:.6}
.product-card-v2 .product-contrib-v2 .contrib-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-style:italic}

.project-card-v2 .project-actions-v2,
.product-card-v2 .product-actions-v2 {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  padding: .7rem 1.2rem 1rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.project-card-v2 .project-actions-v2 .btn-sm,
.product-card-v2 .product-actions-v2 .btn-sm,
.project-card-v2 .project-actions-v2 .btn-del,
.product-card-v2 .product-actions-v2 .btn-del {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  background: var(--bg-2);
  color: var(--txt-2);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 500;
  transition: var(--tr);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  width: auto !important;
  height: auto !important;
}
.project-card-v2 .project-actions-v2 .btn-sm:hover,
.product-card-v2 .product-actions-v2 .btn-sm:hover {
  background: var(--bg-3);
  border-color: var(--c-200);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.project-card-v2 .project-actions-v2 .btn-del:hover,
.product-card-v2 .product-actions-v2 .btn-del:hover {
  background: rgba(178,58,46,.08) !important;
  border-color: var(--rose) !important;
  color: var(--rose);
}
.project-card-v2 .project-actions-v2 .btn-sm:active,
.product-card-v2 .product-actions-v2 .btn-sm:active,
.project-card-v2 .project-actions-v2 .btn-del:active,
.product-card-v2 .product-actions-v2 .btn-del:active {
  transform: translateY(0);
}

.iso-assurance-card{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);padding:1rem;transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7)}
.iso-assurance-card:hover{box-shadow:var(--shadow);border-color:var(--c-200)}
.iso-assurance-body{padding:.5rem 0;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.iso-assurance-body .value{font-family:var(--fm);font-size:1.4rem;font-weight:700;margin-bottom:.3rem}
.iso-assurance-body .audit-date{font-size:.75rem;color:var(--txt-3);margin-top:.2rem}
.iso-veri-form{display:flex;flex-direction:column;gap:1rem;padding:.5rem 0}
.iso-veri-form .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.iso-veri-form .f-group{margin-bottom:0}
.iso-spinner{width:24px;height:24px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}

.tw{overflow-x:auto}
.dt{width:100%;border-collapse:collapse;font-size:.85rem}
.dt th{text-align:left;padding:.6rem .7rem;font-weight:600;color:var(--txt-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--bg-2)}
.dt td{padding:.55rem .7rem;border-bottom:1px solid var(--border-2);vertical-align:middle;color:var(--txt)}
.dt tr{transition:background .15s ease}
.dt tr:hover td{background:var(--bg-3)}
.dt .num{font-family:var(--fm);font-weight:600;text-align:right}
/* AJOUT (retour explicite — "toutes les fenêtres et les modaux ne sont
   pas adaptés au mode écrans smartphones") : grille "Exposition aux
   énergies fossiles" (events.js / company-switcher.js), jusqu'ici en
   grid-template-columns fixe (90px 130px 1fr) écrit en style inline —
   ne pouvait pas être ciblée par une media query. Convertie en classe,
   règle mobile juste en dessous (voir @media max-width:768px).*/
.fossil-exposure-grid{display:grid;grid-template-columns:90px 130px 1fr;gap:.4rem .5rem;align-items:center}

.pbar-row{display:flex;align-items:center;gap:.5rem}
.pbar{flex:1;height:6px;background:var(--bg-5);border-radius:3px;overflow:hidden;min-width:40px}
.pbar-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .5s ease;box-shadow:0 0 8px color-mix(in srgb, var(--primary) 30%, transparent)}

.pill{display:inline-flex;align-items:center;padding:.25rem .6rem;background:var(--bg-2);border:1.5px solid var(--border-2);border-radius:20px;font-size:.75rem;color:var(--txt-2);cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;font-weight:500}
.pill:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(21,24,26,.08);border-color:var(--c-200)}
.pill.active{background:var(--bg-3);border-color:var(--primary);color:var(--primary);font-weight:600}
.pill-row{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;margin-bottom:.5rem}

.cat-grp{margin-bottom:1rem}
.cat-hd{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;background:linear-gradient(90deg,var(--bg-3),transparent);border-radius:var(--r-sm);margin-bottom:.5rem;border-left:3px solid var(--primary)}
.cat-hd span:first-child{font-weight:600;color:var(--txt);font-size:.88rem}
.cat-tot{font-family:var(--fm);font-size:.85rem;font-weight:700;color:var(--primary)}
.itl{font-weight:600;color:var(--txt);font-size:.85rem}
.est-dot{display:inline-flex;align-items:center;padding:.2rem .5rem;border-radius:10px;font-size:.7rem;font-weight:600}
.est-dot.y{background:rgba(47,125,84,.12);color:var(--c-500)}
.est-dot.n{background:rgba(138,160,168,.1);color:var(--txt-3)}
.bio-row{opacity:.7}
.bio-tag{display:inline-block;padding:.15rem .4rem;background:var(--c-100);color:var(--c-500);border-radius:4px;font-size:.68rem;font-weight:600;margin-left:.4rem}

.ac-list{display:flex;flex-direction:column;gap:.6rem}
.ac-card{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.ac-card:hover{box-shadow:var(--shadow-sm);border-color:var(--c-200);transform:translateY(-1px)}
.ac-card.done{opacity:.6;background:var(--bg-2)}
.ac-scope-tag{display:inline-flex;align-items:center;padding:.25rem .5rem;background:var(--bg-3);color:var(--primary);border-radius:4px;font-size:.72rem;font-weight:700;flex-shrink:0}
.ac-title{font-weight:600;color:var(--txt);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-meta{font-size:.75rem;color:var(--txt-3);margin-top:.15rem}
.ac-pot{font-family:var(--fm);font-size:.85rem;font-weight:700;color:var(--em);flex-shrink:0;white-space:nowrap}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sdot.planned{background:var(--txt-3)}
.sdot.in_progress{background:var(--amber)}
.sdot.completed{background:var(--em)}
.ie-sel{padding:.25rem .4rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg-1);font-size:.78rem;color:var(--txt);outline:none;cursor:pointer}

.removals-list{display:flex;flex-direction:column;gap:.6rem}
.removal-card{padding:.8rem 1rem;background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.removal-card:hover{box-shadow:var(--shadow-sm);border-color:var(--c-200);transform:translateY(-1px)}

.ai-hero{display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem;background:linear-gradient(135deg,var(--bg-3),rgba(47,125,84,.06));border:1.5px solid var(--c-200);border-radius:var(--r-md);margin-bottom:1.25rem}
.ai-hero-ico{width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,var(--c-50),var(--bg-3));border:1.5px solid var(--border);border-radius:14px;color:var(--primary)}
.ai-hero h2{font-size:1.1rem;font-weight:700;color:var(--txt);margin-bottom:.4rem}
.ai-hero p{color:var(--txt-2);font-size:.88rem;line-height:1.5;max-width:600px}
.ai-actions-row{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.ai-card .ch{margin-bottom:.75rem}

.anomaly-item{display:flex;gap:.75rem;padding:.8rem 1rem;background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);margin-bottom:.5rem;transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.anomaly-item:hover{border-color:var(--c-200);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.anomaly-item.high{border-left:3px solid var(--rose)}
.anomaly-item.medium{border-left:3px solid var(--amber)}
.anomaly-item.low{border-left:3px solid var(--txt-3)}
.anomaly-sev{font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;flex-shrink:0;height:fit-content}
.anomaly-sev.high{background:var(--rose-dim);color:var(--rose)}
.anomaly-sev.medium{background:rgba(194,121,58,.1);color:var(--amber)}
.anomaly-sev.low{background:rgba(138,160,168,.1);color:var(--txt-3)}
.anomaly-msg{font-size:.85rem;color:var(--txt);line-height:1.4}
.anomaly-sug{font-size:.78rem;color:var(--txt-2);margin-top:.3rem;padding:.4rem .6rem;background:var(--bg-3);border-radius:var(--r-sm);border-left:2px solid var(--primary)}

.rec-card{display:flex;gap:.85rem;padding:.9rem 1rem;background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);margin-bottom:.5rem;transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.rec-card:hover{box-shadow:var(--shadow-sm);border-color:var(--c-200);transform:translateY(-1px)}
.rec-title{font-weight:600;color:var(--txt);font-size:.88rem;margin-bottom:.25rem}
.rec-detail{font-size:.8rem;color:var(--txt-2);line-height:1.4}
.rec-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.rec-meta-tag{font-size:.72rem;padding:.2rem .45rem;background:var(--bg-2);border-radius:4px;color:var(--txt-3);border:1px solid var(--border-2)}

.est-preview{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);margin-bottom:.4rem;transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.est-preview:hover{border-color:var(--c-200);transform:translateY(-1px)}
.est-confidence{font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;flex-shrink:0}
.est-confidence.high{background:rgba(47,125,84,.12);color:var(--c-500)}
.est-confidence.medium{background:rgba(194,121,58,.1);color:var(--amber)}
.est-confidence.low{background:rgba(138,160,168,.1);color:var(--txt-3)}

.csrd-section{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);margin-bottom:.6rem;overflow:hidden;box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.csrd-sec-hd{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:var(--bg-2);border-bottom:1.5px solid var(--border-2);font-weight:600;font-size:.88rem;color:var(--txt)}
.csrd-content{padding:.9rem 1rem;font-size:.85rem;color:var(--txt-2);line-height:1.6}
.csrd-compliance{font-size:.72rem;padding:.25rem .5rem;border-radius:4px;font-weight:600;flex-shrink:0}
.csrd-compliance.conforme{background:rgba(47,125,84,.12);color:var(--c-500)}
.csrd-compliance.partiel{background:rgba(194,121,58,.1);color:var(--amber)}
.csrd-compliance.\u00e0_compl\u00e9ter{background:rgba(138,160,168,.1);color:var(--txt-3)}

.ck-list{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}
.ck-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;background:var(--bg-2);border-radius:var(--r-sm);transition:var(--tr)}
.ck-item:hover{background:var(--bg-3)}
.ck-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.ck-ico.ok{background:rgba(47,125,84,.15);color:var(--c-500)}
.ck-ico.nok{background:rgba(138,160,168,.1);color:var(--txt-3)}
.effort-dot{display:inline-block;line-height:1}
.effort-dot.low{color:var(--em)}
.effort-dot.med{color:var(--amber)}
.effort-dot.high{color:var(--rose)}
.prog-ring-row{display:flex;align-items:center;gap:1.25rem;padding:1rem 0}

.synth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}
.synth-stat{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);padding:.9rem;text-align:center;transition:var(--tr);box-shadow:0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);animation:cardEnter .45s cubic-bezier(.34,1.56,.64,1) both}
.synth-stat:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.synth-v{font-family:var(--fm);font-size:1.4rem;font-weight:700;color:var(--primary);line-height:1.2}
.synth-l{font-size:.75rem;color:var(--txt-3);margin-top:.25rem}

.ap-srch{width:100%;padding:.55rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--bg-1);color:var(--txt);font-size:.88rem;outline:none;transition:var(--tr);margin-bottom:.5rem}
.ap-srch:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,125,84,.12)}
.ap-list{max-height:320px;overflow-y:auto}
.ap-item{display:flex;align-items:center;justify-content:space-between;padding:.55rem .7rem;border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);border:1.5px solid transparent}
.ap-item:hover{background:var(--bg-3);border-color:var(--c-200)}
.ap-item div:first-child{flex:1;min-width:0}
.ap-cat{font-size:.72rem;color:var(--txt-3);margin-top:.15rem}
.ap-val{font-family:var(--fm);font-size:.8rem;font-weight:600;color:var(--primary);flex-shrink:0;margin-left:.5rem}

.tm-section{padding:.5rem 0}
.tm-section.hidden{display:none}

.ai-loading{display:flex;align-items:center;gap:.75rem;padding:2rem;color:var(--txt-3);font-size:.9rem;justify-content:center}
.ai-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.em-st{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;color:var(--txt-3);text-align:center}
.em-st i{opacity:.4;margin-bottom:.75rem}
.em-st p{font-size:.88rem}

.tw-wrap{position:fixed;bottom:1.25rem;right:1.25rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:1.5px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:.85rem;color:var(--txt);transform:translateX(120%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;max-width:320px}
.toast.in{transform:translateX(0)}
.toast.s{border-left:3px solid var(--em)}
.toast.e{border-left:3px solid var(--rose)}
.toast.w{border-left:3px solid var(--amber)}
.toast.i{border-left:3px solid var(--sky)}

#page-alert{padding:0 1.5rem;margin-top:.6rem}
#page-alert:empty{display:none;margin:0}
#modal-alert{padding:1rem 1.5rem 0}
#modal-alert:empty{display:none;padding:0}
.alert-banner{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem 1rem;border-radius:var(--r-md);font-size:.85rem;line-height:1.45;color:var(--txt);animation:ab-in .22s ease}
.alert-banner .ab-ico{flex-shrink:0;margin-top:.06rem}
.alert-banner .ab-txt{flex:1;word-break:break-word}
.alert-banner .ab-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:inherit;opacity:.55;padding:.2rem;border-radius:5px;transition:opacity .15s,background .15s}
.alert-banner .ab-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.alert-banner.e{background:var(--rose-dim,rgba(178,58,46,.1));border:1.5px solid var(--rose)}
.alert-banner.e .ab-ico{color:var(--rose)}
.alert-banner.w{background:rgba(194,121,58,.1);border:1.5px solid var(--amber)}
.alert-banner.w .ab-ico{color:var(--amber)}
.alert-banner.s{background:rgba(47,125,84,.1);border:1.5px solid var(--em)}
.alert-banner.s .ab-ico{color:var(--em)}
.alert-banner.i{background:rgba(93,158,118,.1);border:1.5px solid var(--sky)}
.alert-banner.i .ab-ico{color:var(--sky)}
@keyframes ab-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.mov{position:fixed;inset:0;z-index:150;background:rgba(21,24,26,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;align-items:safe center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overscroll-behavior:contain;overflow-y:auto;padding:1rem;padding-top:calc(max(6vh,1rem) + var(--sat));padding-bottom:calc(1rem + var(--sab));padding-left:calc(1rem + var(--sal));padding-right:calc(1rem + var(--sar))}
.mov.open{opacity:1;visibility:visible}
.mbox{background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(21,24,26,.03), 0 20px 60px rgba(21,24,26,.12), inset 0 1px 0 rgba(255,255,255,.8);width:92%;max-width:560px;max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;transform:scale(.95);transition:transform .25s cubic-bezier(.34,1.56,.64,1),max-height .2s ease,max-width .2s ease}
.mov.open .mbox{transform:scale(1);animation:modalEnter .3s cubic-bezier(.34,1.56,.64,1) both}
.mbox.wide{max-width:720px}
.mbox.xl{max-width:min(1100px,96vw)}
.mbox.fluid{max-width:min(1400px,96vw);width:96%}
.mhd{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1.5px solid var(--border-2)}
.mttl{font-size:1rem;font-weight:700;color:var(--txt)}
.mcls{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:transparent;color:var(--txt-3);transition:var(--tr);cursor:pointer;border:none}
.mcls:hover{background:var(--bg-3);color:var(--rose)}
.mbd{padding:1.25rem;overflow-y:auto;flex:1}
.m-acts{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;padding-bottom:calc(1rem + var(--sab));border-top:1.5px solid var(--border-2);margin-top:auto}
.m-acts .btn-cl,.m-acts .btn-ok{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;min-height:38px}
.mbox.kb-open{max-height:70vh;max-height:70dvh}
.mbox.kb-open .m-acts{padding-bottom:.6rem}

@keyframes modalEnter{
  from{opacity:0;transform:scale(.92) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.iso-page-hd{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:1.5px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.iso-page-hd-left{display:flex;align-items:flex-start;gap:1rem;flex:1;min-width:0}
.iso-page-badge{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .8rem;background:linear-gradient(135deg,var(--c-400),var(--c-500));color:#fff;font-size:.72rem;font-weight:700;border-radius:var(--r-sm);letter-spacing:.03em;text-transform:uppercase;flex-shrink:0;white-space:nowrap;box-shadow:0 2px 6px rgba(47,125,84,.2)}
/* FIX (signalé — "Nomenclatures et Empreinte produits ne suivent pas le
   CSS pro de l'app") : --teal utilisait un dégradé bleu codé en dur
   (#0ea5e9/#38bdf8), sans aucun lien avec la palette réelle de l'app
   (tout en vert — voir déjà le même type de correctif appliqué aux
   couleurs des exports PDF dans une session précédente). Remplacé par
   var(--sky) (= var(--c-300), le vert clair déjà utilisé ailleurs dans
   l'app comme accent "secondaire"/info), pour rester distinct du badge
   par défaut tout en restant dans la charte réelle. --violet référence
   maintenant explicitement var(--violet) au lieu de sa valeur hexadécimale
   recopiée à la main (même couleur affichée, mais qui suit désormais le
   token si celui-ci change un jour). */
.iso-page-badge--teal{background:linear-gradient(135deg,var(--sky),var(--c-200));box-shadow:0 2px 6px rgba(102,186,136,.25)}
.iso-page-badge--violet{background:linear-gradient(135deg,var(--violet),#a78bfa);box-shadow:0 2px 6px rgba(124,58,237,.2)}
.iso-page-title{font-size:1.25rem;font-weight:700;color:var(--txt);margin-bottom:.25rem;line-height:1.3}
.iso-page-sub{font-size:.82rem;color:var(--txt-3);line-height:1.5;max-width:600px}
.iso-req-compact{display:flex;flex-wrap:wrap;gap:.5rem}
.iso-req-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:600;color:var(--txt-2);background:var(--bg-2);border:1px solid var(--border-2);border-radius:20px;padding:.3rem .7rem;cursor:help;white-space:nowrap;transition:var(--tr)}
.iso-req-pill i{opacity:.6;color:var(--primary);flex-shrink:0}
.iso-req-pill:hover{border-color:var(--primary);color:var(--primary-dark);background:var(--bg-3)}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-2)}
.toolbar-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.toolbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.filter-group{display:flex;align-items:center;gap:.35rem;background:var(--bg-2);padding:.2rem .5rem;border-radius:var(--r-sm);border:1px solid var(--border-2)}
.filter-group .pill{margin:0;background:transparent;border:none;padding:.25rem .6rem}
.filter-group .pill.active{background:var(--bg-3);color:var(--primary);border-radius:var(--r-sm)}
.search-input{width:240px;padding:.4rem .7rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg-1);font-size:.8rem;transition:var(--tr)}
.search-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(47,125,84,.1)}
.ademe-dt,.transport-dt{width:100%;font-size:.85rem;border-collapse:collapse}
.ademe-dt th,.transport-dt th{text-align:left;padding:.7rem .8rem;background:var(--bg-2);font-weight:600;color:var(--txt-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--border)}
.ademe-dt td,.transport-dt td{padding:.6rem .8rem;border-bottom:1px solid var(--border-2);vertical-align:middle;color:var(--txt)}
.ademe-dt tr,.transport-dt tr{transition:background .15s ease}
.ademe-dt tr:hover td,.transport-dt tr:hover td{background:var(--bg-3)}
.ademe-dt .ademe-fe,.transport-dt .transport-fe{font-family:var(--fm);font-weight:600;color:var(--primary);text-align:right}
.pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border-2)}
.pagination button{min-width:80px}
.pagination span{font-size:.8rem;color:var(--txt-3)}

.user-table{width:100%;border-collapse:collapse}
.user-table th{text-align:left;padding:.7rem .8rem;background:var(--bg-2);font-weight:600;color:var(--txt-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--border)}
.user-table td{padding:.6rem .8rem;border-bottom:1px solid var(--border-2);vertical-align:middle;color:var(--txt)}
.user-table tr{transition:background .15s ease}
.user-table tr:hover td{background:var(--bg-3)}
.user-role-badge{display:inline-block;padding:.2rem .6rem;border-radius:40px;font-size:.7rem;font-weight:700;background:var(--bg-3);color:var(--primary);border:1px solid var(--c-200)}
.user-role-badge.admin{background:rgba(178,58,46,.12);color:var(--rose);border-color:rgba(178,58,46,.3)}
.user-role-badge.editor{background:rgba(194,121,58,.12);color:var(--amber);border-color:rgba(194,121,58,.3)}
.user-role-badge.viewer{background:rgba(47,125,84,.12);color:var(--primary);border-color:rgba(47,125,84,.2)}
.user-actions{display:flex;gap:.4rem}
.empty-message{text-align:center;padding:2rem;color:var(--txt-3);background:var(--bg-2);border-radius:var(--r-md);margin:1rem 0}

.cookie-banner{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:140;max-width:720px;margin:0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:1.5px solid var(--border-2);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.15);opacity:0;transform:translateY(16px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.cookie-banner.hidden{display:none}
.cookie-banner.in{opacity:1;transform:translateY(0);pointer-events:auto}
.cookie-banner-inner{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem}
.cookie-banner-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c-50),var(--c-100));color:var(--primary)}
.cookie-banner-text{flex:1;font-size:.72rem;line-height:1.4;color:var(--txt-2)}
.cookie-banner-text strong{color:var(--txt);display:block;margin-bottom:.08rem;font-size:.75rem}
.cookie-banner-text a{color:var(--primary);font-weight:600;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}
.cookie-banner-text a:hover{text-decoration-color:var(--primary)}
.cookie-banner-actions{flex-shrink:0}
.cookie-btn-group{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-cookie-accept{display:inline-flex;align-items:center;padding:.3rem .5rem;background:linear-gradient(135deg,var(--c-400),var(--c-500));color:#fff;font-size:.7rem;font-weight:600;border:none;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:var(--tr);box-shadow:0 1px 3px rgba(47,125,84,.2);font-family:inherit}
.btn-cookie-accept:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(47,125,84,.35)}
.btn-cookie-accept:active{transform:translateY(0)}
.btn-cookie-reject{display:inline-flex;align-items:center;padding:.3rem .5rem;background:var(--bg-2);color:var(--txt-2);font-size:.7rem;font-weight:600;border:1.5px solid var(--border-2);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:var(--tr);font-family:inherit}
.btn-cookie-reject:hover{background:var(--rose-dim);border-color:var(--rose);color:var(--rose);transform:translateY(-1px)}
.btn-cookie-reject:active{transform:translateY(0)}
.btn-cookie-consult{display:inline-flex;align-items:center;padding:.3rem .5rem;background:var(--bg-1);color:var(--sky);font-size:.7rem;font-weight:600;border:1.5px solid var(--border-2);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:var(--tr);font-family:inherit}
.btn-cookie-consult:hover{background:var(--bg-3);border-color:var(--sky);color:var(--primary-dark);transform:translateY(-1px)}
.btn-cookie-consult:active{transform:translateY(0)}

.projects-grid,.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;padding:.25rem 0;min-height:60px}

.f-textarea{width:100%;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-1);color:var(--txt);font-size:.85rem;transition:border-color .15s ease, box-shadow .15s ease;outline:none;resize:vertical;min-height:64px;font-family:inherit;line-height:1.5}
.f-textarea:hover{border-color:var(--c-200)}
.f-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,125,84,.13)}
.f-textarea::placeholder{color:var(--txt-3);opacity:.65}

.nav-admin-only{display:none}
.nav-admin-only.visible{display:flex}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--c-300) 50%, transparent);border-radius:10px;border:1px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--c-400) 70%, transparent)}

::selection{background:rgba(47,125,84,.18);color:var(--c-600);text-shadow:none}

/* ══════════════════════════════════════════════════════════════
   Carboneum v5.3 — style-ai.css (Fusionné dans style.css)
   Styles spécifiques au module IA — Rampe Vert Carbone
   ══════════════════════════════════════════════════════════════ */

.ai-result-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: .8rem .9rem;
  margin-bottom: .5rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);
  animation: cardEnter .45s cubic-bezier(.34,1.56,.64,1) both;
}

.ai-result-card:hover {
  border-color: var(--c-200);
  box-shadow: 0 4px 14px rgba(15,40,30,.06);
  transform: translateY(-1px);
}

.ai-result-card-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .4rem;
}

.ai-result-card-header .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px currentColor;
  opacity: .9;
}

.ai-result-card-header .dot.success { background: var(--c-400); color: rgba(47,125,84,.15); }
.ai-result-card-header .dot.warning { background: var(--amber); color: rgba(194,121,58,.15); }
.ai-result-card-header .dot.error { background: var(--rose); color: rgba(178,58,46,.15); }
.ai-result-card-header .dot.info { background: var(--sky); color: rgba(44,122,135,.15); }

.ai-result-card-title {
  font-weight: 600;
  font-size: .82rem;
  color: var(--txt);
}

.ai-result-card-body {
  font-size: .79rem;
  color: var(--txt-2);
  line-height: 1.5;
}

.ai-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: .8rem 0;
}

.ai-metric {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: .7rem;
  text-align: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;
  box-shadow: 0 1px 2px rgba(15,40,30,.03), 0 4px 20px rgba(21,24,26,.05), inset 0 1px 0 rgba(255,255,255,.7);
  animation: cardEnter .45s cubic-bezier(.34,1.56,.64,1) both;
}

.ai-metric:hover {
  border-color: var(--c-200);
  box-shadow: 0 4px 14px rgba(15,40,30,.06);
  transform: translateY(-1px);
}

.ai-metric-value {
  font-family: var(--fm);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.ai-metric-label {
  font-size: .68rem;
  color: var(--txt-3);
  margin-top: .2rem;
  font-weight: 500;
}

.ai-metric-delta {
  font-size: .66rem;
  font-weight: 600;
  margin-top: .12rem;
}

.ai-metric-delta.pos { color: var(--c-500); }
.ai-metric-delta.neg { color: var(--rose); }

.ai-progress-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ai-progress-ring svg {
  transform: rotate(-90deg);
}

.ai-progress-ring-bg {
  fill: none;
  stroke: var(--bg-5);
  stroke-width: 8;
}

.ai-progress-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s ease;
}

.ai-progress-ring-text {
  font-family: var(--fm);
  font-size: 18px;
  font-weight: 700;
  fill: var(--primary);
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .5rem;
  background: linear-gradient(135deg, var(--c-400), var(--c-500));
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(47,125,84,.25);
}

.ai-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--primary);
  animation: ai-blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes ai-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ai-tooltip {
  position: relative;
  display: inline-block;
}

.ai-tooltip .ai-tooltip-text {
  visibility: hidden;
  background: var(--c-600);
  color: #fff;
  font-size: .68rem;
  padding: .32rem .6rem;
  border-radius: var(--r-sm);
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
  box-shadow: var(--shadow);
}

.ai-tooltip:hover .ai-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.ai-divider {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0;
  color: var(--txt-3);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ai-divider::before,
.ai-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ai-section-hd {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  background: linear-gradient(135deg, var(--c-50), var(--bg-3));
  border-radius: 10px;
  margin-bottom: .6rem;
  border-left: 3px solid var(--primary);
}

.ai-section-hd i {
  color: var(--primary);
  flex-shrink: 0;
}

.ai-section-hd span {
  font-weight: 600;
  font-size: .81rem;
  color: var(--txt);
}

.ai-code-block {
  background: var(--c-600);
  color: var(--c-100);
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  font-family: var(--fm);
  font-size: .74rem;
  line-height: 1.45;
  overflow-x: auto;
  margin: .4rem 0;
}

.ai-code-block .comment { color: var(--c-200); opacity: .7; }
.ai-code-block .keyword { color: var(--c-300); }
.ai-code-block .string { color: #86EFBB; }
.ai-code-block .number { color: var(--c-100); }

.ai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .74rem;
  margin: .4rem 0;
}

.ai-table th {
  text-align: left;
  padding: .4rem .55rem;
  font-weight: 600;
  color: var(--txt-2);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--border);
  background: var(--bg-2);
}

.ai-table td {
  padding: .35rem .55rem;
  border-bottom: 1px solid var(--border-2);
  color: var(--txt);
}

.ai-table tr:hover td {
  background: var(--bg-3);
}

.ai-alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  margin: .45rem 0;
  font-size: .79rem;
  line-height: 1.5;
}

.ai-alert.info {
  background: rgba(14, 165, 233, .07);
  border: 1px solid rgba(14, 165, 233, .18);
  color: #0369a1;
}

.ai-alert.success {
  background: rgba(29, 185, 122, .07);
  border: 1px solid rgba(29, 185, 122, .18);
  color: var(--c-500);
}

.ai-alert.warning {
  background: rgba(217, 119, 6, .07);
  border: 1px solid rgba(217, 119, 6, .18);
  color: #92400e;
}

.ai-alert.error {
  background: rgba(220, 38, 38, .07);
  border: 1px solid rgba(220, 38, 38, .18);
  color: #991b1b;
}

.ai-alert i {
  flex-shrink: 0;
  margin-top: .12rem;
}

.ai-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: ai-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}

@keyframes ai-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ai-gradient-border {
  position: relative;
  background: var(--bg-1);
  border-radius: var(--r-sm);
  padding: 1px;
}

.ai-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-sm) + 1.5px);
  background: linear-gradient(135deg, var(--c-300), var(--c-400), var(--c-500));
  z-index: -1;
  opacity: .6;
  animation: ai-gradient-rotate 3s linear infinite;
  background-size: 200% 200%;
}

@keyframes ai-gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ai-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
}

.ai-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .3;
  animation: ai-pulse-ring 2s ease-out infinite;
}

@keyframes ai-pulse-ring {
  0% { transform: scale(1); opacity: .3; }
  100% { transform: scale(2.5); opacity: 0; }
}

.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .64rem;
  font-weight: 600;
}

.ai-tag.primary {
  background: rgba(29, 185, 122, .12);
  color: var(--c-500);
}

.ai-tag.secondary {
  background: rgba(14, 165, 233, .1);
  color: #0369a1;
}

.ai-tag.tertiary {
  background: var(--bg-2);
  color: var(--txt-3);
}

.ai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .65rem;
  background: var(--bg-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  border-top: 1.5px solid var(--border-2);
  font-size: .68rem;
  color: var(--txt-3);
}

.ai-quick-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .4rem 0;
}

.ai-quick-action {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .35rem .65rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .75rem;
  color: var(--txt-2);
  cursor: pointer;
  transition: var(--tr);
  font-weight: 500;
}

.ai-quick-action:hover {
  background: var(--c-50);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.ai-quick-action i {
  font-size: .78rem;
  color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .synth-grid{grid-template-columns:repeat(2,1fr)}
  #kpi-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1024px) and (min-width:769px){
  .tb-acts .bl{display:none}
  .act-btn-ai,.act-btn-p{padding:.45rem .6rem}
  .yr-pill-sel{max-width:70px}
  .q-pill:not(#sync-pill){display:none}
  .tb-ttl h1{font-size:.95rem;max-width:180px}
}

@media (max-width:768px){
  .sidebar{transform:translateX(-105%);width:260px;touch-action:pan-y pinch-zoom}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.25)}
  .sidebar.open .sb-foot,.sidebar.open .sb-top{pointer-events:auto}
  #auth-screen{padding:1rem;align-items:center;justify-content:center;overflow-y:auto}
  .cw{margin-left:0}
  .hmbg{display:inline-flex;width:44px;height:44px;-webkit-tap-highlight-color:rgba(47,125,84,.2)}
  .hmbg:active{background:var(--bg-3);transform:scale(.95)}
  .g4,.g2,.synth-grid{grid-template-columns:1fr}
  #kpi-grid{grid-template-columns:repeat(2,1fr)}
  .auth-wrap{grid-template-columns:1fr;width:92%;max-width:480px;margin:1rem auto;border-radius:var(--r-lg);overflow:visible;box-shadow:var(--shadow-lg)}
  .auth-hero{display:none!important}
  .auth-footer-legal{display:none!important}
  .auth-panel{width:100%;padding:1.5rem 1.25rem;max-height:none;overflow-y:visible}
  .auth-sector-grid{grid-template-columns:repeat(2,1fr)}
  .auth-sc{font-size:.7rem;padding:.3rem .1rem}
  .auth-sc span{font-size:.9rem}
  .topbar{top:8px;margin:0 .5rem;width:calc(100% - 1rem);height:52px;border-radius:var(--r-md);padding:0 .75rem}
  .tb-ttl h1{font-size:.9rem;max-width:140px}
  .tb-sub{display:none}
  .tb-acts{width:100%;justify-content:flex-end;padding:.3rem 0;gap:.4rem}
  .yr-pill{padding:.2rem .35rem .2rem .4rem;min-width:auto}
  .yr-pill-sel{max-width:50px;font-size:.7rem;padding-right:.2rem}
  .yr-pill-add{width:18px;height:18px}
  .q-pill:not(#sync-pill){display:none}
  .q-pill span,.act-btn-ai .bl,.act-btn-p .bl{display:none}
  .q-pill{padding:.3rem .5rem}
  #sync-pill[data-state="error"] #sync-txt,#sync-pill[data-state="readonly"] #sync-txt{display:inline;font-size:.7rem}
  .act-btn-ai,.act-btn-p{padding:.45rem .6rem}
  .bl{display:none}
  .main{padding:1rem}
  .ai-hero{flex-direction:column;gap:.75rem}
  body.sidebar-open{overflow:hidden;position:fixed;width:100%;touch-action:none}
  .cw.sidebar-open{filter:blur(1px);transition:filter .3s ease}
  .sidebar .sb-top{padding:.3rem .6rem .15rem}
  .sidebar .brand{padding:.25rem .2rem;min-height:36px}
  .sidebar .brand-ico{width:24px;height:24px}
  .sidebar .brand-name{font-size:.9rem}
  .sidebar .brand-tag{font-size:.6rem}
  .sidebar .nav-sec{padding:.2rem .6rem .1rem;font-size:.58rem;letter-spacing:.1em}
  .sidebar nav{padding:0 .3rem .15rem}
  .sidebar .ni{padding:.35rem .65rem;font-size:.8rem;min-height:36px;margin-bottom:.02rem;gap:.35rem}
  .sidebar .ni i,.sidebar .ni svg{width:16px;height:16px}
  .sidebar .ni-cnt{font-size:.65rem;padding:.08rem .3rem;min-width:18px;text-align:center}
  .sidebar .ni-badge{font-size:.58rem;padding:.08rem .3rem}
  .sidebar .sb-foot{padding:.25rem .6rem .15rem}
  .sidebar .ico-btn{width:28px;height:28px}
  .sidebar .user-tile{padding:.3rem .4rem;min-height:34px}
  .sidebar .user-av{width:28px;height:28px;font-size:.8rem}
  .sidebar .user-nm{font-size:.76rem}
  .sidebar .user-rl{font-size:.68rem}
  .sidebar .logout-btn{padding:.35rem;font-size:.72rem;min-height:32px}
  .sidebar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.1));pointer-events:none;opacity:0;transition:opacity .3s}
  .sidebar.open::after{opacity:1}

  .project-header-v2,.product-header-v2{flex-direction:column;align-items:flex-start}
  .project-metrics-v2,.product-details-v2{flex-direction:column;gap:.4rem}
  .form-row{flex-direction:column;gap:.6rem}
  .fossil-exposure-grid{grid-template-columns:70px 1fr;row-gap:.15rem}
  .fossil-exposure-grid>select{grid-column:2}
  .fossil-exposure-grid>input{grid-column:1 / -1}
  .readiness-deadline{flex-wrap:wrap}
  .readiness-deadline strong{margin-left:1.55rem}
  .iso-req-compact{gap:.4rem}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar-left,.toolbar-right{justify-content:space-between;width:100%}
  .search-input{width:100%}
  .filter-group{flex-wrap:wrap}
  .ademe-dt,.transport-dt,.user-table{font-size:.75rem}
  .ademe-dt th,.transport-dt th,.user-table th{padding:.4rem .5rem}
  .ademe-dt td,.transport-dt td,.user-table td{padding:.4rem .5rem}
  .pagination button{min-width:60px;font-size:.7rem}
  .projects-grid,.products-grid{grid-template-columns:1fr;gap:.75rem}
  .project-card-v2 .project-actions-v2,
  .product-card-v2 .product-actions-v2{
    justify-content:stretch;
    padding:.6rem 1rem .8rem;
    flex-direction:column;
  }
  .project-card-v2 .project-actions-v2 .btn-sm,
  .project-card-v2 .project-actions-v2 .btn-del,
  .product-card-v2 .product-actions-v2 .btn-sm,
  .product-card-v2 .product-actions-v2 .btn-del{
    flex:1;
    justify-content:center;
    padding:.5rem .6rem;
    font-size:.85rem;
  }
  .iso-page-hd{flex-direction:column;padding:1rem;gap:.75rem}
  .iso-page-hd-left{flex-direction:column;gap:.5rem}
  .iso-page-badge{align-self:flex-start}
  .iso-page-title{font-size:1.1rem}
  .iso-veri-form .f-row{grid-template-columns:1fr;gap:.75rem}
  .iso-assurance-card{padding:.75rem}

  .ai-metrics{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  #auth-screen{padding:1rem;align-items:center;justify-content:center;overflow-y:auto}
  .auth-wrap{width:92%;max-width:480px;max-height:none;border-radius:var(--r-lg);margin:1rem auto;overflow:visible;box-shadow:var(--shadow-lg)}
  .auth-hero{display:none!important;height:0;overflow:hidden;padding:0!important}
  .auth-panel{width:100%;padding:1rem 1.25rem;max-height:none;overflow-y:visible}
  .auth-form-title{font-size:.95rem}
  .auth-sector-grid{grid-template-columns:repeat(2,1fr)}
  .auth-sc{font-size:.7rem;padding:.3rem .1rem}
  .auth-sc span{font-size:.9rem}
  .auth-tabs .auth-tab{font-size:.8rem;padding:.4rem .7rem}
  .btn-auth{font-size:.85rem;padding:.5rem 1rem}
  .f-input,.f-select,.f-textarea{font-size:max(.8rem,16px);padding:.4rem .5rem}
  .f-label{font-size:.75rem}
  .auth-legal{font-size:.7rem}
  .auth-footer-legal{display:none!important}

  .mov{align-items:flex-start;padding-top:max(.75rem,var(--sat))}
  .mov .mbox{width:96%;max-height:90vh;max-height:90dvh;border-radius:var(--r-md);max-width:100%;margin-top:.5rem}
  .mov .mbox .mbd{padding:.8rem}
  .mov .mbox .mhd{padding:.7rem .9rem}
  .mov .mbox .m-acts{padding:.7rem .9rem;padding-bottom:calc(.7rem + var(--sab));flex-wrap:wrap;justify-content:stretch}
  .mov .mbox .m-acts>button{flex:1 1 calc(50% - .5rem)}
  .mov .mbox .m-acts>button:first-child{margin-right:0}
  .mov .mbox.wide{max-width:100%}
  .mov .mbox.xl{max-width:100%}
  .mov .mbox.fluid{max-width:100%}
  .mov .mbox .mhd .mttl{font-size:.9rem}
  .mov .mbox .mcls{width:36px;height:36px}

  .cookie-banner{left:.4rem;right:.4rem;bottom:calc(.4rem + var(--sab));border-radius:var(--r-sm)}
  .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:.3rem;padding:.3rem .45rem}
  .cookie-banner-icon{width:18px;height:18px;align-self:center}
  .cookie-banner-text{text-align:center;font-size:.68rem;line-height:1.3}
  .cookie-btn-group{justify-content:center;width:100%;gap:.2rem}
  .btn-cookie-accept,.btn-cookie-reject,.btn-cookie-consult{flex:1;justify-content:center;padding:.28rem .3rem;font-size:.68rem}
}

@media (max-width:400px){
  #auth-screen{padding:1rem;align-items:center;justify-content:center;overflow-y:auto}
  .auth-wrap{width:94%;max-width:480px;border-radius:var(--r-lg);margin:1rem auto;max-height:none;min-height:auto;overflow:visible;box-shadow:var(--shadow-lg)}
  .auth-hero{display:none!important;height:0;overflow:hidden;padding:0!important}
  .auth-panel{width:100%;padding:.75rem .5rem;max-height:none;overflow-y:visible}
  .auth-sector-grid{grid-template-columns:1fr 1fr;gap:.2rem}
  .auth-sc{font-size:.65rem;padding:.2rem .1rem}
  .auth-sc span{font-size:.8rem}
  .auth-footer-legal{display:none!important}
  .f-row{grid-template-columns:1fr;gap:.4rem}
  .f-row.pdc-fields{grid-template-columns:1fr 70px 90px;gap:.35rem}
  .mov .mbox{width:100%;max-height:95vh;max-height:95dvh;border-radius:0}
  .mov .mbox .mbd{padding:.6rem}
  .mov .mbox .mhd{padding:.5rem .7rem;padding-top:calc(.5rem + var(--sat))}
  .mov .mbox .m-acts{padding:.5rem .7rem;padding-bottom:calc(.5rem + var(--sab))}
}

@media (max-width:480px){
  .cookie-btn-group{flex-direction:column;gap:.4rem}
  .btn-cookie-accept,.btn-cookie-reject,.btn-cookie-consult{width:100%}
  .ai-metrics{grid-template-columns:1fr}
}

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.hmbg,.tb-acts,.act-btn-ai,.act-btn-p,.exp-wrap,.logout-btn,.ni-badge{display:none!important}
  .cw{margin-left:0}
  .card{break-inside:avoid;border:1px solid #ddd}
  body{background:#fff;color:#000}
}


/* ══════════════════════════════════════════════════════════════
   2. MODERN (ex style-modern.css)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Carboneum v6.0 — style-modern.css (CORRIGÉ taille)
   Overrides modernes SaaS : glassmorphism, layered shadows,
   micro-interactions, surfaces épurées. TAILLE COMPACTE.
   À inclure APRÈS style.css et style-ai.css.
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. TYPOGRAPHIE COMPACTE ──────────────────────────────── */
/* On garde la base originale 93.75% (~15px) pour ne pas tout décaler */
html {
  font-size: 93.75%;
}

body {
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titres légèrement rehaussés mais pas exagérés */
.tb-ttl h1 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ct {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cm {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--txt-3);
}

/* ─── 2. GLASSMORPHISM TOPBAR ──────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(29, 185, 122, 0.08);
  box-shadow: 0 1px 3px rgba(6, 92, 57, 0.04);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.topbar.scrolled {
  box-shadow: 0 4px 20px rgba(6, 92, 57, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

/* ─── 3. SIDEBAR MODERNISÉE ────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, 
    rgba(6, 92, 57, 0.98) 0%, 
    rgba(5, 61, 38, 0.98) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(29, 185, 122, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(61, 214, 140, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.brand {
  padding: 0.4rem 0.3rem;
  border-radius: var(--r-md);
  transition: all 0.2s ease;
}

.brand:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.brand-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Navigation items */
.ni {
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0.04rem;
}

.ni:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
}

.ni.active {
  background: linear-gradient(90deg, 
    rgba(29, 185, 122, 0.2) 0%, 
    rgba(29, 185, 122, 0.08) 100%);
  border-left: 3px solid var(--c-300);
  box-shadow: 0 2px 8px rgba(29, 185, 122, 0.15);
}

.ni-cnt {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  font-size: 0.65rem;
  padding: 0.08rem 0.3rem;
  border-radius: 8px;
  font-weight: 600;
}

/* ─── 4. CARDS REDESIGN (Layered Shadows + Hover Lift) ─────── */
.card {
  background: var(--bg-1);
  border: 1px solid rgba(29, 185, 122, 0.06);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 
    0 1px 2px rgba(6, 92, 57, 0.04),
    0 4px 12px rgba(6, 92, 57, 0.03);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(29, 185, 122, 0.15) 50%, 
    transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(6, 92, 57, 0.06),
    0 16px 40px rgba(6, 92, 57, 0.07);
  border-color: rgba(29, 185, 122, 0.1);
}

.card:hover::before {
  opacity: 1;
}

/* ─── 5. KPI CARDS MODERNISÉES ─────────────────────────────── */
.kpi {
  min-height: 90px;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  box-shadow: 
    0 1px 2px rgba(6, 92, 57, 0.04),
    0 4px 12px rgba(6, 92, 57, 0.03);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--kc, var(--primary)) 4%, transparent) 0%, 
    transparent 60%);
  pointer-events: none;
}

.kpi:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 
    0 6px 20px rgba(6, 92, 57, 0.07),
    0 2px 6px rgba(6, 92, 57, 0.03);
  border-color: color-mix(in srgb, var(--kc, var(--primary)) 25%, var(--border-2));
}

.kpi-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--kc, var(--primary)) 18%, transparent) 0%,
    color-mix(in srgb, var(--kc, var(--primary)) 8%, transparent) 100%);
  margin-bottom: 0.55rem;
}

.kpi-v {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kpi-l {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grid KPI */
#kpi-grid {
  gap: 0.9rem;
}

#kpi-grid .kpi {
  min-height: 64px;
  padding: 0.65rem 0.75rem;
}

#kpi-grid .kpi-ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

#kpi-grid .kpi-v {
  font-size: 1.15rem;
}

#kpi-grid .kpi-l {
  font-size: 0.66rem;
}

/* ─── 6. BOUTONS MODERNISÉS ────────────────────────────────── */
.btn-auth {
  background: linear-gradient(135deg, var(--c-400) 0%, var(--c-500) 100%);
  border-radius: 11px;
  padding: 0.62rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 8px rgba(29, 185, 122, 0.25), 
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-auth:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29, 185, 122, 0.32), 
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.btn-auth:active {
  transform: translateY(0) scale(0.98);
}

.btn-ai {
  background: linear-gradient(135deg, var(--c-400) 0%, var(--c-500) 100%);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(29, 185, 122, 0.22),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ai:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(29, 185, 122, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.btn-sm {
  border-radius: 9px;
  padding: 0.38rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1.5px solid var(--border-2);
  background: var(--bg-1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sm:hover {
  background: var(--c-50);
  border-color: var(--c-200);
  color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(29, 185, 122, 0.08);
}

.btn-sec {
  border-radius: 9px;
  padding: 0.4rem 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-sec:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(6, 92, 57, 0.06);
}

.btn-ok {
  border-radius: 11px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(29, 185, 122, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 185, 122, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* ─── 7. INPUTS MODERNISÉS ─────────────────────────────────── */
.f-input,
.f-select,
.f-textarea {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  background: var(--bg-1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(6, 92, 57, 0.03);
}

.f-input:hover,
.f-select:hover,
.f-textarea:hover {
  border-color: var(--c-200);
  box-shadow: 0 2px 4px rgba(29, 185, 122, 0.05);
}

.f-input:focus,
.f-select:focus,
.f-textarea:focus {
  border-color: var(--primary);
  box-shadow: 
    0 0 0 3px rgba(29, 185, 122, 0.1),
    0 2px 6px rgba(29, 185, 122, 0.06);
  outline: none;
}

/* ─── 8. PILLS & TAGS ──────────────────────────────────────── */
.pill {
  border-radius: 20px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1.5px solid var(--border-2);
  background: var(--bg-1);
  transition: all 0.2s ease;
}

.pill:hover {
  border-color: var(--c-200);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(6, 92, 57, 0.04);
}

.pill.active {
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(29, 185, 122, 0.1);
}

/* ─── 9. TABLES MODERNISÉES ────────────────────────────────── */
.dt {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-2);
}

.dt th {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--c-50) 100%);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.8rem;
  border-bottom: 2px solid var(--border);
}

.dt td {
  padding: 0.55rem 0.8rem;
  font-size: 0.84rem;
  transition: background 0.15s ease;
}

.dt tr:hover td {
  background: linear-gradient(90deg, var(--bg-3) 0%, transparent 100%);
}

/* ─── 10. MODALS MODERNISÉS ────────────────────────────────── */
.mov {
  background: rgba(6, 92, 57, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mbox {
  border-radius: 16px;
  box-shadow: 
    0 20px 56px rgba(6, 92, 57, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  border: 1px solid rgba(29, 185, 122, 0.1);
  overflow: hidden;
}

.mbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.6) 50%, 
    transparent 100%);
}

.mhd {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--border-2);
}

.mttl {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mbd {
  padding: 1.25rem;
}

.m-acts {
  padding: 0.9rem 1.25rem;
  background: linear-gradient(0deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--border-2);
}

/* ─── 11. PROJECT & PRODUCT CARDS ──────────────────────────── */
.project-card-v2,
.product-card-v2 {
  border-radius: 14px;
  border: 1px solid rgba(29, 185, 122, 0.08);
  box-shadow: 
    0 1px 2px rgba(6, 92, 57, 0.04),
    0 4px 12px rgba(6, 92, 57, 0.03);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card-v2:hover,
.product-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 6px 20px rgba(6, 92, 57, 0.07),
    0 2px 6px rgba(6, 92, 57, 0.03);
  border-color: rgba(29, 185, 122, 0.12);
}

.project-card-v2::before,
.product-card-v2::before {
  height: 3px;
  border-radius: 14px 14px 0 0;
}

/* ─── 12. TOASTS MODERNISÉS ────────────────────────────────── */
.toast {
  border-radius: 12px;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 
    0 6px 20px rgba(6, 92, 57, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(29, 185, 122, 0.1);
}

.toast.s {
  border-left: 3px solid var(--em);
  background: linear-gradient(90deg, rgba(29, 185, 122, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.toast.e {
  border-left: 3px solid var(--rose);
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.toast.w {
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* ─── 13. ALERT BANNERS ────────────────────────────────────── */
.alert-banner {
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.alert-banner.e {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.15);
}

.alert-banner.s {
  background: linear-gradient(135deg, rgba(29, 185, 122, 0.1) 0%, rgba(29, 185, 122, 0.04) 100%);
  border: 1.5px solid rgba(29, 185, 122, 0.18);
}

.alert-banner.w {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
  border: 1.5px solid rgba(217, 119, 6, 0.15);
}

/* ─── 14. AI SECTIONS AMÉLIORÉES ───────────────────────────── */
.ai-hero {
  border-radius: 14px;
  background: linear-gradient(135deg, 
    var(--bg-3) 0%, 
    rgba(29, 185, 122, 0.06) 50%,
    var(--bg-2) 100%);
  border: 1.5px solid rgba(29, 185, 122, 0.12);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(29, 185, 122, 0.05);
}

.ai-hero-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-50), var(--bg-3));
  border: 1.5px solid rgba(29, 185, 122, 0.15);
  box-shadow: 0 4px 10px rgba(29, 185, 122, 0.08);
}

.ai-hero h2 {
  font-size: 1.05rem;
}

.ai-hero p {
  font-size: 0.85rem;
}

.ai-result-card {
  border-radius: 12px;
  border: 1px solid rgba(29, 185, 122, 0.08);
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  transition: all 0.3s ease;
}

.ai-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(6, 92, 57, 0.05);
  border-color: rgba(29, 185, 122, 0.12);
}

/* ─── 15. ANIMATIONS D'ENTRÉE ──────────────────────────────── */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card,
.kpi,
.project-card-v2,
.product-card-v2,
.ai-result-card {
  animation: cardEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.g4 .card:nth-child(1) { animation-delay: 0.04s; }
.g4 .card:nth-child(2) { animation-delay: 0.08s; }
.g4 .card:nth-child(3) { animation-delay: 0.12s; }
.g4 .card:nth-child(4) { animation-delay: 0.16s; }

#kpi-grid .kpi:nth-child(1) { animation-delay: 0.02s; }
#kpi-grid .kpi:nth-child(2) { animation-delay: 0.04s; }
#kpi-grid .kpi:nth-child(3) { animation-delay: 0.06s; }
#kpi-grid .kpi:nth-child(4) { animation-delay: 0.08s; }
#kpi-grid .kpi:nth-child(5) { animation-delay: 0.1s; }

/* ─── 16. PROGRESS BARS ────────────────────────────────────── */
.pbar {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-5);
  overflow: hidden;
}

.pbar-fill {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-400), var(--c-300));
  box-shadow: 0 0 6px rgba(29, 185, 122, 0.25);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── 17. SCROLLBAR MODERNISÉE ─────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-200), var(--c-300));
  border-radius: 3px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-300), var(--c-400));
}

/* ─── 18. ISO PAGE HEADER ──────────────────────────────────── */
.iso-page-hd {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.1);
  box-shadow: 0 2px 10px rgba(6, 92, 57, 0.04);
  padding: 1.25rem;
}

.iso-page-badge {
  border-radius: 10px;
  padding: 0.35rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(29, 185, 122, 0.18);
}

.iso-page-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ─── 19. COOKIE BANNER ────────────────────────────────────── */
.cookie-banner {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(29, 185, 122, 0.1);
}

/* ─── 20. AUTH SCREEN ──────────────────────────────────────── */
.auth-wrap {
  border-radius: 20px;
  box-shadow: 
    0 20px 56px rgba(6, 92, 57, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
}

.auth-hero {
  background: linear-gradient(160deg, var(--c-600) 0%, var(--c-500) 40%, var(--c-400) 100%);
}

.auth-panel {
  background: var(--bg-1);
}

/* ─── 21. YEAR PILL ────────────────────────────────────────── */
.yr-pill {
  border-radius: 20px;
  background: linear-gradient(145deg, var(--bg-2), var(--c-50));
  border: 1.5px solid var(--border-2);
  padding: 0.3rem 0.55rem 0.3rem 0.65rem;
  transition: all 0.2s ease;
}

.yr-pill:hover {
  border-color: var(--c-200);
  box-shadow: 0 2px 6px rgba(29, 185, 122, 0.08);
}

.yr-pill-sel {
  font-weight: 600;
  font-size: 0.8rem;
}

/* ─── 22. QUALITY PILL ─────────────────────────────────────── */
.q-pill {
  border-radius: 20px;
  background: linear-gradient(145deg, var(--bg-2), var(--c-50));
  border: 1.5px solid var(--border-2);
  padding: 0.35rem 0.7rem;
}

.q-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px rgba(29, 185, 122, 0.15);
}

/* ─── 23. EXPORT DROPDOWN ──────────────────────────────────── */
.exp-dd {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(29, 185, 122, 0.1);
  box-shadow: 0 10px 32px rgba(6, 92, 57, 0.1);
  padding: 0.4rem;
}

.exp-dd button {
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.exp-dd button:hover {
  background: linear-gradient(90deg, var(--bg-3), var(--bg-4));
  transform: translateX(2px);
}

/* ─── 24. ANOMALIES & RECOMMENDATIONS ──────────────────────── */
.anomaly-item,
.rec-card {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  transition: all 0.3s ease;
}

.anomaly-item:hover,
.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(6, 92, 57, 0.05);
  border-color: rgba(29, 185, 122, 0.12);
}

.anomaly-sug {
  border-radius: 9px;
  background: linear-gradient(90deg, var(--bg-3), var(--bg-4));
}

/* ─── 25. CSRD SECTIONS ────────────────────────────────────── */
.csrd-section {
  border-radius: 12px;
  border: 1px solid rgba(29, 185, 122, 0.08);
  box-shadow: 0 2px 6px rgba(6, 92, 57, 0.03);
  transition: all 0.3s ease;
}

.csrd-section:hover {
  border-color: rgba(29, 185, 122, 0.12);
  box-shadow: 0 4px 12px rgba(6, 92, 57, 0.04);
}

.csrd-sec-hd {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--c-50) 100%);
  border-bottom: 1px solid var(--border-2);
  padding: 0.7rem 1rem;
}

/* ─── 26. CHECKLIST ────────────────────────────────────────── */
.ck-item {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.ck-item:hover {
  border-color: var(--border);
  transform: translateX(3px);
  box-shadow: 0 2px 6px rgba(6, 92, 57, 0.03);
}

.ck-ico.ok {
  background: linear-gradient(135deg, rgba(29, 185, 122, 0.2), rgba(29, 185, 122, 0.1));
}

/* ─── 27. SYNTHESIS STATS ──────────────────────────────────── */
.synth-stat {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  padding: 0.9rem;
  transition: all 0.3s ease;
}

.synth-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(6, 92, 57, 0.05);
  border-color: rgba(29, 185, 122, 0.12);
}

.synth-v {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.synth-l {
  font-size: 0.74rem;
}

/* ─── 28. ADEME PICKER ─────────────────────────────────────── */
.ap-srch {
  border-radius: 12px;
  border: 1.5px solid var(--border);
  padding: 0.55rem 0.9rem;
  font-size: 0.86rem;
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(6, 92, 57, 0.03);
  transition: all 0.2s ease;
}

.ap-srch:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 185, 122, 0.1), 0 2px 6px rgba(29, 185, 122, 0.06);
}

.ap-item {
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  transition: all 0.15s ease;
  border: 1.5px solid transparent;
}

.ap-item:hover {
  background: linear-gradient(90deg, var(--bg-3), var(--bg-4));
  transform: translateX(2px);
  border-color: var(--c-200);
}

/* ─── 29. ISO ASSURANCE CARD ───────────────────────────────── */
.iso-assurance-card {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  transition: all 0.3s ease;
}

.iso-assurance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(6, 92, 57, 0.05);
}

/* ─── 30. USER TABLE ───────────────────────────────────────── */
.user-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-2);
}

.user-table th {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--c-50) 100%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.8rem;
}

.user-table td {
  padding: 0.55rem 0.8rem;
  transition: background 0.15s ease;
}

.user-table tr:hover td {
  background: linear-gradient(90deg, var(--bg-3) 0%, transparent 100%);
}

.user-role-badge {
  border-radius: 16px;
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ─── 31. EMPTY STATES ─────────────────────────────────────── */
.em-st {
  padding: 2.5rem 1.25rem;
}

.em-st i {
  opacity: 0.3;
  transform: scale(1.1);
}

.em-st p {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--txt-3);
}

/* ─── 32. ACTION CARDS ─────────────────────────────────────── */
.ac-card {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  padding: 0.8rem 1rem;
  transition: all 0.3s ease;
}

.ac-card:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(6, 92, 57, 0.04);
  border-color: rgba(29, 185, 122, 0.12);
}

.ac-card.done {
  opacity: 0.65;
  background: var(--bg-2);
}

/* ─── 33. REMOVAL CARDS ────────────────────────────────────── */
.removal-card {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  transition: all 0.3s ease;
}

.removal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 92, 57, 0.04);
}

/* ─── 34. ESTIMATES ────────────────────────────────────────── */
.est-preview {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--c-50) 100%);
  border: 1px solid rgba(29, 185, 122, 0.08);
  transition: all 0.3s ease;
}

.est-preview:hover {
  transform: translateX(2px);
  border-color: rgba(29, 185, 122, 0.12);
}

/* ─── 35. SPLASH SCREEN ────────────────────────────────────── */
.sp-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bg-5), var(--border-2));
}

.sp-prog {
  background: linear-gradient(90deg, var(--c-400), var(--c-300), var(--c-400));
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 36. NAV GROUPS ───────────────────────────────────────── */
.nav-sec {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 0.3rem 0.75rem 0.1rem;
  border-radius: var(--r-sm);
  transition: all 0.2s ease;
}

.nav-sec:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── 37. USER TILE ────────────────────────────────────────── */
.user-tile {
  border-radius: var(--r-md);
  padding: 0.3rem 0.4rem;
  transition: all 0.2s ease;
}

.user-tile:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.user-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-400), var(--c-300));
  box-shadow: 0 2px 6px rgba(29, 185, 122, 0.25);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ─── 38. LOGOUT BUTTON ────────────────────────────────────── */
.logout-btn {
  border-radius: var(--r-md);
  padding: 0.35rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.08));
  transform: translateY(-1px);
}

/* ─── 39. TOOLBAR ──────────────────────────────────────────── */
.toolbar {
  background: linear-gradient(180deg, transparent 0%, var(--bg-2) 100%);
  border-bottom: 1px solid rgba(29, 185, 122, 0.08);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* ─── 40. RESPONSIVE AJUSTEMENTS ───────────────────────────── */
@media (max-width: 768px) {
  .card {
    border-radius: 12px;
    padding: 1rem;
  }

  .kpi {
    border-radius: 12px;
    padding: 0.85rem;
  }

  .topbar {
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }

  .sidebar {
    width: 260px;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
  }

  .sidebar.open {
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.22);
  }

  .mbox {
    border-radius: 14px;
  }

  .auth-wrap {
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .card {
    border-radius: 10px;
    padding: 0.9rem;
  }

  .kpi {
    border-radius: 10px;
    padding: 0.75rem;
  }

  .ai-hero {
    border-radius: 12px;
    padding: 1.1rem;
  }
}

@media (max-width: 400px) {
  .card {
    border-radius: 9px;
    padding: 0.8rem;
  }

  .kpi {
    border-radius: 9px;
    padding: 0.7rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. PRO (ex style-pro.css)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Carboneum v7.0 — style-pro.css
   Direction artistique : « Professionnel · Moderne · Humain »
   ──────────────────────────────────────────────────────────────
   Principes :
   • Humain     → fond chaud, ombres douces, coins généreux,
                  états au survol apaisés, focus visibles partout
   • Moderne    → hiérarchie nette, espacement régulier, mouvement
                  subtil, dégradés réservés aux actions primaires
   • Professionnel → couleur = sémantique uniquement, chiffres
                  tabulaires, tableaux lisibles, contraste AA
   À inclure APRÈS style.css et style-modern.css.
   ══════════════════════════════════════════════════════════════ */

/* ─── 0. TOKENS RAFFINÉS ───────────────────────────────────── */


html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  font-size: .95rem;
  letter-spacing: -0.003em;
}

::selection { background: rgba(63,160,106,.22); }

/* Focus visible : anneau doux partout — accessibilité AA */
:focus-visible {
  outline: 2px solid var(--c-400);
  outline-offset: 2px;
  border-radius: 4px;
}
.f-input:focus-visible, .f-select:focus-visible, .f-textarea:focus-visible,
.ap-srch:focus-visible, .search-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63,160,106,.18);
}

/* ─── 1. SIDEBAR — chaleureuse, calme ─────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #123626 0%, #0C2A1C 55%, #081F15 100%);
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: none;
  width: 232px;
}
.sidebar::before { display: none; } /* fini la texture */
.cw { margin-left: 232px; }

.brand { padding: .45rem .35rem; }
.brand-ico { width: 28px; height: 28px; }
.brand-name { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.brand-tag  { font-size: .62rem; color: var(--c-200); opacity: .85; }

.nav-sec {
  font-size: .6rem; font-weight: 700; letter-spacing: .09em;
  color: rgba(187,250,222,.55);
  padding: .45rem .75rem .15rem;
}
.nav-group > nav { border-left: none; margin-left: .35rem; padding-left: 0; }

.ni {
  padding: .34rem .65rem;
  font-size: .8rem; font-weight: 500;
  color: rgba(220,245,232,.78);
  border-radius: 10px;
  margin-bottom: .06rem;
  border-left: none !important;
}
.ni::before { display: none; } /* barre latérale remplacée par fond */
.ni i,.ni svg { opacity: .75; }
.ni:hover { background: rgba(255,255,255,.07); color: #fff; transform: none; }
.ni:hover i { opacity: 1; }

.ni.active {
  background: rgba(63,160,106,.18);
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(102,186,136,.22);
}
.ni.active i { opacity: 1; color: var(--c-300); }

.ni-cnt {
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  font-weight: 600;
}
.ni-badge { border-radius: 6px; }

.sb-foot { border-top: 1px solid rgba(255,255,255,.08); }
.user-tile { border-radius: 10px; }
.user-av {
  box-shadow: 0 0 0 2px rgba(102,186,136,.35);
  font-size: .72rem;
}
.logout-btn { border-radius: 10px; font-weight: 500; }
.logout-btn:hover { background: rgba(220,38,38,.14); }

/* ─── 2. TOPBAR — flottante, légère ───────────────────────── */
.topbar {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm);
  height: 54px;
}
.tb-ttl h1 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; }
.tb-sub { font-size: .78rem; }

.yr-pill, .q-pill {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
}
.act-btn-ai {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(240,128,60,.28), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 600;
}
.act-btn-ai:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(240,128,60,.32), inset 0 1px 0 rgba(255,255,255,.2); }
.act-btn-p {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.act-btn-p:hover { border-color: var(--c-200); background: var(--c-50); }

/* ─── 3. CARTES — surface calme, lift au survol ───────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow); transform: none; border-color: var(--border); }
.card::before { display: none; }

.ch { margin-bottom: .9rem; }
.ct { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.cm { font-size: .78rem; }

/* ─── 4. KPI — le chiffre est le héros ────────────────────── */
.kpi {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.kpi::before { display: none; }
.kpi::after { /* fine liseré coloré en haut, discret */
  content: '';
  position: absolute;
  top: 0; left: 1.1rem; right: 1.1rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--kc, var(--c-400));
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.kpi:hover::after { opacity: .8; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border); }

.kpi-ic {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kc, var(--primary)) 14%, transparent);
  color: var(--kc, var(--primary));
  margin-bottom: .6rem;
}
.kpi-l {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--txt-3);
}
.kpi-v {
  font-family: var(--fm);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
.kpi-t { font-size: .72rem; font-weight: 600; }

#kpi-grid { gap: .8rem; }
#kpi-grid .kpi { border-radius: var(--r-md); }
#kpi-grid .kpi:hover { transform: none; }

/* ─── 5. BOUTONS — primaire en dégradé, repos sinon ───────── */
.btn-auth, .btn-ok, .btn-ai {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(240,128,60,.25), inset 0 1px 0 rgba(255,255,255,.16);
  transition: var(--tr);
}
.btn-auth:hover, .btn-ok:hover, .btn-ai:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(240,128,60,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-auth:active, .btn-ok:active, .btn-ai:active { transform: translateY(0) scale(.985); }

.btn-sm, .btn-cl, .btn-sec {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.btn-sm:hover, .btn-cl:hover, .btn-sec:hover {
  background: var(--c-50);
  border-color: var(--c-200);
  color: var(--primary-dark);
  transform: translateY(-1px);
}
.btn-ghost { box-shadow: none; border-radius: 8px; }
.btn-edit, .btn-del { border-radius: 8px; }

/* ─── 6. INPUTS — doux, focus évident ─────────────────────── */
.f-input, .f-select, .f-textarea {
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: var(--bg-1);
  padding: .5rem .75rem;
  box-shadow: var(--shadow-sm);
  transition: var(--tr);
}
.f-input:hover, .f-select:hover, .f-textarea:hover { border-color: var(--c-200); }
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color: var(--c-400);
  box-shadow: 0 0 0 3px rgba(63,160,106,.16);
}
.f-input::placeholder, .f-textarea::placeholder { color: var(--txt-3); opacity: .6; }

.f-label { font-size: .78rem; font-weight: 600; color: var(--txt-2); }
.f-hint  { font-size: .72rem; }
.f-err   { border-radius: 10px; }

/* ─── 7. TABLEAUX — lisibles, calmes ──────────────────────── */
.dt, .ademe-dt, .transport-dt, .user-table {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dt th, .ademe-dt th, .transport-dt th, .user-table th {
  background: var(--bg-2);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--txt-2);
  border-bottom: 1px solid var(--border);
}
.dt td, .ademe-dt td, .transport-dt td, .user-table td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border-2);
}
.dt tbody tr:last-child td,
.ademe-dt tbody tr:last-child td,
.transport-dt tbody tr:last-child td,
.user-table tbody tr:last-child td { border-bottom: none; }
.dt tr:hover td, .ademe-dt tr:hover td, .transport-dt tr:hover td, .user-table tr:hover td {
  background: var(--bg-3);
}
.dt .num, .ademe-dt .num { font-variant-numeric: tabular-nums; }

/* ─── 8. PILLS & BADGES — pastilles douces ────────────────── */
.pill {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 500;
}
.pill:hover { border-color: var(--c-200); }
.pill.active {
  background: var(--bg-3);
  border-color: var(--c-400);
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(63,160,106,.12);
}

.user-role-badge, .ac-scope-tag, .ni-badge, .ai-tag { border-radius: 999px; }

/* ─── 9. BARRES DE PROGRESSION ────────────────────────────── */
.pbar, .project-progress-bar { background: var(--bg-2); border-radius: 999px; height: 6px; }
.pbar-fill, .project-progress-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-400), var(--c-300));
  box-shadow: none;
}

/* ─── 10. PROJETS & PRODUITS ──────────────────────────────── */
.project-card-v2, .product-card-v2 {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.project-card-v2::before, .product-card-v2::before { display: none; }
.project-card-v2:hover, .product-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}
.project-card-v2 .project-metrics-v2,
.product-card-v2 .product-details-v2 { background: var(--bg-2); border-radius: 10px; }
.project-card-v2 .project-meta-v2,
.product-card-v2 .product-contrib-v2 { border-top: 1px solid var(--border-2); }

/* ─── 11. MODALES — centrées, lumineuses ──────────────────── */
.mov { background: rgba(10,25,18,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mbox {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mbox::before { display: none; }
.mhd { background: var(--bg-1); border-bottom: 1px solid var(--border-2); padding: 1rem 1.25rem; }
.mttl { font-size: .98rem; font-weight: 700; }
.m-acts { background: var(--bg-2); border-top: 1px solid var(--border-2); }

/* ─── 12. TOASTS & ALERTES ────────────────────────────────── */
.toast {
  border-radius: 12px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  background: var(--bg-1);
  font-weight: 500;
}
.alert-banner { border-radius: 12px; font-weight: 500; }

/* ─── 13. AUTH — accueillant ──────────────────────────────── */
.auth-bg {
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(102,186,136,.25), transparent 55%),
    linear-gradient(160deg, #0C2A1C 0%, var(--c-500) 55%, var(--c-400) 100%);
}
.auth-wrap {
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--shadow-lg);
}
.auth-hero { background: linear-gradient(160deg, #0C2A1C, var(--c-500)); }
.auth-tab { border-radius: 8px; font-weight: 600; }
.auth-sc { border-radius: 10px; }
.auth-sc.active { box-shadow: 0 0 0 1.5px var(--c-400); }

/* ─── 14. DIVERS ──────────────────────────────────────────── */
.ai-hero, .csrd-section, .synth-stat, .iso-assurance-card, .iso-page-hd {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.anomaly-item, .rec-card, .ac-card, .removal-card, .est-preview, .ai-result-card {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ck-item { background: var(--bg-2); border-radius: 10px; }

.cookie-banner {
  border-radius: 14px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  background: rgba(255,255,255,.96);
}

/* ─── 15. MOBILE — conserve les correctifs existants ──────── */
@media (max-width: 768px) {
  .cw { margin-left: 0; }
  .sidebar { width: 260px; }
  .card, .kpi { border-radius: 12px; }
}

/* ─── 16. MOUVEMENT RESPECTUEUX ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 17. FENÊTRE FLOTTANTE (inspiré des références) ──────────
   L'appli entière flotte sur un fond neutre, coins très arrondis,
   ombre large — comme les captures Manaos / take[air].
   Desktop uniquement : sur mobile on garde le plein écran. ─── */
@media (min-width: 769px) {
  html, body { background: var(--frame); }

  #app {
    position: relative;
    margin: 14px;
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(18,54,38,.20), 0 2px 10px rgba(18,54,38,.08);
  }

  .sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    border-radius: 20px 0 0 20px;
  }

  .cw {
    height: 100%;
    min-height: 0;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
  }

  .topbar { margin: 0 1rem; top: 10px; }
  .main   { border-radius: 0 0 20px 0; }
}


/* ══════════════════════════════════════════════════════════════
   4. BOOST (ex style-boost.css)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Carboneum — style-boost.css
   Calque additif : sidebar plus vivant + tableau de bord plus pro.
   À charger APRÈS style.css, style-modern.css, style-pro.css
   (et après help.css). Ne redéfinit aucune structure HTML : pure
   couche visuelle, sans dépendance JS nouvelle.
   ══════════════════════════════════════════════════════════════ */

/* ─── 0. VERT ÉCLAIRCI ─────────────────────────────────────────
   style-pro.css avait ré-étalonné la rampe verte vers un sauge
   assez sombre/désaturé (--c-400:#3FA06A … --c-600:#1E5C3A), ce
   qui alourdit tout ce qui en dépend (sidebar, icônes KPI,
   badges). On réhausse la rampe — plus clair et plus vif — sans
   toucher aux autres tokens (--bg, --txt, etc. restent gérés par
   style-pro.css). Comme --primary, --em, --grp-c... sont tous
   définis via var(--c-400) etc., l'éclaircissement se propage
   automatiquement partout où le vert est utilisé. ───────────── */


/* ─── 1. SIDEBAR — couleur par section + relief ───────────────
   Chaque groupe de navigation obtient sa propre teinte d'accent
   (jusqu'ici tous les groupes partageaient le même --grp-c vert).
   Cela aide à repérer la section en un coup d'œil et donne du
   rythme à une colonne qui était jusque-là monochrome. ─────── */
.sidebar{
  background: linear-gradient(180deg, #1F7A50 0%, #16613F 55%, #0F4C32 100%);
}
[data-group="collecte"]    { --grp-c: var(--c-400); }
[data-group="ia"]          { --grp-c: var(--violet, #8B5CF6); }
[data-group="rapport"]     { --grp-c: #38BDF8; }
[data-group="conformite"]  { --grp-c: var(--amber, #D97706); }
[data-group="admin"]       { --grp-c: #94A3B8; }

/* Orbes d'ambiance discrets — profondeur sans nuire à la lisibilité */
.sb-orb{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:0}
.sb-orb-1{width:190px;height:190px;top:-50px;left:-60px;background:radial-gradient(circle, rgba(102,186,136,.32), transparent 70%);animation:sbFloat1 10s ease-in-out infinite}
.sb-orb-2{width:230px;height:230px;bottom:12%;right:-80px;background:radial-gradient(circle, rgba(139,92,246,.16), transparent 70%);animation:sbFloat2 13s ease-in-out infinite}
@keyframes sbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,22px) scale(1.08)}}
@keyframes sbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16px,-18px) scale(1.1)}}
.sb-top,.sb-foot{position:relative}

/* Logo : légère aura au survol */
.brand-ico{position:relative}
.brand-ico::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  background:radial-gradient(circle, rgba(61,214,140,.4), transparent 72%);
  opacity:0;transition:opacity .3s ease;z-index:-1;
}
.brand:hover .brand-ico::after{opacity:1}

/* En-têtes de groupe : pastille colorée + fond léger permanent */
.nav-sec{
  background:color-mix(in srgb, var(--grp-c) 9%, transparent);
  border-radius:8px;margin:.32rem .4rem .16rem;padding:.36rem .6rem .36rem .5rem;
}
.nav-sec::before{
  width:6px;height:6px;border-radius:50%;margin-right:.55rem;
  box-shadow:0 0 7px 1px color-mix(in srgb, var(--grp-c) 80%, transparent);
}
.nav-sec:hover{background:color-mix(in srgb, var(--grp-c) 17%, transparent)}

/* Liens de nav : accent latéral qui se déploie + icônes qui réagissent */
.ni{position:relative}
.ni::before{
  display:block;content:'';position:absolute;left:2px;top:50%;
  width:3px;height:0;border-radius:3px;transform:translateY(-50%);
  background:var(--grp-c,var(--c-300));
  box-shadow:0 0 8px 0 color-mix(in srgb, var(--grp-c,var(--c-300)) 70%, transparent);
  transition:height .25s cubic-bezier(.34,1.56,.64,1);
}
.ni:hover::before{height:52%}
.ni.active::before{height:64%}
.ni.active{
  background:linear-gradient(90deg,color-mix(in srgb, var(--grp-c,var(--c-300)) 22%, transparent),transparent 85%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--grp-c,var(--c-300)) 30%, transparent);
}
.ni:hover{transform:translateX(2px)}
.ni i,.ni svg{transition:transform .2s ease}
.ni:hover i,.ni:hover svg,.ni.active i,.ni.active svg{transform:scale(1.1)}

/* Section IA : petit indicateur "vivant" façon activité temps réel */
.ai-item{position:relative}
.ai-item::after{
  content:'';position:absolute;top:50%;right:.65rem;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--violet,#8B5CF6);
  opacity:0;transition:opacity .2s ease;
}
.ai-item:hover::after,.ai-item.active::after{opacity:1;animation:aiPulse 1.8s ease-out infinite}
@keyframes aiPulse{
  0%{box-shadow:0 0 0 0 rgba(139,92,246,.55)}
  70%{box-shadow:0 0 0 7px rgba(139,92,246,0)}
  100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}
}

/* Badges IA / ISO : léger reflet animé pour signaler "actif" */
.ni-badge{position:relative;overflow:hidden}
.ni-badge::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%);
  transform:translateX(-120%);animation:badgeSheen 4.5s ease-in-out infinite;
}
@keyframes badgeSheen{0%,60%{transform:translateX(-120%)}80%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* Avatar : pastille de statut "en ligne" */
.user-av{position:relative}
.user-av::after{
  content:'';position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;
  background:#22C55E;border:2px solid #123f2c;
  animation:userOnline 2.4s ease-in-out infinite;
}
@keyframes userOnline{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}
}

/* Ascenseur de la colonne : teinté au lieu de blanc neutre */
.sidebar::-webkit-scrollbar-thumb{background:rgba(102,186,136,.35)}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(102,186,136,.55)}

@media (prefers-reduced-motion:reduce){
  .sb-orb,.ai-item::after,.ni-badge::after,.user-av::after{animation:none!important}
}

/* ─── 2. TABLEAU DE BORD — hiérarchie plus nette ───────────────
   Le <h2> de section existe déjà dans le HTML (texte "Tableau de
   bord") mais reste caché ; on le révèle comme un kicker discret
   pour donner un vrai point d'ancrage visuel en haut de page,
   sans toucher au HTML. ────────────────────────────────────── */
#sec-dashboard > h2{
  display:block!important;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-600);margin:0 0 .9rem;padding-left:.75rem;position:relative;
}
#sec-dashboard > h2::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:1rem;border-radius:2px;
  background:linear-gradient(180deg,var(--c-300),var(--c-500));
}

/* KPI : icône avec relief + micro-réaction au survol */
.kpi-ic{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kc,var(--primary)) 18%, transparent),
    0 4px 10px -4px color-mix(in srgb, var(--kc,var(--primary)) 45%, transparent);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
#kpi-grid .kpi:hover .kpi-ic{transform:scale(1.12) rotate(-4deg)}
.g4:not(#kpi-grid) .kpi:hover{transform:translateY(-4px)}

/* Variantes de tendance, prêtes si le balisage les utilise déjà */
.kpi-t.up{color:#16A34A}
.kpi-t.down{color:#DC2626}

#sec-dashboard #kpi-grid{gap:.9rem}
#sec-dashboard .g2{gap:1.1rem}

/* Cartes graphiques : titre avec puce d'accent + zone de graphe cadrée */
#sec-dashboard .card{padding:1.35rem 1.45rem}
#sec-dashboard .card .ct{position:relative;padding-left:.85rem}
#sec-dashboard .card .ct::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--c-400);
  box-shadow:0 0 6px 1px rgba(63,160,106,.5);
}
#sec-dashboard .chw{
  background:linear-gradient(180deg,var(--bg-2),transparent);
  border-radius:var(--r-md);padding:.5rem;
}

@media (max-width:768px){
  #sec-dashboard .card{padding:1.1rem}
}


/* ══════════════════════════════════════════════════════════════
   5. STYLES INTÉGRÉS À app.html (bandeau cookies, sync, vérification ISO)
   ══════════════════════════════════════════════════════════════ */
#sync-pill{transition:background-color .25s ease}
#sync-pill[data-state="error"]:hover{filter:brightness(0.96)}
#sync-pill[data-state="error"]:active{filter:brightness(0.9)}
#sync-pill[tabindex]:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
#sync-pill[data-state="error"] #sync-dot,#sync-pill[data-state="readonly"] #sync-dot,#sync-pill[data-state="idle"] #sync-dot{animation:none;box-shadow:none}
#sync-dot{transition:background-color .25s ease}
#sync-pill[data-state="syncing"] #sync-dot{animation:sync-pulse 1s ease-in-out infinite}
#sync-pill[data-state="error"]{box-shadow:0 0 0 1px var(--rose) inset}
@keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.iso-veri-hint{font-size:.78rem;color:var(--txt-3);margin:.1rem 0 .7rem;line-height:1.45}
.iso-veri-sec{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed var(--border)}
.iso-veri-sec-ttl{font-size:.86rem;font-weight:700;color:var(--txt-2);margin-bottom:.2rem;display:flex;align-items:center;gap:.4rem}
.iso-veri-clause{font-size:.68rem;font-weight:600;color:var(--violet);background:rgba(139,92,246,.12);padding:.1rem .4rem;border-radius:4px}
.iso-veri-drift-alert{display:flex;align-items:flex-start;gap:.6rem;background:rgba(245,158,11,.12);border:1px solid var(--amber);border-radius:8px;padding:.7rem .9rem;margin-bottom:.8rem;font-size:.82rem;color:var(--txt-2);line-height:1.45}
.iso-veri-drift-alert b{color:var(--amber)}
  .cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 140;
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-1);
    border: 1.5px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .cookie-banner.hidden { display: none; }
  .cookie-banner.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .cookie-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.1rem;
  }
  .cookie-banner-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-50);
    color: var(--primary);
  }
  .cookie-banner-text {
    flex: 1;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--txt-2);
  }
  .cookie-banner-text strong { color: var(--txt); }
  .cookie-banner-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s;
  }
  .cookie-banner-text a:hover { text-decoration-color: var(--primary); }
  .cookie-banner-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 120px;
  }
  .btn-cookie-accept {
    padding: .55rem 1.1rem;
    background: linear-gradient(135deg, var(--c-400), var(--c-500));
    color: #fff;
    font-size: .83rem;
    font-weight: 600;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--tr);
    box-shadow: 0 2px 6px rgba(29,185,122,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
  }
  .btn-cookie-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29,185,122,.35);
  }
  .btn-cookie-reject {
    padding: .55rem 1.1rem;
    background: var(--bg-2);
    color: var(--txt-2);
    font-size: .83rem;
    font-weight: 600;
    border: 1.5px solid var(--border-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--tr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
  }
  .btn-cookie-reject:hover {
    background: var(--rose-dim);
    border-color: var(--rose);
    color: var(--rose);
  }
  .btn-cookie-consult {
    padding: .4rem 1rem;
    background: transparent;
    color: var(--txt-3);
    font-size: .78rem;
    font-weight: 500;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-decoration: underline;
    transition: var(--tr);
  }
  .btn-cookie-consult:hover { color: var(--primary); }
  @media (max-width: 640px) {
    .cookie-banner { left: .6rem; right: .6rem; bottom: .6rem; }
    .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: .7rem; }
    .cookie-banner-actions { flex-direction: row; justify-content: stretch; }
    .cookie-banner-actions button { flex: 1; }
  }
.ademe-pick-row:hover{background:rgba(255,255,255,.05)}

/* ─── FIX boutons avec icône (Cadre réglementaire / Données ESG) ───
   .btn-cl n'avait pas display:inline-flex (contrairement à .btn-p/.btn-sec) :
   l'icône et le texte s'empilaient sur la ligne de base. De plus, Lucide
   remplace <i data-lucide> par un <svg> : l'attribut size="N" n'a aucun
   effet, l'icône prenait donc sa taille par défaut (24px) et déformait le
   bouton. La taille est donc fixée ici, directement sur le SVG rendu. */
.btn-cl,.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;line-height:1.3}
.btn-cl svg,.btn-cl i,.btn-p svg,.btn-p i{width:14px;height:14px;flex-shrink:0}
.btn-p{white-space:nowrap}
#sec-reglementaire .btn-cl[data-rf-action="open-esg-data"]{white-space:normal;text-align:left;max-width:100%}

/* ─── Bloc de validation des rapports (ReportSignature) ─── */
.rs-box{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0;padding:.8rem 1rem;background:var(--bg-1);border:1px solid var(--border);border-left-width:3px;border-radius:10px;box-shadow:var(--shadow-sm)}
.rs-box--pending{border-left-color:#d97706}
.rs-box--ok{border-left-color:var(--primary)}
.rs-box .rs-status{font-size:.76rem;color:#b45309;white-space:nowrap}
.rs-box .rs-status--ok{color:var(--primary-dark)}
/* Version compacte : titre + statut + champ + bouton sur une seule ligne */
.rs-box.rs-bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;padding:.4rem .75rem;font-size:.8rem}
.rs-box.rs-bar .rs-title{font-size:.82rem;font-weight:700;color:var(--txt);white-space:nowrap}
.rs-box.rs-bar .rs-name{flex:1 1 150px;min-width:130px;max-width:260px;height:30px;padding:.2rem .6rem;font-size:.8rem}
.rs-box.rs-bar .rs-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:30px;padding:0 .85rem;font-size:.8rem}
.rs-box--ok.rs-bar .rs-btn{margin-left:auto}

/* ─── Page Rapport CSRD : rangée d'actions de l'en-tête ───
   La rangée était un flex en align-items:stretch dans lequel le bloc de
   validation s'insérait comme simple élément : les boutons voisins
   s'étiraient à sa hauteur. Le bloc occupe maintenant sa propre ligne et
   tous les boutons secondaires partagent la même apparence. */
#sec-ai-csrd .ai-hero > div:last-child{flex:1 1 auto;min-width:0}
#sec-ai-csrd .ai-actions-row{align-items:center;gap:.6rem}
#sec-ai-csrd .ai-actions-row > #csrd-validation-block,
#sec-ai-csrd .ai-actions-row > .rs-box{flex:0 0 100%;width:100%;margin:.2rem 0}
#sec-ai-csrd .ai-actions-row .rs-box{max-width:760px}
#sec-ai-csrd .ai-actions-row > button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:40px;margin:0 !important;padding:0 1rem;font-size:.82rem;white-space:nowrap}
#sec-ai-csrd .ai-actions-row > .btn-sm,
#sec-ai-csrd .ai-actions-row > .btn-cl{background:var(--bg-1);border:1px solid var(--border);color:var(--txt-2);font-weight:500;border-radius:10px;box-shadow:var(--shadow-sm)}
#sec-ai-csrd .ai-actions-row > .btn-sm:hover,
#sec-ai-csrd .ai-actions-row > .btn-cl:hover{background:var(--c-50);border-color:var(--c-200);color:var(--primary-dark)}
#sec-ai-csrd .ai-actions-row > button svg,
#sec-ai-csrd .ai-actions-row > button i{width:15px;height:15px;flex-shrink:0}

/* Bouton "Paramètres CSRD" : même apparence que les autres boutons secondaires,
   quel que soit son conteneur (il est injecté dynamiquement). */
#sec-ai-csrd #csrd-settings-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:40px;margin:0 !important;padding:0 1rem;font-size:.82rem;font-weight:500;white-space:nowrap;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;color:var(--txt-2);box-shadow:var(--shadow-sm)}
#sec-ai-csrd #csrd-settings-btn:hover{background:var(--c-50);border-color:var(--c-200);color:var(--primary-dark)}
#sec-ai-csrd #csrd-settings-btn svg,#sec-ai-csrd #csrd-settings-btn i{width:15px;height:15px;flex-shrink:0}

/* Rapport CSRD : tous les boutons sur une seule ligne, bloc de validation en dessous */
#sec-ai-csrd .ai-actions-row > #csrd-validation-block,
#sec-ai-csrd .ai-actions-row > .rs-box{order:10}

/* ══════════════════════════════════════════════════════════════
   MODALES CBAM (cbam-manager.js) — mêmes règles que .mbox/.mhd/.m-acts
   Contenu enveloppé dans .cbam-modal ; pied de modale collant .cbam-actions
   (équivalent de .m-acts quand les boutons sont dans le corps .mbd).
   ══════════════════════════════════════════════════════════════ */
.cbam-modal{font-size:.85rem;color:var(--txt)}
.cbam-grid{display:grid;gap:.2rem .8rem}
.cbam-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cbam-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cbam-grid .f-group{margin-bottom:.6rem;min-width:0}
.cbam-grid .cbam-span-all{grid-column:1/-1}
.cbam-modal .f-input,.cbam-modal .f-select{width:100%;max-width:100%}
.cbam-modal .f-label .cbam-opt,.cbam-modal .f-label span{font-weight:400}
.cbam-note{font-size:.76rem;color:var(--txt-3);line-height:1.45;margin-bottom:.6rem}
.cbam-subtitle{font-size:.8rem;font-weight:600;color:var(--txt);margin:.8rem 0 .3rem}
.cbam-subtitle span{font-weight:400;color:var(--txt-3);font-size:.74rem}
.cbam-section{border-top:1px solid var(--border-2);padding-top:.7rem;margin-top:.8rem}
.cbam-scroll{max-height:min(280px,40dvh);overflow-y:auto;margin-top:.6rem;font-size:.8rem}
.cbam-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:.5rem}
.cbam-actions{
  position:sticky;bottom:calc(-1 * var(--mbd-pad,1.25rem));z-index:2;
  display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;
  margin:1rem calc(-1 * var(--mbd-pad,1.25rem)) calc(-1 * var(--mbd-pad,1.25rem));padding:.9rem var(--mbd-pad,1.25rem);
  background:var(--bg-1);border-top:1px solid var(--border-2);
}
.cbam-actions .btn-cl,.cbam-actions .btn-ok,.cbam-actions .btn-sm,
.cbam-row-actions .btn-cl,.cbam-row-actions .btn-ok,.cbam-row-actions .btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;min-height:38px
}
@media (max-width:640px){
  .cbam-grid-2,.cbam-grid-3{grid-template-columns:1fr}
  .cbam-actions{padding-bottom:calc(.9rem + var(--sab,0px))}
  .cbam-actions .btn-cl,.cbam-actions .btn-ok{flex:1 1 auto}
  .cbam-modal .f-input,.cbam-modal .f-select{font-size:max(.8rem,16px)}
}

/* ── MODALES CBAM — uniformisation (libellés, aides, encadrés, rangées de champs) ── */
.cbam-modal .f-label{display:block;line-height:1.35}
.cbam-opt{font-weight:400;color:var(--txt-3)}
.f-label .cbam-opt,.cbam-box-title .cbam-opt,.cbam-subtitle .cbam-opt{font-size:.74rem}
.cbam-hint{font-size:.72rem;line-height:1.4;color:var(--txt-3);margin-top:.25rem}
.cbam-modal textarea.f-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.45;resize:vertical;min-height:64px}
.cbam-check{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;line-height:1.4;color:var(--txt);cursor:pointer}
.cbam-check input[type=checkbox]{margin-top:.15rem;flex-shrink:0}
.cbam-box{background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-md);padding:.8rem .9rem;margin:.8rem 0}
.cbam-box.is-flat{background:var(--bg-1)}
.cbam-box-title{font-size:.8rem;font-weight:600;color:var(--txt);margin-bottom:.5rem}
.cbam-box-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.cbam-box-hd .cbam-box-title{margin:0;color:var(--txt-3);font-size:.76rem}
.cbam-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--txt-3);cursor:pointer;transition:var(--tr)}
.cbam-icon-btn:hover{background:var(--bg-3);color:var(--rose)}
/* rangées de champs : les enfants rétrécissent au lieu de déborder */
.cbam-flex{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.cbam-flex>.f-input,.cbam-flex>.f-select{flex:1 1 130px;width:auto;min-width:0}
.cbam-flex>.is-xs{flex:0 0 84px}
.cbam-flex>.is-sm{flex:0 0 110px}
.cbam-flex>.is-lg{flex:2 1 200px}
.cbam-flex>.is-select{flex:0 1 150px}
.cbam-stack{margin-bottom:.5rem}
.cbam-btn-sm{font-size:.76rem;min-height:32px}
@media (max-width:640px){
  .cbam-flex>.f-input,.cbam-flex>.f-select,.cbam-flex>.is-xs,.cbam-flex>.is-sm,.cbam-flex>.is-lg,.cbam-flex>.is-select{flex:1 1 100%}
}

/* ─── Paramètres de l'organisation : un seul scroll ───────────
   Le corps de la modale (.mbd) est le SEUL conteneur qui défile ;
   la barre Annuler/Enregistrer reste collée en bas pendant le scroll. */
.mbd{--mbd-pad:1.25rem}
@media (max-width:640px){.mbd{--mbd-pad:.8rem}}
@media (max-width:400px){.mbd{--mbd-pad:.6rem}}
.st-modal-body + .m-acts{
  position:sticky;bottom:0;z-index:2;
  margin:0 calc(-1 * var(--mbd-pad)) calc(-1 * var(--mbd-pad));
  background:var(--bg-2);
}

/* ══════════════════════════════════════════════════════════════
   CBAM — modal « Produit exporté » + liste « Produits exportés »
   (remplace le <style id="ep-modal-css"> auparavant injecté par le JS)
   ══════════════════════════════════════════════════════════════ */
/* modale plus large : 3 colonnes de champs ne tiennent pas dans 560 px */
.mbox:has(.cbam-modal--wide){max-width:min(880px,96vw)}
/* indications dans un libellé : en ligne, sans hériter du flex de .f-label / .f-hint */
/* toute indication « (…) » reste en ligne : libellés, titres de blocs, <summary>, cases à cocher */
.cbam-modal .f-hint{display:inline;margin:0;font-size:.74rem;font-weight:400;color:var(--txt-3)}
.cbam-modal .cbam-box>.cbam-hint{margin:.2rem 0 .6rem}
.cbam-modal .cbam-box>.f-group:last-of-type{margin-bottom:.6rem}
.cbam-modal .cbam-box>.cbam-hint:last-child{margin-bottom:0}
/* sections repliables */
.cbam-modal details.ep-adv{border:1px solid var(--border-2);border-radius:var(--r-md);padding:.4rem .85rem;margin:.7rem 0;background:var(--bg-1)}
.cbam-modal details.ep-adv>summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--txt);padding:.25rem 0}
.cbam-modal details.ep-adv[open]>summary{margin-bottom:.6rem}
.cbam-modal details.ep-adv .cbam-grid{margin-top:.2rem}
/* panneau de périmètre (code NC) */
.cbam-modal #ep-scope-panel:empty{display:none}
.cbam-modal #ep-scope-panel>div{background:var(--bg-2);border:1px solid var(--border-2)!important;border-radius:var(--r-md)!important;padding:.55rem .75rem!important;line-height:1.5;overflow-wrap:anywhere}
/* ligne de précurseur */
.cbam-modal .epc-row{margin:.5rem 0}
.cbam-modal .epc-row .cbam-flex>.f-input[type=date]{flex:1 1 140px}
.cbam-modal .epc-result:empty{display:none}
/* liste des produits exportés : le texte rétrécit/passe à la ligne, les boutons ne le recouvrent plus */
.cbam-list{display:flex;flex-direction:column;gap:.5rem}
.cbam-item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem 1rem;padding:.75rem .9rem}
.cbam-item:hover{transform:none}
.cbam-item-main{flex:1 1 320px;min-width:0;overflow-wrap:anywhere}
.cbam-item-title{font-size:.88rem;line-height:1.35;color:var(--txt)}
.cbam-item-meta{font-size:.76rem;line-height:1.5;color:var(--txt-3);margin-top:.15rem}
.cbam-item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-left:auto}
.cbam-item-actions .btn-sm,.cbam-item-actions .btn-cl{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:32px;padding:.3rem .7rem;font-size:.76rem;font-weight:500}
@media (max-width:640px){
  .cbam-item-actions{margin-left:0;width:100%}
  .cbam-item-actions .btn-sm,.cbam-item-actions .btn-cl{flex:1 1 auto}
}
/* espacement entre blocs du modal produit */
.cbam-modal #ep-scope-panel{margin:.1rem 0 .9rem}
.cbam-modal .cbam-grid + .cbam-grid{margin-top:.3rem}
.cbam-modal .cbam-box{margin:1rem 0}
.cbam-modal .cbam-box>.f-group{margin-bottom:.7rem}
.cbam-modal .cbam-box>.cbam-box-title{margin-bottom:.7rem;line-height:1.4}
.cbam-modal .cbam-check>span{min-width:0}
/* alignement des champs d'une même rangée (libellés sur 1 ou 2 lignes) */
.cbam-modal .cbam-grid-3{align-items:end}
/* répartition manuelle entre produits */
.cbam-alloc{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;padding:.35rem 0;border-bottom:1px solid var(--border-2)}
.cbam-alloc:last-of-type{border-bottom:0}
.cbam-alloc-label{flex:1 1 240px;min-width:0;overflow-wrap:anywhere;font-size:.8rem}
.cbam-alloc input{flex:none}
/* liste de flux : zone défilante sans marge parasite */
.cbam-modal .cbam-scroll{max-height:min(200px,32dvh)}
.cbam-modal .cbam-row-actions .btn-cl,.cbam-modal .cbam-row-actions .btn-sm{min-height:34px}
.cbam-modal .cbam-check{font-size:.8rem}

/* sections repliables : même fond que les autres encadrés (blanches seulement quand elles sont dans un encadré teinté) */
.cbam-modal details.ep-adv{background:var(--bg-2)}
.cbam-modal .cbam-box details.ep-adv{background:var(--bg-1)}
.cbam-modal details.ep-adv + .f-group{margin-top:.9rem}

/* ── Modales CBAM : un seul fond (blanc). Les encadrés se distinguent par leur bordure. ── */
.cbam-modal .cbam-box,
.cbam-modal .cbam-box.is-flat,
.cbam-modal details.ep-adv,
.cbam-modal .cbam-box details.ep-adv,
.cbam-modal #ep-scope-panel>div{background:var(--bg-1)}
.cbam-modal .cbam-box{border-color:var(--border-2)}
.cbam-modal .cbam-box details.ep-adv{border-color:var(--border-2)}

/* ── Onglets CBAM : listes (codes NC, valeurs par défaut, installations) ── */
.cbam-pad{padding:.1rem 0 .2rem}
.cbam-item-center{align-items:center}
.cbam-add-row,.cbam-add-form{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border-2)}
.cbam-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cbam-add-row>*{min-width:0}
.cbam-add-row .btn-sm{flex:none}

/* ══════════════════════════════════════════════════════════════
   DEMANDES FOURNISSEUR — liste compacte
   (page Fournisseurs : supplier-hub.js · widget ESG S2 : supplier-request-widget.js)
   Une demande = une ligne ~48 px, 2 colonnes sur écran large.
   ══════════════════════════════════════════════════════════════ */
.sr-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:.6rem}
.sr-head-act{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sr-scope{font-size:.78rem;color:var(--txt-3);margin-top:.1rem}
.btn-compact{padding:.4rem .8rem;font-size:.8rem;min-height:34px}
.btn-compact svg,.btn-compact i{width:14px;height:14px}
.sr-info{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .8rem;padding:.55rem .8rem;font-size:.8rem;line-height:1.45;color:var(--txt-2);background:var(--bg-2);border-radius:10px}
.sr-info svg,.sr-info i{flex-shrink:0;width:15px;height:15px;margin-top:.12rem;color:var(--txt-3)}

.sr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:.55rem .7rem;padding:.1rem 0;align-items:stretch}
.sr-list>.em-st,.sr-list>p{grid-column:1/-1}

.sr-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:.75rem;row-gap:.1rem;min-height:60px;padding:.55rem .85rem;background:var(--bg-1);border:1px solid var(--border-2);border-radius:12px;transition:border-color .15s ease,background .15s ease}
.sr-row:hover{border-color:var(--c-200);background:var(--c-50)}
.sr-name{grid-column:1;font-size:.92rem;font-weight:600;line-height:1.3;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-count{font-weight:400;font-size:.8rem;color:var(--txt-3)}
.sr-meta{grid-column:1;font-size:.78rem;line-height:1.35;color:var(--txt-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-badge{grid-column:2;grid-row:1/span 2;font-size:.75rem;font-weight:600;line-height:1;padding:.34rem .65rem;border-radius:999px;white-space:nowrap}
.sr-badge--pending{background:#fef3c7;color:#92400e}
.sr-badge--received{background:#dbeafe;color:#1e40af}
.sr-badge--done{background:var(--em-dim);color:var(--c-600)}
.sr-badge--expired{background:var(--bg-2);color:var(--txt-3)}
.sr-act{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;gap:.4rem}
.sr-act:empty{display:none}
.sr-act .btn-sm{min-height:32px;padding:.3rem .75rem;font-size:.8rem;box-shadow:none}
.sr-act .btn-sm svg,.sr-act .btn-sm i{width:14px;height:14px}
.sr-act .btn-sm:hover{transform:none}

@media (max-width:640px){
  .sr-list{grid-template-columns:1fr}
  .sr-row{grid-template-columns:minmax(0,1fr) auto}
  .sr-badge{grid-column:2;grid-row:1}
  .sr-act{grid-column:1/-1;grid-row:auto;justify-content:flex-end;margin-top:.3rem}
}

/* ══════════════════════════════════════════════════════════════
   MODALES — position verticale STABLE (correctif « le modal bouge »)
   Causes corrigées :
   1. .mov était centré (align-items:center) : dès que la hauteur du
      contenu change (alerte, section dépliée, liste chargée, scrollbar…),
      la boîte se recentre => saut vertical. Elle est maintenant ancrée
      en haut à un décalage fixe.
   2. .mov était lui-même scrollable (overflow-y:auto) et sa hauteur
      utile (padding + max-height de .mbox en vh/dvh mélangés) dépassait
      l'écran => tout le modal défilait avec le doigt/la molette.
      .mov ne défile plus jamais ; seul .mbd défile.
   3. overflow:clip empêche aussi scrollIntoView/focus de décaler .mov.
   ══════════════════════════════════════════════════════════════ */
.mov{
  --mov-top:clamp(1rem,7vh,4rem);
  --mov-bot:1rem;
  align-items:flex-start!important;
  overflow:hidden!important;
  overflow:clip!important;
  padding-top:calc(var(--mov-top) + var(--sat,0px));
  padding-bottom:calc(var(--mov-bot) + var(--sab,0px));
}
.mov .mbox{
  margin:0;
  max-height:calc(100vh - var(--mov-top) - var(--mov-bot) - var(--sat,0px) - var(--sab,0px));
  max-height:calc(100dvh - var(--mov-top) - var(--mov-bot) - var(--sat,0px) - var(--sab,0px));
}
.mov .mbox .mbd{
  min-height:0;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
@media (max-width:640px){
  .mov{--mov-top:.5rem;--mov-bot:.5rem}
}