/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button, input, select, textarea{font-family:inherit;color:inherit;}

/* ===== THEME VARIABLES ===== */
/* MODE CLAIR (PAR DÉFAUT) */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface2: #f1f5f9;
  --surface3: #e2e8f0;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-subtle: rgba(0,0,0,0.06);
  --text: #0f172a;
  --text2: #64748b;
  --accent: #ea580c;
  --accent2: #f97316;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --blue: #3b82f6;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.09);
  --card-bg-subtle: rgba(234,88,12,.04);
  --card-border-subtle: rgba(234,88,12,.2);
  --table-hover: #f8fafc;
  --input-bg: #f8fafc;
  --modal-overlay: rgba(15,23,42,.45);
  --modal-bg: rgba(255,255,255,.98);
  --auth-box-bg: rgba(255,255,255,.92);
  --auth-box-border: rgba(0,0,0,.08);
  --auth-box-shadow: 0 0 0 1px rgba(234,88,12,.15), 0 24px 50px rgba(0,0,0,.08);
  --code-bg: rgba(0,0,0,0.04);
}

/* MODE SOMBRE */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242836;
  --surface3: #2e3345;
  --border: #2e3345;
  --border-strong: #3b4259;
  --border-subtle: rgba(255,255,255,0.08);
  --text: #e4e6f0;
  --text2: #8b90a5;
  --accent: #f97316;
  --accent2: #fb923c;
  --green: #34d399;
  --red: #f87171;
  --yellow: #fbbf24;
  --blue: #60a5fa;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --card-bg-subtle: rgba(249,115,22,.06);
  --card-border-subtle: rgba(249,115,22,.25);
  --table-hover: rgba(255,255,255,.03);
  --input-bg: rgba(36,40,54,.6);
  --modal-overlay: rgba(0,0,0,.7);
  --modal-bg: rgba(22,25,35,.98);
  --auth-box-bg: rgba(26,29,39,.82);
  --auth-box-border: rgba(255,255,255,.08);
  --auth-box-shadow: 0 0 0 1px rgba(249,115,22,.15), 0 32px 64px rgba(0,0,0,.5);
  --code-bg: rgba(0,0,0,0.25);
}

html{overflow-x:clip;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:clip;transition:background-color .25s ease, color .25s ease;}
a{color:var(--accent2);text-decoration:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ===== AUTH MODAL ===== */
@keyframes authFadeIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.06)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,20px) scale(1.04)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-modal{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* Orbes animées en arrière-plan */
.auth-modal::before,
.auth-modal::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.auth-modal::before{
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(249,115,22,.22) 0%, transparent 70%);
  top:-100px;left:-100px;
  animation:orbFloat1 8s ease-in-out infinite;
}
.auth-modal::after{
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(251,146,60,.18) 0%, transparent 70%);
  bottom:-80px;right:-80px;
  animation:orbFloat2 10s ease-in-out infinite;
}

.auth-orb3{
  position:absolute;
  width:300px;height:300px;
  background:radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
  border-radius:50%;filter:blur(60px);
  bottom:20%;left:60%;
  animation:orbFloat3 12s ease-in-out infinite;
  pointer-events:none;z-index:0;
}

.auth-box{
  position:relative;z-index:1;
  background:var(--auth-box-bg);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--auth-box-border);
  border-radius:24px;
  padding:48px 40px 40px;
  max-width:440px;width:90%;
  text-align:center;
  box-shadow:var(--auth-box-shadow);
  animation:authFadeIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Badge & image logo Prisma Mind */
.auth-logo-img{
  width:84px;height:84px;
  border-radius:22px;
  object-fit:cover;
  margin:0 auto 20px;
  display:block;
  box-shadow:0 8px 30px rgba(249,115,22,.38), inset 0 1px 0 rgba(255,255,255,.25);
  border:1.5px solid rgba(249,115,22,.35);
  transition:transform .3s ease;
}
.auth-logo-img:hover{
  transform:scale(1.05);
}

.auth-logo{
  width:72px;height:72px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:30px;color:#fff;
  margin:0 auto 22px;
  box-shadow:0 8px 32px rgba(249,115,22,.45), inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;
}
.auth-logo::after{
  content:'';
  position:absolute;inset:-3px;
  border-radius:23px;
  border:1.5px solid rgba(249,115,22,.35);
  animation:none;
}

.auth-box h2{
  font-size:26px;font-weight:800;
  letter-spacing:-.5px;
  margin-bottom:6px;
  color:var(--text);
}
.auth-sub{font-size:13px;color:var(--text2);margin-bottom:30px;line-height:1.5}

/* Champs avec wrapper + icône */
.auth-field{
  position:relative;
  margin-bottom:14px;
  text-align:left;
}
.auth-field-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;pointer-events:none;
  color:var(--text2);
  transition:color .2s;
  z-index:2;
}
.auth-input{
  width:100%;
  padding:13px 16px 13px 44px;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  color:var(--text);font-size:14px;font-family:inherit;
  transition:all .25s;
}
.auth-input::placeholder{color:var(--text2);opacity:.7;font-size:13px}
.auth-input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.auth-input:focus + .auth-field-icon, .auth-field:focus-within .auth-field-icon{color:var(--accent)}

/* Ligne remember me */
.remember-label{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--text2);
  cursor:pointer;margin-bottom:18px;
  text-align:left;
  user-select:none;
}
.remember-label:hover{color:var(--text)}
.remember-label input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;
  border:1.5px solid var(--border-strong);
  border-radius:5px;
  background:var(--input-bg);
  cursor:pointer;transition:all .2s;flex-shrink:0;
  position:relative;
}
.remember-label input[type="checkbox"]:checked{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(249,115,22,.4);
}
.remember-label input[type="checkbox"]:checked::after{
  content:'';
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}
.remember-label:hover input[type="checkbox"]{border-color:var(--accent)}

/* Bouton principal */
.btn-block{
  width:100%;justify-content:center;
  padding:14px;font-size:15px;font-weight:700;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 4px 20px rgba(249,115,22,.35);
  transition:all .25s;
  letter-spacing:.2px;
}
.btn-block:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(249,115,22,.5);
}
.btn-block:active{transform:translateY(0);box-shadow:0 2px 8px rgba(249,115,22,.3)}

.auth-divider{
  position:relative;
  margin:20px 0 16px;
  text-align:center;
}
.auth-divider::before{
  content:'';
  position:absolute;top:50%;left:0;right:0;
  height:1px;background:var(--border);
}
.auth-divider span{
  position:relative;background:var(--surface);
  padding:0 12px;font-size:11px;
  color:var(--text2);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600;
}

.auth-tabs{display:flex;margin-bottom:24px;border-bottom:1px solid var(--border)}
.auth-tab{
  flex:1;padding:10px;background:none;border:none;
  color:var(--text2);font-size:14px;font-weight:600;
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all .2s;font-family:inherit;
}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.auth-info{font-size:12px;color:var(--text2);margin-top:12px;line-height:1.5;min-height:18px}
.auth-info.error{
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  display: block;
  text-align: center;
}
.auth-info.success{display:none}

.auth-sessions-list{
  margin-top:12px;max-height:140px;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
}
.auth-session-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:all .15s;font-size:12px;
}
.auth-session-item:hover{border-color:var(--accent);color:var(--accent)}
.auth-session-badge{
  font-size:10px;padding:2px 6px;border-radius:10px;
  background:rgba(249,115,22,.12);color:var(--accent2);
}

/* ===== APP HEADER 2-ROWS STICKY ===== */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
  transition:background-color .25s ease, border-color .25s ease;
  width:100%;
}

/* LIGNE 1 : TOP ROW (Brand, Projet & Profil) */
.header-top-row{
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.header-inner{
  max-width:1600px;margin:0 auto;
  padding:0 20px;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}

/* 1. GAUCHE : Logo & Projet */
.header-left{
  display:flex;align-items:center;gap:14px;flex-shrink:0;
}
.logo{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.logo-img{
  width:32px;height:32px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 3px 10px rgba(249,115,22,.28);
  border:1px solid rgba(249,115,22,.25);
  flex-shrink:0;
  transition:transform .2s ease;
}
.logo-img:hover{transform:scale(1.05)}
.logo h1{
  font-size:16px;font-weight:800;letter-spacing:-0.2px;
  color:var(--text);margin:0;
  display:flex;align-items:center;gap:3px;
  white-space:nowrap;
}
.logo h1 span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.header-vdiv{
  width:1px;height:24px;
  background:var(--border);
  flex-shrink:0;
}

/* 2. DROITE TOP : Sauvegarde, Thème & Profil */
.header-right-col{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}

/* LIGNE 2 : SUBNAV ROW (Tabs de Navigation & Outils) */
.header-subnav-row{
  background:var(--surface2);
}
.header-subnav-inner{
  height:44px;
  display:flex;align-items:center;justify-content:space-between;
}
.header-nav-tabs{
  display:inline-flex;align-items:center;gap:6px;
}
.hnav-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:8px;
  font-size:12.5px;font-weight:600;font-family:inherit;
  color:var(--text2);background:transparent;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space:nowrap;
}
.hnav-tab:hover{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.hnav-tab-highlight{
  color:#10b981;
}
.hnav-tab-highlight:hover{
  color:#059669;
  background:rgba(16,185,129,0.08);
  border-color:rgba(16,185,129,0.3);
}
.hnav-tab svg{
  opacity:0.85;
}

.header-subnav-right{
  display:flex;align-items:center;gap:10px;
}

.hbtn-export{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:8px;
  font-size:12px;font-weight:600;font-family:inherit;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  transition:all .18s;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.hbtn-export:hover:not(:disabled){
  background:var(--surface3);
  border-color:var(--accent);
}
.hbtn-export:disabled{
  opacity:0.45;cursor:not-allowed;
}

.modern-export-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;left:auto;
  min-width:220px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
  display:none;z-index:1000;
}
.hdropdown:hover .modern-export-menu,
.hdropdown.open .modern-export-menu{
  display:block;
  animation:ddFadeIn .18s ease-out;
}
@keyframes ddFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.export-menu-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.6px;color:var(--text2);
  padding:6px 10px 4px;
}
.modern-export-menu button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--text);
  background:transparent;border:none;
  text-align:left;cursor:pointer;
  transition:background .15s, color .15s;
}
.modern-export-menu button:hover:not(:disabled){
  background:var(--surface2);
  color:var(--accent);
}
.modern-export-menu button:disabled{
  opacity:0.4;cursor:not-allowed;
}
.export-dot{
  width:7px;height:7px;border-radius:50%;
  display:inline-block;flex-shrink:0;
}
.dot-green{background:#10b981}
.dot-red{background:#ef4444}
.dot-purple{background:#8b5cf6}
.dot-yellow{background:#f59e0b}
.export-opt-count{
  margin-left:auto;
  font-size:10.5px;
  font-weight:600;
  color:var(--text2);
  background:var(--surface2);
  padding:1px 6px;
  border-radius:10px;
  border:1px solid var(--border);
}
.export-menu-divider{
  height:1px;background:var(--border);margin:4px 0;
}

/* Save Group */
.header-save-group{
  display:inline-flex;align-items:center;gap:8px;
}
.save-status{
  font-size:11px;padding:4px 10px;border-radius:6px;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);white-space:nowrap;
}
.save-status.saving{color:var(--yellow);background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2)}
.save-status.saved{color:var(--green);background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.2)}
.save-status.error{color:var(--red);background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2)}

.hbtn-green{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:8px;
  font-size:12px;font-weight:600;
  color:#10b981;background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.28);
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.hbtn-green:hover{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.45);
}

/* Icon Buttons (Theme toggle, etc.) */
.hbtn-icon{
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s;padding:0;flex-shrink:0;
}
.hbtn-icon span{
  display:none !important;
}
.hbtn-icon svg{
  opacity: 0.9;
}
.hbtn-icon:hover{
  background:var(--surface3);color:var(--text);border-color:var(--border-strong);
}
.hbtn-icon-green{
  color:#10b981;background:rgba(16,185,129,.08);
  border-color:rgba(16,185,129,.25);
}
.hbtn-icon-green:hover{
  background:rgba(16,185,129,.16);
}

/* User Profile Dropdown in Header */
.user-header-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.user-header-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 4px 12px 4px 4px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  text-decoration: none;
}

.user-header-profile-btn:hover {
  background: var(--surface3);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.user-header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}

.user-header-avatar .user-avatar-img,
.user-dd-avatar-large .user-avatar-img,
.mobile-user-avatar .user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-header-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.user-header-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-header-role {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text2);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chevron {
  color: var(--text2);
  transition: transform 0.2s ease;
}

.user-header-profile-btn.active .user-chevron {
  transform: rotate(180deg);
}

/* Dropdown Card */
.user-dropdown-card {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  z-index: 1000;
  display: none;
  overflow: hidden;
  animation: ddFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-dropdown-card.show {
  display: block;
}

@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dd-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
}

.user-dd-avatar-large {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.35);
}

.user-dd-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 2px;
}

.user-dd-details strong {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dd-email {
  font-size: 11.5px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dd-inst {
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dd-divider {
  height: 1px;
  background: var(--border);
}

.user-dd-links {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-dd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.user-dd-link svg {
  color: var(--text2);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.user-dd-link:hover {
  background: var(--surface2);
  color: var(--accent);
}

.user-dd-link:hover svg {
  color: var(--accent);
}

.user-dd-footer {
  padding: 8px;
  background: var(--surface2);
}

.user-dd-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--red);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.user-dd-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}

.auth-link-btn {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.auth-link-btn:hover {
  opacity: 0.8;
}

/* Onglets Connexion / Inscription */
.auth-mode-tabs {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin: 14px 0 16px 0;
  gap: 3px;
}
.auth-mode-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.auth-mode-tab:hover {
  color: var(--text);
}
.auth-mode-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.auth-switch-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  margin-left: 3px;
}
.auth-switch-link:hover {
  opacity: 0.85;
}

/* Card de confirmation épurée et moderne pour mot de passe oublié */
.forgot-success-card {
  text-align: center;
  padding: 24px 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 4px;
  animation: fadeInModal 0.25s ease;
}
.forgot-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px auto;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}
.forgot-success-card h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.forgot-success-desc {
  font-size: 12px;
  color: var(--text2);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.forgot-email-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 20px;
  margin-bottom: 12px;
  word-break: break-all;
}
.forgot-success-hint {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0;
}
/* ===== BUTTONS ===== */
.btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(249,115,22,.4)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-include{background:rgba(52,211,153,.15);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.btn-include:hover{background:rgba(52,211,153,.25)}
.btn-exclude{background:rgba(248,113,113,.15);color:var(--red);border:1px solid rgba(248,113,113,.3)}
.btn-exclude:hover{background:rgba(248,113,113,.25)}
.btn-maybe{background:rgba(251,191,36,.15);color:var(--yellow);border:1px solid rgba(251,191,36,.3)}
.btn-maybe:hover{background:rgba(251,191,36,.25)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

/* ===== SECTIONS ===== */
@keyframes sectionIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

main{background:var(--bg)}

.section{
  max-width:1600px;margin:0 auto;
  padding:32px 28px;
  border-bottom:1px solid var(--border);
  animation:sectionIn .4s ease both;
}
.section:last-child{border-bottom:none}

/* En-tête de section avec numéro badge */
.section-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.section-header-text{
  display:flex;flex-direction:column;gap:2px;
}
.section-badge{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(249,115,22,.28);
}
.section-title{
  font-size:18px;font-weight:800;
  letter-spacing:-.3px;
  margin:0;
  color:var(--text);
  line-height:1.25;
}
.section-desc{color:var(--text2);font-size:12.5px;margin:0;line-height:1.45}

/* ===== IMPORT ===== */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:768px){.import-grid{grid-template-columns:1fr}}

.import-card{
  background:var(--surface);
  border:1.5px dashed var(--border-strong);
  border-radius:16px;
  padding:44px 32px;
  text-align:center;
  transition:all .3s;
  cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.import-card::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(249,115,22,.06) 0%, transparent 65%);
  pointer-events:none;
}
.import-card:hover{
  border-color:var(--accent);
  background:var(--card-bg-subtle);
  transform:translateY(-2px);
}
.import-card.drag-over{
  border-color:var(--accent);
  background:var(--card-bg-subtle);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.import-icon{font-size:44px;margin-bottom:14px;display:block}
.import-label{color:var(--text2);margin-bottom:16px;font-size:14px}

/* Carte unifiée stats + sources */
.import-stats-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* Ligne des 3 chiffres */
.stats-row{
  display:flex;
  align-items:stretch;
}
.stat-item{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px 16px;
  gap:6px;
  border-radius:12px;
  transition:all .2s ease;
}
.stat-item-clickable:hover{
  background:rgba(99,102,241,0.08);
  transform:translateY(-2px);
}
.stat-divider{
  width:1px;
  background:var(--border);
  margin:16px 0;
}
.stat-num{
  font-size:34px;font-weight:900;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
.stat-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.8px}

.sources-breakdown{
  border-top:1px solid var(--border);
  background:var(--surface2);
  overflow:hidden;
}
.sources-breakdown .src-header{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--text2);
  padding:10px 14px 8px;
  border-bottom:1px solid var(--border);
  background:var(--surface3);
}
.sources-breakdown .src-line{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-size:12px;font-weight:500;
  transition:background .15s;
}
.sources-breakdown .src-line:last-child{border-bottom:none}
.sources-breakdown .src-line:hover{background:var(--card-bg-subtle)}
.sources-breakdown .src-name{
  display:flex;align-items:center;gap:8px;
}
.sources-breakdown .src-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.sources-breakdown .src-count{
  font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:20px;
  background:rgba(249,115,22,.12);
  color:var(--accent2);
  border:1px solid rgba(249,115,22,.2);
}
.file-list{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.file-tag{
  background:var(--surface2);
  border:1px solid var(--border);
  padding:5px 8px 5px 12px;border-radius:20px;
  font-size:11.5px;color:var(--text);
  display:inline-flex;align-items:center;gap:7px;
  transition:all .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.file-tag:hover{
  background:var(--surface);
  border-color:rgba(249,115,22,.35);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.file-tag .check{color:var(--green);flex-shrink:0}
.file-tag-name{
  font-weight:500;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-tag-info{
  color:var(--text3);
  font-size:11px;
}
.file-tag-del{
  background:transparent;
  border:none;
  cursor:pointer;
  padding:3px;
  margin-left:2px;
  border-radius:50%;
  color:var(--text3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
  flex-shrink:0;
  line-height:1;
}
.file-tag-del:hover{
  background:rgba(239,68,68,0.15);
  color:var(--red);
  transform:scale(1.15);
}
.file-tag-del:active{
  transform:scale(0.95);
}


/* ===== SMART SCREENING ===== */
/* ===== SMART SCREENING & FILTERS MODERN DESIGN ===== */
.smart-presets-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.smart-presets-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.smart-presets-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.smart-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-preset-chip:hover {
  background: rgba(249, 115, 22, 0.1);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.smart-preset-chip:active {
  transform: translateY(0);
}
.smart-preset-chip svg {
  color: var(--accent);
}
.smart-undo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.smart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.smart-card:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.smart-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.smart-card-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.1);
  color: var(--accent);
  flex-shrink: 0;
}
.smart-card-title-group h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px 0;
  line-height: 1.3;
}
.smart-card-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text2);
  opacity: 0.8;
}
.smart-card p {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 12px;
  line-height: 1.5;
}

.smart-card textarea,
.smart-card input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
}
.smart-card textarea:focus,
.smart-card input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
  background: var(--surface);
}

.smart-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  flex-wrap: wrap;
}
.smart-count {
  font-size: 11px;
  color: var(--accent);
  margin-left: auto;
  font-weight: 600;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.smart-count.empty {
  color: var(--text2);
  background: var(--surface2);
  border-color: var(--border);
  opacity: 0.7;
}

.year-range {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.year-range input {
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.year-range span {
  color: var(--text2);
  font-size: 14px;
  font-weight: 700;
}

.doc-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 8px;
}
.doc-type-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text2);
  transition: all 0.15s ease;
  user-select: none;
}
.doc-type-list label:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.05);
}
.doc-type-list label:has(input:checked) {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--red);
  font-weight: 600;
}
#langList label:has(input:checked) {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-weight: 600;
}
.doc-type-list input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.smart-card-retracted {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.03), var(--surface));
}
.smart-card-retracted .smart-card-icon {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

.smart-card-oa {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04), var(--surface));
}
.smart-card-oa .smart-card-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.smart-card-undo {
  border-color: rgba(251, 146, 60, 0.25);
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.04), var(--surface));
}
.smart-card-undo .smart-card-icon {
  background: rgba(251, 146, 60, 0.12);
  color: var(--accent);
}

/* ===== PRISMA FLOW CONTAINER & GRID ===== */
.prisma-flow-container {
  overflow-x: auto;
  padding: 20px 0;
  width: 100%;
}
.prisma-grid {
  display: grid;
  grid-template-columns: 85px 1fr 36px 1.25fr;
  gap: 12px 10px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
.prisma-grid-header {
  grid-column: 2 / span 3;
  background: #f59e0b;
  color: #111;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
}
.prisma-badge-col {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 12px;
  padding: 14px 4px;
  height: 100%;
  min-height: 80px;
  align-self: stretch;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.prisma-badge-col span {
  display: inline-block;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  line-height: 1;
  text-align: center;
  margin: 0 auto;
}
.id-badge {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  min-height: 130px;
}
.screening-badge {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
}
.included-badge {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
  min-height: 95px;
}

/* ===== EXPORT BLANC ACADÉMIQUE / PUBLICATION POUR PRISMA FLOW ===== */
.prisma-theme-white-export {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 30px 40px !important;
  box-sizing: border-box !important;
  width: 1040px !important;
  max-width: 1040px !important;
  min-width: 1040px !important;
  overflow: visible !important;
}
.prisma-theme-white-export .prisma-grid {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: 85px 1fr 36px 1.28fr !important;
  gap: 14px 14px !important;
  margin: 0 auto !important;
}
.prisma-theme-white-export .prisma-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.prisma-theme-white-export .prisma-box .box-title {
  color: #334155 !important;
}
.prisma-theme-white-export .prisma-box .box-count {
  color: #0f172a !important;
}
.prisma-theme-white-export .prisma-box .box-details,
.prisma-theme-white-export .prisma-box .box-details-reasons {
  color: #475569 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.prisma-theme-white-export .prisma-box .box-details strong {
  color: #0f172a !important;
}
.prisma-theme-white-export .prisma-removed {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.prisma-theme-white-export .prisma-removed .box-title {
  color: #991b1b !important;
}
.prisma-theme-white-export .prisma-removed .box-count,
.prisma-theme-white-export .prisma-removed strong {
  color: #dc2626 !important;
}
.prisma-theme-white-export .prisma-included {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}
.prisma-theme-white-export .prisma-included .box-title {
  color: #166534 !important;
}
.prisma-theme-white-export .prisma-included .box-count,
.prisma-theme-white-export .prisma-included strong {
  color: #16a34a !important;
}
.prisma-theme-white-export .prisma-arrow-h-col,
.prisma-theme-white-export .prisma-arrow-v-col {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
}
.prisma-theme-white-export .id-badge {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  min-height: 130px !important;
}
.prisma-theme-white-export .screening-badge {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
}
.prisma-theme-white-export .included-badge {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
  min-height: 95px !important;
}
.prisma-theme-white-export .included-left {
  min-height: 95px !important;
}
.prisma-theme-white-export .prisma-grid-header {
  background: #f59e0b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.prisma-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12px;
  box-shadow: var(--shadow);
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}
.prisma-box.included-left {
  min-height: 95px;
}
.prisma-box .box-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}
.prisma-box .box-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.prisma-box .box-details {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}
.prisma-box .box-details strong {
  color: var(--text);
}
.prisma-box .box-details-reasons {
  font-size: 10px;
  color: var(--text2);
  line-height: 1.35;
  text-align: left;
  padding-left: 2px;
}
.prisma-removed {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}
.prisma-removed strong, .prisma-removed .box-count {
  color: var(--red);
}
.prisma-included {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.08);
}
.prisma-included strong, .prisma-included .box-count {
  color: var(--green);
}
.prisma-arrow-h-col {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  opacity: 0.6;
}
.prisma-arrow-h-col .arrow-svg {
  width: 20px;
  height: 20px;
}
.prisma-arrow-v-col {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  opacity: 0.6;
  height: 20px;
}
.prisma-arrow-v-col .arrow-svg-v {
  width: 20px;
  height: 20px;
}

.prisma-pending{
  border-color:rgba(251,191,36,.3);
  background:rgba(251,191,36,.05);
}
.prisma-pending strong{color:var(--yellow)}

/* Tableau de bord d'avancement multi-dimensions */
.workspace-progress-dashboard {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}
.progress-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.progress-dashboard-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.progress-dashboard-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(139, 92, 246, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.workspace-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.progress-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.progress-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.progress-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.progress-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.progress-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text2);
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}
.progress-fill.fill-screening {
  background: linear-gradient(90deg, #059669, #10b981);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}
.progress-fill.fill-pdf {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}
.progress-fill.fill-notes {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.progress-fill.fill-exclusions {
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

.progress-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.progress-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  cursor: help;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.progress-help-icon:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
  transform: scale(1.08);
}
.progress-help-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  transform: translateY(4px);
  width: 270px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  white-space: normal;
}
.progress-help-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 14px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--border) transparent transparent transparent;
}
.progress-help-wrap:hover .progress-help-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.progress-help-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.progress-help-tooltip p {
  margin: 0 0 8px 0;
}
.progress-help-formula {
  background: var(--surface2);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.progress-help-formula code {
  font-family: monospace;
  font-weight: 700;
  color: var(--accent);
}

/* ===== TOOLBAR ===== */
.toolbar{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:16px;align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  box-shadow:var(--shadow);
}
.search-box{flex:1;min-width:200px;position:relative}
.search-box input{
  width:100%;padding:8px 12px 8px 36px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);font-size:13px;font-family:inherit;
  transition:all .2s;
}
.search-box::before{
  content:'';
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  background-color:var(--text2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events:none;
}
.search-box input:focus{
  outline:none;border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 2px rgba(249,115,22,.15);
}
.toolbar select{
  padding:8px 12px;
  height:36px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:all .18s ease;
}
.toolbar select:hover{border-color:var(--accent)}
.toolbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(249,115,22,.15)}
.batch-actions{display:flex;gap:6px;align-items:center}
.selected-count{font-size:11.5px;color:var(--accent2);font-weight:600;padding:0 2px}
.toolbar-info{font-size:12px;color:var(--text2);font-weight:500;white-space:nowrap}
.page-nav{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:3px 6px;
}
.page-nav button{
  width:26px;
  height:26px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:all .15s ease;
}
.page-nav button:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
}
.page-nav button:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.page-nav select{
  height:26px;
  padding:0 6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-size:11px;
  cursor:pointer;
}
#pageInfo{padding:0 6px;font-weight:700;color:var(--text);font-size:11.5px}

/* ===== TABLE ===== */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead{background:var(--surface2);position:sticky;top:0;z-index:2}
th{
  padding:12px 14px;
  text-align:left;
  font-weight:700;
  color:var(--text2);
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.6px;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
th.sortable{cursor:pointer;user-select:none;transition:color .15s ease}
th.sortable:hover{color:var(--accent)}
td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:middle; /* Alignement parfait sur la même ligne */
  color:var(--text);
  transition:background-color .15s ease;
}
tr:last-child td{border-bottom:none}
tr{background:var(--surface);transition:background-color .15s ease}
tr:hover td{background:var(--surface2)}
tr.selected td{background:rgba(249,115,22,.08) !important}

.title-cell{
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  font-size:13px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .15s ease;
}
.title-cell:hover{color:var(--accent)}
.abstract-cell{
  color:var(--text2);
  font-size:11.5px;
  line-height:1.45;
  max-width:320px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.authors-cell{
  color:var(--text2);
  font-size:11.5px;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.row-num{
  font-size:11.5px;
  font-weight:600;
  color:var(--text2);
  opacity:0.75;
}
.empty-dash{
  color:var(--text2);
  opacity:0.35;
  font-weight:600;
}
.row-check, #checkAll{
  width:15px;
  height:15px;
  accent-color:var(--accent);
  cursor:pointer;
  margin:0;
  vertical-align:middle;
}

/* Badges de décision compacts et horizontaux */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 9px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  line-height:1;
  letter-spacing:0.2px;
  border:1px solid transparent;
}
.badge svg{flex-shrink:0}
.badge-pending{background:var(--surface2);color:var(--text2);border-color:var(--border)}
.badge-included{background:rgba(16,185,129,.12);color:#10b981;border-color:rgba(16,185,129,.28)}
.badge-excluded{background:rgba(239,68,68,.12);color:#ef4444;border-color:rgba(239,68,68,.28)}
.badge-maybe{background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.28)}
.badge-scopus{background:rgba(59,130,246,.1);color:#3b82f6;border-color:rgba(59,130,246,.25)}
.badge-wos{background:rgba(249,115,22,.1);color:var(--accent);border-color:rgba(249,115,22,.25)}
.badge-springer{background:rgba(16,185,129,.1);color:#10b981;border-color:rgba(16,185,129,.25)}

/* Boutons d'action */
.action-btns{display:flex;gap:5px;align-items:center;justify-content:center}
.action-btns button{
  width:28px;
  height:28px;
  border-radius:7px;
  border:1px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
}
.act-include{background:rgba(16,185,129,.12);color:#10b981;border-color:rgba(16,185,129,.25)}
.act-include:hover{background:#10b981;color:#fff;border-color:#10b981;transform:scale(1.06)}
.act-exclude{background:rgba(239,68,68,.12);color:#ef4444;border-color:rgba(239,68,68,.25)}
.act-exclude:hover{background:#ef4444;color:#fff;border-color:#ef4444;transform:scale(1.06)}
.act-view{background:rgba(249,115,22,.12);color:var(--accent);border-color:rgba(249,115,22,.25)}
.act-view:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.06)}

/* ===== MODAL ===== */
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}

.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay{position:absolute;inset:0;background:var(--modal-overlay);backdrop-filter:blur(6px)}

.modal-content{
  position:relative;z-index:1;
  background:var(--modal-bg);
  border:1px solid var(--border);
  border-radius:20px;
  max-width:min(980px, 94vw);width:100%;
  max-height:94vh;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation:modalIn .28s cubic-bezier(.34,1.56,.64,1) both;
  overflow:hidden;
  transition:max-width .22s cubic-bezier(.4,0,.2,1), max-height .22s cubic-bezier(.4,0,.2,1), border-radius .22s ease;
}
.modal-content.modal-maximized {
  max-width: 98vw;
  width: 98vw;
  height: 96vh;
  max-height: 96vh;
  border-radius: 12px;
}

/* Barre du haut modale standardisée */
.modal-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.modal-header-left{
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
.modal-icon-badge{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.modal-title-clean{
  font-size:16px;font-weight:700;
  color:var(--text);margin:0;
  line-height:1.3;
}
.modal-subtitle-clean{
  font-size:12px;color:var(--text2);
  margin:2px 0 0 0;line-height:1.4;
}
.modal-topbar-actions{display:flex;align-items:center;gap:8px}
.modal-shortcut-hint{font-size:11px;color:var(--text2);letter-spacing:.3px}
.modal-counter{
  font-size:12px;font-weight:600;color:var(--text2);
  background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.2);
  padding:3px 10px;border-radius:20px;
}
.modal-expand-btn{
  width:32px;height:32px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);border-radius:8px;
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s ease;
  flex-shrink:0;
}
.modal-expand-btn:hover{
  color:var(--accent);
  border-color:rgba(249,115,22,.4);
  background:rgba(249,115,22,.1);
}
.modal-close{
  width:32px;height:32px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);border-radius:8px;
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s ease;
  flex-shrink:0;
}
.modal-close:hover{
  color:var(--red);
  border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.1);
  transform:rotate(90deg);
}

/* Corps scrollable */
.modal-body-scroll{
  overflow-y:auto;
  flex:1;
  padding:20px 24px;
}
.modal-content > h2,
.modal-content > .modal-meta,
.modal-content > .modal-chips,
.modal-content > .modal-abstract-section,
.modal-content > .modal-file-upload{
  padding-left:24px;padding-right:24px;
}

.modal-title{
  font-size:18px;font-weight:700;
  line-height:1.45;
  padding:18px 24px 10px;
  color:var(--text);
}

/* Meta ligne */
.modal-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;padding:0 24px 10px;
  font-size:12px;
}
.modal-authors{color:var(--text2);font-size:12px}
.modal-badge-year{background:rgba(59,130,246,.12);color:var(--blue)}
.modal-journal{color:var(--text2);font-size:12px;font-style:italic}

/* DOI + keywords */
.modal-chips{padding:0 24px 12px;display:flex;flex-direction:column;gap:8px}
.modal-doi{font-size:12px;color:var(--text2)}
.modal-doi a{color:var(--accent2);text-decoration:none;background:rgba(249,115,22,.1);padding:2px 8px;border-radius:6px;border:1px solid rgba(249,115,22,.2)}
.modal-doi a:hover{background:rgba(249,115,22,.2)}
.modal-keywords{display:flex;flex-wrap:wrap;gap:5px}
.modal-keywords .kw{
  background:var(--surface2);
  border:1px solid var(--border);
  padding:2px 9px;border-radius:14px;
  font-size:10px;color:var(--text2);
}

/* Abstract */
.modal-abstract-section{padding:0 24px 16px}
.modal-section-label-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.modal-section-label{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--text2);
}
.modal-edit-btn{
  font-size:10px;font-weight:600;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.2);
  color:var(--accent2);
  padding:3px 9px;border-radius:6px;
  cursor:pointer;transition:all .15s;
}
.modal-edit-btn:hover{background:rgba(249,115,22,.2);border-color:rgba(249,115,22,.4)}
.modal-edit-btn.active{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:var(--green)}

.fetch-abstract-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;font-size:10.5px;font-weight:600;
  border-radius:6px;
  background:rgba(139,92,246,0.12);
  color:var(--accent);
  border:1px solid rgba(139,92,246,0.28);
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.fetch-abstract-pill:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(139,92,246,0.3);
}

.modal-abstract{
  color:var(--text);font-size:13.5px;line-height:1.75;
  padding:16px 18px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}
.modal-abstract-edit{
  width:100%;min-height:180px;
  padding:14px 16px;
  background:var(--input-bg);
  border:1px solid var(--accent);
  border-radius:10px;
  color:var(--text);font-size:13px;
  font-family:inherit;line-height:1.75;
  resize:vertical;box-sizing:border-box;
  transition:border-color .2s;
}
.modal-abstract-edit:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(249,115,22,.15)}

/* Tabs */
.modal-tabs{
  display:flex;gap:2px;
  padding:0 24px;
  border-bottom:1px solid var(--border);
  margin-top:4px;
}
.modal-tab{
  padding:10px 18px;font-size:12.5px;font-weight:600;
  background:none;border:none;
  color:var(--text2);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .2s;margin-bottom:-1px;
  font-family:inherit;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  white-space:nowrap;
  flex-shrink:0;
}
.modal-tab:hover{color:var(--text); background:var(--surface2);}
.modal-tab.active{color:var(--accent);border-bottom:2px solid var(--accent); background:rgba(249,115,22,0.06);}

/* Tab content */
.modal-tab-content{
  overflow-y:auto;
  flex:1;min-height:0;
  padding:16px 0;
}

/* Fiche de lecture sections */
.fiche-section{
  padding:12px 24px;
  border-bottom:1px solid var(--border);
}
.fiche-section:last-child{border-bottom:none}

.fiche-textarea{
  width:100%;min-height:120px;
  padding:12px 14px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);font-size:13px;
  font-family:inherit;line-height:1.7;
  resize:vertical;box-sizing:border-box;
  transition:border-color .2s;
}
.fiche-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(249,115,22,.12)}

.fiche-autosave{
  font-size:10px;color:var(--text2);
  padding:2px 8px;border-radius:10px;
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.15);
  color:var(--green);opacity:0;
  transition:opacity .3s;
}
.fiche-autosave.visible{opacity:1}

/* Grille d'extraction PICOS */
.picos-extraction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.picos-field-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.picos-field-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.12);
}
.picos-field-full {
  grid-column: 1 / -1;
}
.picos-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.picos-letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  flex-shrink: 0;
}
.picos-letter-badge.picos-p {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.picos-letter-badge.picos-i {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.picos-letter-badge.picos-c {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.picos-letter-badge.picos-o {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.picos-letter-badge.picos-s {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}
.picos-label-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.picos-textarea {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}
.picos-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
@media (max-width: 680px) {
  .picos-extraction-grid {
    grid-template-columns: 1fr;
  }
}

/* Galerie de graphes */
.fiche-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px;margin-bottom:4px;
}
.fiche-gallery-item{
  position:relative;border-radius:8px;overflow:hidden;
  aspect-ratio:4/3;border:1px solid var(--border);
  background:var(--surface2);
  cursor:pointer;transition:transform .2s;
}
.fiche-gallery-item:hover{transform:scale(1.03)}
.fiche-gallery-item img{width:100%;height:100%;object-fit:cover}
.fiche-gallery-item .del-graph{
  position:absolute;top:4px;right:4px;
  width:20px;height:20px;border-radius:4px;
  background:rgba(239,68,68,.85);
  color:#fff;font-size:11px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.fiche-gallery-item:hover .del-graph{opacity:1}

/* Reason textarea dans footer */
.reason-textarea{
  resize:none;min-height:38px;
  line-height:1.4;padding:8px 10px;
}

/* Header zone */
.modal-header-zone{
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
}
.modal-header-zone .modal-title{padding-bottom:8px}
.modal-header-zone .modal-meta{padding-bottom:8px}
.modal-header-zone .modal-chips{padding-bottom:10px}

/* File upload */
.modal-file-upload{
  padding:12px 24px 16px;
  border-top:1px solid var(--border);
}
.file-upload-label{
  flex:1;display:flex;align-items:center;gap:8px;cursor:pointer;
}
.file-upload-btn{
  padding:5px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;font-size:11px;font-weight:600;
  color:var(--text2);white-space:nowrap;cursor:pointer;
  transition:all .15s;
}
.file-upload-label:hover .file-upload-btn{border-color:var(--accent);color:var(--text)}
.file-upload-name{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Upload Progress Bar & Metrics */
.upload-progress-box{display:flex;flex-direction:column;gap:3px;min-width:140px;max-width:200px}
.upload-progress-wrap{width:100%;height:6px;background:var(--surface3);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:999px;width:0%;transition:width .15s ease-out}
.upload-progress-text{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px;white-space:nowrap}
.upload-progress-text strong{color:var(--accent);font-weight:700}

/* Footer décision sticky */
.modal-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;
  border-top:1px solid var(--border);
  background:var(--surface);
  backdrop-filter:blur(8px);
  flex-shrink:0;
  flex-wrap:wrap;
}
.modal-decision-zone{
  flex:1;min-width:260px;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}

.decision-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;}
.decision-buttons .btn{
  flex:1;min-width:96px;max-width:160px;
  justify-content:center;
  padding:8px 12px;font-size:12px;
}
.decision-buttons .btn.active{box-shadow:0 0 0 2px var(--accent), 0 0 16px rgba(249,115,22,.4)}
.decision-buttons kbd{
  font-size:9px;
  background:var(--surface2);
  border:1px solid var(--border);
  padding:1px 4px;border-radius:3px;
  font-family:inherit;margin-left:4px;
  opacity:.8;
  color:var(--text);
}

.reason-row{display:flex;gap:6px;width:100%;max-width:540px;flex-wrap:wrap;}
.reason-input{
  flex:1;min-width:140px;padding:7px 10px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-size:11.5px;font-family:inherit;
  transition:border-color .2s;
}
.reason-input:focus{outline:none;border-color:var(--accent)}

/* Boutons de navigation Précédent / Suivant du footer */
.modal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.modal-nav-btn:hover {
  background: var(--surface3);
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.modal-nav-btn:active {
  transform: translateY(0);
}
.modal-nav-prev {
  color: var(--text2);
}
.modal-nav-prev:hover {
  color: var(--text);
}
.modal-nav-next {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--accent);
  font-weight: 700;
}
.modal-nav-next:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Preview modal */
.preview-content{max-width:760px;max-height:85vh}
.preview-list{
  max-height:360px;
  overflow-y:auto;
  margin:10px 0 0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
.preview-item{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  font-size:12.5px;
  color:var(--text2);
  line-height:1.45;
  transition:background .15s ease;
}
.preview-item:last-child{border-bottom:none}
.preview-item:hover{background:var(--surface3)}
.preview-item strong{color:var(--text);font-weight:600}

/* ===== BOOLEANS MODAL ===== */
.booleans-container{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
  max-height:45vh;
  overflow-y:auto;
  padding-right:4px;
}
.bool-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.bool-card:hover, .bool-card:focus-within{
  border-color:rgba(249,115,22,.4);
  box-shadow:0 4px 12px rgba(249,115,22,.08);
}
.bool-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.bool-platform-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.bool-platform-dot{
  width:8px;height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.bool-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.bool-copy-btn{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:all .15s ease;
}
.bool-copy-btn:hover{
  background:var(--surface3);
  color:var(--accent);
  border-color:rgba(249,115,22,.35);
}
.bool-del-btn{
  background:transparent;
  border:1px solid rgba(239,68,68,.2);
  color:var(--red);
  font-size:11px;
  font-weight:600;
  padding:4px 9px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:all .15s ease;
}
.bool-del-btn:hover{
  background:rgba(239,68,68,.12);
  border-color:var(--red);
}
.bool-textarea{
  width:100%;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px;
  line-height:1.6;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  color:var(--text);
  box-sizing:border-box;
  resize:vertical;
  min-height:68px;
  transition:border-color .2s, background-color .2s;
}
.bool-textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}

/* Empty state pour les équations */
.bool-empty-state{
  text-align:center;
  padding:34px 20px;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:14px;
  color:var(--text2);
}
.bool-empty-icon{
  width:42px;height:42px;
  border-radius:10px;
  background:rgba(249,115,22,.12);
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}
.bool-empty-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}
.bool-empty-desc{
  font-size:12px;
  color:var(--text2);
  max-width:380px;
  margin:0 auto;
  line-height:1.5;
}

/* Barre d'ajout d'équation */
.add-boolean-bar{
  display:flex;
  gap:10px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  padding:10px 14px;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.add-boolean-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text2);
  white-space:nowrap;
}
.bool-platform-select{
  flex:1;
  max-width:200px;
  padding:7px 10px;
  font-size:12.5px;
}

/* ===== SNOWBALLING MODAL FORM ===== */
.modal-form-grid{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.form-label{
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  display:flex;
  align-items:center;
  gap:4px;
}
.form-label .required{color:var(--red)}
.form-input, .form-textarea{
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  font-size:12.5px;
  font-family:inherit;
  transition:all .2s ease;
}
.form-input:focus, .form-textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.form-row-2{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:12px;
}

/* ===== TUTORIAL MODAL ===== */
.tutorial-steps-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.tutorial-step-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  transition:transform .15s, border-color .15s;
}
.tutorial-step-card:hover{
  border-color:rgba(249,115,22,.35);
  transform:translateY(-1px);
}
.tutorial-step-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.tutorial-step-num{
  width:22px;height:22px;
  border-radius:6px;
  background:rgba(249,115,22,.12);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.tutorial-step-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.tutorial-step-desc{
  font-size:12px;
  line-height:1.55;
  color:var(--text2);
  margin:0;
}
.tutorial-tip-box{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 16px;
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.25);
  border-radius:10px;
  color:var(--text);
  font-size:12px;
  line-height:1.55;
}


/* ===== SPLIT LOGIN & DONATION SCREEN ===== */
.auth-split-container {
  display: flex;
  width: 100%;
  max-width: 1100px;
  min-height: 560px;
  z-index: 1;
  gap: 40px;
  padding: 20px;
  align-items: stretch;
}

.auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-left {
  justify-content: flex-end;
}

.auth-right {
  justify-content: flex-start;
}

/* Mobile Controls in Header (hidden by default on desktop) */
.header-mobile-bar {
  display: none;
  align-items: center;
  gap: 8px;
}

.mobile-only-btn {
  display: none;
}

.desktop-only-btn {
  display: inline-flex;
}

.menu-mobile-heading {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 56px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 98;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mobile-menu-backdrop.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Bouton Hamburger animé */
.mobile-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: all .2s ease;
  flex-shrink: 0;
}
.mobile-menu-btn:hover {
  background: var(--surface3);
  border-color: var(--accent);
}
.hamburger-line {
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}
.mobile-menu-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Onglets de bascule mobile sur la page de connexion */
.auth-mobile-tabs {
  display: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 30px;
  gap: 4px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.auth-mobile-tab {
  flex: 1;
  padding: 8px 14px;
  border-radius: 24px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s ease;
}
.auth-mobile-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.auth-mobile-switch-link {
  display: none;
  margin-top: 14px;
  text-align: center;
}
.auth-mobile-switch-link button {
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  padding: 6px 10px;
  border-radius: 6px;
}
.auth-mobile-switch-link button:hover {
  color: var(--accent);
  background: rgba(249, 115, 22, 0.08);
}
.auth-mobile-switch-back {
  margin-top: 0;
  margin-bottom: 12px;
  text-align: left;
}

/* Donation Card style */
.donation-card {
  background: var(--auth-box-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--auth-box-border);
  border-radius: 24px;
  padding: 40px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--auth-box-shadow);
  animation: authFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.donation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.donation-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
  letter-spacing: -0.5px;
}

.donation-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 24px;
  text-align: left;
}

/* bank card preview style */
.bank-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  text-align: left;
  color: #fff;
}

.bank-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.bank-logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bank-brand {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
}

.bank-chip {
  font-size: 22px;
}

.bank-holder-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.bank-holder-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.bank-info-item {
  margin-bottom: 12px;
}

.bank-info-item:last-child {
  margin-bottom: 0;
}

.bank-info-label {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.bank-copyable-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 8px;
}

.bank-info-value {
  font-family: monospace;
  font-size: 12px;
  color: #fff;
  user-select: all;
  letter-spacing: 0.5px;
}

.btn-copy-mini {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-copy-mini:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Button to delete existing session */
.session-delete-btn {
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}
.session-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

/* Header hover dropdown menu */
.hdropdown {
  position: relative;
  display: inline-block;
}

.hdropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  margin-top: 5px;
  padding: 6px 0;
}

.hdropdown-content button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.hdropdown-content button:hover {
  background: var(--card-bg-subtle);
  color: var(--accent);
}

/* Show on hover or when open class is active, but only if the trigger is not disabled */
.hdropdown:hover .hdropdown-content,
.hdropdown.open .hdropdown-content {
  display: block;
}

.hdropdown button:disabled ~ .hdropdown-content {
  display: none !important;
}

/* ===== THESIS CARD ===== */
.thesis-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  position: relative;
}

.thesis-title-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.thesis-summary-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap; /* Preserve linebreaks in summary */
}

/* ===== MEDIA QUERIES RESPONSIVE MOBILE & TABLETTE ===== */

/* Desktop (> 1200px) : Masquer rigoureusement le tiroir mobile */
@media (min-width: 1201px) {
  .mobile-drawer,
  .mobile-menu-backdrop,
  .header-mobile-bar {
    display: none !important;
  }
}

/* Tablettes & Écrans compacts (<= 1200px) : Mode Menu Burger & Tiroir */
@media (max-width: 1200px) {
  .desktop-nav {
    display: none !important;
  }
  .header-mobile-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  .mobile-only-btn {
    display: inline-flex;
  }
  .header-inner {
    padding: 0 14px;
    height: 56px;
  }
}

/* Mobile Slide-Over Drawer / Offcanvas Menu */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .28s ease, visibility .28s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-drawer-inner {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  gap: 14px;
}
.mobile-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-user-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.mobile-user-tag {
  font-size: 11px;
  color: #10b981;
  font-weight: 500;
}
.mobile-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .18s;
}
.mobile-drawer-close:hover {
  color: var(--text);
  background: var(--surface3);
}

/* Active Project in Mobile Drawer */
.mobile-drawer-project {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .18s;
}
.mobile-drawer-project:hover {
  border-color: var(--accent);
  background: var(--surface3);
}
.mobile-dp-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-dp-info {
  flex: 1;
  min-width: 0;
}
.mobile-dp-tag {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text2);
}
.mobile-dp-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-dp-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 10px;
}

.mobile-drawer-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text2);
  margin-top: 2px;
}
.mobile-nav-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: all .18s;
  text-align: left;
  width: 100%;
}
.mobile-card-item:hover {
  background: var(--surface3);
  border-color: var(--accent);
  transform: translateX(2px);
}
.mobile-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-blue { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.icon-cyan { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.icon-purple { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.icon-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.icon-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

.mobile-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.mobile-card-text strong {
  font-size: 12.5px;
  color: var(--text);
}
.mobile-card-text span {
  font-size: 10.5px;
  color: var(--text2);
}

.mobile-drawer-exports {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-export-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all .18s;
}
.mobile-export-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
}
.mobile-drawer-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.mobile-save-btn:hover {
  background: rgba(16, 185, 129, 0.2);
}
.mobile-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.mobile-logout-btn:hover {
  background: rgba(239, 68, 68, 0.16);
}

/* Smartphone portrait (<= 480px) */
@media (max-width: 480px) {
  .project-pill-btn {
    padding: 5px 8px;
    gap: 6px;
    max-width: 160px;
  }
  .project-pill-name {
    max-width: 75px;
    font-size: 11.5px;
  }
  .project-pill-tag {
    display: none;
  }
  .project-pill-count {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .mobile-drawer {
    width: 100%;
    max-width: 100vw;
  }
}

/* Smartphones (<= 860px) : Écran de connexion et sections */
@media (max-width: 860px) {
  .auth-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 14px 40px;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    height: auto;
    position: fixed;
    inset: 0;
  }
  
  .auth-split-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    min-height: auto;
    gap: 0;
    padding: 0;
    margin: auto 0;
  }

  .auth-mobile-tabs {
    display: flex;
  }
  .auth-mobile-switch-link {
    display: block;
  }

  .auth-panel {
    width: 100%;
    max-width: 440px;
    justify-content: center !important;
  }

  .auth-left.mobile-hidden,
  .auth-right.mobile-hidden {
    display: none !important;
  }

  .auth-box {
    padding: 28px 20px 22px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .auth-logo-img {
    width: 62px;
    height: 62px;
    margin-bottom: 8px;
  }
  .auth-box h2 {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .auth-sub {
    font-size: 12px;
    margin-bottom: 18px;
    line-height: 1.45;
  }

  /* Éviter le zoom automatique Safari iOS sur les champs */
  .auth-input {
    font-size: 16px;
  }

  .donation-card {
    padding: 24px 18px 22px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .donation-card h3 {
    font-size: 18px;
  }
  .donation-desc {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .bank-card {
    padding: 16px;
    border-radius: 14px;
  }
  .bank-holder-value {
    font-size: 13.5px;
    margin-bottom: 14px;
  }
  .bank-copyable-row {
    padding: 8px 10px;
    gap: 6px;
  }
  .bank-info-value {
    font-size: 11px;
    letter-spacing: 0;
    word-break: break-all;
  }
  .btn-copy-mini {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
  }
}

/* Petits écrans smartphone (<= 480px) */
@media (max-width: 480px) {
  .logo h1 {
    font-size: 15px;
  }
  .subtitle {
    display: none;
  }
  .logo-img {
    width: 30px;
    height: 30px;
  }
  .header-inner {
    padding: 0 12px;
  }
  .section {
    padding: 16px 12px;
    border-radius: 14px;
  }
  .section-title {
    font-size: 15px;
  }
  .modal {
    padding: 10px;
  }
  .modal-content {
    border-radius: 16px;
    max-height: 94vh;
  }
  .modal-topbar {
    padding: 12px 14px;
  }
  .modal-body-scroll {
    padding: 14px;
  }
  .modal-footer {
    padding: 12px 14px;
  }
  .add-boolean-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .add-boolean-bar select, .add-boolean-bar input {
    max-width: 100%;
  }
}

/* ===== MATRICE D'EXTRACTION & PRISMA 2020 DASHBOARD ===== */
.matrix-container {
  margin-top: 50px;
  margin-bottom: 50px;
}
.matrix-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.matrix-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 480px;
}
.matrix-search-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.matrix-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.matrix-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text2);
  pointer-events: none;
}
.matrix-wrap {
  max-height: 620px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.matrix-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface2);
}
.matrix-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
}
.matrix-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  font-size: 12.5px;
}
.matrix-table tr:hover td {
  background: var(--table-hover);
}
.matrix-table tr:last-child td {
  border-bottom: none;
}
.matrix-article-title {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 5px;
}
.matrix-doi-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-top: 2px;
}
.matrix-doi-link:hover {
  text-decoration: underline;
}
.matrix-meta-authors {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.matrix-notes-preview {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  background: var(--surface2);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  max-height: 85px;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}
.matrix-no-notes {
  font-size: 11.5px;
  color: var(--text2);
  font-style: italic;
  opacity: 0.6;
}
.prisma-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  transition: all .15s ease;
}
.prisma-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(139, 92, 246, 0.08);
}

/* ===== MULTI-PROJETS PRISMA STYLES ===== */
.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-nav-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.project-pill-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.project-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 14px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  max-width: 320px;
}

.project-pill-btn:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.project-pill-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-pill-text-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.project-pill-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text2);
}

.project-pill-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.project-pill-count {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.project-pill-chevron {
  transition: transform .2s ease;
  color: var(--text2);
}

.project-pill-btn.open .project-pill-chevron {
  transform: rotate(180deg);
}

/* ===== BANNIÈRE DE PROJET ACTIVE (DANS LA PAGE) ===== */
.workspace-project-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.workspace-project-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--blue) 100%);
}

.wpb-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.wpb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.wpb-info {
  min-width: 0;
  flex: 1;
}

.wpb-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.wpb-badge-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--accent);
}

.wpb-badge-status {
  font-size: 10px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 1px 7px;
  border-radius: 10px;
}

.wpb-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpb-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
}

.wpb-meta-count {
  font-weight: 600;
  color: var(--text);
}

.wpb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .header-nav-divider { display: none; }
  .header-brand-wrap { gap: 8px; }
  .workspace-project-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
  }
  .wpb-right {
    width: 100%;
    flex-wrap: wrap;
  }
  .wpb-right .btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .project-pill-tag { display: none; }
  .project-pill-count { display: none; }
  .project-pill-name { max-width: 110px; font-size: 12px; }
  .project-pill-btn { padding: 4px 8px; gap: 6px; }
}

.project-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  z-index: 1050;
  padding: 8px;
  display: none;
  animation: fadeInDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-dd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.project-dd-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.project-dd-manage-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background .15s ease;
}

.project-dd-manage-btn:hover {
  background: rgba(139, 92, 246, 0.1);
}

.project-dd-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px;
}

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.project-item:hover {
  background: var(--surface2);
  border-color: var(--border);
}

.project-item.active {
  background: rgba(139, 92, 246, 0.09);
  border-color: rgba(139, 92, 246, 0.3);
}

.project-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.project-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-item.active .project-item-title {
  color: var(--accent);
}

.project-item-meta {
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-item-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.project-item.active .project-item-badge {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.project-dd-footer {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* Manage Projects Enhanced Styling */
.manage-projects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 2px;
}

.modal-content.modal-manage-projects {
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: 860px !important;
}

.manage-project-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  position: relative;
}

.manage-project-card:hover {
  background: var(--surface2);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

.manage-project-card.is-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.1);
}

.manage-project-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.manage-project-card.is-active .manage-project-icon {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.manage-project-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manage-project-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.manage-project-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.manage-project-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.proj-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}

.proj-badge-default {
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.28);
}

.proj-badge-active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.manage-project-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap !important;
  overflow: hidden;
  line-height: 1.4;
}

.mp-meta-item {
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.mp-meta-item strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 3px;
}

.mp-meta-dot {
  color: var(--text2);
  opacity: 0.4;
  flex-shrink: 0;
  user-select: none;
}

.mp-meta-desc {
  max-width: 180px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.manage-project-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.paction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.paction-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
  transform: translateY(-1px);
}

.paction-btn.paction-open {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: var(--accent);
}

.paction-btn.paction-open:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.paction-btn.paction-delete {
  color: var(--red);
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.paction-btn.paction-delete:hover {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

/* ===== PRISMA 2020 CHECKLIST & RESEARCH NOTES ===== */
.checklist-modal-dialog {
  width: 94%;
  max-width: 1040px;
  height: 90vh;
  max-height: 880px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalScaleIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chk-header {
  padding: 18px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chk-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.chk-header-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chk-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.18));
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chk-title-text h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chk-title-text p {
  font-size: 12px;
  color: var(--text2);
  margin: 2px 0 0 0;
}

/* Progress Card in Checklist Modal */
.chk-header-progress-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 255px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.chk-progress-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chk-progress-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
}

.chk-percent-pill {
  font-size: 13px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #10b981);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.chk-progress-bar-track {
  width: 100%;
  height: 9px;
  background: var(--surface3);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-subtle);
}

.chk-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #3b82f6 50%, #10b981);
  border-radius: 6px;
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.chk-progress-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chk-progress-count-text {
  font-size: 11px;
  color: var(--text2);
}

.chk-progress-count-text strong {
  color: var(--text);
  font-weight: 700;
}

.chk-mini-chips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chk-mini-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
}

.chk-mini-chip.chip-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}

.chk-mini-chip.chip-in_progress {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}

.chk-mini-chip.chip-todo {
  background: var(--surface3);
  color: var(--text2);
}

.chk-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chk-filter-tabs {
  display: inline-flex;
  background: var(--surface2);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
  gap: 2px;
}

.chk-filter-tab {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chk-filter-tab:hover {
  color: var(--text);
}

.chk-filter-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.chk-count-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--surface3);
  color: var(--text2);
}

.chk-filter-tab.active .chk-count-badge {
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent);
}

.chk-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chk-search-box {
  position: relative;
  min-width: 180px;
}

.chk-search-box input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font-size: 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  outline: none;
}

.chk-search-box input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.chk-search-box svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text2);
  pointer-events: none;
}

.chk-select-section {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  outline: none;
}

.chk-body-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bg);
}

/* Sections & Grid */
.checklist-section-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.checklist-sec-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.checklist-sec-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text2);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.checklist-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.checklist-item-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.checklist-item-card.status-completed {
  border-left: 4px solid #10b981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.04), var(--surface) 25%);
}

.checklist-item-card.status-in_progress {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.04), var(--surface) 25%);
}

.checklist-item-card.status-todo {
  border-left: 4px solid var(--border-strong);
}

.checklist-item-card.status-na {
  border-left: 4px solid var(--text2);
  opacity: 0.75;
}

.checklist-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.checklist-item-num {
  font-size: 11px;
  font-weight: 800;
  background: var(--surface2);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.checklist-item-topic {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 140px;
}

.checklist-status-selector {
  display: inline-flex;
  background: var(--surface2);
  padding: 2px;
  border-radius: 7px;
  border: 1px solid var(--border);
  gap: 2px;
}

.chk-status-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.chk-status-btn:hover {
  color: var(--text);
}

.chk-status-btn.active.status-completed {
  background: #10b981;
  color: #fff;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3);
}

.chk-status-btn.active.status-in_progress {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

.chk-status-btn.active.status-todo {
  background: var(--surface3);
  color: var(--text);
}

.chk-status-btn.active.status-na {
  background: var(--text2);
  color: #fff;
}

.checklist-item-desc {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.checklist-item-hint {
  font-size: 11.5px;
  color: var(--text2);
  background: var(--surface2);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.checklist-card-bottom {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.checklist-field-wrap {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.checklist-field-wrap label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
}

.checklist-input-loc {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: all .15s ease;
}

.checklist-textarea-notes {
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: all .15s ease;
}

.checklist-input-loc:focus,
.checklist-textarea-notes:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Journal / Notes Section */
.chk-notes-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chk-notes-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chk-notes-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  resize: vertical;
  outline: none;
}

.chk-notes-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* Footer Actions */
.chk-footer {
  padding: 14px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 768px) {
  .checklist-modal-dialog {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .chk-header, .chk-body-content, .chk-footer {
    padding: 12px 14px;
  }
  .chk-header-top, .chk-controls-bar, .chk-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .chk-header-progress-wrap {
    justify-content: space-between;
  }
}



/* ============================================================
   WORKSPACE LAYOUT — Step Navigator + Content
   ============================================================ */

.workspace-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 32px 60px;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* ---- Sticky Step Navigator (left sidebar) ---- */
.workspace-step-nav {
  position: sticky;
  top: 114px;
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: none;
}
.workspace-step-nav::-webkit-scrollbar {
  display: none;
}

.wsn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 12px;
  margin-bottom: 4px;
}

.wsn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.wsn-item:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

.wsn-item.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--accent);
  font-weight: 600;
}

.wsn-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.wsn-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.wsn-item.active .wsn-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wsn-text {
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsn-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 12px;
  opacity: 0.5;
}

.wsn-stats {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.wsn-stats-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.wsn-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.wsn-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wsn-stat-row span:last-child {
  font-weight: 700;
  color: var(--text);
}

.wsn-stat-row.duplicates span:last-child { color: var(--accent); }
.wsn-stat-row.uniques span:last-child { color: var(--text); }
.wsn-stat-row.included span:last-child { color: #10b981; }
.wsn-stat-row.excluded span:last-child { color: #f43f5e; }
.wsn-stat-row.maybe span:last-child { color: #8b5cf6; }
.wsn-stat-row.pending span:last-child { color: #f59e0b; }

/* ---- Main content area ---- */
.workspace-content {
  flex: 1;
  min-width: 0;
}

.section[id] {
  scroll-margin-top: 120px;
}

.workspace-content .section {
  margin-bottom: 32px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 28px 28px 24px;
  transition: box-shadow 0.2s;
}

.workspace-content .section:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,0.11);
}

.workspace-content .section.wsn-highlight {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 4px 28px rgba(99, 102, 241, 0.1);
  transition: box-shadow 0.4s;
}

@media (max-width: 1100px) {
  .workspace-step-nav {
    display: none;
  }
  .workspace-layout {
    padding: 20px 16px 60px;
    gap: 0;
  }
}

@media (max-width: 768px) {
  .workspace-layout {
    padding: 12px 8px 48px;
  }
}

/* ==========================================================================
   MODULE QUALITÉ MÉTHODOLOGIQUE & RISQUE DE BIAIS (PRISMA MIND)
   ========================================================================== */

/* 1. Onglet Qualité dans la Fiche Article */
.quality-tab-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 24px 80px 24px;
}

.quality-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 12px 18px;
  border-radius: 12px;
}

.quality-framework-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quality-meta-hint {
  font-size: 11.5px;
  color: var(--text2);
}

.quality-score-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), var(--surface2));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  gap: 16px;
}

.quality-score-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quality-score-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.quality-score-circle.score-low {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.quality-score-circle.score-some {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.quality-score-circle.score-high {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.quality-score-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.quality-score-text p {
  font-size: 11.5px;
  color: var(--text2);
  margin: 0;
}

.quality-score-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 2. Rubrique des Critères par Domaine */
.quality-rubric-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quality-domain-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.quality-domain-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.quality-domain-score {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}

.quality-criterion-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}

.quality-criterion-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.quality-criterion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.quality-criterion-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  flex: 1;
  min-width: 240px;
}

.quality-criterion-help {
  font-size: 11px;
  color: var(--text2);
  margin-top: 3px;
}

.quality-choice-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.quality-pill-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quality-pill-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.quality-pill-btn.active.pill-low,
.quality-pill-btn.active.pill-yes {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #10b981;
}

.quality-pill-btn.active.pill-some,
.quality-pill-btn.active.pill-partly {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.quality-pill-btn.active.pill-high,
.quality-pill-btn.active.pill-no {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.quality-pill-btn.active.pill-na,
.quality-pill-btn.active.pill-unclear {
  background: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.5);
  color: var(--text2);
}

.quality-crit-comment-input {
  width: 100%;
  font-size: 11.5px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.quality-crit-comment-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

/* 3. Matrice Traffic Light (Robvis Plot) */
.quality-legend-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 11.5px;
}

.qlegend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text2);
}

.traffic-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.traffic-dot.dot-low, .traffic-dot.dot-yes { background-color: #10b981; }
.traffic-dot.dot-some, .traffic-dot.dot-partly { background-color: #f59e0b; }
.traffic-dot.dot-high, .traffic-dot.dot-no { background-color: #ef4444; }
.traffic-dot.dot-na, .traffic-dot.dot-unclear { background-color: #9ca3af; }
.traffic-dot.dot-empty { background-color: transparent; border: 1.5px dashed var(--border); }

.quality-matrix-table th {
  text-align: center;
  font-size: 11px;
  padding: 8px 10px;
  white-space: nowrap;
}

.quality-matrix-table th:first-child {
  text-align: left;
  min-width: 200px;
}

.quality-matrix-table td {
  text-align: center;
  padding: 8px 10px;
  vertical-align: middle;
}

.quality-matrix-table td:first-child {
  text-align: left;
}

.quality-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. Graphique Récapitulatif (Summary Bar Chart) */
.quality-summary-bars-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qsummary-row {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  align-items: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.qsummary-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qsummary-bar-track {
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
}

.qsummary-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  transition: width 0.3s ease;
}

.qsummary-segment.seg-low { background-color: #10b981; }
.qsummary-segment.seg-some { background-color: #f59e0b; }
.qsummary-segment.seg-high { background-color: #ef4444; }
.qsummary-segment.seg-na { background-color: #9ca3af; }

.qsummary-counts {
  font-size: 11px;
  color: var(--text2);
  text-align: right;
  font-weight: 500;
}

/* 5. Éditeur de Configuration de Grille */
.quality-domains-editor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qdomain-edit-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.qdomain-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qcriterion-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 60px 28px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-sizing: border-box;
  width: 100%;
}

.qcriterion-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 60px 28px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}

.qcriterion-edit-row input {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}

.qcriterion-edit-row input.qcrit-weight {
  padding: 6px 2px;
  text-align: center;
}

/* ==========================================================================
   SECTION DONNÉES, EXTRACTION PICOS & ÉVALUATIONS DE QUALITÉ
   ========================================================================== */
.data-mgmt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.data-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.data-stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.data-stat-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.picos-icon-wrap { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.quality-icon-wrap { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.pdf-icon-wrap { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.notes-icon-wrap { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.data-stat-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.data-stat-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-stat-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
}

.data-stat-progress-track {
  width: 100%;
  height: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.data-stat-progress-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.picos-bar { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.quality-bar { background: linear-gradient(90deg, #6366f1, #818cf8); }
.pdf-bar { background: linear-gradient(90deg, #10b981, #34d399); }
.notes-bar { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.data-stat-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text2);
}

.picos-pills-mini {
  display: flex;
  align-items: center;
  gap: 3px;
}

.picos-pills-mini span {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
}

.picos-pills-mini span.active {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  color: #8b5cf6;
}

.data-framework-tag,
.data-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.mini-text-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Actions Grid (Export & Import) */
.data-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.data-action-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.data-action-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.data-action-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-action-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
}

.data-action-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0;
}

.export-options-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.export-opt-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.export-select-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.export-select-input:focus {
  border-color: var(--accent);
}

.export-modules-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.export-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

.export-checkbox-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.export-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.export-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 9px 18px;
  font-size: 12.5px;
  flex: 1;
  justify-content: center;
}

.export-quick-shortcuts {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Import Dropzone */
.import-dropzone {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.import-dropzone:hover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.03);
}

.import-dropzone-icon {
  color: var(--accent);
}

.import-dropzone-text {
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.import-dropzone-text span {
  font-size: 11px;
  color: var(--text2);
}

.import-options-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.import-option-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
}

.import-option-item strong {
  color: var(--text);
}

.import-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Guide & Modèle CSV Table */
.data-guide-wrapper {
  margin-top: 14px;
}

.data-guide-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.data-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.guide-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.data-guide-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.data-guide-sub {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: var(--text2);
}

.data-guide-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.data-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.data-guide-table th {
  padding: 10px 12px;
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 11.5px;
}

.data-guide-table th:last-child {
  border-right: none;
}

.data-guide-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text);
  line-height: 1.45;
}

.data-guide-table td:last-child {
  border-right: none;
}

.data-guide-table tr:last-child td {
  border-bottom: none;
}

.data-guide-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  padding: 2px 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

.guide-badge-req {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.guide-badge-opt {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(107, 114, 128, 0.12);
  color: var(--text2);
}

.guide-badge-picos {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.guide-badge-quality {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}