/* ============================================================
   LE WEB MARKETEUR — TOKENS PARTAGÉS
   Seule source de vérité des couleurs, polices, ombres et durées.
   À charger AVANT toute autre feuille, sur le site comme sur l'admin.
   ============================================================ */

:root {
  /* ---- SURFACES · thème clair (défaut) ---- */
  --bg:      #f7f5f3;
  --bg-2:    #efece8;
  --bg-3:    #e6e2dd;
  --bg-card: #ffffff;
  --line:    rgba(20, 15, 12, 0.09);
  --line-2:  rgba(20, 15, 12, 0.16);

  /* Encre */
  --text:    #14100e;
  --muted:   #5f5952;
  --muted-2: #6f6860;

  /* Accent */
  --accent:      #d81f1f;
  --accent-ink:  #ffffff;
  --accent-text: #b81616;
  --accent-soft: rgba(216, 31, 31, 0.08);
  --accent-glow: rgba(216, 31, 31, 0.20);
  --accent-line: rgba(216, 31, 31, 0.22);
  --accent-line-soft: rgba(216, 31, 31, 0.12);

  /* Voiles, ombres, textures — pilotés par le thème */
  --scrim:        rgba(20, 16, 14, 0.05);
  --scrim-strong: rgba(20, 16, 14, 0.86);
  --stripe:       rgba(20, 15, 12, 0.035);
  --shadow-sm:    0 14px 34px -16px rgba(20, 15, 12, 0.20);
  --shadow-lg:    0 50px 100px -42px rgba(20, 15, 12, 0.26);
  --logo-filter:  grayscale(1) contrast(1.15) brightness(0.7);
  --logo-opacity: 0.72;

  /* Bandeau de navigation flottant — clair dans les deux thèmes
     (le logo est du texte noir + rouge sur fond transparent) */
  --nav-bg:         #ffffff;
  --nav-line:       rgba(20, 15, 12, 0.08);
  --nav-text:       #5f5952;
  --nav-text-strong:#14100e;

  /* Type */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --serif:   var(--font-display); /* alias historique */
  --sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 16px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);}

:root { --dur-1: .45s; --dur-2: .65s; --dur-3: .85s; }

/* ============================================================
   THÈME SOMBRE — activé par [data-theme="dark"] sur <html>
   ============================================================ */
[data-theme="dark"] {
  --bg:      #0b0a0a;
  --bg-2:    #110f0f;
  --bg-3:    #181514;
  --bg-card: #14110f;
  --line:    rgba(255, 246, 240, 0.09);
  --line-2:  rgba(255, 246, 240, 0.16);

  --text:    #f3efe9;
  --muted:   #a6a09a;
  --muted-2: #8a847d;

  --accent:      #e02020;
  --accent-text: #ff5a52;
  --accent-soft: rgba(224, 32, 32, 0.14);
  --accent-glow: rgba(224, 32, 32, 0.32);
  --accent-line: rgba(255, 90, 82, 0.30);
  --accent-line-soft: rgba(255, 90, 82, 0.18);

  --scrim:        rgba(11, 10, 10, 0.42);
  --scrim-strong: rgba(11, 10, 10, 0.92);
  --stripe:       rgba(255, 255, 255, 0.03);
  --shadow-sm:    0 22px 48px -20px rgba(0, 0, 0, 0.75);
  --shadow-lg:    0 56px 110px -44px rgba(0, 0, 0, 0.88);
  --logo-filter:  grayscale(1) brightness(1.7);
  --logo-opacity: 0.55;
}
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { transition: background .45s var(--ease), color .45s var(--ease); }

/* ---------- Bascule clair / sombre ---------- */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--nav-line);
  display: grid; place-items: center;
  color: var(--nav-text);
  transition: background .25s, color .25s, border-color .25s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--nav-text-strong); border-color: var(--nav-text-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: block; }