/*
Theme Name:   KlikNode Child
Theme URI:    https://kliknode.com
Description:  Thème enfant KlikNode — Design System Titanium & Obsidian. Thème parent : Astra.
Author:       KlikNode
Author URI:   https://kliknode.com
Template:     astra
Version:      1.0.0
Text Domain:  kliknode-child
*/

/* ════════════════════════════════════════════════════════
   DESIGN SYSTEM : TITANIUM & OBSIDIAN
   ════════════════════════════════════════════════════════ */
:root {
  /* Couleurs */
  --kn-bg:          #000000;
  --kn-bg2:         #0A0A0A;
  --kn-bg3:         #111111;
  --kn-glass:       rgba(28, 28, 30, 0.65);
  --kn-glass-b:     rgba(255, 255, 255, 0.1);
  --kn-glass-bs:    rgba(255, 255, 255, 0.18);
  --kn-text-1:      #F5F5F7;
  --kn-text-2:      #8E8E93;
  --kn-text-3:      #48484A;
  --kn-titan:       #C6C6C6;
  --kn-obsidian:    linear-gradient(135deg, #0F172A, #1E293B);
  --kn-obsidian2:   linear-gradient(135deg, #1E293B, #334155);
  --kn-green:       #34d399;
  --kn-orange:      #fbbf24;

  /* Typographie */
  --kn-font:        'Poppins', -apple-system, sans-serif;
  --kn-font-ar:     'Cairo', sans-serif;

  /* Rayons */
  --kn-rad-card:    2rem;
  --kn-rad-sm:      1rem;
  --kn-rad-xs:      0.75rem;

  /* Animation */
  --kn-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --kn-dur:         500ms;
}

/* ════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════ */
body {
  font-family: var(--kn-font) !important;
  background: var(--kn-bg) !important;
  color: var(--kn-text-1) !important;
}
.ast-separate-container,
.ast-plain-container,
#page { background: var(--kn-bg) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }

/* ════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ════════════════════════════════════════════════════════ */
#masthead,
.ast-primary-header-bar,
.site-header {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}
/* Logo */
.site-branding img,
.custom-logo { filter: brightness(2); }

/* Nav links */
.main-navigation a,
.ast-header-break-point .main-navigation a,
#site-navigation a {
  color: var(--kn-text-2) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  transition: color var(--kn-dur) var(--kn-ease) !important;
}
.main-navigation a:hover,
#site-navigation a:hover { color: var(--kn-text-1) !important; }

/* CTA button in nav */
.ast-header-button a,
.header-cta a {
  background: var(--kn-obsidian) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  transition: all 0.3s !important;
}
.ast-header-button a:hover { background: var(--kn-obsidian2) !important; }

/* ════════════════════════════════════════════════════════
   GLOBAL SECTIONS
   ════════════════════════════════════════════════════════ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.wp-block-heading,
.elementor-heading-title {
  color: var(--kn-text-1) !important;
  letter-spacing: -0.03em !important;
}
.entry-content p,
.elementor-text-editor p { color: var(--kn-text-2) !important; }

/* ════════════════════════════════════════════════════════
   GLASSMORPHISM CARD (classe réutilisable)
   ════════════════════════════════════════════════════════ */
.kn-glass,
.elementor-widget-container .kn-glass {
  background: var(--kn-glass) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid var(--kn-glass-b) !important;
  border-radius: var(--kn-rad-card) !important;
}
.kn-glass:hover { border-color: var(--kn-glass-bs) !important; }

/* ════════════════════════════════════════════════════════
   BOUTONS PRIMAIRES (Obsidian)
   ════════════════════════════════════════════════════════ */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.elementor-button,
.btn-kn-primary {
  background: var(--kn-obsidian) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: var(--kn-font) !important;
  font-weight: 700 !important;
  transition: all 0.3s var(--kn-ease) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.elementor-button:hover {
  background: var(--kn-obsidian2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}
.wp-block-button__link:active,
.elementor-button:active { transform: scale(0.97) !important; }

/* ════════════════════════════════════════════════════════
   WOOCOMMERCE
   ════════════════════════════════════════════════════════ */
.woocommerce-store-notice,
p.demo_store { background: var(--kn-obsidian) !important; }

/* Produits */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--kn-glass) !important;
  backdrop-filter: blur(40px) !important;
  border: 1px solid var(--kn-glass-b) !important;
  border-radius: var(--kn-rad-card) !important;
  padding: 1.5rem !important;
  transition: all 0.4s var(--kn-ease) !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: var(--kn-glass-bs) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--kn-text-1) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.woocommerce ul.products li.product .price {
  color: var(--kn-text-1) !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
}

/* Page produit */
.woocommerce div.product .product_title {
  color: var(--kn-text-1) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--kn-text-2) !important;
}

/* Panier / Checkout */
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce #payment,
.woocommerce-checkout-review-order-table {
  background: var(--kn-glass) !important;
  border: 1px solid var(--kn-glass-b) !important;
  border-radius: var(--kn-rad-card) !important;
  padding: 2rem !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: var(--kn-text-1) !important;
  font-family: var(--kn-font) !important;
  padding: 12px 16px !important;
}
.woocommerce form .form-row input.input-text:focus {
  border-color: rgba(198, 198, 198, 0.4) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(198, 198, 198, 0.08) !important;
}
.woocommerce form .form-row label {
  color: var(--kn-text-2) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
.woocommerce-error,
.woocommerce-message {
  border-radius: var(--kn-rad-sm) !important;
  background: rgba(28, 28, 30, 0.8) !important;
  border-left: 4px solid var(--kn-obsidian) !important;
  color: var(--kn-text-1) !important;
}

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
#colophon,
.site-footer {
  background: var(--kn-bg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--kn-text-3) !important;
}
.site-footer a { color: var(--kn-text-2) !important; }
.site-footer a:hover { color: var(--kn-text-1) !important; }

/* ════════════════════════════════════════════════════════
   ORBS D'AMBIANCE (fond animé)
   ════════════════════════════════════════════════════════ */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 600px; height: 600px;
  background: rgba(15, 23, 42, 0.5);
  top: -150px; left: -150px;
}
body::after {
  width: 600px; height: 600px;
  background: rgba(30, 41, 59, 0.4);
  bottom: -150px; right: -150px;
}
#page { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════
   ANIMATIONS UTILITAIRES
   ════════════════════════════════════════════════════════ */
.kn-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--kn-ease), transform 0.7s var(--kn-ease);
}
.kn-fade-in.visible { opacity: 1; transform: none; }

/* Badge pill */
.kn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--kn-titan);
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════
   MODE RTL (Arabe)
   ════════════════════════════════════════════════════════ */
[dir="rtl"] body { font-family: var(--kn-font-ar) !important; }
[dir="rtl"] .site-description { text-align: right; }