/* ============================================================
   WERA — Skin override pour pages backend (dashboard, admin,
   onboarding, settings, billing, help, merci, team-invite)
   Convertit le dark theme original en cream/brown sans toucher
   aux structures HTML.
   ============================================================ */

:root{
  --bg:#f5efe3 !important;
  --panel:#fbf6ec !important;
  --panel-2:#ebe0cc !important;
  --line:rgba(42,31,21,.10) !important;
  --line-2:rgba(42,31,21,.16) !important;
  --gold:#c79a49 !important;
  --gold-2:#f3cf88 !important;
  --gold-3:#8f692f !important;
  --gold-deep:#8a632b !important;
  --text:#2a1f15 !important;
  --muted:#7d6f5d !important;
  --muted-2:#a8a09a !important;
  --green:#3d5a3a !important;
  --green-bg:rgba(125,168,118,.10) !important;
  --shadow:0 1px 3px rgba(42,31,21,.04), 0 16px 40px rgba(42,31,21,.08) !important;
}

html,body{
  background:#f5efe3 !important;
  color:#2a1f15 !important;
}
body{
  background:linear-gradient(180deg,#fbf6ec 0%,#f5efe3 100%) !important;
}
body::before{ display:none !important }

/* Header */
header,
.site-header{
  background:rgba(245,239,227,.85) !important;
  backdrop-filter:saturate(160%) blur(14px) !important;
  border-bottom:1px solid rgba(42,31,21,.10) !important;
}

/* Brand text dégradé doré reste lisible sur cream */
.brand-text{
  background:linear-gradient(135deg,#fff5cf 0%,#f3cf88 35%,#c79a49 72%,#8a632b 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Cards, panels, hero blocks */
.hero-block,
.panel,
.card,
.box,
.modal-content,
.modal-body,
.section-card,
.stat-card,
.kpi,
.kpi-card,
.metric-card,
.project-card,
.message-card,
.invoice-card,
.task-card,
.file-card{
  background:#fbf6ec !important;
  border:1px solid rgba(42,31,21,.10) !important;
  color:#2a1f15 !important;
  box-shadow:0 1px 3px rgba(42,31,21,.04), 0 12px 32px rgba(42,31,21,.06) !important;
}

/* Section dark contrastée garde son fond foncé brun (pas noir) */
.section-dark,
.dark-block,
.cta-dark{
  background:#2a1f15 !important;
  color:#f5efe3 !important;
  border-color:rgba(245,239,227,.10) !important;
}

/* Eyebrow doré reste OK */
.eyebrow{ color:#8a632b !important }
.eyebrow::before{ background:#c79a49 !important;box-shadow:none !important }

/* Headings reprennent le dégradé doré sur cream — lisibles */
h1, .h-hero, .page-title{
  background:linear-gradient(135deg,#1a1410 0%,#2a1f15 50%,#3d2d20 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
h2,h3,h4,h5{ color:#2a1f15 !important }

/* Texte muté */
.muted, .subtitle, .desc, p.note{ color:#7d6f5d !important }

/* Tags / pills */
.tag, .pill, .badge, .chip{
  background:rgba(245,239,227,.6) !important;
  border:1px solid rgba(42,31,21,.10) !important;
  color:#2a1f15 !important;
}

/* Inputs / textarea / select */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
textarea,
select{
  background:#fff !important;
  border:1px solid rgba(42,31,21,.16) !important;
  color:#2a1f15 !important;
}
input:focus,textarea:focus,select:focus{
  border-color:#c79a49 !important;
  box-shadow:0 0 0 4px rgba(199,154,73,.10) !important;
  outline:none !important;
}
label{ color:#7d6f5d !important }

/* Boutons */
.btn,
.btn-primary,
button.primary{
  background:linear-gradient(135deg,#f3cf88,#c79a49) !important;
  color:#1a1208 !important;
  border:0 !important;
  font-weight:700 !important;
}
.btn:hover,.btn-primary:hover{
  background:linear-gradient(135deg,#f3cf88,#8a632b) !important;
  box-shadow:0 12px 30px rgba(199,154,73,.20) !important;
}
.btn-ghost,
button.ghost,
button.secondary{
  background:transparent !important;
  border:1px solid rgba(42,31,21,.18) !important;
  color:#2a1f15 !important;
}
.btn-ghost:hover,
button.ghost:hover{
  background:#2a1f15 !important;
  color:#f5efe3 !important;
  border-color:#2a1f15 !important;
}
.btn-danger,
button.danger{
  background:#7a3d20 !important;
  color:#fff !important;
}

/* Statuts */
.status.ok, .status-success, .alert-success{
  background:rgba(125,168,118,.10) !important;
  border:1px solid rgba(125,168,118,.30) !important;
  color:#3d5a3a !important;
}
.status.error, .status-error, .alert-error{
  background:rgba(184,106,68,.10) !important;
  border:1px solid rgba(184,106,68,.30) !important;
  color:#7a3d20 !important;
}
.status.info, .alert-info{
  background:rgba(199,154,73,.10) !important;
  border:1px solid rgba(199,154,73,.30) !important;
  color:#8a632b !important;
}

/* Tableaux */
table{
  background:transparent !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
th{
  background:#fbf6ec !important;
  color:#2a1f15 !important;
  border-bottom:1px solid rgba(42,31,21,.10) !important;
}
td{
  background:transparent !important;
  color:#2a1f15 !important;
  border-bottom:1px solid rgba(42,31,21,.05) !important;
}
tr:hover td{ background:rgba(214,168,84,.06) !important }

/* Modals / overlays */
.modal-overlay, .overlay{
  background:rgba(42,31,21,.55) !important;
  backdrop-filter:blur(8px) !important;
}

/* Liens dans pages backend */
a:not(.btn):not(.btn-ghost):not(.brand){
  color:#8a632b !important;
}
a:not(.btn):not(.btn-ghost):not(.brand):hover{
  color:#c79a49 !important;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px;height:10px }
::-webkit-scrollbar-track{ background:#ebe0cc }
::-webkit-scrollbar-thumb{ background:#a89e83;border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:#8a7d62 }

/* Sidebar (admin / dashboard) si applicable */
.sidebar, aside.nav-side, .side-nav{
  background:#fbf6ec !important;
  border-right:1px solid rgba(42,31,21,.10) !important;
}
.sidebar a, .sidebar button{
  color:#2a1f15 !important;
}
.sidebar a.active, .sidebar a:hover{
  background:rgba(214,168,84,.10) !important;
  color:#8a632b !important;
}

/* Brand lockup PNG */
.brand-lockup-skin{
  height:56px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(143,105,47,.12));
}

/* Logo SVG existant — réinverser le dégradé pour qu'il reste lisible sur cream */
.brand-logo svg path,
header svg path{
  /* Garder le doré tel qu'il est */
}

/* ============================================================
   THÈME BLEU — surcharges pour pages backend (dashboard, etc.)
   Active quand <html class="theme-blue">
   ============================================================ */
html.theme-blue{
  --bg:#f5f7fa !important;
  --panel:#fafbfc !important;
  --panel-2:#e8eef5 !important;
  --line:rgba(40,60,90,.10) !important;
  --line-2:rgba(40,60,90,.16) !important;
  --gold:#7da4d4 !important;
  --gold-2:#a8c4e0 !important;
  --gold-3:#4a6b94 !important;
  --gold-deep:#3c587c !important;
  --text:#1d2a3a !important;
  --muted:#5a6b80 !important;
  --muted-2:#90a0b5 !important;
  --green:#3d5a3a !important;
  --green-bg:rgba(125,168,118,.10) !important;
  --shadow:0 1px 3px rgba(40,60,90,.05), 0 16px 40px rgba(40,60,90,.10) !important;
}

html.theme-blue,
html.theme-blue body{
  background:#f5f7fa !important;
  color:#1d2a3a !important;
}
html.theme-blue body{
  background:linear-gradient(180deg,#fafbfc 0%,#f5f7fa 100%) !important;
}

html.theme-blue header,
html.theme-blue .site-header{
  background:rgba(245,247,250,.85) !important;
  border-bottom:1px solid rgba(40,60,90,.10) !important;
}

html.theme-blue .brand-text{
  background:linear-gradient(135deg,#dbe5f0 0%,#a8c4e0 35%,#7da4d4 72%,#3c587c 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

html.theme-blue .hero-block,
html.theme-blue .panel,
html.theme-blue .card,
html.theme-blue .box,
html.theme-blue .modal-content,
html.theme-blue .modal-body,
html.theme-blue .section-card,
html.theme-blue .stat-card,
html.theme-blue .kpi,
html.theme-blue .kpi-card,
html.theme-blue .metric-card,
html.theme-blue .project-card,
html.theme-blue .message-card,
html.theme-blue .invoice-card,
html.theme-blue .task-card,
html.theme-blue .file-card{
  background:#fafbfc !important;
  border:1px solid rgba(40,60,90,.10) !important;
  color:#1d2a3a !important;
  box-shadow:0 1px 3px rgba(40,60,90,.05), 0 12px 32px rgba(40,60,90,.08) !important;
}

html.theme-blue .section-dark,
html.theme-blue .dark-block,
html.theme-blue .cta-dark{
  background:#1d2a3a !important;
  color:#f5f7fa !important;
  border-color:rgba(245,247,250,.10) !important;
}

html.theme-blue .eyebrow{ color:#3c587c !important }
html.theme-blue .eyebrow::before{ background:#7da4d4 !important;box-shadow:none !important }

html.theme-blue h1,
html.theme-blue .h-hero,
html.theme-blue .page-title{
  background:linear-gradient(135deg,#0f1825 0%,#1d2a3a 50%,#2d3e54 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
html.theme-blue h2,
html.theme-blue h3,
html.theme-blue h4,
html.theme-blue h5{ color:#1d2a3a !important }

html.theme-blue .muted,
html.theme-blue .subtitle,
html.theme-blue .desc,
html.theme-blue p.note{ color:#5a6b80 !important }

html.theme-blue .tag,
html.theme-blue .pill,
html.theme-blue .badge,
html.theme-blue .chip{
  background:rgba(245,247,250,.6) !important;
  border:1px solid rgba(40,60,90,.10) !important;
  color:#1d2a3a !important;
}

html.theme-blue input[type="text"],
html.theme-blue input[type="email"],
html.theme-blue input[type="tel"],
html.theme-blue input[type="password"],
html.theme-blue input[type="number"],
html.theme-blue input[type="url"],
html.theme-blue input[type="search"],
html.theme-blue input[type="date"],
html.theme-blue input[type="datetime-local"],
html.theme-blue textarea,
html.theme-blue select{
  background:#fff !important;
  border:1px solid rgba(40,60,90,.16) !important;
  color:#1d2a3a !important;
}
html.theme-blue input:focus,
html.theme-blue textarea:focus,
html.theme-blue select:focus{
  border-color:#7da4d4 !important;
  box-shadow:0 0 0 4px rgba(125,164,212,.15) !important;
}
html.theme-blue label{ color:#5a6b80 !important }

html.theme-blue .btn,
html.theme-blue .btn-primary,
html.theme-blue button.primary{
  background:linear-gradient(135deg,#a8c4e0,#7da4d4) !important;
  color:#0f1825 !important;
}
html.theme-blue .btn:hover,
html.theme-blue .btn-primary:hover{
  background:linear-gradient(135deg,#a8c4e0,#3c587c) !important;
  box-shadow:0 12px 30px rgba(125,164,212,.25) !important;
}
html.theme-blue .btn-ghost,
html.theme-blue button.ghost,
html.theme-blue button.secondary{
  background:transparent !important;
  border:1px solid rgba(40,60,90,.18) !important;
  color:#1d2a3a !important;
}
html.theme-blue .btn-ghost:hover,
html.theme-blue button.ghost:hover{
  background:#1d2a3a !important;
  color:#f5f7fa !important;
  border-color:#1d2a3a !important;
}

html.theme-blue .status.info,
html.theme-blue .alert-info{
  background:rgba(125,164,212,.10) !important;
  border:1px solid rgba(125,164,212,.30) !important;
  color:#3c587c !important;
}

html.theme-blue th{
  background:#fafbfc !important;
  color:#1d2a3a !important;
  border-bottom:1px solid rgba(40,60,90,.10) !important;
}
html.theme-blue td{
  color:#1d2a3a !important;
  border-bottom:1px solid rgba(40,60,90,.05) !important;
}
html.theme-blue tr:hover td{ background:rgba(125,164,212,.08) !important }

html.theme-blue .modal-overlay,
html.theme-blue .overlay{
  background:rgba(15,24,37,.55) !important;
}

html.theme-blue a:not(.btn):not(.btn-ghost):not(.brand){
  color:#3c587c !important;
}
html.theme-blue a:not(.btn):not(.btn-ghost):not(.brand):hover{
  color:#7da4d4 !important;
}

html.theme-blue ::-webkit-scrollbar-track{ background:#e8eef5 }
html.theme-blue ::-webkit-scrollbar-thumb{ background:#90a0b5;border-radius:99px }
html.theme-blue ::-webkit-scrollbar-thumb:hover{ background:#5a6b80 }

html.theme-blue .sidebar,
html.theme-blue aside.nav-side,
html.theme-blue .side-nav{
  background:#fafbfc !important;
  border-right:1px solid rgba(40,60,90,.10) !important;
}
html.theme-blue .sidebar a,
html.theme-blue .sidebar button{
  color:#1d2a3a !important;
}
html.theme-blue .sidebar a.active,
html.theme-blue .sidebar a:hover{
  background:rgba(125,164,212,.10) !important;
  color:#3c587c !important;
}

html.theme-blue .brand-lockup-skin{
  filter:hue-rotate(190deg) saturate(.85) brightness(.95) drop-shadow(0 2px 6px rgba(40,80,140,.18)) !important;
}

/* Dashboard-specific overrides: nav-links + nav-user éléments */
html.theme-blue .nav-links a{ color:#5a6b80 !important }
html.theme-blue .nav-links a:hover,
html.theme-blue .nav-links a.active{
  color:#3c587c !important;
  background:rgba(125,164,212,.10) !important;
}

/* Bell + notif panel en thème bleu */
html.theme-blue .bell{
  border-color:rgba(40,60,90,.16) !important;
  color:#1d2a3a !important;
}
html.theme-blue .bell:hover{
  border-color:#7da4d4 !important;
  color:#3c587c !important;
}
html.theme-blue .notif-panel{
  background:#fafbfc !important;
  border:1px solid rgba(40,60,90,.10) !important;
}
html.theme-blue .notif-header{
  color:#5a6b80 !important;
  border-bottom:1px solid rgba(40,60,90,.06) !important;
}
html.theme-blue .notif-header button{ color:#3c587c !important }
html.theme-blue .notif-item{ border-bottom:1px solid rgba(40,60,90,.04) !important }
html.theme-blue .notif-item:hover{ background:rgba(125,164,212,.04) !important }
html.theme-blue .notif-item.unread{ background:rgba(125,164,212,.06) !important }
html.theme-blue .notif-item strong{ color:#1d2a3a !important }
html.theme-blue .notif-item span,
html.theme-blue .notif-item time{ color:#5a6b80 !important }

/* Tabs */
html.theme-blue .tabs{
  background:rgba(125,164,212,.05) !important;
  border:1px solid rgba(40,60,90,.08) !important;
}
html.theme-blue .tab{ color:#5a6b80 !important }
html.theme-blue .tab:hover{ color:#1d2a3a !important }
html.theme-blue .tab.active{
  background:rgba(125,164,212,.15) !important;
  color:#3c587c !important;
}
html.theme-blue .tab-badge{
  background:#7da4d4 !important;
  color:#0f1825 !important;
}

/* Messages */
html.theme-blue .msg.client{
  background:rgba(125,164,212,.10) !important;
  border:1px solid rgba(125,164,212,.25) !important;
}
html.theme-blue .msg.admin{
  background:rgba(40,60,90,.05) !important;
  border:1px solid rgba(40,60,90,.10) !important;
}
html.theme-blue .msg .meta{ color:#5a6b80 !important }
html.theme-blue .msg-form input{
  background:#fff !important;
  border:1px solid rgba(40,60,90,.16) !important;
  color:#1d2a3a !important;
}
html.theme-blue .msg-form input:focus{ border-color:#7da4d4 !important }

/* Files */
html.theme-blue .file-drop{
  border:2px dashed rgba(40,60,90,.16) !important;
  color:#5a6b80 !important;
}
html.theme-blue .file-drop:hover,
html.theme-blue .file-drop.dragover{
  border-color:#7da4d4 !important;
  background:rgba(125,164,212,.04) !important;
  color:#3c587c !important;
}
html.theme-blue .file-item{ border:1px solid rgba(40,60,90,.08) !important }
html.theme-blue .file-icon{
  background:rgba(125,164,212,.10) !important;
}
html.theme-blue .file-info strong{ color:#1d2a3a !important }
html.theme-blue .file-info span{ color:#5a6b80 !important }
html.theme-blue .file-btn{
  border:1px solid rgba(40,60,90,.16) !important;
  color:#3c587c !important;
}
html.theme-blue .file-btn:hover{ background:rgba(125,164,212,.10) !important }

/* Team */
html.theme-blue .team-item{ border:1px solid rgba(40,60,90,.08) !important }
html.theme-blue .team-info strong{ color:#1d2a3a !important }
html.theme-blue .team-info span{ color:#5a6b80 !important }
html.theme-blue .team-role{
  background:rgba(125,164,212,.12) !important;
  color:#3c587c !important;
}

/* Theme toggle bouton sur pages backend */
html.theme-blue .theme-toggle{
  background:rgba(125,164,212,.15) !important;
  border:1px solid rgba(40,60,90,.16) !important;
}

/* Loader spinner */
html.theme-blue .loader{
  border:3px solid rgba(125,164,212,.20) !important;
  border-top-color:#7da4d4 !important;
}

/* Email span */
html.theme-blue .email{ color:#5a6b80 !important }

/* Lede */
html.theme-blue .lede{ color:#5a6b80 !important }

/* Empty state */
html.theme-blue .empty-state p{ color:#5a6b80 !important }

/* ============================================================
   Theme toggle (pill iOS-style) sur pages backend
   ============================================================ */
.theme-toggle{
  width:48px;height:28px;
  padding:0;
  border:1px solid rgba(42,31,21,.16);
  border-radius:99px;
  background:#fbf6ec;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:background .3s ease, border-color .2s ease;
  display:inline-block;
  vertical-align:middle;
  margin-right:8px;
}
.theme-toggle:hover{ border-color:#8a632b }
.theme-toggle::after{
  content:'';
  position:absolute;
  left:3px;top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#f3cf88 0%,#c79a49 60%,#8a632b 100%);
  transition:left .35s cubic-bezier(.5,1.4,.5,1), background .35s ease;
  box-shadow:0 1px 3px rgba(42,31,21,.20);
}
html.theme-blue .theme-toggle{
  background:#e8eef5 !important;
  border-color:rgba(40,60,90,.20) !important;
}
html.theme-blue .theme-toggle::after{
  left:25px;
  background:linear-gradient(135deg,#7da4d4 0%,#5a8bc5 60%,#3d6a9c 100%) !important;
}
.theme-toggle-floating{
  position:fixed;
  top:20px;right:20px;
  z-index:1000;
  box-shadow:0 4px 12px rgba(42,31,21,.10);
}

/* Tooltip Astuce (1 fois par device) */
.theme-tip{
  position:fixed;
  z-index:1001;
  background:#1f2b3a;
  color:#fafbfc;
  padding:13px 16px;
  border-radius:12px;
  font-size:13px;line-height:1.45;
  display:flex;align-items:flex-start;gap:10px;
  opacity:0;
  transform:translateY(-10px) scale(.96);
  transition:opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 16px 40px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
  pointer-events:auto;
  font-family:"Manrope",sans-serif;
  font-weight:500;
}
.theme-tip.show{ opacity:1;transform:translateY(0) scale(1) }
.theme-tip-arrow{
  position:absolute;
  top:-7px;
  left:var(--arrow-x, 50%);
  transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #1f2b3a;
}
.theme-tip-text{ margin:0;flex:1;color:rgba(250,251,252,.92) }
.theme-tip-close{
  background:transparent;border:0;
  color:rgba(250,251,252,.55);
  font-size:20px;line-height:1;
  padding:0 0 0 4px;cursor:pointer;
  font-family:inherit;
  margin-top:-2px;
  transition:color .15s ease;
}
.theme-tip-close:hover{ color:#fafbfc }