/* =================================================================
   LA MACHINERIE — Premium UI Theme 2026 v11
   Glassmorphism intelligent · Zéro bug · Safari compatible
   -----------------------------------------------------------------
   Principes :
   · Opacité 82-92% sur les panneaux → lisibilité + effet verre
   · body color SANS !important → les SVG DocuSeal gardent leur couleur native
   · Canvas signature : [role="tabpanel"] forcé blanc (parent transparent)
   · Overlays PDF : couleurs natives DocuSeal + texte rose #e91e8c
   · Modal signature : fond solide #0d0d1f + canvas blanc = contraste maximal
   · Fallbacks sans :has() pour Safari < 15.4
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════
   0. VARIABLES DAISY UI
   ═══════════════════════════════════════════════════════════════ */
[data-theme="docuseal"], [data-theme], :root {
  --b1: 237 25% 10%;
  --b2: 237 25% 7%;
  --b3: 237 25% 14%;
  --bc: 237 25% 90%;
  --n:  237 25% 12%;
  --nc: 237 25% 90%;
  --p:  280 78% 62%;
  --pc: 0 0% 100%;
  --s:  231 90% 65%;
  --sc: 0 0% 100%;
  --a:  328 78% 60%;
  --ac: 0 0% 100%;
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   1. FOND — MESH GRADIENT FIXE
   ═══════════════════════════════════════════════════════════════ */
html, html[data-theme] {
  min-height: 100vh !important;
  background:
    radial-gradient(ellipse 70% 55% at 15%  5%,  rgba(197, 80, 240, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse 60% 65% at 85% 15%,  rgba(91, 126, 255, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 88%,  rgba(255, 107, 107, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 92% 72%,  rgba(0, 210, 255, 0.24) 0%, transparent 50%),
    #12122a !important;
  background-attachment: fixed !important;
}

body {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: transparent !important;
  color: #f0f0ff;   /* PAS de !important → évite de contaminer les SVG natifs DocuSeal */
  -webkit-font-smoothing: antialiased !important;
}

body > div:not([class*="modal"]):not([class*="toast"]):not([class*="alert"]),
main, #app {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. NAVBAR
   ═══════════════════════════════════════════════════════════════ */
div.max-w-6xl.py-3 {
  background: rgba(14, 14, 26, 0.90) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  max-width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  color: #f0f0ff !important;
}
div.max-w-6xl.py-3 * { color: #f0f0ff !important; }

/* ═══════════════════════════════════════════════════════════════
   3. BUILDER HEADER
   ═══════════════════════════════════════════════════════════════ */
#title_container, .title-container {
  background: rgba(14, 14, 26, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40) !important;
  color: #f0f0ff !important;
}
#title_container *, .title-container * { color: #f0f0ff !important; }

/* ═══════════════════════════════════════════════════════════════
   4. LOGO LMCN (SVG base64)
   ═══════════════════════════════════════════════════════════════ */
a[href="/"] svg, a[href="/"] img, a[href="/"] span { display: none !important; }
a[href="/"]:not([class*="btn"]) {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
a[href="/"]:not([class*="btn"])::before {
  content: '' !important;
  display: inline-block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTE9HTyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTA4MCAxMDgwIj4KICA8ZyBpZD0iTE9HTy0yIj4KICAgIDxwYXRoIGlkPSJTVEFSIiBmaWxsPSIjZmZmIiBkPSJNNTgxLjM5LDUzNy4wMmMxLjI1LjM1LDIuMzQsMS4xNiwzLjQ5LDEuNzUtMS4yLjgzLTIuMzEsMS44My0zLjU5LDIuNDEtMS4zNi42Mi0yLjkyLjc5LTQuMzYsMS4yNC01LjQ1LDEuNjgtMTAuOTYsMy4xNS0xNi4zMiw1LjEtNy42MSwyLjc3LTEyLjU3LDguMjQtMTQuMDIsMTYuMTYtMS42Nyw5LjExLTIuNzcsMTguMy00LjE3LDI3LjQzLS4zOCwyLjU2LS44OSw1LjEtMS4zNCw3LjY0LS40Mi4wNi0uODIuMTItMS4yMy4xOC0uMzgtMS4yOC0uOTItMi41NC0xLjEyLTMuODctMS4zMi04LjYyLTIuNjMtMTcuMjYtMy44LTI1LjkyLTEuODMtMTMuNDEtOS41Ni0yMC41NC0yMi44OS0yMS45OC00LjI0LS40Ni04LjQ4LTEuMDktMTIuNjgtMS43Ny0xLjMtLjItMi41Mi0uNzctMy43Ny0xLjE3LDAtLjQyLDAtLjgxLjAyLTEuMjMsMS40MS0uNjIsMi43OS0xLjM4LDQuMjYtMS44MSw0LjM4LTEuMjcsOC44LTIuMzMsMTMuMTgtMy42MiwyLjI2LS42NSw0LjQ3LTEuNTcsNi43LTIuNDMsNy43My0zLjAzLDEyLjg4LTguNDcsMTQuMzItMTYuNjUsMS42NS05LjIsMi43NS0xOC40OCw0LjE1LTI3LjcyLjM2LTIuNDEuOTItNC44LDEuNDEtNy4xOS40Ny0uMDMuOTItLjA3LDEuMzktLjExLjQ3LDEuODgsMS4xLDMuNjksMS4zOCw1LjU5LDEuMDIsNy4wOCwxLjc4LDE0LjIzLDIuOTIsMjEuMjguNiwzLjc1LDEuNjgsNy40MSwyLjczLDExLjAyLDEuNzcsNi4wMiw1LjgxLDEwLjAyLDExLjgxLDExLjYsNS40MiwxLjQ0LDExLjAzLDIuMjgsMTYuNTcsMy4zMSwxLjY1LjMzLDMuMzcuMzIsNC45NC43OFoiLz4KICAgIDxwYXRoIGlkPSJOIiBmaWxsPSIjZmZmIiBkPSJNMTAwNy4xLDY1NC44OWMtLjE4LTM2LjY3LS44LTczLjMyLTEuMzYtMTA5Ljk2LDAtLjA1LDAtLjEsMC0uMTUtLjE3LTguNTItNy4yNS0xNC45My0xNS43OC0xNC41My0xLjM2LjA2LTIuNy4xMi00LjA1LjE1LTE2LjY3LjQ2LTMzLjMzLjM3LTUwLjAyLDEuMy0yMi40OSwxLjI1LTQ0Ljk3LDMuMy02Ny40Niw0LjktMTEuNjEuODItMjMuMjQsMS41MS0zNC44NSwyLjA5LTE3LjguODgtMzUuNjEsMi4wMi01My4zOCwyLjIzLTguMTUuMDktMTQuNTMsNi44Mi0xNC4wOCwxNC45My41OSwxMS4wNywxLjg0LDIyLjI3LjY0LDMzLjI4LTIuNDcsMjIuNTgtLjc2LDQyLjctLjQsNjUuMjEuMTYsOS4yNSw0LjE3LDE0Ljc2LDExLjA2LDE5LjE1LDIwLjMsMTIuODgsMzguNSwyNy45Myw1OC43Niw0MC44OCwxOC40OCwxMS44MiwzNi44NywyMy43NCw1NS4yLDM1Ljc2LDIuNTcsMS43LDYuMjcsMy45NSw2LjUzLDYuNDEuNjUsNi4yOCwxLjI2LDEyLjgtLjQsMTkuOS0uMjMsMS0xLjMxLDEuNTgtMi4yMiwxLjE4LTEuOTktLjg3LTMuNS0xLjQ2LTQuODUtMi4zMi0yNy42OC0xNy44LTU1LjcxLTM1LjEzLTgyLjkxLTUzLjYtMzUuNzEtMjQuMjQtNzAuNTUtNDkuNzItMTA2LjIyLTc0LjAzLTE5LjI3LTEzLjEzLTM5LjQ5LTI0LjkxLTU5LjI0LTM3LjM4LTIxLjI2LTEzLjQtNDEuNTYtMjguMTEtNjIuMTItNDIuNTItMS41LTEuMDUtMy4yOS0xLjcyLTUuMTctMS42OC03LjQuMTUtOC45Miw5LjYzLTkuOTYsMTUuMTgtMTQuOTYsNzkuMzQtNy45NywxNTkuMTMtNy45NywyMzguNTUtLjMsNTQuMzItMi40NywxMTAuMjgtMy43LDE2NC42LS4xLDMuOTUtLjAzLDcuODcuMjcsMTEuNzguNjUsOC43LDEuOTgsMTAuNDIsOS44MiwxMC4wOSwxMi4zMy0uNTUsMjQuNjYtMS4zNSwzNi45OC0yLjM1LDEyLjctMS4wMiwyNS4zNy0yLjc1LDM4LjA3LTMuNTYsMTkuNjEtMS4yNiwzOS4yMi0xLjk3LDU4Ljg0LTIuOTYsMjcuMjUtMS4zOCw1NC41NS0zLjc3LDgxLjc0LTMuOTQsMjguNy0uMTksNTcuMjgtMi4wMSw4NS45NS00LjcyLDI1LjcyLTIuNDMsNTEuNTEtMi44Niw3Ny4yNi00LjE2LDE4LjEyLS45MSwzNi4yMy0xLjczLDU0LjM0LTIuNjgsOS45LS41MywxMC41NS0xLjAyLDEwLjQ4LTEwLjczLS4xNy0xOC4xMy0uODMtMzcuNzMtLjk1LTU1Ljg2LS4wNi05LjA3Ljk1LTE4LjIuODktMjcuMjUtLjExLTE4LjUtLjktMzYuOTYtLjg5LTU1LjQ2LjAxLTIxLjA2LjgxLTQyLjE1Ljkzbi02My4yMS4yMS0zOC4xOC4zOC03Ni4zNS4yLTExNC41MVoiLz4KICAgIDxwYXRoIGlkPSJDIiBmaWxsPSIjZmZmIiBkPSJNNTI2LjU1LDY4OC43N2MtLjAxLTE0LjUyLS4wOS0yOS4xMS0uODgtNDMuNDctLjc1LTEzLjY0LTIuMTItMjcuMjMtNC42Ny00MC41NS0yLjAyLTEwLjU2LTMuMjEtMjUuNzktMTEtMzMuNjItNC45Ni00Ljk5LTEyLjM2LTYuNjctMTkuNDUtNy43Mi0yNC4wNC0zLjU2LTQ4Ljc4LTIuMTQtNzMuMzEtLjcyLTU5LjcxLDMuNDYtMTE5LjMzLDYuMjgtMTc5LjAzLDguOS0yMi4wNy45Ny00NC4xNiwyLjgzLTY2LjIzLDMuODMtMTAuNDYuNDctMjAuOS0uNjUtMzEuMzYtLjEyLTEzLjAxLjY3LTI2Ljc4LDIuMjYtMzkuNzgsMy42Mi01LjMyLjU1LTEwLjYzLDEuMjQtMTYuMTgsMS45Ny01LjkyLjc4LTEwLjUsNS45Ny0xMC40NywxMS45LS4wMSwwLDAsMCwwLC4wOS4yOCw2NC4wNy43OCwxMjguMTEuNzgsMTkyLjE5LS4wMSw1My4yMy0uNTksMTA2LjUxLTEsMTU5Ljc2LS4wNCw2LjE0LS45MiwxMi4zMy0uNzgsMTguNDQuMzgsMTguMTcsMS4yMywzNi4zLDEuNTgsNTQuNDkuMTQsNy4xMSw2LjA4LDEyLjQ0LDEzLjIsMTEuNzMsNy41OS0uNzUsMTUuMTgtMi4xLDIyLjc2LTIuNDUsMTEuOTEtLjU1LDI0LjU3LS4xNiwzNi40Ny0uOCwxNy4zNy0uOTUsMzQuNzItMi45Niw1Mi4wNy0zLjY5LDQ1LjI1LTEuODcsOTAuNTItMS44NywxMzUuNzItNS4yOSw0OS42Ni0zLjc3LDk5LjItNC4xNCwxNDguOC02LjY1LDEwLjUxLS41MywyMS4wMS0xLjAxLDMxLjUxLTEuNjMsNS42Mi0uMzQsOC42MS0zLjExLDguNjUtOS4xMi4wNi05LjQuNzgtMTguODQuNzMtMjguMjMtLjA2LTE2LjY0LS42Mi0zMy4yNi0uNjgtNDkuODktLjA0LTE0LjExLjQ1LTI4LjI0LjQ3LTQyLjM1LjAxLTguMzEtLjc4LTE2LjU3LS42NS0yNC44OS4yNC0xNS4yLDEuMDItMzAuNDQsMS4zMy00NS42NC4zNS0xNy44Ny0uMDMtMTcuOTItMTguMTItMTYuNjgtMjYuMDQsMS43Ny01Mi4xLDMuMjUtNzguMTYsNC44My0zLjg2LjI0LTcuNzIuNDQtMTEuNzYuNjYtMS4xOS4wNy0yLjE2LS44NC0yLjE2LTIuMDN2LTE3Ljk2YzAtLjg2LjY4LTEuNjEsMS41NC0xLjY5LDUuMDItLjUyLDkuODYtMS4xMywxNC43MS0xLjM3LDE1LjU2LS43NywzMS4xMy0uOTQsNDYuNjctMi4xMywxMy4zMS0xLjAxLDI2LjQ3LTQuNzEsMzkuOTYtMy40OCw3LjM5LjY4LDkuMDQtLjg5LDkuMzEtOC43My40NC0xMi4yOC0uMS0yNC41NC0uMzgtMzYuOC0uMjYtMTEuNDEtLjIzLTIzLjAyLS4yNC0zNC42OFoiLz4KICAgIDxwYXRoIGlkPSJNIiBmaWxsPSIjZmZmIiBkPSJNMTAwNC42OCwyNjIuNjZjMS44LTYyLjMuODQtMTI0LjYzLDIuNjktMTg2Ljk4LS43Ni02LjIyLDEuMDEtMjcuOTEtNy44LTI1LjYyLTY5LDQ5LjQyLTEzMi41OCwxMDYuOS0yMDAuNzMsMTU3Ljk1LTcuNTcsNC42My0xNi4wNSwxNS40Mi0yNC44MSw4LjQ5LTY3Ljg5LTQ1LjM4LTEzNS41OCw5MC45Ny0yMDIuNDEtMTM3Ljg2LTUuNDEtMi40Ni0xNS44NS0xMi41OS0xNy4yMy0uNDItMS44NCwyNi43NS0yLjE4LDUzLjQxLS45Nyw4MC4wMi0uMSw0OC4yOC4yLDk2LjU1LjMzLDE0NC44Mi4xNiw2MC44Mi00Ljc4LDEyMi40Niw4LjM3LDE4MS42NywxLjc0LDcuODQsMy44OSwxNS44Myw4LjgsMjIsMTkuMDYsMjMuOTYsNjUuNDIsMTMuOTQsOTIuMTcsMTIuNjIsMjMuMy0xLjE2LDQ2LjYxLTIuNTksNjkuOTItMy45Niw0Ny43MS0yLjgsOTUuNDMtNS43MywxNDMuMTItOS41MiwxNS4yNC0xLjIxLDMwLjU1LTMuMDgsNDUuNzktMy45MiwyNC40OCwxLjI3LDQ5LjE5LjQ4LDczLjc5LjY0LDYuMzUuMDMsOS43OS0yLjc5LDkuNzMtOS4wOC0yLjYxLTU3LjY1LDEuOTktMTE1LjkyLS40NS0xNzMuNTItMS43Ni0xOC45Ny0xLjcxLTM4LjE1LS4zMy01Ny4zM1oiLz4KICAgIDxwYXRoIGlkPSJMIiBmaWxsPSIjZmZmIiBkPSJNNTI2Ljc5LDMyMC43OWMtLjA3LTMuNS0yLjc2LTYuMjYtNi4yNS02LjQtNS4xOS0uMi05LjgyLS40Mi0xNC40NC0uMDgtMTkuMiwxLjM4LTM4LjQsMy40My01Ny42MSw0LjY1LTEyLjMuNzctMjQuNzYtLjc5LTM2LjkxLjA2LTM3LjM0LDUuNjgtMTYuNjUtLjE1LTUzLjkzLDIuODdoLS4wN2MtNi4wOS40OC0xMS4xMy00LjQ3LTEwLjg5LTEwLjYxLjAxLS40NC4wNS0uODkuMDktMS4zMy4xMy0xLjIzLjE2LTIuNDcuMTYtMy43MVY5MS42YzAtMy42OS0zLjAxLTYuNTUtNi42OS02LjM1LTE1Ljk3LjkzLTg5Ljg4LDUtMTA1Ljg0LDYuMDctMTMuNzguOTQtMjcuNTIsMi41MS00MS4yNywzLjExLTE5LjIuODEtMzguNDEuODItNTcuNjEsMS40OS0xMy40MS40OS0yNi44OCwyLjE3LTQwLjI0LDIuMTYtMjAuNDIuMDItMjAuOTcuMjctMjAuMDcsMjAuNTQuNTgsMTMuMDMsMS40MiwyNi4wOCwxLjIsMzkuMTYtLjMxLDE5LjMxLTIuMTMsMzguNjYtMi4xNyw1Ny45Ny0uMTMsNDEuNDkuMzksODIuOTcuODMsMTI0LjQzLjIxLDE5LjI5LDEuMTcsMzguNTEsMS4xOCw1Ny44LjAxLDIxLjUxLS40OSw0My4wMS0xLDY0LjUzLS4zNSwxNC41Ny0xLjIxLDI5LjE5LTEuNjMsNDMuNzgtLjM0LDExLjY1LS43MiwyMy4zNC0uMzgsMzQuOTcuMjUsOC43LDIuMjQsMTAuNDUsMTAuMjUsMTAuMTQsMjguNjctMS4xNiw1Ny4zNS0xLjgsODYtNC4wOSwyMi4wNy0xLjc2LDQ0LjA4LTQuMDQsNjYuMjEtNC4zMiwxOC4wNi0uMiwzNi4xOS0xLjE5LDU0LjI3LTIuNDEsMzIuODItMi4yMSw2NS44Ny02LjU5LDk4LjU3LTYuMzYsMjEsLjE1LDQyLjExLS42Nyw2My4xLTMuNTMsMTYuOTYtMi4zMSwzNy44MS0zLjgzLDUxLjE3LTE2LjY0LDkuMjQtOC44NSwxMy4yMi0yMS43OSwxNS4xLTM0LjIzLDYuMjEtNDEuMSw5LjYxLTgxLjY3LDkuNDEtMTIyLjk3LS4wNi0xMS43NC0uMzQtMjMuNDUtLjU1LTM2LjA2WiIvPgogIDwvZz4KPC9zdmc+Cg==') center / contain no-repeat !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. DROPDOWNS
   ═══════════════════════════════════════════════════════════════ */
.dropdown-content, .dropdown-content.menu, ul.dropdown-content {
  background: rgba(10, 10, 22, 0.95) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.60) !important;
}
.dropdown-content li > a,
.dropdown-content li > button {
  color: rgba(220, 220, 255, 0.90) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
}
.dropdown-content li > a:hover,
.dropdown-content li > button:hover {
  background: rgba(197, 80, 240, 0.20) !important;
  color: #fff !important;
}
.bg-base-content.rounded-full {
  background: linear-gradient(135deg, #c550f0, #5b7eff) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. CARDS & PANELS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: rgba(22, 22, 40, 0.84) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: #f0f0ff !important;
}
.card-body { background: transparent !important; }
.card:hover {
  border-color: rgba(197, 80, 240, 0.30) !important;
  box-shadow: 0 12px 40px rgba(197, 80, 240, 0.15) !important;
}
.rounded-box, ul.menu.rounded-box {
  background: rgba(18, 18, 34, 0.86) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  color: #f0f0ff !important;
}
.bg-base-100 { background: rgba(20, 20, 36, 0.85) !important; color: #f0f0ff !important; }
.bg-base-200 { background: rgba(16, 16, 30, 0.87) !important; color: #f0f0ff !important; }
.bg-base-300 { background: rgba(24, 24, 40, 0.88) !important; color: #f0f0ff !important; }
.bg-neutral   { background: rgba(18, 18, 30, 0.86) !important; color: #f0f0ff !important; }
/* Tailwind greys utilisés par DocuSeal pour les boutons secondaires */
.bg-gray-50, .bg-gray-100, .bg-gray-200 {
  background: rgba(30, 20, 50, 0.85) !important;
  color: #f0f0ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. MENU LATÉRAL
   ═══════════════════════════════════════════════════════════════ */
.menu { background: transparent !important; }
.menu li {
  margin-bottom: 3px !important;
}
.menu li > a, .menu li > button {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  color: rgba(220, 220, 255, 0.80) !important;
  border-radius: 10px !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.menu li > a:hover, .menu li > button:hover {
  background: rgba(30, 30, 54, 0.82) !important;
  color: #fff !important;
}
.menu li > a.active, .menu li > a[class*="bg-base"], .menu li.active > a {
  background: rgba(61, 26, 82, 0.88) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. BOUTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #c550f0, #5b7eff) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(197, 80, 240, 0.40) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 32px rgba(197, 80, 240, 0.55) !important;
}
.btn-primary:active { transform: scale(0.99) !important; }
.btn-neutral {
  background: rgba(30, 30, 54, 0.86) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f0f0ff !important;
}
.btn-neutral:hover { background: rgba(40, 40, 64, 0.92) !important; }
.btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #f0f0ff !important;
}
.btn-outline:hover {
  background: rgba(30, 30, 54, 0.86) !important;
  border-color: #9d40d0 !important;
  color: #fff !important;
}
.btn-ghost {
  background: transparent !important;
  color: rgba(220, 220, 255, 0.80) !important;
}
.btn-ghost:hover {
  background: rgba(30, 30, 54, 0.72) !important;
  color: #fff !important;
}
.btn-error {
  background: linear-gradient(135deg, #ff4d6d, #c9184a) !important;
  border: none !important;
  color: #fff !important;
}
.btn-sm { padding: 6px 14px !important; font-size: 0.8rem !important; }

/* ═══════════════════════════════════════════════════════════════
   9. INPUTS
   ═══════════════════════════════════════════════════════════════ */
.input, .textarea, .select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.toggle),
textarea, select {
  font-family: 'Inter', sans-serif !important;
  background: rgba(20, 20, 38, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f0f0ff !important;
  border-radius: 10px !important;
}
.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
  border-color: #9d40d0 !important;
  background: rgba(28, 10, 44, 0.94) !important;
  box-shadow: 0 0 0 3px rgba(197, 80, 240, 0.22) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(220, 220, 255, 0.32) !important;
}
.label-text, label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(220, 220, 255, 0.65) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  color: #f0f0ff !important;
  letter-spacing: -0.025em !important;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem) !important; font-weight: 800 !important; }
h2 { font-size: clamp(1.1rem, 2vw, 1.4rem) !important; font-weight: 700 !important; }
h3 { font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════
   11. TABLES
   ═══════════════════════════════════════════════════════════════ */
table { background: transparent !important; width: 100% !important; }
thead th {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: rgba(220, 220, 255, 0.45) !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  background: transparent !important;
  padding: 12px 16px !important;
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06) !important; transition: background 160ms !important; }
tbody tr:hover { background: rgba(197, 80, 240, 0.10) !important; }
tbody td { color: rgba(220,220,255,0.80) !important; padding: 14px 16px !important; font-size: 0.875rem !important; vertical-align: middle !important; }
tbody td:first-child { color: #f0f0ff !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════════
   12. BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge {
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-family: 'Inter', sans-serif !important;
}
.badge-success { background: rgba(13,51,37,0.90) !important; color: #34d399 !important; border: 1px solid #1a5c40 !important; }
.badge-warning { background: rgba(61,32,0,0.90) !important;  color: #fb923c !important; border: 1px solid #6b3800 !important; }
.badge-error   { background: rgba(61,13,26,0.90) !important; color: #f87171 !important; border: 1px solid #6b1a2e !important; }
.badge-info    { background: rgba(13,26,77,0.90) !important; color: #7b9fff !important; border: 1px solid #1a2e80 !important; }
.badge-neutral { background: rgba(30,30,54,0.90) !important; color: rgba(220,220,255,0.90) !important; border: 1px solid rgba(255,255,255,0.14) !important; }

/* ═══════════════════════════════════════════════════════════════
   13. MODAL SIGNATURE — fond sombre, canvas blanc
   -----------------------------------------------------------------
   Approche :
   · Le conteneur modal → fond solide sombre (#0d0d1f)
   · [role="tabpanel"] → blanc forcé (c'est le parent direct du canvas)
   · canvas → blanc forcé en double sécurité
   · Fallbacks sans :has() pour Safari < 15.4
   ═══════════════════════════════════════════════════════════════ */
/* Modal signature — glassmorphism sombre, texte rose */
.modal-box {
  background: rgba(20, 8, 35, 0.82) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border: 1px solid rgba(233, 30, 140, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.65) !important;
  color: #e91e8c !important;
}
.modal-box * { color: #e91e8c !important; }
/* Force le rose même sur les .tab à l'intérieur (spécificité plus haute) */
.modal-box .tab,
.modal-box [role="tab"] {
  color: #e91e8c !important;
  background: rgba(233, 30, 140, 0.12) !important;
  border-color: rgba(233, 30, 140, 0.30) !important;
}
.modal-box .tab-active,
.modal-box [aria-selected="true"] {
  background: linear-gradient(135deg, #e91e8c, #c550f0) !important;
  color: #ffffff !important;
}
/* Canvas — reste blanc pour signer */
.modal-box canvas {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
}
.modal::before { background: rgba(4, 4, 14, 0.72) !important; }

/* ═══════════════════════════════════════════════════════════════
   14. MISC (scrollbar, selection, liens)
   ═══════════════════════════════════════════════════════════════ */
.divider::before, .divider::after { background-color: rgba(255,255,255,0.09) !important; }
hr { border-color: rgba(255,255,255,0.09) !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,60,160,0.60); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9d40d0; }
::selection { background: rgba(197,80,240,0.35); color: #fff; }
a:not(.btn):not([href="/"]) { color: #a78bfa !important; text-decoration: none !important; }
a:not(.btn):not([href="/"]):hover { color: #c4b5fd !important; }

/* ═══════════════════════════════════════════════════════════════
   15. MASQUER BRANDING DOCUSEAL
   ═══════════════════════════════════════════════════════════════ */
img[src*="docuseal"], img[alt*="DocuSeal"], img[alt*="docuseal"],
a[href*="docuseal.com"], [class*="powered-by"], .powered-by,
footer a[href*="docuseal"], small a[href*="docuseal"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   16. ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes lmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
tbody tr:nth-child(1) { animation: lmFadeIn 300ms cubic-bezier(0.16,1,0.3,1) 40ms  both; }
tbody tr:nth-child(2) { animation: lmFadeIn 300ms cubic-bezier(0.16,1,0.3,1) 80ms  both; }
tbody tr:nth-child(3) { animation: lmFadeIn 300ms cubic-bezier(0.16,1,0.3,1) 120ms both; }
tbody tr:nth-child(4) { animation: lmFadeIn 300ms cubic-bezier(0.16,1,0.3,1) 160ms both; }
tbody tr:nth-child(5) { animation: lmFadeIn 300ms cubic-bezier(0.16,1,0.3,1) 200ms both; }

/* ═══════════════════════════════════════════════════════════════
   17. BUILDER — PANNEAU DROIT
   ═══════════════════════════════════════════════════════════════ */
#fields_list_container, .fields-list-container {
  background: rgba(12, 12, 24, 0.90) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f0f0ff !important;
}
#fields_list_container *, .fields-list-container * {
  color: #f0f0ff !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
#fields_list_container input,
#fields_list_container select,
#fields_list_container textarea {
  background: rgba(24, 24, 44, 0.94) !important;
  color: #f0f0ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   18. BUILDER — BOUTONS DRAGGABLES
   ═══════════════════════════════════════════════════════════════ */
button[draggable="true"], [draggable="true"] {
  background: rgba(28, 28, 52, 0.90) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f0f0ff !important;
  border-radius: 8px !important;
}
button[draggable="true"]:hover, [draggable="true"]:hover {
  background: rgba(80, 26, 120, 0.88) !important;
  border-color: #9d40d0 !important;
}
button[draggable="true"] svg, [draggable="true"] svg {
  display: block !important;
  color: #f0f0ff !important;
  opacity: 1 !important;
}
button[draggable="true"] span, [draggable="true"] span {
  display: block !important;
  color: rgba(220, 220, 255, 0.90) !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. BUILDER — CARTES CHAMPS (panneau droit uniquement)
   ═══════════════════════════════════════════════════════════════ */
#fields_list_container .border.rounded-lg,
#fields_list_container .border.rounded-xl {
  background: rgba(24, 24, 44, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f0f0ff !important;
}
#fields_list_container .border.rounded-lg svg,
#fields_list_container .border.rounded-xl svg {
  color: #c550f0 !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   20. BUILDER — ZONE PDF CENTRALE
   ═══════════════════════════════════════════════════════════════ */
#main_container { background: transparent !important; }

/* ═══════════════════════════════════════════════════════════════
   21. OVERLAYS CHAMPS PDF
   -----------------------------------------------------------------
   · body sans !important → pas de contamination des couleurs natives
   · opacity: 1 → overlays toujours visibles
   · Texte en rose #e91e8c → lisible + harmonieux avec le violet
   · SVG en blanc + drop-shadow pour contraste sur fond coloré
   ═══════════════════════════════════════════════════════════════ */
#main_container .border,
#main_container [class*="field"],
#main_container [class*="area"] {
  opacity: 1 !important;
  color: unset !important;
  background: unset !important;
}

#main_container .border span,
#main_container [class*="field"] span,
#main_container [class*="area"] span,
#main_container .border p,
#main_container [class*="field"] p {
  color: #e91e8c !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
}

#main_container .border svg,
#main_container [class*="field"] svg,
#main_container [class*="area"] svg {
  color: #e91e8c !important;
  fill: #e91e8c !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.30)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   22. ONGLETS (panneau de signature)
   ═══════════════════════════════════════════════════════════════ */
.tab, [role="tab"] {
  color: rgba(220, 220, 255, 0.75) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  background: rgba(20, 20, 38, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  margin: 2px !important;
  opacity: 1 !important;
}
.tab-active, .tab[aria-selected="true"], .tab.tab-active,
[role="tab"][aria-selected="true"], [aria-selected="true"] {
  background: linear-gradient(135deg, #c550f0, #5b7eff) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(197, 80, 240, 0.40) !important;
}
.tabs { background: transparent !important; }

/* ═══════════════════════════════════════════════════════════════
   23. bg-white GLOBAL — override de sécurité (fallback)
   Ce qui marchait en v8 : bg-white sombre + canvas blanc par-dessus
   ═══════════════════════════════════════════════════════════════ */
.bg-white {
  background: #10101e !important;
  color: #f0f0ff !important;
}
/* Canvas blanc — sélecteurs avec spécificité (0,1,1) > .bg-white (0,1,0) */
.bg-white canvas,
.bg-white > canvas,
.modal-box canvas,
.modal-box > canvas,
[class] canvas {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* Filet de sécurité global */
canvas {
  background: #ffffff !important;
  background-color: #ffffff !important;
}