:root {
      font-family: 'Inter', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    }
    .font-handwriting {
      font-family: 'Caveat', cursive;
    }
    .hero-bg {
      background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.32) 0%, rgba(30, 58, 138, 0.45) 40%, rgba(7, 16, 45, 0.98) 100%),
                  linear-gradient(135deg, #06102b 0%, #0a1e4a 55%, #071230 100%);
    }
    .footer-bg {
      background: linear-gradient(135deg, #071230 0%, #0b2154 50%, #06102b 100%);
    }
    .card-shadow {
      box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .card-shadow:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.15), 0 10px 15px -6px rgba(15, 23, 42, 0.08);
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 9999px;
    }

    /* =====================================================================
       DARK MODE (CLAIR / SOMBRE) ULTRA-PRO STYLING
       ===================================================================== */
    html.dark body {
      background-color: #0b1120 !important;
      color: #f1f5f9 !important;
    }
    html.dark header.sticky {
      background-color: rgba(15, 23, 42, 0.94) !important;
      border-color: #1e293b !important;
    }
    html.dark #site-brand-main {
      color: #f8fafc !important;
    }
    html.dark .bg-white {
      background-color: #111827 !important;
      color: #f1f5f9 !important;
    }
    html.dark .bg-slate-50,
    html.dark .bg-slate-50\/70,
    html.dark .bg-slate-100 {
      background-color: #1e293b !important;
      color: #e2e8f0 !important;
    }
    html.dark .text-slate-900,
    html.dark .text-slate-800 {
      color: #f8fafc !important;
    }
    html.dark .text-slate-700,
    html.dark .text-slate-600 {
      color: #cbd5e1 !important;
    }
    html.dark .text-slate-500 {
      color: #94a3b8 !important;
    }
    html.dark .border-slate-200,
    html.dark .border-slate-200\/80,
    html.dark .border-slate-300,
    html.dark .border-slate-100 {
      border-color: #334155 !important;
    }
    html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
      border-color: #1e293b !important;
    }
    html.dark input:not([type="file"]),
    html.dark select,
    html.dark textarea {
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border-color: #334155 !important;
    }
    html.dark input::placeholder,
    html.dark textarea::placeholder {
      color: #64748b !important;
    }
    html.dark .hover\:bg-slate-50:hover,
    html.dark .hover\:bg-slate-100:hover,
    html.dark .hover\:bg-white:hover {
      background-color: #334155 !important;
    }
    html.dark .card-shadow {
      box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55), 0 8px 12px -6px rgba(0, 0, 0, 0.4);
    }

    /* =====================================================================
       MOBILE & TABLET NATIVE APP BOTTOM BAR & PAGE TRANSITIONS
       ===================================================================== */
    .page-view-transition {
      animation: pageFadeSlide 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes pageFadeSlide {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* Safe area support for iPhone Home Indicator & Android gesture bar */
    .mobile-app-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-shadow: 0 -8px 25px -5px rgba(15, 23, 42, 0.14);
    }
    html.dark .mobile-app-bottom-nav {
      background-color: rgba(15, 23, 42, 0.96) !important;
      border-top-color: #1e293b !important;
      box-shadow: 0 -8px 25px -5px rgba(0, 0, 0, 0.65);
    }
    @media (max-width: 1023px) {
      body {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
      }
      #toast-container {
        bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
      }
    }

    /* =====================================================================
       FLUORESCENT NEON LIVE DATE & TIME BAR (IP GEOLOCATION TIMEZONE)
       ===================================================================== */
    .fluo-clock-pill {
      background: linear-gradient(90deg, rgba(6, 182, 212, 0.22) 0%, rgba(16, 185, 129, 0.25) 50%, rgba(217, 70, 239, 0.22) 100%);
      border: 1.5px solid #00ffcc;
      box-shadow: 0 0 12px rgba(0, 255, 204, 0.65), 0 0 24px rgba(56, 189, 248, 0.35), inset 0 0 10px rgba(0, 255, 204, 0.22);
      color: #ecfeff;
      animation: fluoNeonPulse 3.2s infinite alternate ease-in-out;
    }
    @keyframes fluoNeonPulse {
      0% {
        border-color: #00ffcc;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.65), 0 0 22px rgba(56, 189, 248, 0.35), inset 0 0 8px rgba(0, 255, 204, 0.2);
      }
      50% {
        border-color: #38bdf8;
        box-shadow: 0 0 14px rgba(56, 189, 248, 0.78), 0 0 28px rgba(232, 121, 249, 0.45), inset 0 0 12px rgba(56, 189, 248, 0.25);
      }
      100% {
        border-color: #f472b6;
        box-shadow: 0 0 14px rgba(244, 114, 182, 0.72), 0 0 26px rgba(0, 255, 204, 0.5), inset 0 0 10px rgba(244, 114, 182, 0.22);
      }
    }
    .fluo-time-digits {
      color: #00ffcc;
      text-shadow: 0 0 8px #00ffcc, 0 0 16px rgba(0, 255, 204, 0.85);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
    }
    .fluo-date-text {
      color: #fef08a;
      text-shadow: 0 0 8px rgba(250, 204, 21, 0.85), 0 0 14px rgba(244, 114, 182, 0.6);
    }
    .fluo-ip-loc {
      background: rgba(2, 6, 23, 0.82);
      border: 1px solid rgba(56, 189, 248, 0.65);
      color: #7dd3fc;
      text-shadow: 0 0 6px rgba(56, 189, 248, 0.85);
    }

:root {
  --production-paper: #ffffff;
  --production-ink: #182434;
  --production-line: #cbd5e1;
  --production-accent: #1d4ed8;
  --production-surface: #f1f5f9;
  --production-field: #ffffff;
  --production-label: #334155;
}
html.dark {
  --production-field: #0f172a;
  --production-label: #e2e8f0;
  --production-surface: #1e293b;
}
.production-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.production-field { display:block; min-width:0; font-size:12px; color:var(--production-label); }
.production-field span { display:block; font-weight:700; margin-bottom:5px; }
.production-field input, .production-field textarea, .production-editor-table input, .production-editor-table textarea {
  width:100%; min-width:0; border:1px solid var(--production-line); border-radius:6px; padding:8px; font:inherit; background:var(--production-field); color:var(--production-label);
}
.production-field textarea { resize:vertical; }
.production-sections { display:grid; gap:12px; }
.production-table-scroll { overflow-x:auto; max-width:100%; }
.production-editor-table { border-collapse:collapse; width:100%; font-size:12px; }
.production-editor-table th { text-align:left; white-space:normal; min-width:100px; background:var(--production-surface); color:var(--production-label); padding:8px; }
.production-editor-table th:nth-child(2) { min-width:190px; }
.production-editor-table td { padding:5px; border-bottom:1px solid var(--production-line); vertical-align:top; }
.production-editor-table input { min-width:90px; }
.production-editor-table textarea { min-width:170px; }
.production-command { background:var(--production-accent); color:var(--production-paper); border-radius:6px; padding:7px 12px; font-size:12px; font-weight:700; margin-top:6px; }
.production-paper { background:var(--production-paper); color:var(--production-ink); padding:24px; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.production-paper header { border-bottom:2px solid var(--production-accent); padding-bottom:16px; margin-bottom:18px; }
.production-paper h2 { font-size:20px; font-weight:800; line-height:1.4; margin:6px 0 12px; }
.production-paper h3 { font-size:14px; font-weight:700; margin:14px 0 4px; }
.production-paper p { white-space:pre-wrap; }
.production-paper table { border-collapse:collapse; width:100%; min-width:520px; }
.production-paper th, .production-paper td { border:1px solid var(--production-line); padding:8px; text-align:left; vertical-align:top; white-space:pre-wrap; }
.production-paper th { font-weight:700; color:var(--production-accent); }
.production-paper dl { margin:20px 0 0 auto; max-width:340px; }
.production-paper dl div { display:flex; justify-content:space-between; gap:16px; padding:5px; border-bottom:1px solid var(--production-line); }
.production-paper dl div:last-child { font-weight:800; color:var(--production-accent); }
.production-paper dd { text-align:right; }
.production-locked .production-paper { background-image:repeating-linear-gradient(-35deg,transparent,transparent 75px,var(--production-line) 76px,transparent 77px); }
#production-preview[hidden], #business-card-canvas + [hidden] { display:none; }
#business-card-canvas:only-child { max-width:100%; }
#business-card-canvas { min-width:0; }
#view-bcard [hidden] { display:none !important; }
#view-bcard .lg\:col-span-5, #view-bcard .lg\:col-span-7 { min-width:0; }
@media(max-width:600px) {
  .production-fields { grid-template-columns:minmax(0,1fr); }
  .production-paper { padding:14px; }
  #view-bcard div:has(> #studio-quick-preset-select) { width:100%; min-width:0; }
  #studio-quick-preset-select { min-width:0; width:100%; flex:1; }
  #view-bcard div:has(> #studio-quick-preset-select) > button { flex-shrink:0; }
}
/* Finitions : alignements et confort de lecture */
.nav-tab { white-space: nowrap; }
input, select, textarea { min-width: 0; max-width: 100%; }
img { max-width: 100%; }
#view-catalog .grid > * { height: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #3b82f6; outline-offset: 2px;
}

/* Téléphone : en-tête compact sur une seule ligne */
@media (max-width: 640px) {
  #btn-top-connect { display: none !important; }
  .top-support-pill { display: none !important; }
  header > div { flex-wrap: nowrap !important; }
  #mobile-active-page-pill { display: none !important; }
  #site-brand-main { font-size: 1rem; }
}

/* Shared document-security palette: unchanged in dark mode for legibility. */
:root {
  --security-mesh: rgba(245, 158, 11, .56);
  --security-tile: rgba(15, 23, 42, .74);
  --security-border: #38bdf8;
  --security-ink: #0f172a;
  --security-highlight: #fde047;
  --security-light: #ffffff;
  --security-banner: rgba(15, 23, 42, .96);
}
#production-preview { position:relative; overflow:hidden; }
.production-security-overlay { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:space-around; gap:24px 10px; pointer-events:none; user-select:none; overflow:hidden; }
.production-security-overlay span { display:block; background:var(--security-tile); border:3px solid var(--security-border); color:var(--security-highlight); font-size:16px; font-weight:900; text-align:center; line-height:1.6; padding:10px 4px; transform:rotate(-15deg); overflow-wrap:anywhere; }
.production-payment-status { color:var(--production-label); font-size:12px; line-height:1.6; border-left:3px solid var(--production-accent); padding-left:12px; }
#studio-card-fields[hidden] { display:none; }
#studio-card-fields input:disabled { opacity:.65; cursor:not-allowed; }