/* =================================================================
   ULF Sign · KERMIT — Thème LIGHT (aligné sur KERMIT)
   -----------------------------------------------------------------
   Palette : fond slate #F1F5F9 · cartes blanches · accent blurple #5865F2
   → dégradé #5865F2→#7C3AED · police Inter. On s'appuie sur le thème
   light NATIF de DocuSeal + variables daisyUI KERMIT + quelques accents.
   ================================================================= */

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

/* ═══════════════════════════════════════════════════════════════
   0. VARIABLES DAISY UI — palette KERMIT light
   ═══════════════════════════════════════════════════════════════ */
[data-theme="docuseal"], [data-theme], :root {
  --b1: 0 0% 100%;        /* surfaces / cartes : blanc */
  --b2: 210 40% 96%;      /* fond de page : slate #F1F5F9 */
  --b3: 214 32% 91%;      /* bordures / hover : #E2E8F0 */
  --bc: 217 33% 17%;      /* texte : slate foncé #1E293B */
  --n:  215 25% 27%;      /* neutral */
  --nc: 0 0% 100%;
  --p:  235 86% 65%;      /* primaire : blurple #5865F2 */
  --pc: 0 0% 100%;        /* texte sur primaire : blanc */
  --s:  262 83% 58%;      /* secondaire : violet #7C3AED */
  --sc: 0 0% 100%;
  --a:  235 86% 65%;
  --ac: 0 0% 100%;
  --in: 235 86% 65%;
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   1. FOND & TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */
html, html[data-theme] {
  min-height: 100vh !important;
  background: #F1F5F9 !important;
}
body {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: #F1F5F9 !important;
  color: #1E293B;              /* sans !important → laisse les SVG natifs tranquilles */
  -webkit-font-smoothing: antialiased !important;
}
main, #app, body > div:not([class*="modal"]):not([class*="toast"]) {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. NAVBAR & EN-TÊTE DU BUILDER — barre blanche, texte foncé
   ═══════════════════════════════════════════════════════════════ */
div.max-w-6xl.py-3, #title_container, .title-container {
  background: #ffffff !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  color: #1E293B !important;
}
div.max-w-6xl.py-3 { max-width: 100% !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
div.max-w-6xl.py-3 *, #title_container *, .title-container * { color: #1E293B !important; }

/* ═══════════════════════════════════════════════════════════════
   3. LOGO KERMIT (SVG base64) — remplace le logo DocuSeal
   ═══════════════════════════════════════════════════════════════ */
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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDgwIDEwODAiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJrZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1ODY1RjIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0MzQUVEIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB4PSIxNTAiIHk9IjE1MCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSI3ODAiIHJ4PSIxODAiIGZpbGw9InVybCgja2cpIi8+CiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTM5NSAzMzAgaDk1IHYxNzAgbDE1MCAtMTcwIGgxMTggbC0xOTAgMjEwIGwyMDAgMjEwIGgtMTIwIGwtMTU4IC0xODAgdjE4MCBoLTk1IHoiLz4KPC9zdmc+Cg==') center / contain no-repeat !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. BOUTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 160ms ease !important;
}
.btn-primary {
  background: linear-gradient(135deg, #5865F2, #7C3AED) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.30) !important;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px) !important; }
/* .btn-neutral = boutons d'action de DocuSeal (Paramètres : « Mettre à jour »…).
   En dark ils étaient illisibles sur le thème clair → on les passe en blurple. */
.btn-neutral {
  background: linear-gradient(135deg, #5865F2, #7C3AED) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.30) !important;
}
.btn-neutral *, .btn-neutral svg { color: #ffffff !important; fill: #ffffff !important; }
.btn-neutral:hover { filter: brightness(1.05); transform: translateY(-1px) !important; }
/* .base-button = boutons d'action DocuSeal (souvent des <a>, classe relevée à l'inspecteur).
   Gris ardoise + texte blanc (choix validé). Le texte est forcé blanc, y compris pour
   les <a> (sinon la règle « liens en violet » les rendait violet-sur-fond = illisible). */
.base-button, a.base-button {
  background: #334155 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12) !important;
}
.base-button, .base-button *, a.base-button, a.base-button * {
  color: #ffffff !important; fill: #ffffff !important;
}
.base-button:hover, a.base-button:hover { background: #1E293B !important; }
.btn-outline {
  background: #fff !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
.btn-outline:hover { background: #F8FAFC !important; border-color: #5865F2 !important; color: #5865F2 !important; }
.btn-ghost { background: transparent !important; color: #475569 !important; }
.btn-ghost:hover { background: #F1F5F9 !important; color: #1E293B !important; }

/* Bouton « Envoyer » = a#send_button.white-button (classe relevée à l'inspecteur).
   On en fait l'action principale : dégradé blurple, bien visible. */
#send_button, a#send_button, .white-button, .btn.white, button.white {
  background: linear-gradient(135deg, #5865F2, #7C3AED) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.30) !important;
}
#send_button *, .white-button *, .btn.white * { color: #ffffff !important; fill: #ffffff !important; }
#send_button:hover, .white-button:hover { filter: brightness(1.05); transform: translateY(-1px) !important; }

/* ═══════════════════════════════════════════════════════════════
   5. CHAMPS DE SAISIE, MENUS, CARTES
   ═══════════════════════════════════════════════════════════════ */
input, textarea, select, .input, .textarea {
  background: #ffffff !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  border-radius: 8px !important;
}
input:focus, textarea:focus, select:focus, .input:focus {
  border-color: #5865F2 !important;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15) !important;
  outline: none !important;
}
.dropdown-content, .menu, ul.dropdown-content, .card, .modal-box {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12) !important;
  color: #1E293B !important;
}
.dropdown-content li > a, .dropdown-content li > button, .menu li > a, .menu li > button {
  color: #334155 !important; border-radius: 8px !important;
}
.dropdown-content li > a:hover, .dropdown-content li > button:hover,
.menu li > a:hover, .menu li > button:hover {
  background: rgba(88, 101, 242, 0.10) !important; color: #5865F2 !important;
}
.modal-box [aria-selected="true"], .modal-box .tab-active {
  background: linear-gradient(135deg, #5865F2, #7C3AED) !important; color: #fff !important;
}
/* Voile derrière les modales : clair et doux */
.modal::before { background: rgba(30, 41, 59, 0.35) !important; }

/* ═══════════════════════════════════════════════════════════════
   6. PANNEAU DES CHAMPS (droite du builder) & liens
   ═══════════════════════════════════════════════════════════════ */
a:not(.btn):not(.base-button):not([href="/"]) { color: #5865F2 !important; text-decoration: none !important; }
a:not(.btn):not(.base-button):not([href="/"]):hover { color: #7C3AED !important; }
::selection { background: rgba(88, 101, 242, 0.20); color: #1E293B; }

/* Canvas de signature — fond blanc (net sur thème clair) */
canvas { background: #ffffff !important; border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════════════
   7. MASQUER LE 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;
}