@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');

/* LK Studio shared visual system — « Encre & Papier » */
body.lk-ink {
  --bg-primary: #12110f;
  --bg-secondary: #1a1815;
  --bg-card: rgba(31, 28, 24, 0.96);
  --border-color: rgba(238, 231, 215, 0.18);
  --border-focus: rgba(201, 132, 77, 0.7);
  --accent-purple: #c9844d;
  --accent-cyan: #eee7d8;
  --accent-emerald: #c9844d;
  --accent-coral: #d99d70;
  --accent-orange: #c9844d;
  --text-primary: #f2ede2;
  --text-secondary: #c8c0b2;
  --text-muted: #928a7c;
  --grad-brand: linear-gradient(135deg, #f2ede2 0%, #d7c9b4 100%);
  --grad-text: linear-gradient(135deg, #f8f2e7 0%, #d7c9b4 100%);
  --shadow-glow: 0 12px 28px rgba(0, 0, 0, 0.3);
  --shadow-purple-glow: 0 12px 30px rgba(0, 0, 0, 0.34);
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.24);
  --blur-amount: blur(0px);
  --radius-lg: 3px;
  --radius-md: 2px;
  --radius-sm: 1px;
  background:
    radial-gradient(circle at 88% 3%, rgba(201, 132, 77, 0.08), transparent 30rem),
    linear-gradient(135deg, #12110f 0%, #171512 50%, #0d0c0b 100%);
  color: var(--text-primary);
}

body.lk-ink::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 7px);
}

body.lk-ink h1,
body.lk-ink h2,
body.lk-ink h3,
body.lk-ink h4 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

body.lk-ink header,
body.lk-ink #main-header,
body.lk-ink .db-header {
  background: rgba(18, 17, 15, 0.96) !important;
  border-bottom: 1px solid rgba(238, 231, 215, 0.14) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.lk-ink .logo-container { gap: 0.7rem; }
body.lk-ink .logo-icon {
  width: 46px;
  height: 46px;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid rgba(238, 231, 215, 0.38);
  border-radius: 1px;
  background: #f5f1e8;
  box-shadow: none;
}

body.lk-ink .logo-text {
  color: #f2ede2;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: 'DM Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

body.lk-ink .nav-links a,
body.lk-ink nav a:not(.logo-container),
body.lk-ink .db-badge,
body.lk-ink .sidebar-title,
body.lk-ink .agent-role {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.lk-ink .nav-links a,
body.lk-ink nav a:not(.btn):not(.logo-container) { color: var(--text-secondary); }
body.lk-ink .nav-links a:hover,
body.lk-ink nav a:not(.btn):not(.logo-container):hover { color: #f2ede2; }

body.lk-ink .site-nav { gap: 1.4rem !important; }
body.lk-ink .nav-dropdown { position: relative; }
body.lk-ink .nav-dropdown summary,
body.lk-ink .mobile-nav summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-secondary);
  font: 0.72rem/1 'DM Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.lk-ink .nav-dropdown summary::-webkit-details-marker,
body.lk-ink .mobile-nav summary::-webkit-details-marker { display: none; }
body.lk-ink .nav-dropdown summary::after { content: '⌄'; margin-left: 0.35rem; color: #c9844d; }
body.lk-ink .nav-dropdown-panel,
body.lk-ink .mobile-nav-panel {
  background: #1b1916;
  border: 1px solid rgba(238, 231, 215, 0.2);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}
body.lk-ink .nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  min-width: 190px;
  padding: 0.55rem;
}
body.lk-ink .nav-dropdown-panel a,
body.lk-ink .mobile-nav-panel a { display: block; padding: 0.7rem; }
body.lk-ink .mobile-nav { display: none; position: relative; }

body.lk-ink .btn,
body.lk-ink button,
body.lk-ink .filter-btn {
  border-radius: 1px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
}

body.lk-ink .btn-primary,
body.lk-ink .btn-summon,
body.lk-ink .filter-btn.active {
  background: #eee7d8 !important;
  color: #171512 !important;
  border-color: #eee7d8 !important;
}

body.lk-ink .btn-primary:hover,
body.lk-ink .btn-summon:hover,
body.lk-ink .filter-btn.active:hover {
  background: #c9844d !important;
  border-color: #c9844d !important;
  color: #171512 !important;
  transform: none !important;
}

body.lk-ink .btn-secondary,
body.lk-ink .filter-btn {
  background: transparent !important;
  color: #eee7d8 !important;
  border-color: rgba(238, 231, 215, 0.3) !important;
}

body.lk-ink .btn-secondary:hover,
body.lk-ink .filter-btn:hover {
  border-color: #c9844d !important;
  background: rgba(201, 132, 77, 0.09) !important;
  color: #f2ede2 !important;
  transform: none !important;
}

body.lk-ink .card-glass,
body.lk-ink .codex-sidebar,
body.lk-ink .codex-content-container,
body.lk-ink .agent-card,
body.lk-ink .gallery-filter-bar,
body.lk-ink .db-main > .card-glass {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
    #201d19 !important;
  border: 1px solid rgba(238, 231, 215, 0.17) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.lk-ink .card-glass:hover,
body.lk-ink .agent-card:hover {
  border-color: rgba(201, 132, 77, 0.72) !important;
  box-shadow: 5px 5px 0 rgba(201, 132, 77, 0.16) !important;
  transform: translate(-2px, -2px) !important;
}

body.lk-ink .portal-section,
body.lk-ink .gallery-header,
body.lk-ink .codex-layout,
body.lk-ink .db-main {
  position: relative;
}

body.lk-ink .portal-glow-1,
body.lk-ink .portal-glow-2,
body.lk-ink .portal-glow-3 { opacity: 0.18; filter: blur(90px); }

body.lk-ink .agent-card .agent-portal-avatar img {
  border-color: #c9844d !important;
  box-shadow: none !important;
}

body.lk-ink .agent-role,
body.lk-ink .yennefer-card .agent-role,
body.lk-ink .argos-card .agent-role,
body.lk-ink .jaskier-card .agent-role,
body.lk-ink .flighty-card .agent-role { color: #dca47c !important; }

body.lk-ink .codex-sidebar,
body.lk-ink .codex-content-container { background-color: #1d1a17 !important; }
body.lk-ink .nav-item.active,
body.lk-ink .nav-item:hover { color: #eee7d8 !important; border-left-color: #c9844d !important; }
body.lk-ink .markdown-body h1,
body.lk-ink .markdown-body h2,
body.lk-ink .markdown-body h3 { color: #f2ede2 !important; }
body.lk-ink .markdown-body code { color: #e2b18d !important; background: rgba(201, 132, 77, 0.1) !important; }
body.lk-ink .markdown-body pre { background: #141310 !important; }
body.lk-ink .markdown-body blockquote { border-left-color: #c9844d !important; background: rgba(201, 132, 77, 0.08) !important; }
body.lk-ink .markdown-body blockquote p { color: #e2b18d !important; }

body.lk-ink .form-control,
body.lk-ink input,
body.lk-ink select,
body.lk-ink textarea {
  background: #171512 !important;
  color: #f2ede2 !important;
  border-color: rgba(238, 231, 215, 0.2) !important;
  border-radius: 1px !important;
}

body.lk-ink .form-control:focus,
body.lk-ink input:focus,
body.lk-ink select:focus,
body.lk-ink textarea:focus {
  border-color: #c9844d !important;
  box-shadow: 0 0 0 3px rgba(201, 132, 77, 0.12) !important;
}

body.lk-ink .gauge-track,
body.lk-ink .progress-bar,
body.lk-ink .switch-slider { background: #34302a !important; }
body.lk-ink .gauge-fill,
body.lk-ink .progress-fill,
body.lk-ink .switch-input:checked + .switch-slider { background: #c9844d !important; }

body.lk-ink table th { background: #25211c !important; color: #f2ede2 !important; }
body.lk-ink table td,
body.lk-ink table th { border-color: rgba(238, 231, 215, 0.14) !important; }
body.lk-ink table tr:nth-child(even) { background: rgba(238, 231, 215, 0.025) !important; }

body.lk-ink .sec-sidebar {
  background: #181613 !important;
  border-right-color: rgba(238, 231, 215, 0.14) !important;
}
body.lk-ink .sec-nav-btn.active,
body.lk-ink .sec-nav-btn:hover { background: rgba(201, 132, 77, 0.11) !important; color: #f2ede2 !important; }
body.lk-ink .sec-main { background: #12110f !important; }

body.lk-ink footer {
  background: #0e0d0b !important;
  border-top: 1px solid rgba(238, 231, 215, 0.12) !important;
}

/* Outils créatifs : même atelier visuel, repères métier conservés. */
body.lk-business-card {
  --bg-dark: #12110f;
  --bg-card-recto: #1d1a17;
  --bg-card-verso: #25211c;
  --gold-soft: #dca47c;
  --gold-glow: rgba(201, 132, 77, 0.16);
  --ether-blue: #c9844d;
  --ether-glow: rgba(201, 132, 77, 0.18);
  --text-primary: #f2ede2;
  --text-muted: #b7ae9f;
  --text-dark: #171512;
  --metal-gray: #302b25;
  --font-title: 'DM Serif Display', Georgia, serif;
  --font-mono: 'DM Mono', monospace;
}

body.lk-business-card #app-header {
  background: #12110f !important;
  border-bottom-color: rgba(238, 231, 215, 0.16) !important;
  backdrop-filter: none !important;
}

body.lk-livery {
  --fl-bg-0: #12110f;
  --fl-bg-1: #171512;
  --fl-surface-0: #1d1a17;
  --fl-surface-1: #25211c;
  --fl-surface-2: #302920;
  --fl-text-0: #f2ede2;
  --fl-text-1: #c8c0b2;
  --fl-text-2: #a69b8d;
  --fl-text-muted: #746b60;
  --fl-border: rgba(238, 231, 215, 0.16);
  --fl-border-strong: rgba(201, 132, 77, 0.62);
  --fl-blue-2: #c9844d;
  --fl-blue-4: #6b4028;
  --fl-orange-2: #dca47c;
  --fl-orange-3: #9f5d36;
  --fl-gold-2: #d8b471;
  --fl-radius-md: 3px;
  --fl-radius-sm: 2px;
  --fl-shadow-2: 0 20px 50px rgba(0, 0, 0, 0.38);
  background-image:
    radial-gradient(at 0% 0%, rgba(201, 132, 77, 0.09) 0px, transparent 42%) !important;
}

body.lk-livery .creator-container,
body.lk-livery .form-section,
body.lk-livery .visualizer-container {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
    var(--fl-surface-0) !important;
}

body.lk-livery h1,
body.lk-livery h2,
body.lk-livery h3 { font-family: 'DM Serif Display', Georgia, serif !important; }

@media (max-width: 768px) {
  body.lk-ink .logo-icon { width: 42px; height: 42px; }
  body.lk-ink .logo-text { font-size: 0.82rem; }
  body.lk-ink .agent-card { padding: 2rem 1.5rem; }
}

@media (max-width: 900px) {
  body.lk-ink .site-nav { display: none !important; }
  body.lk-ink .mobile-nav { display: block; }
  body.lk-ink .mobile-nav summary {
    padding: 0.58rem 0.85rem;
    color: #f2ede2;
    border: 1px solid rgba(238, 231, 215, 0.25);
  }
  body.lk-ink .mobile-nav-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    width: min(260px, calc(100vw - 2rem));
    padding: 0.65rem;
  }
}

/* ---------------------------------------------------------------------------
   La barre de ces pages ne porte plus qu'un seul bouton, « Retourner à la
   Tour » : les entrées Studio / Projets / Galeries / Contact pointaient vers
   des ancres de l'accueil qui n'existent plus depuis son passage en parcours
   à trois plans. Le menu déroulant mobile a donc été supprimé lui aussi — et
   sans cette règle, la barre disparaîtrait entièrement sous 900 px.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.lk-ink .site-nav { display: flex !important; }
}