/* =========================================================================
   CYBERGEAR FRONT — Dark Metallic (opt-in)
   v2 2026-04-19 : réécriture chirurgicale

   CHANGEMENTS vs v1 :
   - Dark n'est plus forcé par défaut (le SPA React est conçu light)
   - Activation uniquement si html[data-theme="dark"] (toggle utilisateur)
   - Zéro wildcard [class*="..."] (casse imprévisible)
   - Réduction drastique des !important (uniquement quand strictement nécessaire)
   - Pas de override sur <img> sizing (laissé à la responsabilité du SPA)
   - Grain overlay retiré (risque z-index)

   Les améliorations NON-INVASIVES (scrollbar, focus copper, selection, prix copper)
   restent appliquées par défaut sous :root, sans forçage dark.
   ========================================================================= */

:root {
    --mt-copper-100: #f5d5b8;
    --mt-copper-200: #e9b488;
    --mt-copper-300: #d9966b;
    --mt-copper-500: #b8733a;
    --mt-copper-700: #8a5426;
    --mt-gra-copper: linear-gradient(180deg, #d9966b 0%, #b8733a 55%, #8a5426 100%);
    --mt-gra-copper-hover: linear-gradient(180deg, #e8a879 0%, #c78345 55%, #9a6230 100%);
    --mt-gold-500: #e0a63e;

    --mt-chrome-100: #e8ecf1;
    --mt-chrome-200: #cdd4dd;
    --mt-chrome-300: #a8b1bd;
}

/* =========================================================================
   AMÉLIORATIONS GLOBALES (appliquées par défaut, non-dépendantes du dark)
   Ne touchent que des propriétés safe : scrollbar, focus, selection, accent-color
   ========================================================================= */

/* Scrollbar raffinée (webkit) */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
    background-clip: content-box;
}

/* Focus accessibility premium */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mt-copper-300);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Selection color premium */
::selection {
    background: var(--mt-copper-500);
    color: #fff;
    text-shadow: none;
}

/* Accent color sur radio / checkbox / range */
input[type="radio"],
input[type="checkbox"],
input[type="range"] {
    accent-color: var(--mt-copper-500);
}

/* =========================================================================
   DARK METALLIC THEME (opt-in via html[data-theme="dark"])
   Activé uniquement si l'utilisateur le choisit — évite la casse visuelle
   du SPA React conçu pour light mode.
   ========================================================================= */

html[data-theme="dark"] {
    --mt-bg-0: #05080d;
    --mt-bg-1: #0a0f18;
    --mt-bg-2: #111827;
    --mt-bg-3: #1a2130;

    --mt-text-0: #f1f5f9;
    --mt-text-1: #cbd5e1;
    --mt-text-2: #94a3b8;
    --mt-text-3: #64748b;

    --mt-line: rgba(255, 255, 255, 0.06);
    --mt-line-strong: rgba(255, 255, 255, 0.12);

    --mt-gra-card: linear-gradient(180deg, #1b2230 0%, #10151f 100%);
    --mt-gra-panel: linear-gradient(180deg, #151c28 0%, #0a101a 100%);

    --mt-sh-sm: 0 2px 8px rgba(0, 0, 0, 0.55);
    --mt-sh-md: 0 8px 20px rgba(0, 0, 0, 0.6);
    --mt-sh-lg: 0 18px 45px rgba(0, 0, 0, 0.7);

    background: var(--mt-bg-0);
}

html[data-theme="dark"] body {
    background: var(--mt-bg-0);
    color: var(--mt-text-0);
}

/* ----- Typographie dark ----- */
html[data-theme="dark"] body { color: var(--mt-text-0); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--mt-chrome-100);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--mt-text-2); }

/* ----- Header / Navbar ----- */
html[data-theme="dark"] header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] nav.navbar {
    background: rgba(10, 15, 24, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mt-line-strong);
    color: var(--mt-text-0);
}
html[data-theme="dark"] header a,
html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .navbar .nav-link { color: var(--mt-text-0); }
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link.active { color: var(--mt-copper-100); }

/* ----- Product cards (uniquement classes précises) ----- */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .card-product,
html[data-theme="dark"] .product-item {
    background: var(--mt-gra-card);
    border: 1px solid var(--mt-line-strong);
    color: var(--mt-text-0);
    box-shadow: var(--mt-sh-sm);
}
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .card-product:hover,
html[data-theme="dark"] .product-item:hover {
    box-shadow: var(--mt-sh-md);
}

/* Product titles et prix en dark */
html[data-theme="dark"] .product-title,
html[data-theme="dark"] .card-title { color: var(--mt-chrome-100); }

/* ----- Forms ----- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    background: var(--mt-bg-2);
    border-color: var(--mt-line-strong);
    color: var(--mt-text-0);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--mt-text-3); }

/* ----- Tables ----- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.table { color: var(--mt-text-0); }
html[data-theme="dark"] .table thead th {
    background: var(--mt-gra-panel);
    color: var(--mt-chrome-200);
    border-bottom: 1px solid var(--mt-line-strong);
}
html[data-theme="dark"] .table tbody td {
    border-bottom: 1px solid var(--mt-line);
    color: var(--mt-text-1);
}
html[data-theme="dark"] .table tbody tr:hover td { background: var(--mt-bg-2); }

/* ----- Cards génériques ----- */
html[data-theme="dark"] .card {
    background: var(--mt-gra-card);
    border: 1px solid var(--mt-line-strong);
    color: var(--mt-text-0);
}
html[data-theme="dark"] .card-header {
    background: var(--mt-gra-panel);
    border-bottom: 1px solid var(--mt-line-strong);
}

/* ----- Modals ----- */
html[data-theme="dark"] .modal-content {
    background: var(--mt-gra-card);
    border: 1px solid var(--mt-line-strong);
    color: var(--mt-text-0);
}
html[data-theme="dark"] .modal-header {
    background: var(--mt-gra-panel);
    border-bottom: 1px solid var(--mt-line-strong);
}
html[data-theme="dark"] .modal-footer { border-top: 1px solid var(--mt-line); }

/* ----- Footer ----- */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .main-footer {
    background: var(--mt-bg-1);
    color: var(--mt-text-1);
    border-top: 1px solid var(--mt-line-strong);
}
html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4,
html[data-theme="dark"] footer h5 { color: var(--mt-chrome-100); }
html[data-theme="dark"] footer a { color: var(--mt-text-2); }
html[data-theme="dark"] footer a:hover { color: var(--mt-copper-100); }

/* ----- Alerts ----- */
html[data-theme="dark"] .alert {
    background: var(--mt-gra-panel);
    color: var(--mt-text-0);
    border: 1px solid var(--mt-line-strong);
    border-left-width: 4px;
}
html[data-theme="dark"] .alert-success { border-left-color: #10b981; }
html[data-theme="dark"] .alert-danger  { border-left-color: #ef4444; }
html[data-theme="dark"] .alert-warning { border-left-color: #f59e0b; }
html[data-theme="dark"] .alert-info    { border-left-color: #0ea5e9; }

/* ----- Reduced motion safeguard ----- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}