:root {
  /* ── Core maritime palette ── */
  --navy:         #0B1F3A;
  --navy-mid:     #0F2849;
  --navy-light:   #1A3E6E;
  --orange:       #F07800;
  --orange-light: #FF9520;
  --orange-pale:  #FFF3E0;

  /* ── Surfaces ── */
  --cream:        #DED9CA;
  --white:        #DED9CA;

  /* ── Text ── */
  --text-dark:    #0C1B2E;
  --text-mid:     #2B4868;
  --text-muted:   #6480A0;

  /* ── Borders ── */
  --border:       #C2D3E8;
  --border-light: #DDE8F5;

  /* ── Semantic ── */
  --success:      #059669;
  --success-bg:   #ECFDF5;
  --danger:       #DC2626;
  --danger-bg:    #FEF2F2;
  --warning:      #B45309;
  --warning-bg:   #FFFBEB;
  --info:         #1D4ED8;
  --info-bg:      #EFF6FF;

  /* ── Accent palette (cards) ── */
  --accent-1: #0B1F3A;   /* navy   */
  --accent-2: #F07800;   /* orange */
  --accent-3: #059669;   /* teal   */
  --accent-4: #7C3AED;   /* purple */

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(11,31,58,.06), 0 2px 10px rgba(11,31,58,.06);
  --shadow-md:  0 4px 16px rgba(11,31,58,.10), 0 1px 4px rgba(11,31,58,.06);
  --shadow-lg:  0 8px 40px rgba(11,31,58,.18);
  --shadow-card:0 1px 3px rgba(11,31,58,.06), 0 4px 16px rgba(11,31,58,.07);

  /* ── Radii ── */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* ── Breakpoints (référence pour @media) ── */
  --bp-mobile-sm: 360px;
  --bp-mobile:    480px;
  --bp-mobile-lg: 640px;
  --bp-tablet:    768px;
  --bp-tablet-lg: 900px;
  --bp-desktop:   1024px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text-dark);min-height:100vh;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:'Inter',sans-serif;}
input,select,textarea{font-family:'Inter',sans-serif;}
.view{display:none;}
.view.active{display:block;}

/* ── NAV ── */
.topnav{background:var(--navy);padding:0 2.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:var(--shadow-md);}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.logo-badge{width:40px;height:40px;background:var(--orange);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:-.5px;}
.logo-name{font-family:'Inter',sans-serif;font-size:18px;color:#fff;font-weight:700;letter-spacing:-.3px;}
.logo-name span{color:var(--orange);}
.nav-links{display:flex;align-items:center;gap:1rem;}
.nav-btn{background:transparent;border:1.5px solid rgba(240,120,0,0.55);color:var(--orange);padding:7px 18px;border-radius:6px;font-size:13px;font-weight:600;transition:all .2s;}
.nav-btn:hover{background:var(--orange);color:#fff;}
.nav-btn.primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.nav-btn.primary:hover{background:var(--orange-light);}
.nav-user{display:flex;align-items:center;gap:10px;}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;}
.nav-username{color:#fff;font-size:13px;font-weight:500;}
.nav-logout{background:transparent;border:none;color:var(--text-muted);font-size:12px;padding:5px 10px;border-radius:5px;transition:color .2s;}
.nav-logout:hover{color:var(--danger);}

/* ── HERO SLIDESHOW ── */
.hero{position:relative;min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy);}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out;}
.slide.active{opacity:1;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,
    rgba(6,10,20,.90) 0%,
    rgba(11,31,58,.75) 55%,
    rgba(6,20,40,.65) 100%
  );
}
.hero-content{position:relative;z-index:2;text-align:center;max-width:760px;padding:2rem;}
.hero-badge{display:inline-block;background:rgba(240,120,0,0.18);border:1px solid rgba(240,120,0,0.5);color:var(--orange);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:50px;margin-bottom:2rem;}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,3.8rem);color:#fff;line-height:1.15;margin-bottom:1.2rem;font-weight:700;}
.hero h1 span{color:var(--orange);}
.hero p{font-size:1rem;color:rgba(255,255,255,0.75);line-height:1.75;max-width:540px;margin:0 auto 2.5rem;}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn-orange{background:var(--orange);color:#fff;padding:13px 32px;border-radius:8px;font-weight:700;font-size:14px;border:none;transition:all .2s;}
.btn-orange:hover{background:var(--orange-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(240,120,0,0.5);}
.btn-outline{background:transparent;color:#fff;padding:13px 32px;border-radius:8px;font-weight:500;font-size:14px;border:1.5px solid rgba(255,255,255,0.35);transition:all .2s;}
.btn-outline:hover{background:rgba(255,255,255,0.1);}
.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,0.12);}
.stat-item{text-align:center;}
.stat-num{font-family:'Inter',sans-serif;font-size:2rem;color:var(--orange);font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;}
.stat-label{font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
/* Slideshow dots */
.slide-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer;transition:all .3s;}
.dot.active{background:var(--orange);width:22px;border-radius:4px;}

/* ── FEATURES ── */
.features-section{padding:5.5rem 2rem;background:var(--white);}
.section-header{text-align:center;margin-bottom:3rem;}
.section-tag{display:inline-block;background:var(--orange-pale);color:var(--orange);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:1rem;}
.section-title{font-family:'Inter',sans-serif;font-size:2rem;color:var(--navy);font-weight:800;margin-bottom:.8rem;letter-spacing:-.5px;}
.section-sub{color:var(--text-muted);font-size:.95rem;max-width:500px;margin:0 auto;line-height:1.7;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;max-width:1100px;margin:0 auto;}
.feature-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.6rem;
  border:1px solid var(--border-light);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-card);
}
.feature-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(230,50,85,.25);
}
.feat-icon{
  width:60px;height:60px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;
  position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.2);
  transform:perspective(260px) rotateY(-8deg) rotateX(6deg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feat-icon::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,transparent 55%);
  pointer-events:none;
}
.feature-card:hover .feat-icon{
  transform:perspective(260px) rotateY(-3deg) rotateX(2deg) scale(1.07);
  box-shadow:0 14px 32px rgba(0,0,0,.22), 0 5px 10px rgba(0,0,0,.14);
}
.feat-icon--1{background:linear-gradient(135deg,#0B1F3A,#1A3E6E);}
.feat-icon--2{background:linear-gradient(135deg,#F07800,#FF9520);}
.feat-icon--3{background:linear-gradient(135deg,#059669,#34D399);}
.feat-icon--4{background:linear-gradient(135deg,#7C3AED,#A78BFA);}
.feat-icon--5{background:linear-gradient(135deg,#0EA5E9,#38BDF8);}
.feat-icon--6{background:linear-gradient(135deg,#DC2626,#F87171);}
.feat-title{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.5rem;letter-spacing:-.2px;}
.feat-desc{font-size:.85rem;color:var(--text-muted);line-height:1.7;}

/* ── MARITIME IMAGE STRIP ── */
.maritime-strip {
  height: 220px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.maritime-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11,31,58,.82) 0%,
    rgba(11,31,58,.40) 50%,
    rgba(11,31,58,.65) 100%
  );
}
.maritime-strip-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 2rem;
}
.maritime-strip-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
  margin-bottom: .5rem;
}
.maritime-strip-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  max-width: 480px;
}

/* ── DOCS SECTION ── */
.docs-section{padding:5rem 2rem;background:var(--cream);}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem;max-width:1100px;margin:0 auto;}
.doc-card-preview{
  background:var(--white);
  border-radius:var(--radius);
  padding:1.4rem 1.3rem;
  border:1.5px solid var(--border-light);
  cursor:pointer;transition:all .22s;
  box-shadow:var(--shadow-card);
}
.doc-card-preview:hover{
  border-color:var(--orange);
  box-shadow:0 4px 20px rgba(230,50,85,.15);
  transform:translateY(-2px);
}
.doc-num{font-size:10px;font-weight:700;color:var(--orange);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.5rem;}
.doc-name{font-family:'Inter',sans-serif;font-size:.92rem;color:var(--navy);font-weight:700;line-height:1.4;}

/* ── AUTH ── */
.auth-page{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;background:var(--cream);padding:2rem;}
.auth-card{
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:2.5rem 2.2rem;
  width:100%;max-width:440px;
  box-shadow:0 20px 60px rgba(11,31,58,.15), 0 4px 16px rgba(11,31,58,.08);
  border:1px solid var(--border-light);
}
.auth-logo{text-align:center;margin-bottom:2rem;}
.auth-logo .logo-badge{margin:0 auto .8rem;width:50px;height:50px;font-size:20px;}
.auth-logo h2{font-family:'Inter',sans-serif;font-size:1.5rem;color:var(--navy);font-weight:800;letter-spacing:-.4px;}
.auth-logo p{color:var(--text-muted);font-size:.875rem;margin-top:4px;}
.form-group{margin-bottom:1.2rem;}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-mid);margin-bottom:6px;}
.form-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;color:var(--text-dark);background:#DED9CA;transition:border-color .2s;outline:none;}
.form-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,120,0,.12);}
.form-select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;color:var(--text-dark);background:#DED9CA;outline:none;appearance:none;cursor:pointer;}
.form-select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,120,0,.12);}
.btn-primary{width:100%;background:var(--navy);color:#fff;padding:13px;border-radius:8px;font-weight:700;font-size:14px;border:none;transition:all .2s;}
.btn-primary:hover{background:var(--navy-light);}
.auth-switch{text-align:center;margin-top:1.2rem;font-size:13px;color:var(--text-muted);}
.auth-switch a{color:var(--orange);font-weight:600;cursor:pointer;}
.auth-switch a:hover{text-decoration:underline;}
.msg{padding:10px 14px;border-radius:7px;font-size:13px;margin-bottom:1rem;}
.msg.error{background:var(--danger-bg);color:var(--danger);border:1px solid #F5C5C5;}
.msg.success{background:var(--success-bg);color:var(--success);border:1px solid #B5DFD0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

/* ── WORD UPLOAD ── */
.word-upload-zone{border:2px dashed var(--border);border-radius:10px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .2s;background:#DED9CA;min-height:90px;display:flex;align-items:center;justify-content:center;}
.word-upload-zone:hover{border-color:var(--orange);background:var(--orange-pale);}
.word-upload-zone.drag-over{border-color:var(--orange);background:var(--orange-pale);transform:scale(1.01);}
.word-upload-zone.has-file{border-style:solid;border-color:var(--navy);background:var(--cream);cursor:default;}
.word-upload-zone.has-file:hover{background:var(--cream);}

/* ── OTP BOXES ── */
.otp-boxes{display:flex;gap:10px;justify-content:center;margin:1.5rem 0;}
.otp-box{width:48px;height:58px;border:2px solid var(--border);border-radius:10px;font-size:1.6rem;font-weight:700;text-align:center;color:var(--navy);background:#DED9CA;outline:none;transition:all .2s;caret-color:transparent;}
.otp-box:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,120,0,.15);transform:scale(1.06);}
.otp-box.filled{border-color:var(--navy);background:var(--cream);}
.otp-timer{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--text-muted);margin-bottom:1.2rem;}
.otp-timer .timer-val{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;min-width:40px;text-align:center;}
.otp-timer.urgent .timer-val{color:var(--danger);}

/* ── DASHBOARD ── */
.dashboard-layout{display:flex;min-height:calc(100vh - 64px);}
.sidebar{
  width:248px;
  background:var(--navy);
  padding:1.4rem 0;
  flex-shrink:0;
  background:linear-gradient(180deg,#0B1F3A 0%,#0E2646 100%);
}
.sidebar-label{
  font-size:9.5px;font-weight:700;
  color:rgba(255,255,255,.25);
  letter-spacing:1.8px;text-transform:uppercase;
  padding:.9rem 1.8rem .4rem;
}
.sidebar-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 1.4rem;
  font-size:13px;font-weight:500;
  color:rgba(200,224,248,.6);
  cursor:pointer;transition:all .18s;
  margin:0 .7rem 2px;border-radius:8px;
}
.sidebar-link:hover{background:rgba(255,255,255,.07);color:rgba(220,238,255,.9);}
.sidebar-link.active{
  background:linear-gradient(90deg,rgba(230,50,85,.22),rgba(230,50,85,.08));
  color:var(--orange-light);
  font-weight:600;
}
.sidebar-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;}
.dash-main{flex:1;padding:2rem 2.5rem;overflow-y:auto;background:var(--cream);}
.page-title{font-family:'Inter',sans-serif;font-size:1.65rem;font-weight:800;color:var(--navy);margin-bottom:.3rem;letter-spacing:-.5px;}
.page-sub{color:var(--text-muted);font-size:.875rem;margin-bottom:2rem;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.1rem;margin-bottom:2rem;}

/* ── Stat cards — gradient accent design ── */
.stat-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem 1.3rem;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
/* Accent top bar */
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
/* Decorative circle bg */
.stat-card::after{content:'';position:absolute;right:-14px;bottom:-14px;width:80px;height:80px;border-radius:50%;opacity:.06;}
/* Per-card accent colors */
.stats-row .stat-card:nth-child(1)::before{background:linear-gradient(90deg,var(--accent-1),var(--navy-light));}
.stats-row .stat-card:nth-child(1)::after{background:var(--accent-1);}
.stats-row .stat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--accent-2),var(--orange-light));}
.stats-row .stat-card:nth-child(2)::after{background:var(--accent-2);}
.stats-row .stat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--accent-3),#34D399);}
.stats-row .stat-card:nth-child(3)::after{background:var(--accent-3);}
.stats-row .stat-card:nth-child(4)::before{background:linear-gradient(90deg,var(--accent-4),#A78BFA);}
.stats-row .stat-card:nth-child(4)::after{background:var(--accent-4);}

.stat-card-num{
  font-family:'Inter',sans-serif;
  font-size:2.2rem;
  font-weight:800;
  color:var(--navy);
  letter-spacing:-1.5px;
  line-height:1;
  margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.stat-card-label{font-size:11.5px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}

.card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border-light);overflow:hidden;box-shadow:var(--shadow-card);}
.card-header{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);letter-spacing:-.2px;}
.card-body{padding:1.5rem;}
.btn-sm{padding:7px 16px;border-radius:6px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .2s;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-light);}
.btn-orange-sm{background:var(--orange);color:#fff;}
.btn-orange-sm:hover{background:var(--orange-light);}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #F5C5C5 !important;}
.btn-danger:hover{background:#FAD0D0;}
/* ── HISTORY SEARCH BAR ── */
.history-search-wrap { margin-bottom: 1rem; }
.history-search-row  { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.history-search-box  {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: #DED9CA; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0 12px; transition: border-color .15s, box-shadow .15s;
}
.history-search-box:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240,120,0,.1);
}
.history-search-icon { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.history-search-inp  {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13px; color: var(--text-dark); padding: 10px 0;
  font-family: 'Inter', sans-serif;
}
.history-search-inp::placeholder { color: var(--text-muted); }
.history-search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; padding: 0; line-height: 1;
  transition: color .12s;
}
.history-search-clear:hover { color: var(--text-dark); }
.history-filter-row  { display: flex; gap: .5rem; }
.history-filter-sel  {
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 9px;
  background: #DED9CA; font-size: 12px; font-weight: 500; color: var(--text-dark);
  font-family: 'Inter', sans-serif; cursor: pointer; outline: none;
  transition: border-color .15s;
}
.history-filter-sel:focus { border-color: var(--orange); }
.history-results-count {
  font-size: 12px; color: var(--text-muted); margin-top: .4rem;
  min-height: 18px;
}
/* Search highlight */
mark.hist-hl {
  background: rgba(240,120,0,.18); color: var(--navy);
  border-radius: 2px; padding: 0 1px; font-weight: 700;
}

/* dark mode */
[data-theme="dark"] .history-search-box   { background: #141414; border-color: #2E2E2E; }
[data-theme="dark"] .history-search-inp   { color: #E0E0E0; }
[data-theme="dark"] .history-search-inp::placeholder { color: #4A4A4A; }
[data-theme="dark"] .history-search-icon  { stroke: #5A5A5A; }
[data-theme="dark"] .history-search-clear { color: #5A5A5A; }
[data-theme="dark"] .history-filter-sel   { background: #141414; border-color: #2E2E2E; color: #C8C8C8; }
[data-theme="dark"] mark.hist-hl          { background: rgba(240,120,0,.25); color: #F0F0F0; }

.doc-list{list-style:none;}
.doc-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border-light);}
.doc-item:last-child{border-bottom:none;}
.doc-info{display:flex;align-items:center;gap:12px;}
.doc-icon{
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 3px 10px rgba(11,31,58,.2);
}
.doc-icon svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.8;}
.doc-item-name{font-size:13px;font-weight:500;color:var(--navy);}
.doc-item-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.doc-actions{display:flex;gap:6px;flex-wrap:wrap;}
.badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:10.5px;font-weight:700;letter-spacing:.2px;}
.badge-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(5,150,105,.2);}
.badge-warning{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(180,83,9,.2);}
.badge-info{background:var(--info-bg);color:var(--info);border:1px solid rgba(29,78,216,.2);}

/* ── DOC SELECTOR ── */
.doc-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.doc-sel-card{background:#DED9CA;border:1.5px solid var(--border-light);border-radius:var(--radius);padding:1.3rem;cursor:pointer;transition:all .25s;}
.doc-sel-card:hover,.doc-sel-card.selected{border-color:var(--orange);background:var(--orange-pale);}
.doc-sel-num{font-size:10px;font-weight:700;color:var(--orange);letter-spacing:1.5px;text-transform:uppercase;}
.doc-sel-name{font-size:13px;font-weight:500;color:var(--navy);margin-top:5px;line-height:1.4;}

/* ── FORM ── */
.form-page{max-width:800px;margin:0 auto;}
.form-actions{display:flex;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-light);}
.btn-cancel{background:var(--cream);color:var(--text-mid);border:1px solid var(--border);padding:11px 24px;border-radius:8px;font-weight:500;font-size:14px;transition:all .2s;cursor:pointer;}
.btn-cancel:hover{background:var(--border-light);}

/* ── PREVIEW ── */
.preview-page{max-width:850px;margin:0 auto;}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;}
.preview-actions{display:flex;gap:.7rem;flex-wrap:wrap;}
.doc-paper{background:#DED9CA;border:1px solid var(--border);border-radius:var(--radius);padding:3rem 3.5rem;box-shadow:var(--shadow-sm);font-size:13px;line-height:1.8;color:var(--text-dark);}
.doc-paper .doc-header-block{text-align:center;margin-bottom:2rem;}
.doc-paper .company-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--navy);}
.doc-paper .company-addr{font-size:11px;color:var(--text-muted);margin-top:3px;}
.doc-paper .doc-title{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;text-align:center;text-transform:uppercase;margin:1.5rem 0;color:var(--navy);letter-spacing:1px;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);padding:.6rem 0;}
.doc-paper p{margin-bottom:.8rem;}
.doc-paper table{width:100%;border-collapse:collapse;margin:1rem 0;}
.doc-paper td,.doc-paper th{border:1px solid var(--border);padding:6px 10px;font-size:12px;}
.doc-paper th{background:var(--navy);color:#fff;font-weight:500;}
.doc-paper .signature-block{margin-top:2rem;display:flex;justify-content:space-between;}
.doc-paper .sig-box{width:45%;}
.doc-paper .sig-line{border-bottom:1px solid var(--text-dark);margin-top:2.5rem;}
.doc-paper .sig-label{font-size:12px;color:var(--text-muted);margin-top:4px;}

/* ── ADMIN ── */
.admin-section{display:none;}
.admin-section.active{display:block;}
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--border);color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
.data-table tr:hover td{background:var(--cream);}
.toggle-btn{position:relative;width:42px;height:22px;background:#D0D5DA;border-radius:50px;border:none;cursor:pointer;transition:background .2s;}
.toggle-btn.on{background:var(--success);}
.toggle-btn::after{content:'';position:absolute;width:16px;height:16px;background:#DED9CA;border-radius:50%;top:3px;left:3px;transition:left .2s;}
.toggle-btn.on::after{left:23px;}
.text-center{text-align:center;}
.empty-state{text-align:center;padding:3rem;color:var(--text-muted);}
.empty-state-icon{font-size:2.5rem;margin-bottom:.8rem;}
.empty-state h3{font-size:1rem;font-weight:500;margin-bottom:.4rem;}

/* ── EMAIL MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(23,58,94,.55);z-index:1000;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal-box{background:#DED9CA;border-radius:var(--radius-lg);width:100%;max-width:490px;box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .2s ease;}
@keyframes modalIn{from{transform:scale(.95) translateY(10px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-header{background:var(--navy);padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{color:#fff;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.2px;}
.modal-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:20px;cursor:pointer;line-height:1;padding:0 4px;}
.modal-close:hover{color:#fff;}
.modal-body{padding:1.5rem;}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-light);display:flex;gap:.8rem;justify-content:flex-end;}
.btn-email-send{background:var(--orange);color:#fff;padding:10px 24px;border-radius:8px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:all .2s;}
.btn-email-send:hover{background:var(--orange-light);}
.email-recipients-box{display:flex;flex-wrap:wrap;gap:6px;min-height:42px;padding:6px 8px;border:1.5px solid var(--border);border-radius:8px;cursor:text;transition:border-color .2s;}
.email-recipients-box:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,120,0,.12);}
.email-tag{display:flex;align-items:center;gap:5px;background:var(--navy);color:#fff;font-size:12px;padding:3px 10px;border-radius:50px;}
.email-tag button{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;line-height:1;padding:0;}
.email-tag button:hover{color:#fff;}
.email-input-inline{border:none;outline:none;font-family:'Inter',sans-serif;font-size:13px;min-width:140px;flex:1;background:transparent;}

/* ── PREMIUM ── */
.premium-link { border-left: 3px solid var(--orange); }
.premium-badge { background: linear-gradient(135deg, #F07800, #FF9520); color: #fff; padding: 2px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; }
.premium-upgrade-card { background: linear-gradient(135deg, var(--navy), #245080); border-radius: 12px; padding: 1.5rem; color: #fff; margin-top: 1.5rem; }
.dossier-card { background: #DED9CA; border: 1.5px solid var(--border-light); border-radius: 10px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 14px; margin-bottom: .8rem; cursor: pointer; transition: all .2s; }
.dossier-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.dossier-bl { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.client-card { background: #DED9CA; border: 1.5px solid var(--border-light); border-radius: 10px; padding: .9rem 1.1rem; display: flex; align-items: center; gap: 12px; margin-bottom: .6rem; }
.tpl-check-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--cream); border-radius: 8px; margin-bottom: .5rem; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; }
.tpl-check-card.selected { border-color: var(--orange); background: var(--orange-pale); }

/* ── CLIENT AUTOCOMPLETE ── */
.cac-wrap { position:relative; }
.cac-input-row { display:flex; align-items:center; gap:6px; background:#DED9CA; border:1.5px solid var(--border); border-radius:9px; padding:0 10px; transition:border-color .15s; }
.cac-input-row:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px rgba(240,120,0,.12); }
.cac-search-icon { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.cac-input { border:none !important; box-shadow:none !important; padding:9px 0 !important; background:transparent !important; flex:1; }
.cac-clear-btn { background:none; border:none; color:var(--text-muted); font-size:13px; cursor:pointer; padding:4px; border-radius:4px; line-height:1; flex-shrink:0; }
.cac-clear-btn:hover { color:var(--danger); background:var(--danger-bg); }
.cac-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#DED9CA; border:1.5px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md); z-index:200; overflow:hidden; max-height:320px; overflow-y:auto; }
.cac-item { display:flex; justify-content:space-between; align-items:flex-start; padding:.7rem 1rem; cursor:pointer; border-bottom:1px solid var(--border-light); transition:background .1s; gap:8px; }
.cac-item:last-child { border-bottom:none; }
.cac-item:hover, .cac-highlighted { background:var(--orange-pale); }
.cac-item-main { flex:1; min-width:0; }
.cac-company { font-weight:700; font-size:13px; color:var(--navy); }
.cac-contact { font-size:12px; color:var(--text-muted); margin-top:1px; }
.cac-hl { background:rgba(240,120,0,.25); border-radius:2px; font-style:normal; font-weight:700; color:var(--orange); }
.cac-item-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.cac-meta-tag { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.cac-missing { font-size:10px; font-weight:700; color:var(--warning); background:var(--warning-bg); padding:1px 6px; border-radius:4px; }
.cac-complete { font-size:10px; font-weight:700; color:var(--success); background:var(--success-bg); padding:1px 6px; border-radius:4px; }
.cac-empty { padding:1rem; font-size:13px; color:var(--text-muted); text-align:center; }
.cac-empty strong { color:var(--navy); }
.cac-empty span { font-size:11px; display:block; margin-top:3px; color:var(--text-muted); }
.cac-selected-chip { display:flex; align-items:center; gap:6px; margin-top:6px; background:linear-gradient(90deg,rgba(26,123,82,.08),transparent); border:1px solid rgba(26,123,82,.2); border-radius:7px; padding:5px 10px; flex-wrap:wrap; }
.cac-chip-icon { color:var(--success); font-weight:700; font-size:13px; }
.cac-chip-name { font-weight:700; font-size:13px; color:var(--navy); }
.cac-chip-meta { font-size:11px; color:var(--text-muted); }
.cac-chip-warn { font-size:10px; font-weight:700; color:var(--warning); background:var(--warning-bg); padding:2px 7px; border-radius:4px; }
.cac-chip-ok { font-size:10px; font-weight:700; color:var(--success); background:var(--success-bg); padding:2px 7px; border-radius:4px; }

/* ── NOUVEAU BL — STEPPER ── */
.nb-stepper { display:flex; align-items:center; margin-bottom:1rem; }
.nb-step { display:flex; align-items:center; gap:10px; }
.nb-step-num { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; background:var(--cream); color:var(--text-muted); border:2px solid var(--border); transition:all .2s; }
.nb-step.active .nb-step-num { background:var(--orange); color:#fff; border-color:var(--orange); }
.nb-step.done .nb-step-num { background:var(--success-bg); color:var(--success); border-color:var(--success); }
.nb-step-label { font-size:13px; font-weight:600; color:var(--text-muted); }
.nb-step.active .nb-step-label { color:var(--navy); }
.nb-step-line { flex:1; height:2px; background:var(--border-light); margin:0 1rem; border-radius:2px; transition:background .3s; }
.nb-step-line.done { background:var(--success); }

/* ── NOUVEAU BL — CARDS ── */
.nb-card { background:#DED9CA; border-radius:12px; border:1.5px solid var(--border-light); box-shadow:var(--shadow-sm); }
.nb-card-header { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--border-light); flex-wrap:wrap; gap:.5rem; }
.nb-card-title { font-family:'Inter',sans-serif; font-size:1rem; font-weight:700; color:var(--navy); letter-spacing:-.2px; }
.nb-card-body { padding:1.2rem; }
.nb-plan-limit-badge { font-size:11px; font-weight:700; background:var(--warning-bg); color:var(--warning); padding:3px 10px; border-radius:50px; border:1px solid #f5d47a; }
.nb-plan-multi-badge { font-size:11px; font-weight:700; background:var(--success-bg); color:var(--success); padding:3px 10px; border-radius:50px; border:1px solid #b7dfc8; }
.nb-sel-counter { font-size:11px; font-weight:700; background:var(--cream); color:var(--text-muted); padding:3px 10px; border-radius:50px; transition:all .2s; }

/* ── NOUVEAU BL — DOC CHECKBOXES ── */
.nb-docs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.nb-doc-checkbox { display:flex; align-items:flex-start; gap:10px; padding:.9rem 1rem; border-radius:10px; border:2px solid var(--border-light); background:var(--cream); cursor:pointer; transition:all .15s; position:relative; }
.nb-doc-checkbox:hover { border-color:var(--orange); background:var(--orange-pale); }
.nb-doc-checkbox.selected { border-color:var(--orange); background:var(--orange-pale); box-shadow:0 0 0 3px rgba(240,120,0,.15); }
.nb-doc-check-icon { width:22px; height:22px; min-width:22px; border-radius:50%; border:2px solid var(--border); background:#DED9CA; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--orange); transition:all .15s; }
.nb-doc-checkbox.selected .nb-doc-check-icon { background:var(--orange); border-color:var(--orange); color:#fff; }
.nb-doc-num { font-size:10px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.nb-doc-name { font-size:12px; font-weight:600; color:var(--navy); line-height:1.4; }
.nb-doc-fields { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* ── NOUVEAU BL — FORM ── */
.nb-form-header { background:#DED9CA; border-radius:12px; border:1.5px solid var(--border-light); padding:1.2rem; box-shadow:var(--shadow-sm); }
.nb-form-meta { display:flex; gap:1.5rem; flex-wrap:wrap; }
.nb-form-meta-item { display:flex; flex-direction:column; gap:2px; }
.nb-form-meta-item span { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.nb-form-meta-item strong { font-size:14px; color:var(--navy); }
.nb-section { background:#DED9CA; border-radius:12px; border:1.5px solid var(--border-light); margin-bottom:1.2rem; overflow:hidden; box-shadow:var(--shadow-sm); }
.nb-section-header { display:flex; align-items:center; gap:10px; padding:.9rem 1.2rem; background:linear-gradient(90deg,var(--sec-color,var(--navy))08,transparent); border-bottom:1px solid var(--border-light); }
.nb-section-icon { font-size:1.2rem; }
.nb-section-label { font-weight:700; color:var(--navy); font-size:.95rem; flex:1; }
.nb-section-count { font-size:11px; color:var(--text-muted); background:var(--cream); padding:2px 8px; border-radius:50px; }
.nb-fields-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; padding:1.2rem; }
.nb-field-wrap { display:flex; flex-direction:column; gap:5px; }
.nb-field-shared { grid-column:span 1; }
.nb-field-label-row { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.nb-field-badges { display:flex; gap:3px; flex-wrap:wrap; }
.nb-field-badge { font-size:9px; font-weight:700; background:rgba(240,120,0,.12); color:var(--orange); padding:1px 6px; border-radius:4px; border:1px solid rgba(240,120,0,.25); white-space:nowrap; }

/* ── BLS TRAITÉS ── */
.bl-filter-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.bl-search-wrap { display:flex; align-items:center; gap:8px; background:#DED9CA; border:1.5px solid var(--border); border-radius:8px; padding:6px 10px; flex:1; min-width:200px; }
.bl-search-input { border:none; outline:none; font-size:13px; background:transparent; width:100%; color:var(--text-dark); }
.bl-search-input::placeholder { color:var(--text-muted); }
.bl-num-badge { font-family:'Inter',sans-serif; font-size:.9rem; font-weight:800; color:var(--navy); background:var(--cream); padding:3px 10px; border-radius:6px; white-space:nowrap; letter-spacing:-.2px; }
.bl-actions { display:flex; gap:5px; flex-wrap:wrap; }

/* ── UPGRADE PAGE ── */
.upgrade-page { min-height:100vh; background:var(--cream); padding-bottom:4rem; }

.upgrade-hero {
  /* Fallback gradient when no image */
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  /* Image from appearance.js overwrites background-image inline —
     the ::before overlay below always ensures text legibility */
  background-size: cover;
  background-position: center top;
  color: #fff;
  text-align: center;
  padding: 4.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Dark gradient overlay — always on, covers the photo */
.upgrade-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 12, 24, 0.82) 0%,
    rgba(11, 31, 58, 0.75) 60%,
    rgba(11, 31, 58, 0.68) 100%
  );
}

/* All children sit above the overlay */
.upgrade-hero > * { position: relative; z-index: 1; }

.upgrade-back {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; padding: 7px 16px;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .18s;
}
.upgrade-back:hover { background: rgba(255,255,255,.24); }

.upgrade-hero-badge {
  display: inline-block;
  background: rgba(230,50,85,.22);
  border: 1px solid rgba(230,50,85,.55);
  color: #FF8BA0;
  padding: 5px 16px; border-radius: 50px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.upgrade-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: .7rem;
  letter-spacing: -.6px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
  line-height: 1.15;
}

.upgrade-hero-sub {
  color: rgba(220, 235, 255, 0.88);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.65;
  max-width: 500px;
  margin: 0 auto 1.3rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.upgrade-current-badge {
  display: inline-block;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  padding: 6px 20px;
  border-radius: 50px;
  font-size: 13px; font-weight: 600;
}

.upgrade-footer { text-align:center; color:var(--text-muted); font-size:13px; padding:2rem; }

/* ── PRICING GRID ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1000px; margin:2.5rem auto; padding:0 1.5rem; }
@media(max-width:900px){ .pricing-grid{grid-template-columns:1fr;max-width:420px;} }
.pricing-card { background:#DED9CA; border-radius:16px; padding:2rem 1.5rem; box-shadow:var(--shadow-sm); border:2px solid var(--border-light); position:relative; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.pricing-featured { border-color:var(--orange); box-shadow:0 8px 32px rgba(240,120,0,.2); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 16px; border-radius:50px; font-size:11px; font-weight:800; color:#fff; letter-spacing:.5px; white-space:nowrap; }
.pricing-header { margin-bottom:1.5rem; text-align:center; }
.pricing-name { font-family:'Inter',sans-serif; font-size:1.3rem; font-weight:800; margin-bottom:.5rem; letter-spacing:-.3px; }
.pricing-price { margin-bottom:.6rem; }
.price-amount { font-size:1.8rem; font-weight:800; color:var(--navy); }
.price-unit { font-size:12px; color:var(--text-muted); display:block; margin-top:2px; }
.pricing-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }
.pricing-features { list-style:none; margin-bottom:1.5rem; flex:1; }
.pricing-features li { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border-light); }
.pricing-features li:last-child { border:none; }
.feat-yes { color:var(--text-dark); }
.feat-no  { color:var(--text-muted); text-decoration:line-through; }
.feat-check { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.feat-yes .feat-check { background:var(--success-bg); color:var(--success); }
.feat-no  .feat-check { background:var(--danger-bg); color:var(--danger); }
.pricing-btn { padding:12px; border-radius:10px; border:none; font-weight:700; font-size:14px; cursor:pointer; width:100%; transition:opacity .2s; }
.pricing-btn:disabled { opacity:.5; cursor:not-allowed; background:var(--cream) !important; color:var(--text-muted) !important; }
.pricing-btn-current { background:var(--cream) !important; color:var(--text-muted) !important; }
.upgrade-select-info { background:#DED9CA; border:1.5px solid var(--border-light); border-radius:12px; padding:1.5rem; text-align:center; font-size:13px; line-height:1.8; color:var(--text-mid); }

/* ── SIDEBAR EXTRAS ── */
.sidebar-divider { height:1px; background:rgba(255,255,255,.1); margin:.6rem 1rem; }
.upgrade-link { background:linear-gradient(135deg,rgba(240,120,0,.15),rgba(240,120,0,.05)); color:var(--orange-light) !important; border:1px solid rgba(240,120,0,.25); margin:.4rem .5rem; border-radius:8px; }
.upgrade-link:hover { background:rgba(240,120,0,.25) !important; }

/* ── CLIENT DETAIL ── */
.cd-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.cd-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:768px) { .cd-grid { grid-template-columns:1fr; } }
.cd-info-grid { display:flex; flex-direction:column; gap:0; }
.cd-info-row { display:flex; padding:8px 0; border-bottom:1px solid var(--border-light); font-size:13px; gap:1rem; align-items:flex-start; }
.cd-info-row:last-child { border:none; }
.cd-info-label { width:110px; flex-shrink:0; color:var(--text-muted); font-weight:600; font-size:12px; padding-top:1px; }
.cd-info-value { flex:1; color:var(--navy); font-weight:600; word-break:break-word; }
.cd-doc-item { display:flex; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-light); gap:8px; }
.cd-doc-item:last-child { border:none; }
.cd-doc-count { background:rgba(240,120,0,.12); color:var(--orange); padding:2px 9px; border-radius:50px; font-size:11px; font-weight:800; flex-shrink:0; }
.cli-badge-warn { font-size:10px; background:var(--warning-bg); color:var(--warning); padding:1px 7px; border-radius:50px; font-weight:700; white-space:nowrap; }
.cli-badge-ok { font-size:10px; background:var(--success-bg); color:var(--success); padding:1px 7px; border-radius:50px; font-weight:700; white-space:nowrap; }
.cli-meta { font-size:12px; color:var(--text-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli-bl-info { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ── TOAST NOTIFICATIONS ── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:99999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background:#1E293B; color:#fff; padding:12px 18px; border-radius:11px; font-size:13px; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.25); display:flex; align-items:center; gap:10px; min-width:220px; max-width:360px; opacity:0; transform:translateY(14px); animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) forwards, toastOut .3s ease 3.7s forwards; pointer-events:auto; line-height:1.4; }
.toast-success { border-left:4px solid #22C55E; }
.toast-error   { border-left:4px solid #EF4444; }
.toast-info    { border-left:4px solid #3B82F6; }
.toast-warning { border-left:4px solid #F59E0B; }
.toast-icon { font-size:16px; flex-shrink:0; }
@keyframes toastIn  { to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to { opacity:0; transform:translateY(8px); } }

/* ── STAT PLAN CARD ── */
.stat-card-plan { cursor:pointer; transition:transform .15s,box-shadow .15s; }
.stat-card-plan:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-plan-badge { display:inline-block; padding:2px 10px; border-radius:50px; font-size:10px; font-weight:800; letter-spacing:.5px; margin-top:4px; }

/* ── UPGRADE PROMPT MODAL (Rich) ── */
.upm-box { background:#DED9CA; border-radius:20px; padding:0; max-width:660px; width:94%; max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.35); position:relative; }
.upm-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); line-height:1; z-index:1; }
.upm-header { padding:1.6rem 1.5rem .8rem; text-align:center; }
.upm-feature-icon { font-size:2.8rem; margin-bottom:.4rem; }
.upm-feature-name { font-family:'Inter',sans-serif; font-size:1.3rem; color:var(--navy); font-weight:800; margin:.2rem 0; letter-spacing:-.3px; }
.upm-feature-desc { color:var(--text-muted); font-size:13px; margin-bottom:.8rem; }
.upm-preview-wrap { position:relative; margin:0 1.5rem 1.2rem; border-radius:12px; overflow:hidden; border:1px solid var(--border); min-height:90px; }
.upm-preview-inner { filter:blur(4px) brightness(.92); pointer-events:none; user-select:none; }
.upm-blur-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.5); gap:.3rem; }
.upm-blur-icon { font-size:2rem; }
.upm-blur-label { font-weight:800; color:var(--navy); font-size:13px; }
.upm-table-mock { width:100%; border-collapse:collapse; font-size:12px; }
.upm-table-mock th { background:var(--navy); color:#fff; padding:6px 10px; text-align:left; }
.upm-table-mock td { padding:5px 10px; border-bottom:1px solid var(--border); color:var(--text-mid); }
.upm-table-mock tr:nth-child(even) td { background:var(--cream); }
.upm-mock-row { display:flex; gap:8px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--border); }
.upm-mock-avatar { width:28px; height:28px; border-radius:50%; background:var(--navy); opacity:.2; flex-shrink:0; }
.upm-mock-lines { flex:1; display:flex; flex-direction:column; gap:4px; }
.upm-mock-line { height:8px; border-radius:4px; background:var(--text-muted); opacity:.25; }
.upm-mock-line.short { width:55%; }
.upm-step-row { display:flex; gap:8px; padding:8px 12px; align-items:center; border-bottom:1px solid var(--border); }
.upm-step-num { width:22px; height:22px; border-radius:50%; background:var(--orange); opacity:.3; flex-shrink:0; }
.upm-plans { display:flex; gap:.7rem; padding:0 1.5rem 1rem; }
.upm-plan { flex:1; border:2px solid var(--border); border-radius:12px; padding:.8rem .7rem; text-align:center; transition:border-color .15s,transform .15s; }
.upm-plan:hover { transform:translateY(-2px); }
.upm-plan-name { font-weight:800; font-size:13px; margin-bottom:.2rem; }
.upm-plan-price { font-size:10px; color:var(--text-muted); margin-bottom:.5rem; }
.upm-plan-feat { list-style:none; padding:0; margin:0 0 .6rem; font-size:11px; color:var(--text-mid); text-align:left; }
.upm-plan-feat li { padding:2px 0; }
.upm-plan-feat li::before { content:'✓ '; color:var(--orange); font-weight:700; }
.upm-plan-btn { width:100%; padding:6px 4px; border-radius:6px; border:none; font-weight:700; font-size:11px; cursor:pointer; color:#fff; }
.upm-footer { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1.5rem 1.2rem; border-top:1px solid var(--border); margin-top:.4rem; }
.upm-footer-later { background:none; border:1.5px solid var(--border); color:var(--text-muted); font-size:12px; font-weight:600; padding:7px 14px; border-radius:7px; cursor:pointer; }
.upm-footer-all { background:none; border:none; color:var(--orange); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }

/* ── LOCKED WIDGETS ── */
.locked-section-title { font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin:1.5rem 0 .7rem; }
.locked-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.9rem; margin-bottom:1.5rem; }
.locked-widget { border:2px dashed var(--border); border-radius:12px; padding:1.2rem 1rem; text-align:center; cursor:pointer; transition:border-color .2s,background .2s,transform .15s; background:#DED9CA; }
.locked-widget:hover { border-color:var(--orange); background:var(--cream); transform:translateY(-2px); }
.locked-widget-icon { font-size:1.9rem; margin-bottom:.4rem; }
.locked-widget-name { font-weight:700; font-size:13px; color:var(--navy); margin-bottom:.35rem; }
.locked-widget-plan { display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:50px; margin-bottom:.4rem; }
.locked-widget-lock { font-size:1.2rem; opacity:.35; }

/* ── NAV PLAN BADGE ── */
.nav-plan-badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.6px; padding:2px 7px; border-radius:50px; vertical-align:middle; margin-left:5px; cursor:pointer; }

/* ── THEME TOGGLE BUTTON ── */
.nav-end { display:flex; align-items:center; gap:.8rem; }
.theme-toggle-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; transition:background .2s,border-color .2s; flex-shrink:0; line-height:1; }
.theme-toggle-btn:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35); }
.lang-toggle-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:8px; height:36px; padding:0 10px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; letter-spacing:.5px; color:#fff; cursor:pointer; transition:background .2s,border-color .2s; flex-shrink:0; }
.lang-toggle-btn:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35); }
[data-theme="dark"] .lang-toggle-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#E0E0E0; }
[data-theme="dark"] .lang-toggle-btn:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — [data-theme="dark"] on <html>
   Noir pur + gris neutres + accent orange
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── Surfaces (noir pur, zéro bleu) ── */
  --cream:        #0D0D0D;   /* fond de page */
  --white:        #1A1A1A;   /* fond carte   */

  /* ── Texte ── */
  --text-dark:    #F0F0F0;   /* titre principal */
  --text-mid:     #A8A8A8;   /* texte secondaire */
  --text-muted:   #5A5A5A;   /* texte discret   */

  /* ── Bordures ── */
  --border:       #2E2E2E;
  --border-light: #222222;

  /* ── Sémantiques ── */
  --orange-pale:  rgba(240,120,0,.13);
  --success-bg:   rgba(5,150,105,.14);
  --danger-bg:    rgba(220,38,38,.14);
  --warning-bg:   rgba(180,83,9,.14);
  --info-bg:      rgba(29,78,216,.14);

  /* ── Ombres ── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,.6);
  --shadow-md:    0 4px 24px rgba(0,0,0,.65);
  --shadow-lg:    0 8px 48px rgba(0,0,0,.75);
  --shadow-card:  0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.45);
}

/* ── Body & base ── */
[data-theme="dark"] body { background:#0D0D0D; color:#F0F0F0; }

/* ── Landing sections ── */
[data-theme="dark"] .features-section { background:#111111; }
[data-theme="dark"] .docs-section     { background:#0D0D0D; }
[data-theme="dark"] .section-title    { color:#F0F0F0; }
[data-theme="dark"] .section-sub      { color:#6A6A6A; }

/* ── Topnav ── */
[data-theme="dark"] .topnav { background:#080808; border-bottom:1px solid #252525; }

/* ── Cards / surfaces ── */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .nb-card,
[data-theme="dark"] .nb-section,
[data-theme="dark"] .nb-form-header,
[data-theme="dark"] .dossier-card,
[data-theme="dark"] .client-card,
[data-theme="dark"] .doc-sel-card,
[data-theme="dark"] .locked-widget,
[data-theme="dark"] .upgrade-select-info,
[data-theme="dark"] .upm-box,
[data-theme="dark"] .word-upload-zone,
[data-theme="dark"] .cac-dropdown,
[data-theme="dark"] .doc-card-preview,
[data-theme="dark"] .feature-card     { background:#1A1A1A; border-color:#2E2E2E; }

/* ── Stat cards ── */
[data-theme="dark"] .stat-card {
  background: linear-gradient(145deg,#1E1E1E,#141414);
  border-color: #2E2E2E;
}
[data-theme="dark"] .stat-card-num { color:#F0F0F0; }

/* ── Dashboard ── */
[data-theme="dark"] .dash-main   { background:#0D0D0D; }
[data-theme="dark"] .sidebar     { background:#0A0A0A; border-right:1px solid #1E1E1E; }
[data-theme="dark"] .sidebar-link{ color:rgba(240,240,240,.45); }
[data-theme="dark"] .sidebar-link:hover { background:rgba(255,255,255,.06); color:rgba(240,240,240,.85); }
[data-theme="dark"] .sidebar-link.active{ background:rgba(240,120,0,.18); color:var(--orange-light); }
[data-theme="dark"] .sidebar-label { color:rgba(200,200,200,.25); }
[data-theme="dark"] .sidebar-close-row { border-bottom-color:rgba(255,255,255,.06); }
[data-theme="dark"] .sidebar-close-title { color:rgba(255,255,255,.3); }
[data-theme="dark"] .mob-nav-item.active .mob-nav-label { color:var(--orange-light); }
[data-theme="dark"] .mob-nav-item::before { background:var(--orange); }
[data-theme="dark"] .page-title  { color:#F0F0F0; }
[data-theme="dark"] .page-sub    { color:#5A5A5A; }
[data-theme="dark"] .card-header { border-bottom-color:#252525; background:#1A1A1A; }
[data-theme="dark"] .card-title  { color:#E0E0E0; }
[data-theme="dark"] .card        { background:#1A1A1A; }

/* ── Dashboard tabs ── */
[data-theme="dark"] .dash-tabs       { background:#141414; border-color:#2A2A2A; }
[data-theme="dark"] .dash-tab        { color:#5A5A5A; }
[data-theme="dark"] .dash-tab.active { color:#F0F0F0; background:#0D0D0D; }

/* ── Admin tabs ── */
[data-theme="dark"] .admin-tabs           { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .admin-tab-btn        { color:#5A5A5A; }
[data-theme="dark"] .admin-tab-btn.active { color:var(--orange); border-bottom-color:var(--orange); }

/* ── Form inputs ── */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
  background: #141414;
  color: #E8E8E8;
  border-color: #2E2E2E;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus { border-color:var(--orange); background:#1C1C1C; box-shadow:0 0 0 3px rgba(240,120,0,.12); }
[data-theme="dark"] .form-input::placeholder { color:#3A3A3A; }
[data-theme="dark"] .form-label { color:#A8A8A8; }
[data-theme="dark"] .form-group .form-label { color:#A8A8A8; }

/* ── Inline search / tag inputs ── */
[data-theme="dark"] .cac-input-row,
[data-theme="dark"] .bl-search-wrap,
[data-theme="dark"] .email-recipients-box { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .email-input-inline,
[data-theme="dark"] .bl-search-input  { color:#E8E8E8; background:transparent; }
[data-theme="dark"] .bl-search-input::placeholder { color:#3A3A3A; }

/* ── OTP boxes ── */
[data-theme="dark"] .otp-box        { background:#141414; color:#E8E8E8; border-color:#2E2E2E; }
[data-theme="dark"] .otp-box:focus  { border-color:var(--orange); box-shadow:0 0 0 3px rgba(240,120,0,.15); }
[data-theme="dark"] .otp-box.filled { background:#0D0D0D; border-color:#3A3A3A; }

/* ── Doc checkbox grid ── */
[data-theme="dark"] .nb-doc-checkbox          { background:#0D0D0D; border-color:#2E2E2E; }
[data-theme="dark"] .nb-doc-checkbox:hover,
[data-theme="dark"] .nb-doc-checkbox.selected { background:rgba(240,120,0,.08); border-color:var(--orange); }
[data-theme="dark"] .nb-doc-check-icon        { background:#1A1A1A; }
[data-theme="dark"] .nb-doc-check-icon.selected { background:var(--orange); }

/* ── Doc paper — reste blanc pour lisibilité des documents officiels ── */
[data-theme="dark"] .doc-paper      { background:#F8F8F8; color:#111; border-color:#CCC; }
[data-theme="dark"] .doc-paper td,
[data-theme="dark"] .doc-paper th   { border-color:#CCC; }
[data-theme="dark"] .doc-paper th   { background:#0B1F3A; color:#fff; }

/* ── Template check cards ── */
[data-theme="dark"] .tpl-check-card          { background:#0D0D0D; border-color:#2E2E2E; }
[data-theme="dark"] .tpl-check-card.selected { background:rgba(240,120,0,.1); border-color:var(--orange); }

/* ── Boutons ── */
[data-theme="dark"] .btn-cancel          { background:#1E1E1E; border-color:#2E2E2E; color:#A8A8A8; }
[data-theme="dark"] .btn-cancel:hover    { background:#2A2A2A; color:#E0E0E0; }
[data-theme="dark"] .btn-navy            { background:#1E1E1E; color:#E0E0E0; border:1px solid #2E2E2E; }
[data-theme="dark"] .btn-navy:hover      { background:#2A2A2A; }
[data-theme="dark"] .pricing-btn-current { background:#1E1E1E !important; color:#5A5A5A !important; }
[data-theme="dark"] .pricing-btn:disabled{ background:#1E1E1E !important; color:#5A5A5A !important; }

/* ── Data tables ── */
[data-theme="dark"] .data-table th          { border-bottom-color:#2E2E2E; color:#5A5A5A; background:#141414; }
[data-theme="dark"] .data-table td          { border-bottom-color:#222222; color:#C8C8C8; }
[data-theme="dark"] .data-table tr:hover td { background:#1E1E1E; }

/* ── Section tag (landing) ── */
[data-theme="dark"] .section-tag { background:rgba(240,120,0,.15); color:var(--orange-light); border-color:rgba(240,120,0,.3); }

/* ── Feature cards ── */
[data-theme="dark"] .feat-title           { color:#E0E0E0; }
[data-theme="dark"] .feat-desc            { color:#5A5A5A; }
[data-theme="dark"] .feature-card:hover   { border-color:rgba(240,120,0,.4); }

/* ── Upgrade page ── */
[data-theme="dark"] .upgrade-page        { background:#0D0D0D; }
[data-theme="dark"] .upgrade-select-info { color:#A8A8A8; }

/* ── Pricing ── */
[data-theme="dark"] .pricing-features li { border-bottom-color:#222222; color:#C8C8C8; }
[data-theme="dark"] .pricing-price       { color:#F0F0F0; }
[data-theme="dark"] .price-amount        { color:#F0F0F0; }
[data-theme="dark"] .feat-yes            { color:#C8C8C8; }
[data-theme="dark"] .pricing-card        { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .pricing-featured    { border-color:var(--orange); box-shadow:0 8px 32px rgba(240,120,0,.2); }

/* ── Word upload ── */
[data-theme="dark"] .word-upload-zone.has-file { background:#0D0D0D; border-color:#3A3A3A; }
[data-theme="dark"] .word-upload-zone:hover    { background:rgba(240,120,0,.06); border-color:var(--orange); }

/* ── Premium sidebar upgrade link ── */
[data-theme="dark"] .premium-upgrade-card { background:linear-gradient(135deg,#1A1A1A,#222222); border:1px solid #2E2E2E; }
[data-theme="dark"] .upgrade-link { background:rgba(240,120,0,.12) !important; border-color:rgba(240,120,0,.2) !important; }

/* ── UPM modal ── */
[data-theme="dark"] .upm-box                           { background:#1A1A1A; border:1px solid #2E2E2E; }
[data-theme="dark"] .upm-blur-overlay                  { background:rgba(13,13,13,.7); }
[data-theme="dark"] .upm-table-mock td                 { border-bottom-color:#222222; color:#A8A8A8; }
[data-theme="dark"] .upm-table-mock tr:nth-child(even) td { background:#141414; }
[data-theme="dark"] .upm-mock-line,
[data-theme="dark"] .upm-mock-avatar                   { opacity:.1; }
[data-theme="dark"] .upm-footer                        { border-top-color:#2E2E2E; }
[data-theme="dark"] .upm-plan                          { border-color:#2E2E2E; }
[data-theme="dark"] .upm-plan-name                     { color:#E0E0E0; }
[data-theme="dark"] .upm-plan-price                    { color:#6A6A6A; }
[data-theme="dark"] .upm-plan-feat                     { color:#A8A8A8; }
[data-theme="dark"] .upm-footer-later                  { border-color:#2E2E2E; color:#5A5A5A; }
[data-theme="dark"] .upm-feature-name                  { color:#F0F0F0; }
[data-theme="dark"] .upm-feature-desc                  { color:#6A6A6A; }

/* ── BL / dossier ── */
[data-theme="dark"] .bl-num-badge   { background:#1A1A1A; color:#E0E0E0; border:1px solid #2E2E2E; }
[data-theme="dark"] .dossier-title  { color:#E0E0E0; }
[data-theme="dark"] .dossier-meta   { color:#6A6A6A; }

/* ── Autocomplete ── */
[data-theme="dark"] .cac-item              { border-bottom-color:#222222; }
[data-theme="dark"] .cac-item:hover,
[data-theme="dark"] .cac-highlighted       { background:rgba(240,120,0,.08); }
[data-theme="dark"] .cac-selected-chip     { background:rgba(5,150,105,.12); border-color:rgba(5,150,105,.22); }
[data-theme="dark"] .cac-item-name         { color:#E0E0E0; }
[data-theme="dark"] .cac-item-sub          { color:#5A5A5A; }
[data-theme="dark"] .cac-dropdown          { background:#1A1A1A; border-color:#2E2E2E; box-shadow:0 8px 24px rgba(0,0,0,.6); }

/* ── Doc list ── */
[data-theme="dark"] .doc-item          { border-bottom-color:#222222; }
[data-theme="dark"] .doc-item-name     { color:#E0E0E0; }
[data-theme="dark"] .doc-item-meta     { color:#5A5A5A; }
[data-theme="dark"] .doc-icon          { background:#2A2A2A; }
[data-theme="dark"] .doc-icon svg      { stroke:var(--orange-light); }
[data-theme="dark"] .doc-sel-name      { color:#E0E0E0; }
[data-theme="dark"] .doc-sel-num       { color:var(--orange); }

/* ── Locked widgets ── */
[data-theme="dark"] .locked-widget          { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .locked-widget:hover    { background:#222222; border-color:var(--orange); }
[data-theme="dark"] .locked-widget-name     { color:#E0E0E0; }
[data-theme="dark"] .locked-section-title   { color:#5A5A5A; }

/* ── Auth page ── */
[data-theme="dark"] .auth-page   { background:#0D0D0D; }
[data-theme="dark"] .auth-card   { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .auth-logo h2{ color:#F0F0F0; }
[data-theme="dark"] .auth-logo p { color:#5A5A5A; }
[data-theme="dark"] .auth-switch { color:#5A5A5A; }
[data-theme="dark"] .auth-switch a { color:var(--orange); }

/* ── Badges ── */
[data-theme="dark"] .badge-info    { background:rgba(59,130,246,.15); color:#93C5FD; border-color:rgba(59,130,246,.2); }
[data-theme="dark"] .badge-success { background:rgba(5,150,105,.15); color:#6EE7B7; border-color:rgba(5,150,105,.2); }
[data-theme="dark"] .badge-warning { background:rgba(180,83,9,.15); color:#FCD34D; border-color:rgba(180,83,9,.2); }

/* ── Messages (erreur / succès) ── */
[data-theme="dark"] .msg.error   { background:rgba(220,38,38,.12); color:#F87171; border-color:rgba(220,38,38,.25); }
[data-theme="dark"] .msg.success { background:rgba(5,150,105,.12); color:#6EE7B7; border-color:rgba(5,150,105,.25); }

/* ── Onboarding ── */
[data-theme="dark"] .onb-card         { background:linear-gradient(135deg,#1A1A1A 80%,#1E1E1E); border-color:#2A2A2A; }
[data-theme="dark"] .onb-card-title   { color:#E0E0E0; }
[data-theme="dark"] .onb-step         { background:#141414; border-color:#1E1E1E; }
[data-theme="dark"] .onb-step:hover   { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .onb-step-label   { color:#E0E0E0; }
[data-theme="dark"] .onb-step-desc    { color:#5A5A5A; }
[data-theme="dark"] .onb-profile-card { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .onb-profile-title{ color:#E0E0E0; }

/* ── Tour tip ── */
[data-theme="dark"] #tour-tip        { background:#1A1A1A; border:1px solid #2E2E2E; box-shadow:0 12px 40px rgba(0,0,0,.8); }
[data-theme="dark"] .tour-tip-title  { color:#F0F0F0; }
[data-theme="dark"] .tour-tip-text   { color:#A8A8A8; }
[data-theme="dark"] .tour-finish-title{ color:#F0F0F0; }
[data-theme="dark"] #tour-finish-card { background:#1A1A1A; border:1px solid #2E2E2E; }

/* ── Modal ── */
[data-theme="dark"] .modal-overlay  { background:rgba(0,0,0,.75); }
[data-theme="dark"] .modal-box      { background:#1A1A1A; border:1px solid #2E2E2E; }
[data-theme="dark"] .modal-header   { background:#141414; border-bottom:1px solid #2E2E2E; }
[data-theme="dark"] .modal-body     { color:#C8C8C8; }

/* ── Sécurité ── */
[data-theme="dark"] .sec-modal-inner{ background:#1A1A1A; border:1px solid #2E2E2E; }
[data-theme="dark"] .sec-modal-title{ color:#F0F0F0; }

/* ── Notifications ── */
[data-theme="dark"] .notif-item      { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .notif-item:hover{ background:#222222; }
[data-theme="dark"] .notif-title     { color:#E0E0E0; }
[data-theme="dark"] .notif-body      { color:#A8A8A8; }
[data-theme="dark"] .notif-dropdown  { background:#1A1A1A; border-color:#2E2E2E; box-shadow:0 8px 32px rgba(0,0,0,.7); }
[data-theme="dark"] .notif-header    { background:#141414; border-bottom-color:#2E2E2E; color:#E0E0E0; }

/* ── Support / Guide ── */
[data-theme="dark"] .guide-article        { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .guide-article-title  { color:#E0E0E0; }
[data-theme="dark"] .guide-article-content{ color:#A8A8A8; }
[data-theme="dark"] .support-title        { color:#F0F0F0; }
[data-theme="dark"] .support-desc         { color:#A8A8A8; }
[data-theme="dark"] .support-form-card    { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .support-tab          { background:#1A1A1A; border-color:#2E2E2E; color:#A8A8A8; }
[data-theme="dark"] .support-tab.active   { background:rgba(240,120,0,.12); border-color:var(--orange); color:var(--orange-light); }
[data-theme="dark"] .support-ticket-card  { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .guide-sidebar        { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .guide-nav-link       { color:#A8A8A8; }
[data-theme="dark"] .guide-nav-link:hover { background:#222222; color:#E0E0E0; }
[data-theme="dark"] .guide-nav-link.active{ background:rgba(240,120,0,.12); border-left-color:var(--orange); color:var(--orange-light); }
[data-theme="dark"] .guide-search         { background:#141414; color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] .guide-search::placeholder { color:#4A4A4A; }

/* ── Notifications page ── */
[data-theme="dark"] .notif-item-title     { color:#E0E0E0; }
[data-theme="dark"] .notif-item-msg       { color:#8A8A8A; }
[data-theme="dark"] .notif-item-time      { color:#5A5A5A; }
[data-theme="dark"] .notif-item:hover     { background:#222222; }
[data-theme="dark"] .notif-unread         { background:rgba(240,120,0,.07); }
[data-theme="dark"] .notif-unread:hover   { background:rgba(240,120,0,.12); }
[data-theme="dark"] .notif-dd-ftr         { background:#141414; border-top-color:#2E2E2E; }
[data-theme="dark"] .notif-see-all-btn    { color:#A8A8A8; }
[data-theme="dark"] .notif-see-all-btn:hover { background:#222222; color:#E0E0E0; }
[data-theme="dark"] .notif-full-list      { border-color:#2E2E2E; }
[data-theme="dark"] .notif-prefs-card     { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .notif-prefs-title    { color:#E0E0E0; }
[data-theme="dark"] .notif-pref-row:hover { background:#222222; }
[data-theme="dark"] .notif-pref-label     { color:#C8C8C8; }
[data-theme="dark"] .notif-dot            { background:var(--orange); }

/* ── Soutenir / Donation ── */
[data-theme="dark"] .soutenir-title       { color:#F0F0F0; }
[data-theme="dark"] .soutenir-desc        { color:#A8A8A8; }
[data-theme="dark"] .donation-form-card   { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .donation-amount-btn  { background:#1A1A1A; border-color:#2E2E2E; color:#C8C8C8; }
[data-theme="dark"] .donation-amount-btn:hover,
[data-theme="dark"] .donation-amount-btn.active { background:rgba(240,120,0,.15); border-color:var(--orange); color:var(--orange-light); }
[data-theme="dark"] .donation-custom-btn  { color:#5A5A5A; }
[data-theme="dark"] .donor-wall           { background:#111111; border-color:#2A2A2A; }
[data-theme="dark"] .donor-card           { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .donor-name           { color:#E0E0E0; }
[data-theme="dark"] .donor-msg            { color:#6A6A6A; }
[data-theme="dark"] .sidebar-supporter-badge { background:rgba(240,120,0,.12); border-color:rgba(240,120,0,.3); color:var(--orange-light); }

/* ── Profil ── */
[data-theme="dark"] .profile-card  { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .profile-label { color:#A8A8A8; }
[data-theme="dark"] .profile-value { color:#E0E0E0; }

/* ── Chatbot ── */
[data-theme="dark"] .chatbot-window       { background:#1A1A1A; border:1px solid #2E2E2E; box-shadow:0 8px 40px rgba(0,0,0,.7); }
[data-theme="dark"] .chatbot-messages     { background:#0D0D0D; }
[data-theme="dark"] .cb-bubble            { background:#2A2A2A; color:#E0E0E0; }
[data-theme="dark"] .cb-bubble-bot        { background:#222222; color:#E0E0E0; }
[data-theme="dark"] .chatbot-input        { background:#141414; color:#E8E8E8; border-color:#2E2E2E; }
[data-theme="dark"] .chatbot-input::placeholder { color:#3A3A3A; }
[data-theme="dark"] .chatbot-footer       { background:#141414; border-top:1px solid #2E2E2E; }
[data-theme="dark"] .chatbot-powered      { color:#4A4A4A; }
[data-theme="dark"] .chatbot-sugg-btn     { background:#222222; border-color:#2E2E2E; color:#C8C8C8; }
[data-theme="dark"] .chatbot-sugg-btn:hover { background:#2E2E2E; color:#F0F0F0; border-color:var(--orange); }

/* ══════════════════════════════════════════════════════════
   DARK MODE — SUPER ADMIN  (thème site: #0D0D0D / #1A1A1A)
══════════════════════════════════════════════════════════ */

/* Layout */
[data-theme="dark"] .sa-layout  { background:#0D0D0D; }
[data-theme="dark"] .sa-main    { background:#0D0D0D; }

/* Page headers */
[data-theme="dark"] .sa-page-title   { color:#E0E0E0; }
[data-theme="dark"] .sa-page-sub     { color:#666; }
[data-theme="dark"] .sa-section-title { color:#888; }

/* Stat cards */
[data-theme="dark"] .sa-stat-card { background:#1A1A1A; border-color:#2E2E2E; box-shadow:none; }
[data-theme="dark"] .sa-stat-value { color:#E0E0E0; }
[data-theme="dark"] .sa-stat-label { color:#666; }

/* Plan breakdown */
[data-theme="dark"] .sa-plan-breakdown { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-plan-bar-bg    { background:#2E2E2E; }
[data-theme="dark"] .sa-plan-label     { color:#C0C0C0; }
[data-theme="dark"] .sa-plan-count     { color:#666; }

/* Log mini */
[data-theme="dark"] .sa-log-mini                  { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-log-row                   { background:#0D0D0D; color:#C0C0C0; border-color:#2E2E2E; }
[data-theme="dark"] .sa-log-row:nth-child(even)   { background:#1A1A1A; }
[data-theme="dark"] .sa-log-action                { color:#A78BFA; }
[data-theme="dark"] .sa-log-target                { color:#666; }
[data-theme="dark"] .sa-log-time                  { color:#555; }

/* Tables */
[data-theme="dark"] .sa-table        { background:#1A1A1A; }
[data-theme="dark"] .sa-table thead  { background:#222; }
[data-theme="dark"] .sa-table th     { color:#888; border-bottom:1px solid #0D0D0D; }
[data-theme="dark"] .sa-table td     { color:#C0C0C0; border-bottom-color:#2E2E2E; }
[data-theme="dark"] .sa-table tr:hover td { background:#222; }

/* Toolbar inputs */
[data-theme="dark"] .sa-search-input              { background:#1A1A1A; border-color:#2E2E2E; color:#E0E0E0; }
[data-theme="dark"] .sa-search-input::placeholder { color:#555; }
[data-theme="dark"] .sa-filter-select             { background:#1A1A1A; border-color:#2E2E2E; color:#E0E0E0; }

/* Buttons */
[data-theme="dark"] .sa-btn       { background:#2E2E2E; color:#C0C0C0; border:none; }
[data-theme="dark"] .sa-btn:hover { background:#383838; color:#E0E0E0; filter:none; }

/* Cards & form areas */
[data-theme="dark"] .sa-form-card    { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-detail-card  { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-detail-name  { color:#E0E0E0; }
[data-theme="dark"] .sa-detail-email { color:#666; }
[data-theme="dark"] .sa-fr-card,
[data-theme="dark"] .sa-ticket-card  { background:#1A1A1A; border-color:#2E2E2E; }

/* JSON field */
[data-theme="dark"] .sa-json-field { background:#0D0D0D; color:#A78BFA; border-color:#2E2E2E; }

/* Toggle switch */
[data-theme="dark"] .sa-toggle-slider { background:#2E2E2E; }
[data-theme="dark"] .sa-toggle-slider::before { background:#888; }

/* Doc tiles & cards */
[data-theme="dark"] .sa-doc-tile       { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-doc-tile:hover { background:#222; border-color:#7C3AED; }
[data-theme="dark"] .sa-doc-tile-name  { color:#E0E0E0; }
[data-theme="dark"] .sa-doc-card       { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-doc-card:hover { background:#222; border-color:#7C3AED; }
[data-theme="dark"] .sa-doc-card-name  { color:#E0E0E0; }
[data-theme="dark"] .sa-doc-card-num   { color:#A78BFA; }
[data-theme="dark"] .sa-company-header { color:#888; border-bottom-color:#2E2E2E; }

/* Ultra VIP */
[data-theme="dark"] .sa-uvip-box   { background:#0D0D0D; border-color:#7C3AED44; }
[data-theme="dark"] .sa-priv-check { color:#C0C0C0; }

/* Login box */
[data-theme="dark"] .sa-login-box   { background:#1A1A1A; border-color:#2E2E2E; box-shadow:0 24px 80px rgba(0,0,0,.6); }
[data-theme="dark"] .sa-login-title { color:#E0E0E0; }
[data-theme="dark"] .sa-login-sub   { color:#666; }

/* Support summary */
[data-theme="dark"] .sa-support-label { color:#666; }
[data-theme="dark"] .sa-support-val   { color:#E0E0E0; }

/* Guide cards */
[data-theme="dark"] .sa-guide-card       { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-guide-card-title { color:#E0E0E0; }
[data-theme="dark"] .sa-guide-card-desc  { color:#666; }

/* SA analytics */
[data-theme="dark"] .sa-an-chart-card    { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-an-chart-title   { color:#E0E0E0; }

/* Email cards */
[data-theme="dark"] .sa-email-card        { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-email-card:hover  { background:#222; border-color:#7C3AED; }
[data-theme="dark"] .sa-email-card-name   { color:#E0E0E0; }
[data-theme="dark"] .sa-email-card-subject{ color:#666; }

/* Doc editor toolbar & palette */
[data-theme="dark"] .doc-editor-toolbar  { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .doc-editor-palette  { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .doc-palette-cat-label { color:#666; }
[data-theme="dark"] .doc-toolbar-back    { background:#1A1A1A; color:#888; border-color:#2E2E2E; }
[data-theme="dark"] .doc-editor-tpl-name { color:#E0E0E0; }
[data-theme="dark"] .doc-tb-btn          { background:#1A1A1A; color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] .doc-tb-btn:hover    { background:#2E2E2E; }
[data-theme="dark"] .doc-tb-select       { background:#1A1A1A; color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] .doc-tb-action       { background:#1A1A1A; color:#888; border-color:#2E2E2E; }
[data-theme="dark"] .doc-tb-action:hover { color:#E0E0E0; border-color:#7C3AED; }
[data-theme="dark"] .doc-field-panel     { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .doc-field-panel-header { color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] .fp-toggle-label     { color:#888; }

/* Email editor */
[data-theme="dark"] .email-editor-toolbar { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .email-editor-main    { background:#0D0D0D; }
[data-theme="dark"] .email-editor-sidebar { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .email-body-toolbar   { background:#1A1A1A; border-color:#2E2E2E; }

/* Form inputs in SA sections */
[data-theme="dark"] #view-super-admin .form-input,
[data-theme="dark"] #view-super-admin .form-select { background:#1A1A1A; color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] #view-super-admin .form-label  { color:#888; }
[data-theme="dark"] #sa-section-email-editor .form-input,
[data-theme="dark"] #sa-section-doc-editor .form-input { background:#1A1A1A; color:#E0E0E0; border-color:#2E2E2E; }
[data-theme="dark"] #sa-section-email-editor .form-label,
[data-theme="dark"] #sa-section-doc-editor .form-label { color:#888; }
[data-theme="dark"] #sa-section-req-fields .sa-section-title { color:#E0E0E0; }

/* ════════════════════════════════
   DARK MODE — correctifs complets
════════════════════════════════ */

/* ── OTP (login & sécurité) ── */
[data-theme="dark"] .otp-box            { background:#1A1A1A; border-color:#2E2E2E; color:#E0E0E0; }
[data-theme="dark"] .otp-box.filled     { border-color:var(--orange); background:#222222; }
[data-theme="dark"] .otp-timer .timer-val { color:#E0E0E0; }
[data-theme="dark"] .sec-otp-box        { background:#1A1A1A; border-color:#2E2E2E; color:#E0E0E0; }
[data-theme="dark"] .sec-otp-box.filled { border-color:#22C55E; background:#1A2E1A; }

/* ── Sécurité — blocs 2FA / sessions ── */
[data-theme="dark"] .sec-block          { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sec-block-title    { color:#E0E0E0; }
[data-theme="dark"] .sec-block-desc     { color:#A8A8A8; }
[data-theme="dark"] .sec-session-row    { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .sec-session-device { color:#E0E0E0; }
[data-theme="dark"] .sec-session-meta   { color:#6A6A6A; }
[data-theme="dark"] .sec-badge-current  { background:rgba(240,120,0,.15); color:var(--orange-light); border-color:rgba(240,120,0,.3); }
[data-theme="dark"] .sec-log-row        { border-bottom-color:#2E2E2E; color:#C8C8C8; }
[data-theme="dark"] .sec-log-date       { color:#5A5A5A; }
[data-theme="dark"] .sec-log-action     { color:#E0E0E0; }
[data-theme="dark"] .sec-log-ip         { color:#6A6A6A; }
[data-theme="dark"] .sec-danger-zone    { border-color:#3A1A1A; background:#1A0D0D; }
[data-theme="dark"] .sec-danger-title   { color:#FF8080; }
[data-theme="dark"] .sec-danger-desc    { color:#8A6060; }

/* ── Formulaire Nouveau BL (stepper) ── */
[data-theme="dark"] .nb-card           { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .nb-card-title     { color:#E0E0E0; }
[data-theme="dark"] .nb-card-sub       { color:#A8A8A8; }
[data-theme="dark"] .nb-section-label  { color:#C8C8C8; }
[data-theme="dark"] .nb-doc-name       { color:#E0E0E0; }
[data-theme="dark"] .nb-doc-desc       { color:#6A6A6A; }
[data-theme="dark"] .nb-form-label     { color:#C8C8C8; }
[data-theme="dark"] .nb-form-meta-item { color:#A8A8A8; }
[data-theme="dark"] .nb-form-meta-item strong { color:#E0E0E0; }
[data-theme="dark"] .nb-step-bar       { background:#1E1E1E; }
[data-theme="dark"] .nb-step-label     { color:#A8A8A8; }
[data-theme="dark"] .nb-step-label.active { color:#E0E0E0; }
[data-theme="dark"] .nb-step-num       { background:#2A2A2A; color:#6A6A6A; border-color:#2E2E2E; }
[data-theme="dark"] .nb-step-num.active{ background:var(--orange); color:#fff; }
[data-theme="dark"] .nb-step-num.done  { background:#1A2E1A; color:#34D399; }
[data-theme="dark"] .nb-doc-checkbox   { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .nb-doc-checkbox.selected { background:rgba(240,120,0,.1); border-color:var(--orange); }
[data-theme="dark"] .nb-doc-check-icon { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .nb-field-badge    { background:rgba(240,120,0,.1); color:var(--orange-light); border-color:rgba(240,120,0,.2); }
[data-theme="dark"] .nb-info-row       { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .nb-info-key       { color:#6A6A6A; }
[data-theme="dark"] .nb-info-val       { color:#E0E0E0; }
[data-theme="dark"] .nb-progress-bar-bg{ background:#2A2A2A; }

/* ── Autocomplete client ── */
[data-theme="dark"] .cac-dropdown      { background:#1A1A1A; border-color:#2E2E2E; box-shadow:0 8px 24px rgba(0,0,0,.6); }
[data-theme="dark"] .cac-item          { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .cac-item:hover    { background:#222222; }
[data-theme="dark"] .cac-item-name     { color:#E0E0E0; }
[data-theme="dark"] .cac-company       { color:#A8A8A8; }
[data-theme="dark"] .cac-contact       { color:#6A6A6A; }
[data-theme="dark"] .cac-empty         { color:#6A6A6A; }
[data-theme="dark"] .cac-empty strong  { color:#A8A8A8; }
[data-theme="dark"] .cac-chip          { background:#2A2A2A; border-color:#3A3A3A; }
[data-theme="dark"] .cac-chip-name     { color:#E0E0E0; }
[data-theme="dark"] .cac-chip-rm       { color:#6A6A6A; }
[data-theme="dark"] .cac-input-row     { background:#141414; border-color:#2E2E2E; }

/* ── Détail client ── */
[data-theme="dark"] .cd-info-label     { color:#6A6A6A; }
[data-theme="dark"] .cd-info-value     { color:#E0E0E0; }
[data-theme="dark"] .cd-stat-num       { color:#F0F0F0; }
[data-theme="dark"] .cd-stat-label     { color:#6A6A6A; }
[data-theme="dark"] .cd-doc-tag        { background:#2A2A2A; color:#C8C8C8; }
[data-theme="dark"] .cd-bl-row         { border-bottom-color:#2E2E2E; color:#C8C8C8; }
[data-theme="dark"] .cd-bl-date        { color:#5A5A5A; }
[data-theme="dark"] .cd-doc-count      { background:rgba(240,120,0,.1); color:var(--orange-light); }

/* ── Analytics ── */
[data-theme="dark"] .an-kpi-card       { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .an-kpi-value      { color:#F0F0F0; }
[data-theme="dark"] .an-kpi-label      { color:#6A6A6A; }
[data-theme="dark"] .an-kpi-delta      { color:#A8A8A8; }
[data-theme="dark"] .an-chart-card     { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .an-chart-title    { color:#E0E0E0; }
[data-theme="dark"] .an-chart-sub      { color:#6A6A6A; }
[data-theme="dark"] .an-panel          { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .an-section-title  { color:#E0E0E0; }
[data-theme="dark"] .an-client-row     { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .an-client-name    { color:#E0E0E0; }
[data-theme="dark"] .an-client-count   { color:#C8C8C8; }
[data-theme="dark"] .an-client-bar-bg  { background:#2A2A2A; }
[data-theme="dark"] .an-client-bar     { background:linear-gradient(90deg,var(--orange),var(--orange-light)); }
[data-theme="dark"] .an-empty          { color:#5A5A5A; }
[data-theme="dark"] .sa-an-chart-card  { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .sa-an-chart-title { color:#E0E0E0; }

/* ── Feedback FAB modal ── */
[data-theme="dark"] .feedback-modal-box  { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .fm-header          { background:#141414; border-bottom-color:#2E2E2E; }
[data-theme="dark"] .fm-title           { color:#F0F0F0; }
[data-theme="dark"] .fm-section-title   { color:#E0E0E0; }
[data-theme="dark"] .fm-section-sub     { color:#6A6A6A; }
[data-theme="dark"] .fm-idea-title      { color:#E0E0E0; }
[data-theme="dark"] .fm-idea-desc       { color:#8A8A8A; }
[data-theme="dark"] .fm-vote-btn        { background:#2A2A2A; border-color:#3A3A3A; color:#C8C8C8; }
[data-theme="dark"] .fm-vote-btn:hover  { background:#333333; border-color:var(--orange); color:var(--orange-light); }
[data-theme="dark"] .fm-vote-btn.voted  { background:rgba(240,120,0,.15); border-color:var(--orange); color:var(--orange-light); }
[data-theme="dark"] .fm-input           { background:#141414; border-color:#2E2E2E; color:#E0E0E0; }
[data-theme="dark"] .fm-tab             { color:#6A6A6A; border-bottom-color:#2E2E2E; }
[data-theme="dark"] .fm-tab.active      { color:var(--orange-light); border-bottom-color:var(--orange); }
[data-theme="dark"] .fm-submit-btn      { background:var(--orange); }
[data-theme="dark"] .fm-tag             { background:#2A2A2A; color:#A8A8A8; border-color:#3A3A3A; }

/* ── Chatbot bulles ── */
[data-theme="dark"] .cb-bubble          { background:#2A2A2A; color:#E0E0E0; }
[data-theme="dark"] .cb-bubble-bot      { background:#222222; color:#E0E0E0; }
[data-theme="dark"] .cb-header          { background:#141414; border-bottom:1px solid #2E2E2E; color:#E0E0E0; }
[data-theme="dark"] .cb-header-title    { color:#F0F0F0; }
[data-theme="dark"] .cb-header-sub      { color:#6A6A6A; }

/* ── Download dropdown ── */
[data-theme="dark"] .dl-dropdown        { background:#1A1A1A; border-color:#2E2E2E; box-shadow:0 8px 24px rgba(0,0,0,.6); }
[data-theme="dark"] .dl-dropdown button { background:transparent; color:#C8C8C8; border-bottom-color:#2E2E2E; }
[data-theme="dark"] .dl-dropdown button:hover { background:#222222; color:#F0F0F0; }

/* ── Guide articles ── */
[data-theme="dark"] .guide-article      { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .guide-article-title{ color:#E0E0E0; }
[data-theme="dark"] .guide-article-content { color:#A8A8A8; }
[data-theme="dark"] .guide-article-content h3 { color:#E0E0E0; }
[data-theme="dark"] .guide-article-content a  { color:var(--orange-light); }
[data-theme="dark"] .guide-article-content strong { color:#F0F0F0; }

/* ── Profil onboarding section ── */
[data-theme="dark"] .onb-profile-card   { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .onb-profile-title  { color:#E0E0E0; }
[data-theme="dark"] .onb-profile-sub    { color:#A8A8A8; }
[data-theme="dark"] .avatar-edit-wrap   { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .avatar-crop-box    { background:#0D0D0D; border-color:#2E2E2E; }

/* ── États vides maritimes ── */
[data-theme="dark"] .maritime-empty-title { color:#E0E0E0; }
[data-theme="dark"] .maritime-empty-sub   { color:#6A6A6A; }

/* ── Modal upgrade (UPM) ── */
[data-theme="dark"] .upm-blur-label     { color:#A8A8A8; }
[data-theme="dark"] .upm-modal-box      { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .upm-modal-title    { color:#E0E0E0; }
[data-theme="dark"] .upm-feature-name   { color:#E0E0E0; }
[data-theme="dark"] .upm-feature-desc   { color:#8A8A8A; }

/* ── Landing page (mode sombre) ── */
[data-theme="dark"] .feat-title         { color:#E0E0E0; }
[data-theme="dark"] .feat-desc          { color:#8A8A8A; }
[data-theme="dark"] .doc-name           { color:#E0E0E0; }
[data-theme="dark"] .doc-company        { color:#A8A8A8; }
[data-theme="dark"] .features-section   { background:#0D0D0D; }
[data-theme="dark"] .feature-card       { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .section-title      { color:#F0F0F0; }
[data-theme="dark"] .section-sub        { color:#8A8A8A; }
[data-theme="dark"] .hero-badge         { color:#E0E0E0; }
[data-theme="dark"] .pricing-grid .pricing-card { background:#1A1A1A; }
[data-theme="dark"] .pricing-name       { color:#E0E0E0; }
[data-theme="dark"] .pricing-desc       { color:#8A8A8A; }
[data-theme="dark"] .pricing-footer     { border-top-color:#2E2E2E; }

/* ── Page titre/sous-titre ── */
[data-theme="dark"] .page-title         { color:#F0F0F0; }
[data-theme="dark"] .page-sub           { color:#8A8A8A; }
[data-theme="dark"] .card-title         { color:#E0E0E0; }

/* ── Notifications time ── */
[data-theme="dark"] .notif-item-time    { color:#4A4A4A; }

/* ── Upgrade link text ── */
[data-theme="dark"] .upgrade-link       { color:#F0F0F0; }

/* ── Modale Email ── */
[data-theme="dark"] .email-recipients-box { background:#141414; border-color:#2E2E2E; }
[data-theme="dark"] .email-tag          { background:#2A2A2A; color:#C8C8C8; }
[data-theme="dark"] .modal-box          { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .modal-header       { background:#141414; border-bottom-color:#2E2E2E; }
[data-theme="dark"] .modal-title        { color:#F0F0F0; }
[data-theme="dark"] .modal-body p, [data-theme="dark"] .modal-body label { color:#C8C8C8; }

/* ── Plan / Upgrade page ── */
[data-theme="dark"] .upgrade-hero       { background:#0D0D0D; }
[data-theme="dark"] .upgrade-hero h1    { color:#F0F0F0; }
[data-theme="dark"] .upgrade-hero p     { color:#A8A8A8; }
[data-theme="dark"] .pricing-name       { color:#E0E0E0; }
[data-theme="dark"] .pricing-price      { color:#F0F0F0; }
[data-theme="dark"] .feat-yes           { color:#C8C8C8; }

/* ── History search ── */
[data-theme="dark"] .history-filter-sel { color:#C8C8C8; }

/* ── Locked widgets ── */
[data-theme="dark"] .locked-widget      { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .locked-widget-name { color:#E0E0E0; }
[data-theme="dark"] .locked-widget-desc { color:#6A6A6A; }

/* ── Tour nav buttons ── */
[data-theme="dark"] .tour-nav-btn       { color:#A8A8A8; border-color:#2E2E2E; }
[data-theme="dark"] .tour-nav-btn:hover { color:#E0E0E0; }
[data-theme="dark"] .tour-skip          { color:#5A5A5A; }
[data-theme="dark"] .tour-skip:hover    { color:#A8A8A8; }

/* ── PRINT ── */
@media print{
  .topnav,.sidebar,.preview-toolbar,.form-actions,.modal-overlay{display:none !important;}
  .doc-paper{box-shadow:none;border:none;padding:1rem;}
  .dashboard-layout{display:block;}
  .dash-main{padding:0;background:#DED9CA;}
}
/* ════════════════════════════════
   3D ICONS — ico3d system
════════════════════════════════ */

/* Base 3D emoji/icon wrapper */
.ico3d {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.2));
  transition: transform .15s ease, filter .15s ease;
  will-change: transform;
}

/* Hover / active 3D lift */
.sidebar-link:hover .ico3d,
.sidebar-link.active .ico3d {
  transform: scale(1.22) translateY(-1px);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Sidebar active — orange glow */
.sidebar-link.active .ico3d {
  filter: drop-shadow(0 0 6px rgba(240,120,0,.55)) drop-shadow(1px 3px 5px rgba(0,0,0,.4));
}

/* Feature card icons */
.feat-icon .ico3d {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

/* Stat cards — icon above number */
.stat-card .ico3d {
  font-size: 22px;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,.35));
}

/* Onboarding checklist step icons */
.onb-step-icon {
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,.3));
  transition: transform .15s;
  display: inline-block;
}
.onb-step:hover .onb-step-icon { transform: scale(1.15) translateY(-1px); }

/* Notification type icons */
.notif-type-icon {
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,.25));
}

/* Chatbot FAB — already styled, just add depth */
.chatbot-fab {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.chatbot-fab:hover {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

/* Empty states */
.empty-state-icon {
  filter: drop-shadow(1px 3px 5px rgba(0,0,0,.25));
  display: inline-block;
  transition: transform .2s;
}
.empty-state:hover .empty-state-icon { transform: scale(1.1) translateY(-2px); }

/* Upgrade / plan badges */
.upgrade-link .ico3d {
  filter: drop-shadow(0 0 8px rgba(240,120,0,.7)) drop-shadow(1px 2px 4px rgba(0,0,0,.4));
  animation: ico-pulse 2.4s ease-in-out infinite;
}
@keyframes ico-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.18) translateY(-1px); }
}

/* Navbar bell icon */
#nav-bell-btn {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* ── HAMBURGER BUTTON (mobile only) ── */
.nav-hamburger{display:none;align-items:center;justify-content:center;background:transparent;border:none;padding:8px;cursor:pointer;color:#fff;flex-shrink:0;min-width:44px;min-height:44px;}
.nav-hamburger svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;}

/* ── SIDEBAR CLOSE BUTTON (mobile drawer) ── */
.sidebar-close-btn{display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;border-radius:8px;width:36px;height:36px;font-size:18px;color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s;}
.sidebar-close-btn:hover{background:rgba(255,255,255,.2);}
.sidebar-close-row{display:none;align-items:center;justify-content:space-between;padding:.8rem 1rem .4rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.4rem;}
.sidebar-close-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:1px;text-transform:uppercase;}
/* Sidebar dropdown header — profil + plan */
.sidebar-header{display:none;align-items:center;justify-content:space-between;padding:.9rem 1rem .8rem;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-header-user{display:flex;align-items:center;gap:10px;}
.sidebar-header-avatar{width:38px;height:38px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0;}
.sidebar-header-info{display:flex;flex-direction:column;gap:3px;}
.sidebar-header-name{font-size:13px;font-weight:600;color:#fff;}
.sidebar-header-plan{font-size:9px;font-weight:800;letter-spacing:.7px;padding:2px 7px;border-radius:50px;display:inline-block;}

/* Logout in sidebar — only visible on mobile */
.sidebar-logout-divider{display:none;}
.sidebar-logout-link{display:none;}

/* ── SA MOBILE TOGGLE ── */
.sa-mobile-toggle{display:none;position:fixed;top:70px;left:12px;z-index:1200;background:#7C3AED;color:#fff;border:none;border-radius:8px;width:44px;height:44px;font-size:18px;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(124,58,237,.5);}

/* ── MOBILE OVERLAY ── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;backdrop-filter:blur(2px);}
.mobile-overlay.active{display:block;}

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Visible on ≤ 768px — 5 tabs: Home, New, History, Profile, Menu
══════════════════════════════════════════════════════════ */
.mob-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  z-index:960;
  background:var(--white);
  border-top:1px solid var(--border-light);
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
  /* iPhone safe area */
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-bottom:max(env(safe-area-inset-bottom,0px), 0px);
}
.mob-bottom-nav-inner{
  display:flex;align-items:stretch;height:58px;
}
.mob-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
  background:none;border:none;cursor:pointer;
  padding:6px 4px 4px;
  min-width:44px;
  position:relative;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-item:active{background:rgba(240,120,0,.06);}
.mob-nav-icon{font-size:22px;line-height:1;transition:transform .18s;}
.mob-nav-label{font-size:9.5px;font-weight:600;letter-spacing:.2px;color:var(--text-muted);transition:color .15s;white-space:nowrap;}
.mob-nav-item::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--orange);transition:width .2s;
}
.mob-nav-item.active::before{width:28px;}
.mob-nav-item.active .mob-nav-label{color:var(--orange);}
.mob-nav-item.active .mob-nav-icon{transform:scale(1.15) translateY(-1px);}
.mob-nav-badge{
  position:absolute;top:5px;right:calc(50% - 18px);
  background:var(--orange);color:#fff;font-size:9px;font-weight:800;
  min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;
}

/* Dark mode bottom nav */
[data-theme="dark"] .mob-bottom-nav{background:#121212;border-top-color:#2A2A2A;box-shadow:0 -4px 20px rgba(0,0,0,.5);}
[data-theme="dark"] .mob-nav-label{color:#6A6A6A;}
[data-theme="dark"] .mob-nav-item:active{background:rgba(240,120,0,.08);}

/* ════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
════════════════════════════════ */
@media(max-width:900px){
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .docs-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
}

/* ════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
════════════════════════════════ */
@media(max-width:768px){

  /* ── Topnav ── */
  .topnav{padding:0 .9rem;gap:.5rem;height:56px;}
  .logo-badge{width:34px;height:34px;font-size:14px;}
  .logo-name{font-size:15px;}
  .nav-hamburger{display:flex;}
  .nav-username{display:none;}
  .nav-logout{display:none;}           /* logout via sidebar menu */
  .nav-links{gap:.4rem;}
  .nav-btn{padding:7px 12px;font-size:12px;}
  .theme-toggle-btn{width:36px;height:36px;font-size:15px;}

  /* ── Bottom nav — show on mobile ── */
  .mob-bottom-nav{display:block;}

  /* ── Dashboard layout ── */
  .dashboard-layout{position:relative;min-height:calc(100svh - 56px);}
  .dash-main{
    padding:1rem .9rem;
    padding-top:1.2rem;
    width:100%;
    /* leave room for bottom nav + safe area */
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }

  /* ── Sidebar — dropdown pleine largeur sous la topnav ── */
  .sidebar{
    position:fixed;
    top:56px; left:0; right:0; bottom:auto;
    width:100%; max-height:calc(100svh - 56px - env(safe-area-inset-bottom,0px));
    z-index:950;
    background:linear-gradient(160deg,#0B1F3A 0%,#0E2646 100%);
    transition:opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
    opacity:0; transform:translateY(-6px);
    visibility:hidden; pointer-events:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
  .sidebar.open{
    opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
  }
  .sidebar-close-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:.8rem 1.1rem .6rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .sidebar-close-btn{display:flex;}
  .sidebar-logout-divider{display:block;}
  .sidebar-logout-link{display:flex;}
  .sidebar-header{display:flex;}
  /* Masquer le badge plan dans la topnav sur mobile — il est dans le dropdown */
  .nav-plan-badge{display:none !important;}

  /* ── Sidebar items — grille 2 colonnes sur grand mobile ── */
  .sidebar-label {
    padding:.7rem 1.1rem .2rem;
    font-size:9px; letter-spacing:1.6px; text-transform:uppercase;
    color:rgba(255,255,255,.35); font-weight:700;
  }
  .sidebar-link {
    font-size:14px; font-weight:500;
    padding:11px 1.1rem;
    margin:1px .5rem;
    min-height:48px;
    gap:12px;
    color:rgba(215,232,255,.9);
    border-radius:10px;
  }
  .sidebar-link.active {
    background:rgba(240,120,0,.18);
    color:#FFBB66; font-weight:600;
  }
  .sidebar-link .ico3d { font-size:18px; flex-shrink:0; }
  .sidebar-divider { margin:.4rem .9rem; }

  /* ── Bottom nav label color ── */
  .mob-nav-label { color:#6480A0; }

  /* ── Forms ── */
  .form-row{grid-template-columns:1fr;}
  .form-actions{flex-wrap:wrap;gap:.6rem;}
  .form-actions button{flex:1 1 auto;min-width:120px;}

  /* ── Touch targets ── */
  .form-input,.form-select,select,input[type="text"],input[type="email"],input[type="password"]{
    min-height:46px;font-size:16px; /* 16px prevents iOS zoom on focus */
  }
  .btn-primary{min-height:48px;font-size:15px;}
  .sidebar-link{min-height:46px;padding:10px 1.2rem;}

  /* ── Tables ── */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .dash-main table,.sa-main table{min-width:520px;}

  /* ── Hero ── */
  .hero{min-height:100svh;}
  .hero-content{padding:0 1.2rem;text-align:center;}
  .hero-content h1{font-size:1.75rem;line-height:1.3;}
  .hero-content p{font-size:.95rem;}
  .hero-stats{gap:1rem;flex-wrap:wrap;justify-content:center;}
  .stat-item{min-width:80px;}
  .hero-cta{flex-direction:column;gap:.7rem;align-items:stretch;}
  .hero-cta button{width:100%;min-height:48px;}

  /* ── Landing sections ── */
  .features-grid{grid-template-columns:1fr;}
  .docs-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .section-header{padding:0 1rem;}
  .features-section,.docs-section,.pricing-section{padding:2.5rem 1rem;}
  .section-title{font-size:1.5rem;}

  /* ── Auth pages ── */
  .auth-page{padding:.8rem .6rem;min-height:100svh;}
  .auth-card{padding:1.8rem 1.3rem;border-radius:14px;width:100%;max-width:100%;}

  /* ── Cards & paper ── */
  .doc-paper{padding:1.2rem;}
  .stat-card{padding:1.1rem 1rem;}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:.8rem;}

  /* ── Modals ── */
  .modal-box{width:96vw;max-width:96vw;padding:1.2rem 1rem;border-radius:14px;}
  .modal-header{padding:1rem 1.2rem;}

  /* ── History search ── */
  .history-filter-row{flex-direction:column;gap:.4rem;}
  .history-filter-sel{width:100%;}
  .history-search-box{padding:8px 12px;}

  /* ── Admin tab buttons ── */
  .admin-tabs{flex-wrap:wrap;gap:.4rem;}
  .admin-tab-btn{font-size:12px;padding:.45rem .7rem;}

  /* ── Super Admin sidebar ── */
  .sa-mobile-toggle{display:flex;}
  .sa-layout{position:relative;}
  .sa-sidebar{
    position:fixed;top:0;left:-260px;bottom:0;
    width:240px;z-index:1100;
    transition:left .28s cubic-bezier(.4,0,.2,1);
  }
  .sa-sidebar.open{left:0;}
  .sa-main{padding:1rem;padding-top:3.5rem;}
  .sa-main{overflow-x:auto;}
  .sa-table{min-width:560px;}
  .sa-stats-grid{grid-template-columns:repeat(2,1fr);}
  .sa-plans-grid{grid-template-columns:1fr;}

  /* ── Other pages ── */
  .upgrade-grid{grid-template-columns:1fr;}
  .bl-grid{grid-template-columns:1fr;}
  .clients-grid{grid-template-columns:1fr;}
  .pricing-plan-card{padding:1.4rem 1.2rem;}
  .donation-amounts{flex-wrap:wrap;gap:.5rem;}
  .donation-amount-btn{flex:1 1 calc(50% - .25rem);}
}

/* ════════════════════════════════
   RESPONSIVE — PHONE (≤ 480px)
════════════════════════════════ */
@media(max-width:480px){
  .topnav{height:52px;}
  .sidebar{top:52px;}
  .sa-mobile-toggle{top:58px;}
  .logo-badge{width:30px;height:30px;font-size:12px;}
  .logo-name{font-size:13px;}

  .hero-content h1{font-size:1.45rem;line-height:1.3;}
  .hero-badge{font-size:11px;}

  .sa-stats-grid{grid-template-columns:1fr;}
  .sa-main{padding:.8rem;padding-top:3.5rem;}

  .modal-box{padding:1rem .8rem;}

  .btn-orange,.btn-outline{font-size:14px;padding:.75rem 1.2rem;min-height:48px;}

  .nav-bell-wrap{margin-right:.2rem;}

  /* Stats 1 col on very small phones */
  .stats-row{grid-template-columns:1fr;}
  .mob-nav-icon{font-size:20px;}
  .mob-nav-label{font-size:9px;}

  /* Page title smaller */
  .page-title{font-size:1.3rem;}
  .page-sub{font-size:.8rem;margin-bottom:1.2rem;}
}

/* ════════════════════════════════
   RESPONSIVE — TINY (≤ 360px, older Androids)
════════════════════════════════ */
@media(max-width:360px){
  .logo-name{display:none;}
  .mob-nav-label{display:none;}
  .mob-bottom-nav-inner{height:52px;}
  .mob-nav-item{padding:4px 2px;}
  .hero-content h1{font-size:1.3rem;}
  .topnav{height:50px;}
  .sidebar{top:50px;}
}

/* ════════════════════════════════
   MOBILE PAYSAGE (landscape)
   ≤900px large ET ≤500px haut
════════════════════════════════ */
@media(max-width:900px) and (max-height:500px){
  /* Topnav compact */
  .topnav{height:48px; padding:0 .8rem;}
  .nav-hamburger{display:flex;}
  .nav-username{display:none;}
  .nav-logout{display:none;}
  .nav-plan-badge{display:none !important;}
  .mob-bottom-nav{display:none;}

  /* Sidebar — dropdown pleine largeur en paysage */
  .sidebar{
    position:fixed;
    top:48px; left:0; right:0; bottom:auto;
    width:100%; max-height:calc(100svh - 48px);
    z-index:950;
    background:linear-gradient(160deg,#0B1F3A 0%,#0E2646 100%);
    transition:opacity .2s ease, transform .2s cubic-bezier(.4,0,.2,1), visibility .2s;
    opacity:0; transform:translateY(-6px);
    visibility:hidden; pointer-events:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    /* 2 colonnes en paysage */
    display:flex; flex-direction:row; flex-wrap:wrap; align-content:flex-start;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .sidebar.open{
    opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
  }
  .sidebar-close-btn{display:flex;}
  .sidebar-logout-divider{display:block;}
  .sidebar-logout-link{display:flex;}
  .sidebar-header{display:flex;}

  /* Éléments pleine largeur (headers, dividers) */
  .sidebar-header,
  .sidebar-label,
  .sidebar-divider,
  .sidebar-logout-divider,
  .sidebar-logout-link,
  #sidebar-premium-section { width:100%; }

  /* 2 colonnes pour les liens nav */
  .sidebar-link {
    width:calc(50% - .8rem);
    min-height:38px; font-size:13px;
    padding:7px .8rem; margin:1px .3rem;
    gap:9px; border-radius:8px;
    color:rgba(215,232,255,.9);
  }
  .sidebar-link.active { background:rgba(240,120,0,.18); color:#FFBB66; font-weight:600; }
  .sidebar-link .ico3d { font-size:15px; flex-shrink:0; }

  /* Header compact */
  .sidebar-header { padding:.4rem .8rem .35rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .sidebar-header-avatar { width:28px; height:28px; font-size:11px; }
  .sidebar-header-name   { font-size:12px; }
  .sidebar-header-plan   { font-size:8px; padding:1px 5px; }
  .sidebar-close-btn     { width:28px; height:28px; font-size:14px; border-radius:6px; }

  /* Labels rubriques compacts */
  .sidebar-label { padding:.35rem .8rem .1rem; font-size:8px; letter-spacing:1.4px; }
  .sidebar-divider { margin:.15rem .7rem; }

  /* Badge plan full width */
  #sidebar-plan-badge { width:calc(100% - 24px); margin:2px 12px 3px !important; }
}

/* ═══════════════════════════════════════════════════
   SUPER ADMIN
═══════════════════════════════════════════════════ */
/* Layout */
.sa-layout { display:flex; min-height:100vh; background:var(--cream); }
.sa-sidebar { width:230px; flex-shrink:0; background:#1E293B; display:flex; flex-direction:column; padding:1.2rem 0; }
.sa-sidebar-logo { display:flex; align-items:center; gap:.7rem; padding:.5rem 1.2rem 1.2rem; border-bottom:1px solid #334155; margin-bottom:.8rem; }
.sa-sidebar-badge { width:32px; height:32px; border-radius:8px; background:#7C3AED; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sa-sidebar-title { font-size:15px; font-weight:800; color:#F8FAFC; letter-spacing:.3px; }
.sa-sidebar-title span { color:#A78BFA; }
.sa-nav { flex:1; display:flex; flex-direction:column; gap:2px; padding:0 .6rem; }
.sa-nav-link { display:block; padding:.6rem .8rem; border-radius:8px; font-size:13px; font-weight:600; color:#94A3B8; cursor:pointer; transition:all .15s; text-decoration:none; }
.sa-nav-link:hover { background:#334155; color:#F8FAFC; }
.sa-nav-link.active { background:#7C3AED22; color:#A78BFA; }
.sa-logout { color:#EF4444 !important; }
.sa-sidebar-footer { padding:.8rem .6rem 0; border-top:1px solid #334155; margin-top:.8rem; display:flex; flex-direction:column; gap:2px; }
.sa-main { flex:1; background:var(--cream); padding:2rem; overflow-y:auto; }

/* Page headers */
.sa-page-header { margin-bottom:1.5rem; }
.sa-page-title { font-size:1.4rem; font-weight:800; color:var(--navy); font-family:'Inter',sans-serif; letter-spacing:-.4px; }
.sa-page-sub { font-size:13px; color:var(--text-muted); margin-top:.2rem; }
.sa-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:.6rem; }

/* Stats */
.sa-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.sa-stat-card {
  background:var(--white);
  border-radius:14px;
  padding:1.3rem 1.1rem;
  text-align:center;
  border:1px solid var(--border-light);
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.sa-stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.sa-stat-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,#7C3AED,#A78BFA); border-radius:14px 14px 0 0; }
.sa-stat-icon { font-size:1.5rem; margin-bottom:.4rem; }
.sa-stat-value { font-size:1.6rem; font-weight:800; color:var(--text-dark); margin-bottom:.25rem; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.sa-stat-label { font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.sa-stat-success .sa-stat-value { color:#16A34A; }
.sa-stat-success .sa-stat-card::before { background:linear-gradient(90deg,#059669,#4ADE80); }

/* Plan bars */
.sa-plan-breakdown { background:var(--white); border-radius:12px; padding:1rem 1.2rem; border:1px solid var(--border-light); }
.sa-plan-bars { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.sa-plan-bar-row { display:flex; align-items:center; gap:.8rem; }
.sa-plan-label { font-size:12px; font-weight:700; width:70px; flex-shrink:0; color:var(--text-dark); }
.sa-plan-bar-bg { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.sa-plan-bar-fill { height:100%; border-radius:4px; transition:width .4s; }
.sa-plan-count { font-size:12px; color:var(--text-muted); width:24px; text-align:right; }

/* Log mini */
.sa-log-mini { background:var(--white); border-radius:10px; border:1px solid var(--border-light); overflow:hidden; }
.sa-log-row { display:flex; gap:.8rem; padding:.5rem 1rem; border-bottom:1px solid var(--border-light); font-size:12px; align-items:center; background:var(--cream); }
.sa-log-row:nth-child(even) { background:var(--white); }
.sa-log-action { font-weight:700; color:#7C3AED; flex-shrink:0; }
.sa-log-target { color:var(--text-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sa-log-time { color:var(--text-muted); font-size:11px; flex-shrink:0; }

/* Tables */
.sa-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:10px; overflow:hidden; font-size:13px; }
.sa-table thead { background:var(--cream); }
.sa-table th { padding:.6rem 1rem; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:700; }
.sa-table td { padding:.6rem 1rem; border-bottom:1px solid var(--border-light); color:var(--text-dark); vertical-align:middle; }
.sa-table tr:last-child td { border-bottom:none; }
.sa-table tr:hover td { background:var(--cream); }

/* Badges + pills */
.sa-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:50px; }
.sa-badge-ok { background:#14532D22; color:#16A34A; border:1px solid #16A34A44; }
.sa-badge-warn { background:#78350F22; color:#D97706; border:1px solid #D9770644; }
.sa-badge-danger { background:#450A0A22; color:#DC2626; border:1px solid #DC262644; }
.sa-plan-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:50px; }
.sa-log-action-badge { background:#7C3AED22; color:#7C3AED; font-size:11px; font-weight:700; padding:2px 8px; border-radius:50px; }

/* Buttons */
.sa-btn { background:var(--border); color:var(--text-dark); border:none; border-radius:7px; padding:.5rem 1rem; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.sa-btn:hover { filter:brightness(.93); }
.sa-btn-primary { background:#7C3AED; color:#fff; }
.sa-btn-primary:hover { background:#6D28D9; filter:none; }
.sa-btn-sm { padding:.3rem .7rem; font-size:12px; }
.sa-btn-danger { background:#DC262622; color:#DC2626; border:1px solid #DC262633; }
.sa-btn-danger:hover { background:#EF4444; color:#fff; filter:none; }
.sa-btn-uvip { background:linear-gradient(135deg,#7C3AED,#A855F7); color:#fff; font-weight:700; }
.sa-btn-uvip:hover { background:linear-gradient(135deg,#6D28D9,#9333EA); filter:none; }

/* Toolbar */
.sa-toolbar { display:flex; gap:.7rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.sa-search-input { background:var(--white); border:1px solid var(--border); color:var(--text-dark); border-radius:8px; padding:.5rem .9rem; font-size:13px; flex:1; min-width:200px; }
.sa-search-input::placeholder { color:var(--text-muted); }
.sa-filter-select { background:var(--white); border:1px solid var(--border); color:var(--text-dark); border-radius:8px; padding:.5rem .9rem; font-size:13px; }

/* Cards */
.sa-form-card { background:var(--white); border-radius:12px; padding:1.2rem 1.4rem; border:1px solid var(--border-light); margin-bottom:1rem; }
.sa-form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; }
.sa-detail-grid { display:grid; grid-template-columns:320px 1fr; gap:1.2rem; }
.sa-detail-col { display:flex; flex-direction:column; }
.sa-detail-card { background:var(--white); border-radius:12px; padding:1.2rem; border:1px solid var(--border-light); }
.sa-detail-avatar { width:52px; height:52px; border-radius:12px; background:#7C3AED; color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:.5rem; }
.sa-detail-name { font-size:16px; font-weight:700; color:var(--text-dark); }
.sa-detail-email { font-size:12px; color:var(--text-muted); }
.sa-back-btn { background:none; border:none; color:#7C3AED; font-size:13px; font-weight:600; cursor:pointer; padding:.3rem 0; margin-bottom:1rem; display:block; }
.sa-json-field { font-family:monospace; font-size:12px; background:var(--cream); color:#7C3AED; border:1px solid var(--border); }

/* Toggle switch */
.sa-toggle { position:relative; display:inline-block; width:36px; height:20px; }
.sa-toggle input { opacity:0; width:0; height:0; }
.sa-toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:20px; transition:.2s; }
.sa-toggle-slider::before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.sa-toggle input:checked + .sa-toggle-slider { background:#EF444422; }
.sa-toggle input:checked + .sa-toggle-slider::before { transform:translateX(16px); background:#EF4444; }
.sa-toggle input:checked + .sa-toggle-blue { background:#3B82F622; }
.sa-toggle input:checked + .sa-toggle-blue::before { background:#3B82F6; }

/* Doc tiles */
.sa-doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin-bottom:1rem; }
.sa-doc-tile { background:var(--white); border:1px solid var(--border-light); border-radius:10px; padding:.8rem 1rem; cursor:pointer; transition:all .15s; }
.sa-doc-tile:hover { border-color:#7C3AED; background:var(--cream); }
.sa-doc-tile-num { font-size:11px; font-weight:700; color:#7C3AED; text-transform:uppercase; letter-spacing:.5px; }
.sa-doc-tile-name { font-size:13px; font-weight:600; color:var(--text-dark); margin:.2rem 0; }
.sa-doc-tile-count { font-size:11px; color:var(--text-muted); }

/* Ultra VIP form */
.sa-uvip-box { background:var(--cream); border:1.5px solid #7C3AED44; border-radius:12px; padding:1rem 1.2rem; margin:.8rem 0; }
.sa-priv-checkboxes { display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0; }
.sa-priv-check { display:flex; align-items:center; gap:.5rem; font-size:13px; color:var(--text-dark); cursor:pointer; }
.sa-priv-check input { accent-color:#7C3AED; }

/* Alerts */
.sa-alert { padding:.7rem 1rem; border-radius:8px; font-size:13px; font-weight:600; margin:.5rem 0; }
.sa-alert-danger { background:#DC262622; color:#DC2626; border:1px solid #DC262633; }
.sa-alert-success { background:#16A34A22; color:#16A34A; border:1px solid #16A34A33; }

/* Login box */
.sa-login-box { background:var(--white); border-radius:20px; padding:2.5rem 2rem; max-width:380px; width:90%; border:1px solid var(--border-light); box-shadow:var(--shadow-lg); text-align:center; }
.sa-login-icon { font-size:2.5rem; margin-bottom:.5rem; }
.sa-login-title { font-size:1.3rem; font-weight:800; color:var(--navy); font-family:'Inter',sans-serif; margin-bottom:.3rem; letter-spacing:-.3px; }
.sa-login-sub { font-size:12px; color:var(--text-muted); margin-bottom:1rem; }
.sa-login-btn { width:100%; margin-top:1rem; padding:.8rem; background:#7C3AED; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; }
.sa-login-btn:hover { background:#6D28D9; }

/* Promo code box */
.promo-code-box { background:var(--cream); border:1.5px dashed var(--border); border-radius:12px; padding:1rem 1.2rem; }

/* SA nav groups */
.sa-nav-group-label { font-size:10px; font-weight:700; letter-spacing:1.2px; color:#475569; text-transform:uppercase; padding:.6rem 1rem .2rem; margin-top:.25rem; }
.sa-user-mode-btn { color:#7C3AED !important; }

/* SA mode switcher button in navbar */
.sa-mode-switcher-btn { background:#7C3AED; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s; }
.sa-mode-switcher-btn:hover { background:#6D28D9; }

/* ═══════════════════════════════════════════════════════
   DOCUMENT EDITOR (WYSIWYG)
═══════════════════════════════════════════════════════ */

/* Card grid */
.sa-doc-grid { display:flex; flex-direction:column; gap:1.5rem; }
.sa-doc-company-group {}
.sa-company-header { font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; padding:.5rem 0; border-bottom:1px solid var(--border-light); margin-bottom:.75rem; }
.sa-doc-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
.sa-doc-card { background:var(--white); border:1px solid var(--border-light); border-radius:10px; padding:1rem; cursor:pointer; transition:all .18s; }
.sa-doc-card:hover { border-color:#7C3AED; background:var(--cream); transform:translateY(-2px); }
.sa-doc-card-num { font-size:10px; color:#7C3AED; font-weight:700; letter-spacing:.5px; margin-bottom:.25rem; }
.sa-doc-card-name { font-size:13px; font-weight:600; color:var(--text-dark); margin-bottom:.5rem; line-height:1.3; }
.sa-doc-card-meta { display:flex; align-items:center; gap:.5rem; }

/* Editor wrap */
.doc-editor-wrap { display:flex; flex-direction:column; height:calc(100vh - 60px); }

/* Toolbar — always dark (specialized editor chrome) */
.doc-editor-toolbar { display:flex; align-items:center; gap:.25rem; padding:.5rem .75rem; background:#1E293B; border-bottom:1px solid #334155; flex-wrap:wrap; position:sticky; top:0; z-index:100; }
.doc-toolbar-back { background:#0F172A; color:#94A3B8; border:1px solid #334155; border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; margin-right:.25rem; white-space:nowrap; }
.doc-toolbar-back:hover { color:#F8FAFC; }
.doc-editor-tpl-name { font-weight:600; color:#F8FAFC; font-size:13px; white-space:nowrap; margin:0 .25rem; }
.doc-toolbar-divider { width:1px; height:18px; background:#334155; margin:0 .1rem; }
.doc-toolbar-spacer { flex:1; }
.doc-tb-btn { background:#0F172A; color:#F8FAFC; border:1px solid #334155; border-radius:5px; padding:4px 8px; font-size:12px; cursor:pointer; min-width:28px; }
.doc-tb-btn:hover { background:#334155; }
.doc-tb-select { background:#0F172A; color:#F8FAFC; border:1px solid #334155; border-radius:5px; padding:3px 6px; font-size:12px; cursor:pointer; }
.doc-tb-action { background:#0F172A; color:#94A3B8; border:1px solid #334155; border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
.doc-tb-action:hover { color:#F8FAFC; border-color:#7C3AED; }

/* Editor body */
.doc-editor-body { display:flex; flex:1; overflow:hidden; }
.doc-editor-canvas-wrap { flex:1; overflow:auto; background:#4B5563; padding:2rem; display:flex; justify-content:center; align-items:flex-start; }
.doc-a4-canvas { width:794px; min-height:1123px; background:#DED9CA; padding:2cm; box-shadow:0 4px 24px rgba(0,0,0,.4); font-family:Arial,sans-serif; font-size:12px; line-height:1.5; color:#1a1a1a; outline:none; transform-origin:top center; }
.doc-a4-canvas:focus { box-shadow:0 4px 24px rgba(0,0,0,.4), 0 0 0 3px rgba(124,58,237,.4); }

/* Document structure classes (used in preview + editor) */
.doc-header-block { border-bottom:2px solid #003366; padding-bottom:.75rem; margin-bottom:1rem; }
.doc-company-name { color:#003366; font-weight:bold; font-size:13px; }
.doc-title-block { font-size:16px; font-weight:700; margin:.25rem 0; color:#111; }
.doc-ref-block { font-size:11px; color:#555; margin-top:.25rem; }
.doc-fields-table { width:100%; border-collapse:collapse; }
.doc-field-label { padding:5px 8px; background:#f8f9fa; font-weight:600; width:38%; border:1px solid #ddd; font-size:11px; vertical-align:top; }
.doc-field-value { padding:5px 8px; border:1px solid #ddd; font-size:11px; }
.doc-footer-block { margin-top:2rem; padding-top:.75rem; border-top:1px solid #ddd; }
.doc-sig-block { display:flex; gap:2rem; }
.doc-sig-line { flex:1; text-align:center; font-size:11px; }
.sig-space { height:56px; border-bottom:1px solid #333; margin:0 1rem .25rem; }

/* Field palette — always dark (specialized editor chrome) */
.doc-editor-palette { width:220px; min-width:220px; background:#1E293B; border-left:1px solid #334155; overflow-y:auto; padding:.75rem; }
.doc-palette-title { font-size:11px; font-weight:700; color:#7C3AED; letter-spacing:.5px; text-transform:uppercase; margin-bottom:.5rem; }
.doc-palette-cat { margin-bottom:.75rem; }
.doc-palette-cat-label { font-size:10px; color:#64748B; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:.3rem; }
.doc-field-chip { display:block; width:100%; text-align:left; border:none; border-radius:5px; padding:4px 7px; font-size:11px; cursor:pointer; margin-bottom:2px; color:#1a1a1a; transition:filter .15s; }
.doc-field-chip:hover { filter:brightness(.9); }

/* Field config panel */
.doc-field-panel { position:fixed; right:230px; top:120px; width:260px; background:var(--white); border:1px solid var(--border); border-radius:10px; z-index:500; box-shadow:var(--shadow-lg); }
.doc-field-panel-header { display:flex; justify-content:space-between; align-items:center; padding:.6rem .9rem; border-bottom:1px solid var(--border-light); font-size:13px; color:var(--text-dark); }
.doc-panel-close { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; line-height:1; }
.doc-panel-close:hover { color:var(--text-dark); }
.doc-field-panel-body { padding:.75rem .9rem; }
.fp-toggles { display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin-top:.5rem; }
.fp-toggle-label { display:flex; align-items:center; gap:.3rem; font-size:12px; color:var(--text-muted); cursor:pointer; }
.req-star { color:red; font-size:10px; }

/* Required fields matrix */
.req-toggle-btn { background:none; border:1px solid var(--border); border-radius:4px; width:28px; height:28px; cursor:pointer; font-size:15px; transition:all .15s; color:var(--text-muted); }
.req-toggle-btn.req-active { background:#FEF9C3; border-color:#D97706; color:#D97706; }
.req-toggle-btn.req-inactive { color:var(--text-muted); }
.req-toggle-btn:hover { border-color:#7C3AED; }

/* ═══════════════════════════════════════════════════════
   EMAIL EDITOR
═══════════════════════════════════════════════════════ */
.sa-email-list { display:flex; flex-direction:column; gap:.5rem; }
.sa-email-card { display:flex; align-items:center; gap:.75rem; background:var(--white); border:1px solid var(--border-light); border-radius:10px; padding:.75rem 1rem; cursor:pointer; transition:all .18s; }
.sa-email-card:hover { border-color:#7C3AED; background:var(--cream); }
.sa-email-card-icon { font-size:1.5rem; flex-shrink:0; }
.sa-email-card-info { flex:1; min-width:0; }
.sa-email-card-name { font-weight:600; color:var(--text-dark); font-size:14px; }
.sa-email-card-subject { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }

.email-editor-wrap { display:flex; flex-direction:column; height:calc(100vh - 60px); }
.email-editor-toolbar { display:flex; align-items:center; gap:.25rem; padding:.5rem .75rem; background:var(--cream); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.email-editor-body { display:flex; flex:1; overflow:auto; gap:0; }
.email-editor-main { flex:1; padding:1.25rem 1.5rem; overflow-y:auto; background:var(--cream); }
.email-editor-sidebar { width:210px; min-width:210px; background:var(--white); border-left:1px solid var(--border-light); padding:.75rem; overflow-y:auto; }
.email-body-toolbar { display:flex; gap:.2rem; padding:.3rem .4rem; background:var(--cream); border:1px solid var(--border); border-bottom:none; border-radius:6px 6px 0 0; }
.email-body-editor { min-height:220px; background:#DED9CA; color:#111; border:1px solid var(--border); border-radius:0 0 6px 6px; padding:.75rem; font-family:Arial,sans-serif; font-size:13px; outline:none; }

#view-super-admin .form-group { margin-bottom:.7rem; }

/* ═══════════════════════════════════════════════
   AVATAR / PROFILE PHOTO
═══════════════════════════════════════════════ */
.avatar-edit-wrap { display:flex; align-items:flex-start; gap:1.2rem; padding:1.2rem; background:var(--white); border-radius:12px; border:1px solid var(--border-light); }
.avatar-circle-wrap { position:relative; flex-shrink:0; }
.avatar-circle-xl { width:96px; height:96px; border-radius:50%; overflow:hidden; border:3px solid var(--border-light); background:#E5E7EB; display:flex; align-items:center; justify-content:center; }
.avatar-edit-btn { position:absolute; bottom:2px; right:2px; width:28px; height:28px; border-radius:50%; background:var(--orange); color:#fff; border:2px solid #fff; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.avatar-info { flex:1; min-width:0; }
.avatar-crop-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10000; }
.avatar-crop-box { background:#DED9CA; border-radius:14px; padding:1.5rem; max-width:520px; width:94%; box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* ═══════════════════════════════════════════════
   DOWNLOAD DROPDOWN
═══════════════════════════════════════════════ */
.dl-dropdown { position:absolute; z-index:5000; background:#DED9CA; border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:220px; overflow:hidden; }
.dl-dropdown button { display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:none; font-size:13px; cursor:pointer; color:var(--navy); font-weight:500; }
.dl-dropdown button:hover { background:var(--cream); }

/* ═══════════════════════════════════════════════
   DONATION PAGE
═══════════════════════════════════════════════ */
.soutenir-wrap { max-width:680px; }
.soutenir-header { text-align:center; margin-bottom:2rem; }
.soutenir-icon { font-size:3rem; margin-bottom:.5rem; }
.soutenir-title { font-family:'Inter',sans-serif; font-size:1.6rem; font-weight:800; color:var(--navy); margin-bottom:.6rem; letter-spacing:-.5px; }
.soutenir-desc { color:var(--text-mid); font-size:14px; line-height:1.6; max-width:480px; margin:0 auto; }
.supporter-badge { display:inline-flex; align-items:center; gap:.4rem; background:#FFF8E1; color:#B45309; border:1px solid #FDE68A; border-radius:50px; padding:5px 14px; font-size:13px; font-weight:700; margin-top:.8rem; }
.donation-form-card { background:#DED9CA; border:1px solid var(--border-light); border-radius:14px; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.donation-amounts { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.donation-amount-btn { padding:8px 18px; border:2px solid var(--border); border-radius:8px; background:#DED9CA; font-size:13px; font-weight:600; cursor:pointer; color:var(--navy); transition:.15s; }
.donation-amount-btn:hover, .donation-amount-btn.active { border-color:var(--orange); background:var(--orange-pale); color:var(--orange); }
.donation-custom-btn { border-style:dashed; color:var(--text-muted); }
.donor-wall { background:#FFFBF0; border:1px solid #FDE68A; border-radius:14px; padding:1.25rem; }
.donor-list { display:flex; flex-direction:column; gap:.6rem; }
.donor-card { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; background:#DED9CA; border-radius:10px; border:1px solid #FDE68A22; position:relative; }
.donor-star { position:absolute; top:-6px; left:-6px; font-size:14px; }
.donor-info { flex:1; min-width:0; }
.donor-name { font-weight:700; font-size:13px; color:var(--navy); }
.donor-top-badge { font-size:10px; background:var(--orange); color:#fff; border-radius:50px; padding:1px 7px; font-weight:700; }
.donor-msg { font-size:12px; color:var(--text-muted); font-style:italic; margin-top:2px; }
.donor-amount { font-weight:700; font-size:13px; color:var(--orange); white-space:nowrap; }

/* Sidebar supporter badge */
.sidebar-supporter-badge { font-size:11px; font-weight:700; color:#B45309; background:#FFF8E1; border:1px solid #FDE68A; border-radius:50px; padding:3px 10px; margin:4px 12px 4px; text-align:center; }

/* ═══════════════════════════════════════════════
   FEEDBACK FAB + MODAL
═══════════════════════════════════════════════ */
.feedback-fab {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F07800, #FF9520);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(230,50,85,.50), 0 0 0 0 rgba(230,50,85,.35);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
  animation: fab-pulse 3s ease-in-out infinite;
}
.feedback-fab svg {
  animation: heartbeat 2.2s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.feedback-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(230,50,85,.65);
  animation: none;
}
@keyframes fab-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(230,50,85,.50), 0 0 0 0 rgba(230,50,85,.35); }
  50%      { box-shadow: 0 4px 20px rgba(230,50,85,.50), 0 0 0 10px rgba(230,50,85,.0); }
}
.feedback-modal-box { background:#DED9CA; border-radius:16px 16px 0 0; padding:0; max-width:520px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:0 -8px 40px rgba(0,0,0,.18); }
.fm-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-light); position:sticky; top:0; background:#DED9CA; z-index:1; border-radius:16px 16px 0 0; }
.fm-title { font-size:16px; font-weight:700; color:var(--navy); margin:0; }
.fm-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); line-height:1; padding:0; }
.fm-body { padding:1.25rem 1.5rem; }
.fm-section { margin-bottom:1.25rem; }
.fm-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:.6rem; }
.fm-ideas-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.5rem; }
.fm-idea-row { display:flex; align-items:center; gap:.75rem; padding:.5rem .6rem; background:var(--cream); border-radius:8px; }
.fm-vote-btn { flex-shrink:0; min-width:48px; display:flex; flex-direction:column; align-items:center; background:#DED9CA; border:1.5px solid var(--border); border-radius:8px; padding:4px 6px; cursor:pointer; font-size:11px; color:var(--text-muted); transition:.15s; }
.fm-vote-btn.voted { border-color:var(--orange); background:var(--orange-pale); color:var(--orange); }
.fm-vote-count { font-weight:700; font-size:13px; line-height:1.2; }
.fm-vote-icon { font-size:14px; line-height:1; }
.fm-idea-text { flex:1; min-width:0; }
.fm-idea-title { font-size:13px; font-weight:600; color:var(--navy); }
.fm-idea-cat { font-size:11px; background:#EEF2FA; color:#4B6BA9; border-radius:50px; padding:2px 8px; font-weight:600; display:inline-block; margin-top:2px; }

/* ═══════════════════════════════════════════════
   SIDEBAR — happiness link special style
═══════════════════════════════════════════════ */
.sidebar-link--happiness {
  margin-top: .3rem;
  background: linear-gradient(90deg, rgba(230,50,85,.08), rgba(230,50,85,.04));
  border: 1px solid rgba(230,50,85,.18);
  color: #FF8BA0 !important;
  font-weight: 600 !important;
}
.sidebar-link--happiness svg {
  fill: rgba(230,50,85,.6);
  stroke: var(--orange-light);
  stroke-width: 1.5;
  animation: heartbeat 2.2s ease-in-out infinite;
}
.sidebar-link--happiness:hover {
  background: linear-gradient(90deg, rgba(230,50,85,.18), rgba(230,50,85,.08)) !important;
  border-color: rgba(230,50,85,.4) !important;
  color: #fff !important;
}
.sidebar-link--happiness.active {
  background: linear-gradient(90deg, rgba(230,50,85,.28), rgba(230,50,85,.12)) !important;
  color: #fff !important;
  border-color: rgba(230,50,85,.5) !important;
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%      { transform: scale(1.22); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.14); }
  70%      { transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   FEEDBACK TAB — Dashboard full page
═══════════════════════════════════════════════ */

/* Hero banner */
.fbt-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--orange-pale) 0%, #FFF8F0 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(230,50,85,.15);
}
.fbt-hero-emoji {
  font-size: 3rem;
  margin-bottom: .6rem;
  animation: heartbeat 2.2s ease-in-out infinite;
  display: inline-block;
}
.fbt-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.5px;
  margin-bottom: .6rem;
  line-height: 1.2;
}
.fbt-hero-sub {
  font-size: .92rem;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Cards */
.fbt-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.fbt-card-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-light);
}
.fbt-card-icon { font-size: 1.2rem; flex-shrink: 0; }
.fbt-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.2px;
  flex: 1;
}
.fbt-card-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 2px 10px;
  border-radius: 50px;
}

/* Submit form card */
.fbt-form-card .fbt-card-header {
  background: linear-gradient(90deg, #FFF5F7, var(--white));
}
.fbt-submit-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .15s;
  white-space: nowrap;
}
.fbt-submit-btn:hover {
  background: var(--orange-light);
  transform: translateY(-1px);
}
.fbt-form-card .form-group { padding: 0 1.4rem; }
.fbt-form-card .form-group:first-of-type { padding-top: 1.2rem; }
.fbt-form-card > div:last-child { padding: 0 1.4rem 1.3rem; }
.fbt-form-card #fbt-msg { padding: 0 1.4rem; }

/* Ideas list */
.fbt-ideas-list {
  display: flex;
  flex-direction: column;
}
.fbt-idea-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-light);
  transition: background .15s;
}
.fbt-idea-row:last-child { border-bottom: none; }
.fbt-idea-row:hover { background: var(--cream); }

/* Vote button */
.fbt-vote {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 50px;
  transition: all .18s;
}
.fbt-vote svg {
  width: 15px; height: 15px;
  fill: var(--border);
  stroke: var(--text-muted);
  stroke-width: 1.5;
  transition: fill .18s;
}
.fbt-vote:hover {
  border-color: var(--orange);
  background: var(--orange-pale);
}
.fbt-vote:hover svg { fill: var(--orange-pale); stroke: var(--orange); }
.fbt-voted {
  border-color: var(--orange) !important;
  background: var(--orange-pale) !important;
}
.fbt-voted svg { fill: var(--orange) !important; stroke: var(--orange) !important; }
.fbt-vote-n {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fbt-voted .fbt-vote-n { color: var(--orange); }

/* Idea body */
.fbt-idea-body { flex: 1; min-width: 0; }
.fbt-idea-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: .3rem;
}
.fbt-idea-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: .4rem;
}
.fbt-idea-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.fbt-cat-tag {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--info-bg);
  color: var(--info);
  border-radius: 50px;
  padding: 2px 9px;
  display: inline-block;
}
.fbt-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.fbt-mine-tag {
  font-size: 10px;
  font-weight: 700;
  background: var(--orange-pale);
  color: var(--orange);
  border-radius: 50px;
  padding: 1px 7px;
  vertical-align: middle;
  margin-left: 4px;
}
.fbt-admin-reply {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  margin-left: .3rem;
}
.fbt-admin-response {
  margin-top: .6rem;
  background: var(--success-bg);
  border: 1px solid rgba(5,150,105,.2);
  border-radius: 8px;
  padding: .6rem .8rem;
}
.fbt-admin-response-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .3rem;
}

/* Empty state */
.fbt-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}
.fbt-empty span { font-size: 2.5rem; display: block; margin-bottom: .6rem; }
.fbt-empty p { font-size: 14px; }

/* Dark mode */
[data-theme="dark"] .fbt-hero {
  background: linear-gradient(135deg, rgba(230,50,85,.08) 0%, rgba(20,35,50,.6) 100%);
  border-color: rgba(230,50,85,.2);
}
[data-theme="dark"] .fbt-hero-title { color: #E2EFFF; }
[data-theme="dark"] .fbt-card { background: #0B1928; border-color: #17314D; }
[data-theme="dark"] .fbt-card-header { border-bottom-color: #17314D; }
[data-theme="dark"] .fbt-card-title { color: #C8E0F5; }
[data-theme="dark"] .fbt-card-count { background: #060F1C; border-color: #17314D; }
[data-theme="dark"] .fbt-idea-row:hover { background: #060F1C; }
[data-theme="dark"] .fbt-idea-row { border-bottom-color: #0F2236; }
[data-theme="dark"] .fbt-idea-title { color: #C8E0F5; }
[data-theme="dark"] .fbt-vote { background: #060F1C; border-color: #17314D; }
[data-theme="dark"] .fbt-vote-n { color: #C8E0F5; }
[data-theme="dark"] .fbt-cat-tag { background: rgba(29,78,216,.15); color: #93BBFD; }
[data-theme="dark"] .fbt-form-card .fbt-card-header { background: rgba(230,50,85,.06); }
[data-theme="dark"] .sidebar-link--happiness {
  background: linear-gradient(90deg, rgba(230,50,85,.12), rgba(230,50,85,.05));
  border-color: rgba(230,50,85,.25);
}

/* ═══════════════════════════════════════════════
   SUPPORT PAGE
═══════════════════════════════════════════════ */
.support-wrap { max-width:680px; }
.support-header { margin-bottom:1.5rem; }
.support-title { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:800; color:var(--navy); margin-bottom:.4rem; letter-spacing:-.4px; }
.support-desc { color:var(--text-mid); font-size:14px; }
.support-form-card { background:#DED9CA; border:1px solid var(--border-light); border-radius:14px; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.support-tabs { display:flex; gap:.5rem; margin-bottom:1rem; }
.support-tab { padding:8px 16px; border-radius:8px; border:1.5px solid var(--border); background:#DED9CA; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-mid); transition:.15s; }
.support-tab.active { border-color:var(--orange); background:var(--orange-pale); color:var(--orange); }
.support-tickets-section { margin-top:1.5rem; }
.support-ticket-card { background:#DED9CA; border:1px solid var(--border-light); border-radius:10px; padding:1rem; margin-bottom:.6rem; }
.stc-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.stc-type { font-size:12px; font-weight:600; color:var(--text-mid); }
.stc-date { font-size:11px; color:var(--text-muted); margin-left:auto; }
.stc-body { font-size:13px; color:var(--text-mid); line-height:1.5; }
.stc-admin-reply { margin-top:.6rem; padding:.5rem .75rem; background:#F0FDF4; border-radius:8px; border-left:3px solid var(--success); font-size:12px; color:var(--text-mid); }
.stc-urgency { font-size:11px; font-weight:700; border-radius:50px; padding:2px 8px; }
.urgency-low { background:#F0FDF4; color:#16A34A; }
.urgency-medium { background:#FFF7ED; color:#C2410C; }
.urgency-high { background:#FEF2F2; color:#B91C1C; }
.urgency-critical { background:#7F1D1D; color:#FCA5A5; }

/* SA community tabs */
.sa-fr-card, .sa-ticket-card { background:var(--white); border:1px solid var(--border-light); border-radius:10px; padding:.9rem 1rem; }
.sa-fr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.sa-fr-desc { font-size:12px; color:var(--text-muted); line-height:1.5; margin-bottom:.6rem; }
.sa-fr-footer { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sa-vote-badge { font-size:12px; font-weight:700; color:#F59E0B; background:#92400E22; border-radius:50px; padding:2px 8px; }
.sa-stat-warn .sa-stat-value { color:#F59E0B; }
.sa-ticket-card.urgency-critical { border-left:3px solid #EF4444; }
.sa-ticket-card.urgency-high { border-left:3px solid #F97316; }

/* ═══════════════════════════════════════════════
   CHATBOT — FAB
═══════════════════════════════════════════════ */
.chatbot-fab {
  position:fixed; bottom:1.5rem; left:1.5rem; z-index:8100;
  display:flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem .6rem .75rem;
  background:var(--navy); color:#fff; border:none; border-radius:50px;
  box-shadow:0 4px 20px rgba(23,58,94,.45);
  font-size:13px; font-weight:700; cursor:grab;
  transition:left .25s ease, top .25s ease, transform .2s, box-shadow .2s, background .2s;
  user-select:none;
  touch-action:none;
}
.chatbot-fab:active { cursor:grabbing; }
.chatbot-fab:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(23,58,94,.55); }
.chatbot-fab.active { background:var(--orange); box-shadow:0 4px 20px rgba(240,120,0,.45); }
.chatbot-fab[data-pos-source="shifted-up"]::before,
.chatbot-fab[data-pos-source="shifted-br"]::before { content:""; }
.chatbot-fab-icon { font-size:18px; line-height:1; }
.chatbot-fab-label { font-size:12px; letter-spacing:.2px; }

/* ═══════════════════════════════════════════════
   CHATBOT — WINDOW
═══════════════════════════════════════════════ */
.chatbot-window {
  position:fixed; bottom:5.5rem; right:1.5rem; z-index:8100;
  width:360px; max-width:calc(100vw - 2rem);
  height:520px; max-height:calc(100vh - 8rem);
  display:flex; flex-direction:column;
  background:#DED9CA; border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.18);
  border:1px solid var(--border-light);
  overflow:hidden;
  transform:translateY(20px) scale(.97); opacity:0;
  pointer-events:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
/* Auto-aligne la fenêtre du côté du FAB (set by chatbot-position.r2.js) */
.chatbot-fab[data-pos-side="left"] ~ .chatbot-window,
.chatbot-window[data-side="left"] {
  left:1.5rem; right:auto;
}
.chatbot-window.open {
  transform:translateY(0) scale(1); opacity:1;
  pointer-events:auto;
}

/* ─── Mobile portrait : FABs empilés au-dessus de la bottom nav ─── */
@media(max-width:768px){
  /* Feedback ❤️ — 1er niveau au-dessus de la bottom nav */
  .feedback-fab {
    bottom:calc(72px + env(safe-area-inset-bottom,0px) + .5rem) !important;
    right:.9rem !important; left:auto !important;
    width:46px !important; height:46px !important;
  }
  /* Chatbot 💬 — 2e niveau, empilé au-dessus du feedback */
  .chatbot-fab {
    bottom:calc(72px + env(safe-area-inset-bottom,0px) + .5rem + 46px + .45rem);
    left:auto; right:.9rem;
    padding:.5rem; width:46px; height:46px;
    border-radius:50%; justify-content:center;
  }
  .chatbot-fab-label { display:none; }
  .chatbot-fab-icon { font-size:20px; }
  /* Fenêtre chat : s'ouvre vers le haut depuis la droite */
  .chatbot-window {
    bottom:calc(72px + env(safe-area-inset-bottom,0px) + 46px + 46px + 1.5rem);
    left:.75rem; right:.75rem;
    width:auto; max-width:none;
    height:55vh; max-height:calc(100svh - 200px);
  }
}

/* ─── Mobile paysage : pas de bottom nav, FABs empilés bas-droite ─── */
@media(max-width:900px) and (max-height:500px){
  .feedback-fab {
    bottom:.6rem !important;
    right:.75rem !important; left:auto !important;
    width:40px !important; height:40px !important;
  }
  .chatbot-fab {
    bottom:calc(.6rem + 40px + .4rem);
    left:auto; right:.75rem;
    padding:.4rem; width:40px; height:40px;
    border-radius:50%; justify-content:center;
  }
  .chatbot-fab-label { display:none; }
  .chatbot-fab-icon { font-size:17px; }
  .chatbot-window {
    bottom:calc(.6rem + 40px + 40px + .9rem);
    left:.75rem; right:.75rem;
    width:auto; max-width:none;
    height:calc(100svh - 100px); max-height:none;
  }
}

/* Header */
.chatbot-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem; background:var(--navy); color:#fff; flex-shrink:0;
}
.chatbot-header-left { display:flex; align-items:center; gap:.6rem; }
.chatbot-bot-avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.chatbot-title { font-weight:700; font-size:14px; line-height:1.2; }
.chatbot-subtitle { font-size:11px; opacity:.75; display:flex; align-items:center; gap:.3rem; }
.chatbot-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#4ADE80; animation:chatbot-pulse 2s infinite; }
@keyframes chatbot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.chatbot-header-close { background:rgba(255,255,255,.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; }
.chatbot-header-close:hover { background:rgba(255,255,255,.3); }

/* Messages */
.chatbot-messages {
  flex:1; overflow-y:auto; padding:.75rem 1rem;
  display:flex; flex-direction:column; gap:.6rem;
  background:#F8FAFC;
  scroll-behavior:smooth;
}
.chatbot-messages::-webkit-scrollbar { width:4px; }
.chatbot-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Message rows */
.cb-msg { display:flex; align-items:flex-end; gap:.4rem; max-width:86%; }
.cb-msg-user { align-self:flex-end; flex-direction:row-reverse; }
.cb-msg-bot  { align-self:flex-start; }
.cb-bot-avatar { width:26px; height:26px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.cb-bot-right { display:flex; flex-direction:column; gap:.3rem; }

/* Bubbles */
.cb-bubble {
  padding:.55rem .75rem; border-radius:12px; font-size:13px; line-height:1.5;
  word-break:break-word;
}
.cb-msg-user .cb-bubble {
  background:var(--navy); color:#fff;
  border-bottom-right-radius:3px;
}
.cb-bubble-bot {
  background:#DED9CA; color:var(--navy); border:1px solid var(--border-light);
  border-bottom-left-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.cb-bubble-bot ol { margin:.25rem 0 .25rem 1rem; padding:0; }
.cb-bubble-bot li { margin-bottom:.2rem; }

/* Typing indicator */
.cb-typing {
  display:flex; align-items:center; gap:4px;
  padding:.55rem .85rem;
}
.cb-typing span {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#94A3B8; animation:cb-bounce .9s infinite;
}
.cb-typing span:nth-child(2) { animation-delay:.18s; }
.cb-typing span:nth-child(3) { animation-delay:.36s; }
@keyframes cb-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* Quick suggestions */
.chatbot-suggestions { display:flex; flex-direction:column; gap:.35rem; align-self:flex-start; max-width:90%; }
.chatbot-sugg-btn {
  text-align:left; padding:.45rem .75rem; border-radius:8px;
  border:1.5px solid var(--orange); background:#FFF7ED;
  font-size:12px; font-weight:600; color:var(--orange); cursor:pointer;
  transition:.15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chatbot-sugg-btn:hover { background:var(--orange); color:#fff; }

/* Feedback */
.cb-feedback { display:flex; align-items:center; gap:.35rem; }
.cb-feedback-label { font-size:11px; color:var(--text-muted); }
.cb-thumb { background:none; border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-size:13px; cursor:pointer; transition:.15s; }
.cb-thumb:hover { background:var(--cream); border-color:var(--text-muted); }
.cb-feedback-done { font-size:12px; color:var(--success); font-weight:600; }

/* Footer / Input */
.chatbot-footer { padding:.65rem .75rem .65rem; border-top:1px solid var(--border-light); background:#DED9CA; flex-shrink:0; }
.chatbot-input-wrap { display:flex; align-items:flex-end; gap:.5rem; }
.chatbot-input {
  flex:1; border:1.5px solid var(--border); border-radius:10px;
  padding:.5rem .7rem; font-size:13px; color:var(--navy);
  resize:none; outline:none; font-family:inherit; min-height:38px; max-height:90px;
  transition:.15s;
}
.chatbot-input:focus { border-color:var(--navy); }
.chatbot-send-btn {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:var(--navy); color:#fff; border:none; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.chatbot-send-btn:hover { background:var(--orange); }
.chatbot-powered { font-size:10px; color:var(--text-muted); text-align:center; margin-top:.3rem; }

/* SA chatbot notice */
.sa-chatbot-notice {
  background:var(--white); border:1px solid var(--border-light); border-radius:10px;
  padding:.9rem 1rem; font-size:12px; color:var(--text-muted); line-height:1.6;
  margin-bottom:1.5rem;
}
.sa-chatbot-notice code { background:var(--cream); color:#7C3AED; padding:1px 5px; border-radius:4px; font-size:11px; }

/* ============================================================
   AD SYSTEM — zones, fixed bar, upgrade banner
   ============================================================ */

/* Generic ad wrapper label */
.ad-wrapper { position:relative; text-align:center; }
.ad-label {
  position:absolute; top:4px; left:6px;
  font-size:9px; color:rgba(0,0,0,.35); letter-spacing:.5px; text-transform:uppercase;
  pointer-events:none; z-index:1;
}
.ad-link { display:inline-block; }
.ad-link img { transition:.1s opacity; }
.ad-link:hover img { opacity:.9; }

/* Zone A — 728×90 dashboard top */
#ad-zone-a { text-align:center; }
.ad-zone-A { max-width:728px; margin:0 auto; }

/* Zone B — 300×250 dashboard right */
#ad-zone-b { text-align:center; }
.ad-zone-B { max-width:300px; margin:0 auto; }

/* Zone C — 728×90 BLs Traités top */
#ad-zone-c { text-align:center; }
.ad-zone-C { max-width:728px; margin:0 auto; }

/* Zone D — 728×90 fixed bottom bar */
.ad-zone-d-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:rgba(15,23,42,.92); backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  padding:6px 12px;
}
#ad-zone-d { text-align:center; }
.ad-zone-D { max-width:728px; margin:0 auto; }

/* Upgrade banner (Free users) */
.ad-upgrade-banner {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:linear-gradient(135deg,#1E3A5F 0%,#1a2d4a 100%);
  border:1px solid rgba(14,165,233,.3); border-radius:10px;
  padding:.7rem 1rem; font-size:13px;
}
.ad-upgrade-text { flex:1; color:#CBD5E1; min-width:200px; }
.ad-upgrade-text strong { color:#38BDF8; }
.ad-upgrade-cta {
  background:var(--orange); color:#fff; border:none; border-radius:7px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:.15s;
}
.ad-upgrade-cta:hover { background:#e07020; }
.ad-upgrade-close {
  background:none; border:none; color:#64748B; font-size:16px; cursor:pointer;
  line-height:1; padding:2px 4px; flex-shrink:0;
}
.ad-upgrade-close:hover { color:#94A3B8; }

/* SA — publicites */
.sa-ad-zones-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
  margin-bottom:1.5rem;
}
@media(max-width:640px) { .sa-ad-zones-row { grid-template-columns:repeat(2,1fr); } }
.sa-ad-zone-stat {
  background:var(--white); border:1px solid var(--border-light); border-radius:10px;
  padding:.8rem 1rem; text-align:center;
}
.sa-ad-zone-label {
  font-size:14px; font-weight:700; color:#38BDF8; margin-bottom:.25rem;
}

/* ═══════════════════════════════════════════════════════
   MARITIME VISUALS — appearance.js
   ═══════════════════════════════════════════════════════ */

/* Empty states — maritime illustrations */
.maritime-empty {
  text-align: center;
  padding: 2.5rem 1rem;
}
.maritime-empty-svg {
  display: inline-block;
  width: 240px;
  max-width: 100%;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 12px rgba(30,58,138,.12));
}
.maritime-empty-svg--sm {
  width: 120px;
}
.maritime-empty-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .4rem;
  letter-spacing: -.3px;
}
.maritime-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto;
}

/* Landing aerial banner */
.landing-aerial-section {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #173A5E;
  background-size: cover;
  background-position: center;
}
.landing-aerial-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,.72) 0%, rgba(30,58,138,.55) 100%);
}
.landing-aerial-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Soutenir background strip */
.soutenir-bg-img {
  width: 100%;
  height: 160px;
  background: #173A5E;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.soutenir-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,23,42,.4) 0%, rgba(15,23,42,.6) 100%);
}

/* SA — Apparence panel */
.sa-ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}
.sa-ap-slot {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: .75rem;
  transition: border-color .15s;
}
.sa-ap-slot:hover { border-color: #0EA5E9; }
.sa-ap-thumb img { border-radius: 6px; }

/* ═══════════════════════════════════════════════════════
   NOTIFICATIONS SYSTEM — notifications.js
   ═══════════════════════════════════════════════════════ */

/* ── Bell button ── */
.nav-bell-wrap { position: relative; }
.nav-bell-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: background .15s;
}
.nav-bell-btn:hover { background: rgba(255,255,255,.1); }
.nav-bell-badge {
  position: absolute;
  top: 0; right: 0;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid var(--navy);
}

/* ── Dropdown ── */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 340px;
  max-width: 95vw;
  background: #DED9CA;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(23,58,94,.14);
  z-index: 9999;
  overflow: hidden;
}
.notif-dd-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--navy);
}
.notif-dd-title {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.notif-count-chip {
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.notif-markall-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #E2E8F0;
  font-size: 11px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  transition: background .15s;
}
.notif-markall-btn:hover { background: rgba(255,255,255,.25); }
.notif-dd-list { max-height: 320px; overflow-y: auto; }
.notif-dd-empty { text-align: center; padding: 1.5rem; font-size: 13px; color: var(--text-muted); }
.notif-dd-ftr { padding: .5rem; border-top: 1px solid var(--border-light); background: #F8FAFC; }
.notif-see-all-btn {
  width: 100%;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  padding: .4rem;
  border-radius: 6px;
  transition: background .15s;
}
.notif-see-all-btn:hover { background: var(--border-light); }

/* ── Notification item ── */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #F8FAFC; }
.notif-unread { background: #EFF6FF; }
.notif-unread:hover { background: #DBEAFE; }
.notif-type-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item-msg {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-time { font-size: 11px; color: #94A3B8; }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Full notifications page ── */
.notif-full-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.notif-full-list .notif-item { padding: .9rem 1rem; }

/* ── Sidebar badge ── */
.sidebar-notif-badge {
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: .3rem;
}

/* ── Profile notif prefs ── */
.notif-prefs-card {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.notif-prefs-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .25rem;
}
.notif-prefs-grid {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.notif-pref-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  transition: background .12s;
}
.notif-pref-row:hover { background: #F1F5F9; }
.notif-pref-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.notif-pref-label { flex: 1; font-size: 13px; color: var(--text); }
.notif-pref-toggles { display: flex; gap: .75rem; }
.notif-toggle {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}


/* ============================================================
   ONBOARDING --- Tour guide, Checklist, Guide & Aide
   ============================================================ */

/* -- Tour overlay -- */
#tour-overlay {
  position: fixed; inset: 0; z-index: 99990;
  pointer-events: none;
}
#tour-spot {
  position: fixed;
  border-radius: 10px;
  pointer-events: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.62);
  z-index: 99991;
}
#tour-tip {
  position: fixed;
  z-index: 99992;
  background: #DED9CA;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  padding: 22px 24px 18px;
  min-width: 260px;
  max-width: 340px;
  font-family: 'Inter', sans-serif;
  pointer-events: all;
  transition: opacity .2s, transform .25s;
}
.tour-tip-step {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--orange); text-transform: uppercase; margin-bottom: 6px;
}
.tour-tip-title {
  font-family: 'Inter', sans-serif; font-size: 1.05rem;
  font-weight: 800; color: var(--navy); margin-bottom: 8px; line-height: 1.3; letter-spacing: -.3px;
}
.tour-tip-text {
  font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px;
}
.tour-tip-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; }
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #E2E8F0;
  transition: background .2s, transform .2s;
}
.tour-dot.active { background: var(--orange); transform: scale(1.25); }
.tour-tip-nav { display: flex; gap: 8px; align-items: center; }
.tour-btn-skip {
  font-size: 12px; color: #94A3B8; background: none; border: none;
  cursor: pointer; padding: 0; margin-right: auto;
  text-decoration: underline; text-underline-offset: 2px;
}
.tour-btn-skip:hover { color: #64748B; }
.tour-btn-prev {
  background: #F1F5F9; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--text); transition: background .15s;
}
.tour-btn-prev:hover { background: #E2E8F0; }
.tour-btn-next {
  background: var(--orange); color: #fff; border: none; border-radius: 8px;
  padding: 8px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.tour-btn-next:hover { opacity: .88; }

#tour-finish-card {
  position: fixed; inset: 0; z-index: 99993;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); animation: fadeIn .3s;
}
.tour-finish-inner {
  background: #DED9CA; border-radius: 18px; padding: 40px 36px 32px;
  text-align: center; max-width: 420px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.tour-finish-emoji { font-size: 3.5rem; margin-bottom: 10px; }
.tour-finish-title {
  font-family: 'Inter', sans-serif; font-size: 1.5rem;
  font-weight: 800; color: var(--navy); margin-bottom: 10px; letter-spacing: -.4px;
}
.tour-finish-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.tour-finish-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

#confetti-canvas {
  position: fixed; inset: 0; z-index: 99992; pointer-events: none;
}

/* -- Onboarding checklist card -- */
.onb-card {
  background: linear-gradient(135deg, #fff 80%, #FFF7ED);
  border: 1.5px solid #FED7AA; border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(240,120,0,.08); animation: fadeIn .4s;
}
.onb-card-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.onb-card-title {
  font-family: 'Inter', sans-serif; font-size: 1rem;
  font-weight: 700; color: var(--navy); flex: 1; letter-spacing: -.2px;
}
.onb-dismiss-btn {
  background: none; border: none; font-size: 16px; cursor: pointer;
  color: #94A3B8; padding: 2px 4px; border-radius: 4px; transition: background .12s;
}
.onb-dismiss-btn:hover { background: #F1F5F9; }
.onb-bar-wrap {
  background: #F1F5F9; border-radius: 99px; height: 6px;
  margin-bottom: 14px; overflow: hidden;
}
.onb-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #FB923C);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.onb-steps { display: flex; flex-direction: column; gap: 8px; }
.onb-step {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; cursor: pointer; transition: background .15s;
  border: 1px solid transparent;
}
.onb-step:hover { background: #FFF7ED; border-color: #FED7AA; }
.onb-step.done { opacity: .65; }
.onb-step-icon { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.onb-step-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #CBD5E1;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: all .2s;
}
.onb-step.done .onb-step-check { background: #22C55E; border-color: #22C55E; color: #fff; }
.onb-step-body { flex: 1; }
.onb-step-label { font-size: 13px; font-weight: 600; color: var(--text); }
.onb-step.done .onb-step-label { text-decoration: line-through; color: var(--text-muted); }
.onb-step-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* -- Profile onboarding section -- */
.onb-profile-card {
  background: #F8FAFC; border: 1.5px solid #E2E8F0;
  border-radius: 12px; padding: 18px 20px;
}
.onb-profile-title {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.onb-profile-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.onb-profile-pct { font-size: 1.4rem; font-weight: 800; color: var(--orange); min-width: 44px; }
.onb-profile-bar-wrap {
  flex: 1; background: #E2E8F0; border-radius: 99px; height: 8px; overflow: hidden;
}
.onb-profile-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #FB923C); transition: width .5s;
}

/* -- Guide & Aide page -- */
.guide-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start;
}
@media (max-width: 700px) { .guide-layout { grid-template-columns: 1fr; } }
.guide-sidebar {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 14px 0; position: sticky; top: 80px;
}
.guide-sidebar-title {
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--text-muted); text-transform: uppercase; padding: 0 16px 8px;
}
.guide-nav-link {
  display: block; padding: 9px 16px; font-size: 13px; color: var(--text);
  cursor: pointer; border-left: 3px solid transparent; transition: all .15s;
}
.guide-nav-link:hover { background: #EFF6FF; color: var(--navy); }
.guide-nav-link.active {
  background: #FFF7ED; border-left-color: var(--orange);
  color: var(--orange); font-weight: 600;
}
.guide-body { min-height: 300px; }
.guide-search-wrap { margin-bottom: 20px; }
.guide-search {
  width: 100%; padding: 10px 14px; border: 1.5px solid #E2E8F0;
  border-radius: 10px; font-size: 14px; outline: none;
  transition: border-color .15s; font-family: inherit; box-sizing: border-box;
}
.guide-search:focus { border-color: var(--orange); }
.guide-article {
  background: #DED9CA; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 22px 24px; margin-bottom: 16px; animation: fadeIn .3s;
}
.guide-article-title {
  font-family: 'Inter', sans-serif; font-size: 1.1rem;
  font-weight: 700; color: var(--navy); margin-bottom: 12px; letter-spacing: -.3px;
}
.guide-article-content {
  font-size: 14px; color: var(--text); line-height: 1.7; white-space: pre-wrap;
}
.guide-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

/* SA Guide editor */
.sa-guide-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-top: 16px;
}
.sa-guide-card {
  background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 16px;
}
.sa-guide-card-hdr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sa-guide-card-title { font-weight: 700; font-size: 14px; color: var(--navy); flex: 1; }
.sa-guide-card-section {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 8px;
}
.sa-guide-card-preview {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  max-height: 54px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 12px;
}
.sa-guide-form {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 22px; margin-bottom: 20px;
}


/* ============================================================
   ANALYTICS — KPIs, graphiques, activite, SA charts
   ============================================================ */

/* -- KPI grid -- */
.an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .an-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .an-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.an-kpi-card {
  background: #DED9CA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 16px 14px;
  text-align: center;
  transition: box-shadow .15s, transform .15s;
}
.an-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.an-kpi-icon  { font-size: 1.6rem; margin-bottom: 6px; }
.an-kpi-value { font-size: 1.8rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.an-kpi-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.an-kpi-sub   { font-size: 11px; color: var(--text-muted); }

/* -- Charts row -- */
.an-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .an-charts-row { grid-template-columns: 1fr; } }

.an-chart-card {
  background: #DED9CA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 18px 14px;
}
.an-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.an-chart-wrap { height: 220px; position: relative; }

/* -- Bottom row -- */
.an-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) { .an-bottom-row { grid-template-columns: 1fr; } }

.an-panel {
  background: #DED9CA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px;
}
.an-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}

/* -- Top clients -- */
.an-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
}
.an-client-row:last-child { border-bottom: none; }
.an-client-medal { font-size: 16px; width: 24px; flex-shrink: 0; text-align: center; }
.an-client-info  { flex: 1; min-width: 0; }
.an-client-name  { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-client-bar-wrap { height: 4px; background: #E2E8F0; border-radius: 99px; margin-top: 5px; overflow: hidden; }
.an-client-bar   { height: 100%; background: #173A5E; border-radius: 99px; transition: width .5s; }
.an-client-count { font-size: 12px; font-weight: 700; color: var(--navy); flex-shrink: 0; }

/* -- Activity feed -- */
.an-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background .12s;
}
.an-activity-row:hover { background: #F8FAFC; }
.an-activity-icon  { font-size: 16px; width: 22px; flex-shrink: 0; margin-top: 1px; }
.an-activity-body  { flex: 1; min-width: 0; }
.an-activity-label { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-activity-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-activity-time  { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

.an-empty { text-align: center; padding: 24px 0; color: var(--text-muted); font-size: 13px; }

/* -- SA enriched overview -- */
.sa-alerts-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sa-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
.sa-alert-warn   { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.sa-alert-danger { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

.sa-delta { font-size: 12px; font-weight: 700; margin-left: 4px; }
.sa-delta.up   { color: #22C55E; }
.sa-delta.down { color: #EF4444; }

.sa-an-charts-row {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 900px) { .sa-an-charts-row { flex-direction: column; } }

.sa-an-chart-card {
  flex: 1;
  background: #DED9CA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
}
.sa-an-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.sa-an-chart-wrap { height: 200px; position: relative; }

/* SA support summary */
.sa-support-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .12s;
}
.sa-support-row:hover { background: #F8FAFC; }
.sa-support-icon  { font-size: 18px; width: 22px; text-align: center; }
.sa-support-label { flex: 1; font-size: 13px; color: var(--text); }
.sa-support-val   { font-size: 15px; font-weight: 800; color: var(--navy); }
.sa-support-warn  { color: #DC2626; }


/* ============================================================
   SECURITY --- 2FA, Sessions, Journal, Suppression compte
   ============================================================ */

/* -- Overlay modale -- */
.sec-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.sec-modal-inner {
  position: relative;
  background: #DED9CA;
  border-radius: 18px;
  padding: 36px 32px 28px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  z-index: 1;
  animation: fadeIn .25s;
}
.sec-modal-inner.sec-modal-danger { border-top: 4px solid #EF4444; max-width: 540px; }
.sec-modal-icon  { font-size: 2.5rem; text-align: center; margin-bottom: 10px; }
.sec-modal-title { font-family: 'Inter', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 10px; letter-spacing: -.3px; }
.sec-modal-desc  { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 20px; }
.sec-modal-msg   { height: 22px; font-size: 13px; text-align: center; margin: 8px 0; }
.sec-modal-btns  { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; align-items: center; }

/* -- OTP boxes -- */
.sec-otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.sec-otp-box {
  width: 44px;
  height: 52px;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: monospace;
  color: var(--navy);
}
.sec-otp-box:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240,120,0,.15); }
.sec-otp-box.filled { border-color: #22C55E; background: #F0FDF4; }

/* -- Remember device -- */
.sec-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0 auto;
}
.sec-remember-label input { accent-color: var(--orange); }

/* -- Section sécurité profil -- */
.sec-section { display: flex; flex-direction: column; gap: 16px; }
.sec-block {
  background: #DED9CA;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px 22px;
}
.sec-danger-block { border-color: #FECACA; background: #FFF8F8; }
.sec-block-hdr { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.sec-block-icon { font-size: 1.4rem; flex-shrink: 0; }
.sec-block-title { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 2px; }
.sec-block-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* -- 2FA badge -- */
.sec-2fa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.sec-2fa-on  { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.sec-2fa-off { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

/* -- Sessions -- */
.sec-sessions-list { display: flex; flex-direction: column; gap: 8px; }
.sec-session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  transition: border-color .15s;
}
.sec-session-row.sec-session-current { background: #EFF6FF; border-color: #BFDBFE; }
.sec-session-icon  { font-size: 1.4rem; flex-shrink: 0; }
.sec-session-body  { flex: 1; min-width: 0; }
.sec-session-device { font-size: 13px; font-weight: 600; color: var(--text); }
.sec-session-meta   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sec-badge-current {
  display: inline-block;
  background: #173A5E;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .4px;
  margin-left: 6px;
}
.sec-badge-active {
  font-size: 11px;
  font-weight: 700;
  color: #16A34A;
  background: #F0FDF4;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #BBF7D0;
  flex-shrink: 0;
}
.sec-term-btn {
  font-size: 12px;
  font-weight: 600;
  color: #EF4444;
  background: none;
  border: 1px solid #FECACA;
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}
.sec-term-btn:hover { background: #FEF2F2; }

/* -- Security log -- */
.sec-log-list { display: flex; flex-direction: column; gap: 4px; }
.sec-log-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #F1F5F9;
}
.sec-log-row:last-child { border-bottom: none; }
.sec-log-icon   { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sec-log-body   { flex: 1; min-width: 0; }
.sec-log-detail { font-size: 13px; color: var(--text); }
.sec-log-meta   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.sec-log-time   { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

/* -- Empty states -- */
.sec-empty-state { text-align: center; padding: 16px 0; color: var(--text-muted); font-size: 13px; }

/* -- Deletion -- */
.sec-danger-desc { font-size: 13px; color: #B91C1C; margin-bottom: 14px; }
.sec-deletion-warning { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px; }
.sec-deletion-list { padding-left: 20px; margin: 8px 0 0; }
.sec-deletion-list li { margin-bottom: 4px; }
.sec-grace-info { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 12px; color: #16A34A; }
.sec-confirm-group { margin-bottom: 12px; }
.sec-deletion-pending {
  background: #FFF7ED;
  border: 1.5px solid #FED7AA;
  border-radius: 10px;
  padding: 14px 16px;
}
.sec-deletion-countdown { font-size: 14px; font-weight: 700; color: #C2410C; margin-bottom: 8px; }

/* -- Danger outline button -- */
.btn-danger-outline {
  background: none;
  border: 1.5px solid #EF4444;
  color: #EF4444;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger-outline:hover { background: #FEF2F2; }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — Textes bleu marine → blanc/clair
   Tous les sélecteurs utilisant color:var(--navy) pour du texte
   sont remplacés ici pour garantir la lisibilité.
════════════════════════════════════════════════════════════════ */

/* ── Sélecteur universel : styles inline color:var(--navy) ── */
[data-theme="dark"] [style*="color:var(--navy)"],
[data-theme="dark"] [style*="color: var(--navy)"] { color: #F0F0F0 !important; }

/* ── Couleur codée en dur #003366 ── */
[data-theme="dark"] .doc-company-name { color: #A0C4FF; }

/* ── Tous les textes navy → blanc en dark ── */
[data-theme="dark"] .section-title,
[data-theme="dark"] .feat-title,
[data-theme="dark"] .doc-name,
[data-theme="dark"] .auth-logo h2,
[data-theme="dark"] .otp-timer .timer-val,
[data-theme="dark"] .page-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .doc-item-name,
[data-theme="dark"] .doc-sel-name,
[data-theme="dark"] .dossier-bl,
[data-theme="dark"] .cac-company,
[data-theme="dark"] .cac-empty strong,
[data-theme="dark"] .cac-chip-name,
[data-theme="dark"] .nb-step.active .nb-step-label,
[data-theme="dark"] .nb-card-title,
[data-theme="dark"] .nb-doc-name,
[data-theme="dark"] .nb-form-meta-item strong,
[data-theme="dark"] .nb-section-label,
[data-theme="dark"] .price-amount,
[data-theme="dark"] .cd-info-value,
[data-theme="dark"] .upm-feature-name,
[data-theme="dark"] .upm-blur-label,
[data-theme="dark"] .locked-widget-name,
[data-theme="dark"] .soutenir-title,
[data-theme="dark"] .donor-name,
[data-theme="dark"] .fm-title,
[data-theme="dark"] .fm-idea-title,
[data-theme="dark"] .support-title,
[data-theme="dark"] .sec-block-title,
[data-theme="dark"] .sec-otp-box,
[data-theme="dark"] .fbt-hero-title,
[data-theme="dark"] .fbt-card-title,
[data-theme="dark"] .fbt-vote-n,
[data-theme="dark"] .fbt-idea-title,
[data-theme="dark"] .chatbot-input,
[data-theme="dark"] .maritime-empty-title,
[data-theme="dark"] .notif-see-all-btn,
[data-theme="dark"] .notif-item-title,
[data-theme="dark"] .notif-prefs-title,
[data-theme="dark"] .tour-tip-title,
[data-theme="dark"] .tour-finish-title,
[data-theme="dark"] .onb-card-title,
[data-theme="dark"] .onb-profile-title,
[data-theme="dark"] .guide-article-title,
[data-theme="dark"] .sa-guide-card-title,
[data-theme="dark"] .an-chart-title,
[data-theme="dark"] .an-section-title,
[data-theme="dark"] .sa-an-chart-title,
[data-theme="dark"] .sa-support-val,
[data-theme="dark"] .bl-num-badge,
[data-theme="dark"] .hist-filter-sel,
[data-theme="dark"] .stat-card-num,
[data-theme="dark"] .otp-box,
[data-theme="dark"] .dl-dropdown button,
[data-theme="dark"] .donation-amount-btn,
[data-theme="dark"] .an-client-count,
[data-theme="dark"] .sec-modal-title { color: #F0F0F0; }

/* ── Highlight barre de recherche en dark ── */
[data-theme="dark"] mark.hist-hl { background: rgba(240,120,0,.25); color: #FFCC88; }

/* ── Bouton donation dark mode ── */
[data-theme="dark"] .donation-amount-btn { background: #1A1A1A; border-color: #3A3A3A; }
[data-theme="dark"] .donation-amount-btn:hover { background: #252525; border-color: var(--orange); color: var(--orange); }

/* ════════════════════════════════════════════════════════════════
   SUPER ADMIN — correctifs lisibilité mode clair + sombre
   Couvre tous les éléments qui utilisent des variables globales
   ou des couleurs hardcodées incohérentes dans le contexte SA.
════════════════════════════════════════════════════════════════ */

/* ── form-input / form-select dans les cartes SA ── */
#view-super-admin .form-input:focus,
#view-super-admin .form-select:focus { border-color:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.2); }

/* ── sa-support-label utilise var(--text) invalide → text-muted ── */
.sa-support-label { color: var(--text-mid); }
.sa-support-row:hover { background: #F1F5F9; }

/* ── sa-guide-form fond blanc ── */
.sa-guide-form input,
.sa-guide-form textarea,
.sa-guide-form select { background:#DED9CA; color:#0C1B2E; border-color:#E2E8F0; }

/* ── Alertes SA : la 2ème définition (light) écrase la 1ère (SA dark) ── */
.sa-alert-warn   { background:#FFFBEB; color:#B45309; border:1px solid #FDE68A; }
.sa-alert-danger { background:#FEF2F2; color:#DC2626; border:1px solid #FECACA; }

/* ─────────── DARK MODE SA — correctifs ─────────── */

/* Guide form */
[data-theme="dark"] .sa-guide-form { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-guide-form input,
[data-theme="dark"] .sa-guide-form textarea,
[data-theme="dark"] .sa-guide-form select { background:#0D0D0D; color:#E0E0E0; border-color:#2E2E2E; }

/* Guide card textes secondaires */
[data-theme="dark"] .sa-guide-card-section { color:#666; }
[data-theme="dark"] .sa-guide-card-preview { color:#888; }
[data-theme="dark"] .sa-guide-card         { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-guide-card-title   { color:#E0E0E0; }

/* Support row */
[data-theme="dark"] .sa-support-label { color:#888; }
[data-theme="dark"] .sa-support-row:hover { background:#222; }
[data-theme="dark"] .sa-support-row   { border-bottom-color:#2E2E2E; }

/* Alertes SA en dark */
[data-theme="dark"] .sa-alert-warn   { background:#78350F22; color:#FCD34D; border-color:#FCD34D44; }
[data-theme="dark"] .sa-alert-danger { background:#450A0A22; color:#F87171; border-color:#F8717133; }
[data-theme="dark"] .sa-alert-success{ background:#14532D22; color:#4ADE80; border-color:#4ADE8033; }

/* SA ad/ap slots */
[data-theme="dark"] .sa-ad-zone-stat { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-ap-slot      { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-chatbot-notice { background:#1A1A1A; border-color:#2E2E2E; color:#888; }
[data-theme="dark"] .sa-chatbot-notice code { background:#0D0D0D; color:#A78BFA; }
[data-theme="dark"] .sa-fr-card, [data-theme="dark"] .sa-ticket-card { background:#1A1A1A; border-color:#2E2E2E; }
[data-theme="dark"] .sa-fr-desc { color:#888; }

/* Cartes inline JS : fonds clairs hardcodés dans le JS → #1A1A1A en dark */
[data-theme="dark"] #view-super-admin [style*="background:#DED9CA"],
[data-theme="dark"] #view-super-admin [style*="background: #DED9CA"],
[data-theme="dark"] #view-super-admin [style*="background:#F8FAFC"],
[data-theme="dark"] #view-super-admin [style*="background:#FFFBF0"],
[data-theme="dark"] #view-super-admin [style*="background:#DCFCE7"],
[data-theme="dark"] #view-super-admin [style*="background:#EDE9FE"],
[data-theme="dark"] #view-super-admin [style*="background:#DBEAFE"],
[data-theme="dark"] #view-super-admin [style*="background:#FEE2E2"],
[data-theme="dark"] #view-super-admin [style*="background:#F1F5F9"] { background:#1A1A1A !important; }
[data-theme="dark"] #view-super-admin [style*="background:var(--cream)"] { background:#1A1A1A !important; }

/* Textes muted dans SA */
[data-theme="dark"] #view-super-admin [style*="color:var(--text-muted)"],
[data-theme="dark"] #view-super-admin [style*="color: var(--text-muted)"] { color:#888 !important; }

/* Chart cards */
[data-theme="dark"] .sa-an-chart-card  { background:#1A1A1A !important; border-color:#2E2E2E !important; }
[data-theme="dark"] .sa-an-chart-title { color:#E0E0E0 !important; }

/* Badges action de logs (fonds clairs hardcodés dans JS) */
[data-theme="dark"] .sa-table [style*="background:#EDE9FE"] { background:#2D1B69 !important; color:#C4B5FD !important; }
[data-theme="dark"] .sa-table [style*="background:#FEE2E2"] { background:#3B0A0A !important; color:#FCA5A5 !important; }
[data-theme="dark"] .sa-table [style*="background:#DBEAFE"] { background:#172554 !important; color:#93C5FD !important; }
[data-theme="dark"] .sa-table [style*="background:#DCFCE7"] { background:#052E16 !important; color:#86EFAC !important; }
[data-theme="dark"] .sa-table [style*="background:#FEF3C7"] { background:#451A03 !important; color:#FCD34D !important; }
[data-theme="dark"] .sa-table [style*="background:#F1F5F9"],
[data-theme="dark"] .sa-table [style*="background:#F8FAFC"] { background:#222 !important; color:#C0C0C0 !important; }

/* delete warning / grace info boxes */
[data-theme="dark"] .sec-deletion-warning { background:#1A0D0D; border-color:#5A1A1A; color:#FCA5A5; }
[data-theme="dark"] .sec-grace-info       { background:#0F2A1A; border-color:#166534; color:#86EFAC; }
[data-theme="dark"] .sec-deletion-pending { background:#1A1200; border-color:#78350F; }
[data-theme="dark"] .sec-deletion-countdown { color:#FB923C; }
[data-theme="dark"] .sec-log-detail { color:#CBD5E1; }
[data-theme="dark"] .sec-log-meta   { color:#64748B; }
[data-theme="dark"] .sec-log-time   { color:#475569; }
[data-theme="dark"] .sec-log-row    { border-bottom-color:#2E2E2E; }
[data-theme="dark"] .btn-danger-outline:hover { background:#3B0000; }

/* Clic sur nom utilisateur — voir mon profil (étape 1.5.B) */
.user-name--clickable {
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 6px;
}
.user-name--clickable:hover {
  background: rgba(255,255,255,0.05);
}
h1.user-name--clickable:hover,
.welcome-name.user-name--clickable:hover {
  color: var(--orange);
  background: transparent;
}
.user-name--clickable:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE FIXES — 2026-05-04
   Bloc additif (override) pour combler les lacunes mobile/tablette
   identifiées par audit. Ne modifie pas les règles existantes.
   ============================================================ */

/* ─── (1) Tables : scroll horizontal sur mobile/tablette ─── */
@media (max-width: 1024px) {
  .sa-table,
  .dash-main table,
  .admin-table,
  table.data-table,
  .table-wrapper,
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .sa-table > tbody,
  .sa-table > thead,
  .dash-main table > tbody,
  .dash-main table > thead {
    /* préserve la structure tabulaire après le wrap */
    display: revert;
  }
}

/* ─── (2) Modales : largeur fluide jusqu'au plus petit écran ─── */
@media (max-width: 1024px) {
  .modal,
  .modal-content,
  .dialog,
  .popup,
  [role="dialog"] > .modal-box,
  .upgrade-modal {
    width: clamp(280px, 92vw, 490px) !important;
    max-width: 92vw !important;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 360px) {
  .modal,
  .modal-content,
  .dialog,
  .popup,
  .upgrade-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    border-radius: 12px;
  }
}

/* ─── (3) OTP boxes responsive ─── */
@media (max-width: 768px) {
  .otp-box,
  .otp input,
  input.otp-digit,
  .verify-code input {
    width: clamp(38px, 11vw, 58px) !important;
    height: clamp(48px, 14vw, 68px) !important;
    font-size: clamp(1.1rem, 4.5vw, 1.6rem) !important;
  }
  /* en mode paysage (max-height) : compresse vertical */
  @media (orientation: landscape) and (max-height: 500px) {
    .otp-box,
    .otp input,
    input.otp-digit {
      height: clamp(36px, 10vh, 50px) !important;
    }
  }
}

/* ─── (4) Touch targets WCAG : boutons & nav ≥44px ─── */
@media (max-width: 1024px) {
  button,
  .btn,
  .nav-btn,
  a.nav-link,
  .sidebar-link,
  .tab-btn {
    min-height: 44px;
  }
  /* exception pour les chips/pills compact où 44px casse le design */
  .chip,
  .badge,
  .tag,
  .pill {
    min-height: 0;
  }
  /* augmente la zone cliquable des liens texte sans changer leur taille */
  nav a,
  .menu-item {
    padding-block: 0.5rem;
  }
}

/* ─── (5) Combler le gap 640-768px : layouts intermédiaires ─── */
@media (min-width: 641px) and (max-width: 768px) {
  /* Hero stats : flex-wrap pour éviter débordement */
  .hero-stats,
  .stats-row {
    flex-wrap: wrap;
    gap: 1.25rem !important;
  }
  /* Grilles SA admin : 2 colonnes au lieu de N */
  .sa-an-charts-row,
  .an-charts-row,
  .an-bottom-row,
  .sa-ad-zones-row,
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Tables SA : scroll horizontal */
  .sa-table {
    font-size: 0.9rem;
  }
  /* Sidebar dashboard : reste collapsée comme à 768px */
  .dashboard-sidebar:not(.sidebar-open) {
    transform: translateX(-100%);
  }
}

/* ─── (6) Très petit mobile : sécurise débordements ─── */
@media (max-width: 360px) {
  .hero h1,
  .page-title,
  .auth-title {
    font-size: clamp(1.4rem, 7vw, 2rem);
    line-height: 1.2;
  }
  .feature-card,
  .pricing-card,
  .auth-card {
    padding: 1rem !important;
  }
  /* évite background-fixed qui sacade sur mobile */
  body,
  .hero-bg,
  .landing-bg {
    background-attachment: scroll !important;
  }
}

/* ─── (7) Safe-area iOS pour notch + home indicator ─── */
@supports (padding: max(0px)) {
  .app-shell,
  .modal,
  .dashboard-sidebar,
  .nav-bar {
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
  .nav-bar {
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  .app-footer,
  .bottom-bar {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
}

/* ─── (8) Polices fluides globales ─── */
@media (max-width: 1024px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
  h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
  h3 { font-size: clamp(1.05rem, 3.2vw, 1.5rem); }
}

/* ─── (9) Désactive smooth-scroll si user préfère reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PATCH 7.6+ — Lisibilité Dark Mode Super Admin (WCAG AA)
   Override les couleurs trop sombres (#666 / #555) qui faisaient
   ratio < 4.5:1 sur fond #1A1A1A. Cible : ≥ 5:1 partout.
══════════════════════════════════════════════════════════ */

/* Page headers / sections */
[data-theme="dark"] .sa-page-sub      { color:#9CA3AF !important; }   /* 6.4:1 */
[data-theme="dark"] .sa-section-title { color:#A8B0BD !important; }   /* 7.5:1 */

/* Stats */
[data-theme="dark"] .sa-stat-label    { color:#9CA3AF !important; }
[data-theme="dark"] .sa-plan-count    { color:#A8B0BD !important; }

/* Logs */
[data-theme="dark"] .sa-log-target    { color:#A8B0BD !important; }
[data-theme="dark"] .sa-log-time      { color:#9CA3AF !important; }   /* avant: #555 → 2.7:1, FAIL */

/* Tables */
[data-theme="dark"] .sa-table th      { color:#A8B0BD !important; }
[data-theme="dark"] .sa-table td      { color:#E2E8F0 !important; }   /* boost lisibilité */

/* Inputs */
[data-theme="dark"] .sa-search-input::placeholder { color:#8B95A8 !important; }

/* Cards / details */
[data-theme="dark"] .sa-detail-email  { color:#A8B0BD !important; }
[data-theme="dark"] .sa-toggle-slider::before { background:#C0C7D4 !important; }

/* Login */
[data-theme="dark"] .sa-login-sub     { color:#A8B0BD !important; }

/* Support */
[data-theme="dark"] .sa-support-label { color:#9CA3AF !important; }

/* Guide cards */
[data-theme="dark"] .sa-guide-card-desc { color:#A8B0BD !important; }

/* Topbar général : badges / planBadge / statusBadge dans le tableau users (super-admin-users-api.js)
   Ils utilisent rgba(0,0,0,0.5) en background pour les "—" → forcer text-tertiary */
[data-theme="dark"] .super-admin span[style*="opacity:.5"],
[data-theme="dark"] .super-admin span[style*="opacity:.55"] {
  opacity: 0.85 !important;
}

/* Tableaux génériques (tableaux non-.sa-table dans super-admin-users-api.js) */
[data-theme="dark"] #sa-users-content table,
[data-theme="dark"] #sa-user-detail-content table {
  background: #0D0D0D !important;
}
[data-theme="dark"] #sa-users-content table thead,
[data-theme="dark"] #sa-user-detail-content table thead {
  background: #0A0A0A !important;
}
[data-theme="dark"] #sa-users-content table th,
[data-theme="dark"] #sa-user-detail-content table th {
  color: #D4D4D4 !important;
}
[data-theme="dark"] #sa-users-content table td,
[data-theme="dark"] #sa-user-detail-content table td {
  color: #F0F0F0 !important;
  border-bottom-color: #2A2A2A !important;
}
[data-theme="dark"] #sa-users-content table tr:hover td,
[data-theme="dark"] #sa-user-detail-content table tr:hover td {
  background: #1C1C1C !important;
}

/* Icon-only badges : améliorer contraste icône thème toggle */
[data-theme="dark"] #theme-toggle-btn { color:#F0F2F5; }

/* Sidebar SA — contraste insuffisant en CLAIR ET SOMBRE (sidebar tjs sombre) */
.sa-nav-link { color: #B8C2D1 !important; }              /* avant #94A3B8 → 5.5:1 sur #1E293B */
.sa-nav-link:hover { background:#334155; color:#FFFFFF !important; }
.sa-nav-group-label { color: #94A3B8 !important; }       /* avant #475569 → 5:1 */
.sa-sidebar-title { color: #FFFFFF !important; }
.sa-sidebar-badge { background: #8B5CF6; }               /* purple plus visible */

/* Active state plus distinct */
.sa-nav-link.active {
  background: #7C3AED44 !important;
  color: #C4A8FF !important;
  font-weight: 700;
}

/* Sidebar group labels mieux espacés */
.sa-nav-group-label {
  margin-top: 0.75rem;
  padding-bottom: 0.4rem;
}


/* ══════════════════════════════════════════════════════════
   PATCH 7.7+ — Pure-black dark mode overrides
   Force tous les fonds blancs/clairs hardcodés en variantes
   noires en mode sombre (cards, modales, tableaux, inputs,
   sidebars, panneaux, styles inline).
   ══════════════════════════════════════════════════════════ */

/* Body / global */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: #000 !important;
  color: #F0F0F0;
}

/* Inline-style backgrounds en dark */
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color:#FFF"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color:#FFFFFF"] {
  background: #0D0D0D !important;
  color: #F0F0F0;
  border-color: #2A2A2A !important;
}

/* Light grey backgrounds */
[data-theme="dark"] [style*="background:#F8FAFC"],
[data-theme="dark"] [style*="background: #F8FAFC"],
[data-theme="dark"] [style*="background:#F8F9FA"],
[data-theme="dark"] [style*="background: #F8F9FA"],
[data-theme="dark"] [style*="background:#F1F5F9"],
[data-theme="dark"] [style*="background: #F1F5F9"],
[data-theme="dark"] [style*="background:#F5F7FA"],
[data-theme="dark"] [style*="background: #F5F7FA"],
[data-theme="dark"] [style*="background:#FAFBFD"],
[data-theme="dark"] [style*="background: #FAFBFD"],
[data-theme="dark"] [style*="background:#FAFAFA"],
[data-theme="dark"] [style*="background: #FAFAFA"],
[data-theme="dark"] [style*="background:#EEF2FA"],
[data-theme="dark"] [style*="background: #EEF2FA"],
[data-theme="dark"] [style*="background:#F0F4FF"],
[data-theme="dark"] [style*="background: #F0F4FF"],
[data-theme="dark"] [style*="background:#F8FAFF"],
[data-theme="dark"] [style*="background: #F8FAFF"],
[data-theme="dark"] [style*="background:#FCE7F3"],
[data-theme="dark"] [style*="background:#E0E7FF"],
[data-theme="dark"] [style*="background:#FEF3C7"],
[data-theme="dark"] [style*="background:#FFE4E6"],
[data-theme="dark"] [style*="background:#D1FAE5"] {
  background: #141414 !important;
  color: #F0F0F0;
  border-color: #2A2A2A !important;
}

/* Class-based backgrounds */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .preview-page,
[data-theme="dark"] .doc-paper,
[data-theme="dark"] .admin-section,
[data-theme="dark"] .feedback-modal-box,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"] {
  background: #0D0D0D !important;
  color: #F0F0F0 !important;
  border-color: #2A2A2A !important;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder {
  color: #909090 !important;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  border-color: #6FA8D6 !important;
  outline: none;
}

/* Doc preview paper — dark sheet, light text */
[data-theme="dark"] .doc-paper {
  background: #0D0D0D !important;
  color: #F0F0F0 !important;
}
[data-theme="dark"] .doc-paper * {
  color: #F0F0F0 !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] .doc-paper td,
[data-theme="dark"] .doc-paper th {
  background: transparent !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] .doc-paper [style*="color:#7A90AB"],
[data-theme="dark"] .doc-paper [style*="color:#aaa"] {
  color: #B0B0B0 !important;
}

/* Tables génériques */
[data-theme="dark"] table {
  background: #0D0D0D;
  color: #F0F0F0;
}
[data-theme="dark"] table th {
  background: #141414 !important;
  color: #FFFFFF !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] table td {
  border-color: #2A2A2A !important;
}
[data-theme="dark"] tbody tr:hover td {
  background: #1C1C1C !important;
}

/* Sidebar / topbar / nav */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .dashboard,
[data-theme="dark"] .topbar,
[data-theme="dark"] .navbar,
[data-theme="dark"] header {
  background: #000 !important;
  color: #F0F0F0;
  border-color: #2A2A2A !important;
}

/* Email modal */
[data-theme="dark"] .email-recipients-box {
  background: #0D0D0D !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] .email-tag {
  background: #1C1C1C !important;
  color: #F0F0F0 !important;
}
[data-theme="dark"] .email-input-inline {
  background: transparent !important;
  color: #F0F0F0 !important;
}

/* Boutons */
[data-theme="dark"] .btn-cancel,
[data-theme="dark"] .btn-sm:not(.btn-navy):not(.btn-orange-sm) {
  background: #1C1C1C;
  color: #F0F0F0;
  border-color: #2A2A2A;
}
[data-theme="dark"] .btn-cancel:hover,
[data-theme="dark"] .btn-sm:hover {
  background: #2A2A2A;
}

/* Textes sombres hardcodés */
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color: #444"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#1B2E45"],
[data-theme="dark"] [style*="color:#173A5E"],
[data-theme="dark"] [style*="color:#0A2540"] {
  color: #E0E0E0 !important;
}

/* Status pastels */
[data-theme="dark"] .status-success,
[data-theme="dark"] .status-warning,
[data-theme="dark"] .status-error,
[data-theme="dark"] .status-info {
  background: rgba(255,255,255,0.06) !important;
}

/* Toasts */
[data-theme="dark"] .toast,
[data-theme="dark"] #toast-container > div {
  background: #1C1C1C !important;
  color: #F0F0F0 !important;
  border-color: #2A2A2A !important;
}

/* Cream / pale brand backgrounds */
[data-theme="dark"] [style*="background:var(--cream)"],
[data-theme="dark"] [style*="background: var(--cream)"],
[data-theme="dark"] [style*="background:var(--orange-pale)"],
[data-theme="dark"] [style*="background: var(--orange-pale)"] {
  background: #141414 !important;
  color: #F0F0F0;
}

/* Borders restées claires */
[data-theme="dark"] [style*="border:1px solid #DDE6F4"],
[data-theme="dark"] [style*="border: 1px solid #DDE6F4"],
[data-theme="dark"] [style*="border:1px solid #C8D4E8"],
[data-theme="dark"] [style*="border: 1px solid #C8D4E8"],
[data-theme="dark"] [style*="border:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border: 1px solid #E5E7EB"],
[data-theme="dark"] [style*="border-bottom:1px solid #DDE6F4"] {
  border-color: #2A2A2A !important;
}


/* ══════════════════════════════════════════════════════════
   PATCH 7.9 — SA Dashboard pure-black + readability fixes
   ══════════════════════════════════════════════════════════ */

/* SA sidebar : noir pur (au lieu de bleu marine #1E293B) */
[data-theme="dark"] .sa-sidebar {
  background: #000000 !important;
  border-right: 1px solid #1E1E1E !important;
}
[data-theme="dark"] .sa-sidebar-logo {
  border-bottom-color: #1E1E1E !important;
}

/* SA quick-link buttons (top of overview) : background:#fff inline -> noir + texte clair */
[data-theme="dark"] #sa-overview-content button[style*="background:#fff"] {
  background: #0D0D0D !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] #sa-overview-content button[style*="background:#fff"] span {
  color: #F0F0F0 !important;
}
[data-theme="dark"] #sa-overview-content button[style*="background:#fff"]:hover {
  background: #1A1A1A !important;
}

/* SA Plans cards (sa-plans.js inline backgrounds) */
[data-theme="dark"] #sa-plans-content > div[style*="background:#fff"],
[data-theme="dark"] #sa-plans-content div[style*="background:#fff"] {
  background: #0D0D0D !important;
  border-color: #2A2A2A !important;
  color: #F0F0F0 !important;
}
[data-theme="dark"] #sa-plans-content div[style*="background:#fff"] *:not(button):not(input):not(textarea):not(select) {
  color: inherit !important;
}
[data-theme="dark"] #sa-plans-content [style*="color:var(--navy)"],
[data-theme="dark"] #sa-plans-content [style*="color:#0A2540"],
[data-theme="dark"] #sa-plans-content [style*="color:#173A5E"] {
  color: #F0F0F0 !important;
}
[data-theme="dark"] #sa-plans-content [style*="color:#666"],
[data-theme="dark"] #sa-plans-content [style*="color:#555"],
[data-theme="dark"] #sa-plans-content [style*="color:#475569"],
[data-theme="dark"] #sa-plans-content [style*="color:#64748B"] {
  color: #C0C0C0 !important;
}

/* Plans card mini-stats (Docs/mois, BLs/mois, Clients, Comptes) */
[data-theme="dark"] #sa-plans-content [style*="background:#0F172A"],
[data-theme="dark"] #sa-plans-content [style*="background: #0F172A"],
[data-theme="dark"] #sa-plans-content [style*="background:#1E293B"],
[data-theme="dark"] #sa-plans-content [style*="background: #1E293B"] {
  background: #1A1A1A !important;
  border-color: #2A2A2A !important;
}

/* Stat labels in cards : inline color:var(--navy) → light */
[data-theme="dark"] [style*="color:var(--navy)"] {
  color: #F0F0F0 !important;
}

/* Forcer texte clair sur tous les boutons quick-link et leurs descendants */
[data-theme="dark"] .sa-main button[style*="background:#fff"],
[data-theme="dark"] .sa-main button[style*="background:#fff"] * {
  color: #F0F0F0 !important;
}

/* Footer du SA : "Mode Utilisateur" + Assistant chip — meilleure lisibilité */
[data-theme="dark"] .sa-sidebar a[onclick*="exitSA"],
[data-theme="dark"] .sa-sidebar [onclick*="enterUserMode"] {
  color: #D4D4D4 !important;
}

/* Sidebar SA links contraste */
[data-theme="dark"] .sa-nav-link {
  color: #C0C7D4 !important;
}
[data-theme="dark"] .sa-nav-link:hover {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .sa-nav-link.active {
  background: rgba(124, 58, 237, 0.25) !important;
  color: #C4A8FF !important;
}
[data-theme="dark"] .sa-nav-group-label {
  color: #808080 !important;
}

/* Chatbot FAB : déplacé en bas-droite pour ne pas couvrir la sidebar */
.chatbot-fab {
  left: auto !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
}
@media (max-width: 900px) {
  .chatbot-fab {
    right: 1rem !important;
    bottom: 5rem !important; /* au-dessus de la bottom-nav mobile */
  }
}

/* Sidebar SA : padding-bottom pour que le dernier item ne soit pas masqué */
.sa-sidebar {
  padding-bottom: 1.5rem !important;
}

/* SA stats labels : meilleur contraste en dark */
[data-theme="dark"] .sa-stat-label,
[data-theme="dark"] .sa-stat-icon,
[data-theme="dark"] .sa-stat-value {
  color: #F0F0F0 !important;
}
[data-theme="dark"] .sa-stat-label { color: #B0B0B0 !important; }


/* ══════════════════════════════════════════════════════════
   PATCH 7.8 — Sidebar scroll independence
   La sidebar (user dashboard, admin dashboard, SA dashboard)
   ne bouge plus avec le scroll de la page : elle reste sticky
   en haut et possède son propre overflow-y vertical.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* User / Admin sidebar */
  .dashboard-layout { align-items: flex-start; }
  .sidebar {
    position: sticky;
    top: 64px; /* hauteur de la topbar */
    height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .dash-main {
    /* la zone principale gère son propre scroll */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Super Admin sidebar */
  .sa-layout { align-items: flex-start; }
  .sa-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .sa-main {
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Scrollbar discrète sur la sidebar */
  .sidebar::-webkit-scrollbar,
  .sa-sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-track,
  .sa-sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb,
  .sa-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 3px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover,
  .sa-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.3);
  }
}