/* =================================================================
   PALETTES DE COULEURS — 19 palettes (11 sombres, 8 claires)
   -----------------------------------------------------------------
   La palette active est posee sur <html> :
       <html data-theme="emerald-dark" data-mode="dark">

   Ce fichier ne fait que SURCHARGER site.min.css. La couleur
   d'accent (--theme, --orange...) n'est PAS definie ici : elle est
   injectee par includes/header.php, exactement comme avant, pour
   que patch15.css et ses !important continuent de fonctionner.

   Chargement : site.min.css, puis themes.css, puis models.css.
   Un modele peut donc toujours avoir le dernier mot sur la mise en
   page, la palette gardant la main sur les couleurs.

   Sans palette choisie (valeur "custom"), aucune regle ne s'applique
   et le site garde son apparence d'origine.
   ================================================================= */

/* -----------------------------------------------------------------
   1) Valeurs par defaut : le site clair d'origine.
   Elles servent de repli si un modele utilise var(--surface) alors
   qu'aucune palette n'est active.
   ----------------------------------------------------------------- */
:root{
  --page-bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f7f8fa;
  --surface3:#f0f2f5;
}

/* -----------------------------------------------------------------
   2) MODE SOMBRE : bascule generique de toutes les surfaces blanches.
   Ecrit UNE seule fois, pilote par data-mode="dark" — les 11 palettes
   sombres en profitent sans dupliquer une seule regle.
   ----------------------------------------------------------------- */
[data-mode="dark"] body{ background:var(--page-bg); color:var(--ink) }
[data-mode="dark"] header.main,
[data-mode="dark"] .product-card,
[data-mode="dark"] .cat-card,
[data-mode="dark"] .searchbar,
[data-mode="dark"] .chip,
[data-mode="dark"] .cat-tabs button,
[data-mode="dark"] .car-nav button,
[data-mode="dark"] .gal-main,
[data-mode="dark"] .gal-nav,
[data-mode="dark"] .toolbar input,
[data-mode="dark"] .toolbar select,
[data-mode="dark"] .field input,
[data-mode="dark"] .field select,
[data-mode="dark"] .field textarea,
[data-mode="dark"] .table,
[data-mode="dark"] .review,
[data-mode="dark"] .reviews-head,
[data-mode="dark"] .checkout-items,
[data-mode="dark"] .totals,
[data-mode="dark"] .qty,
[data-mode="dark"] .qty button,
[data-mode="dark"] .pack,
[data-mode="dark"] .opt-choices.sizes button,
[data-mode="dark"] .opt-choices button.txt,
[data-mode="dark"] .radios label.radio-row,
[data-mode="dark"] .sticky-buy,
[data-mode="dark"] .bottom-nav,
[data-mode="dark"] .flash-box,
[data-mode="dark"] .opt-price,
[data-mode="dark"] .mobile-nav,
[data-mode="dark"] .opt-choices.swatches button.sw{
  background-color:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}
[data-mode="dark"] .table th{ background:var(--surface2) }
[data-mode="dark"] .order-box{ background:var(--surface2); border-color:var(--line) }
[data-mode="dark"] .product-card .thumb,
[data-mode="dark"] .cat-card img,
[data-mode="dark"] .gallery img#mainImage,
[data-mode="dark"] .checkout-item img{ background:var(--surface3) }
[data-mode="dark"] .product-card h3 a,
[data-mode="dark"] .cat-card,
[data-mode="dark"] .cat-card span,
[data-mode="dark"] nav.desk a,
[data-mode="dark"] .mobile-nav a,
[data-mode="dark"] .logo,
[data-mode="dark"] .sec,
[data-mode="dark"] .pname,
[data-mode="dark"] .totals,
[data-mode="dark"] .review p,
[data-mode="dark"] .table th,
[data-mode="dark"] .table td{ color:var(--ink) }
[data-mode="dark"] .breadcrumb,
[data-mode="dark"] .breadcrumb a,
[data-mode="dark"] .count,
[data-mode="dark"] .product-card .cat,
[data-mode="dark"] .muted,
[data-mode="dark"] .gal-hint,
[data-mode="dark"] .packs-note,
[data-mode="dark"] .pack .pk-qty,
[data-mode="dark"] .pack .pk-old,
[data-mode="dark"] .pack .pk-unit{ color:var(--muted) }
[data-mode="dark"] .product-card .old,
[data-mode="dark"] .old,
[data-mode="dark"] .totals .tt .tt-val del{ color:var(--muted) }
[data-mode="dark"] .topbar{ background:var(--navy) }
[data-mode="dark"] header.main{ box-shadow:0 1px 0 var(--line),0 10px 30px rgba(0,0,0,.45) }
[data-mode="dark"] footer.main{ background:var(--navy) }
[data-mode="dark"] .copy{ border-top-color:var(--line) }
[data-mode="dark"] .thumbs img{ border-color:var(--line) }
[data-mode="dark"] .searchbar{ box-shadow:0 16px 40px rgba(0,0,0,.5) }
[data-mode="dark"] .alert,
[data-mode="dark"] .empty-tab{
  background:color-mix(in srgb, var(--theme,#ff6a00) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--theme,#ff6a00) 34%, transparent);
  color:var(--ink);
}
[data-mode="dark"] .cart-table tbody tr,
[data-mode="dark"] .flash-box .fb-cell{ background:var(--surface); border-color:var(--line); color:var(--ink) }
/* patch15.css impose ce fond en !important : on le surcharge de meme */
[data-mode="dark"] .btn.ghost{
  background:var(--surface) !important;
  color:var(--theme, var(--orange)) !important;
  border-color:var(--theme, var(--orange)) !important;
}
[data-mode="dark"] .avatar{ color:#fff }
/* Les listes deroulantes natives doivent rester lisibles */
[data-mode="dark"] select option{ background:var(--surface); color:var(--ink) }
[data-mode="dark"]{ color-scheme:dark }

/* -----------------------------------------------------------------
   3) MODE CLAIR : quelques ajustements seulement, le site est deja clair.
   ----------------------------------------------------------------- */
[data-mode="light"][data-theme] body{ background:var(--page-bg) }
[data-mode="light"][data-theme] .topbar,
[data-mode="light"][data-theme] footer.main{ background:var(--navy) }
[data-mode="light"][data-theme] .table th,
[data-mode="light"][data-theme] .order-box{ background:var(--surface2) }
[data-mode="light"][data-theme]{ color-scheme:light }

/* =================================================================
   4) LES 19 PALETTES
   ================================================================= */

/* --- gold-dark (dark) --- */
[data-theme="gold-dark"]{
  --page-bg:#0b0d12; --surface:#12151d; --surface2:#181c26; --surface3:#0f1219;
  --ink:#eef1f7; --muted:#98a1b5; --line:#242a38;
  --navy:#0b0d12; --navy2:#141822;
  --bg:#0b0d12;
}

/* --- emerald-dark (dark) --- */
[data-theme="emerald-dark"]{
  --page-bg:#07120f; --surface:#0e2019; --surface2:#122a21; --surface3:#0b1a16;
  --ink:#e9f6f1; --muted:#8aa79d; --line:#1d3b31;
  --navy:#05100d; --navy2:#0b1a16;
  --bg:#07120f;
}

/* --- sapphire-dark (dark) --- */
[data-theme="sapphire-dark"]{
  --page-bg:#080f1e; --surface:#101c33; --surface2:#15243f; --surface3:#0c1628;
  --ink:#e9effb; --muted:#8a9bbd; --line:#22355a;
  --navy:#060c19; --navy2:#0c1628;
  --bg:#080f1e;
}

/* --- ruby-dark (dark) --- */
[data-theme="ruby-dark"]{
  --page-bg:#140809; --surface:#231114; --surface2:#2c171a; --surface3:#1c0c0e;
  --ink:#fbecee; --muted:#b1868c; --line:#432227;
  --navy:#100607; --navy2:#1c0c0e;
  --bg:#140809;
}

/* --- violet-dark (dark) --- */
[data-theme="violet-dark"]{
  --page-bg:#0d0918; --surface:#191231; --surface2:#20183d; --surface3:#140e24;
  --ink:#f0ecfb; --muted:#9a8dc0; --line:#33265c;
  --navy:#0a0714; --navy2:#140e24;
  --bg:#0d0918;
}

/* --- graphite-dark (dark) --- */
[data-theme="graphite-dark"]{
  --page-bg:#101113; --surface:#1b1d21; --surface2:#212429; --surface3:#17181b;
  --ink:#f2f3f5; --muted:#95999f; --line:#31353c;
  --navy:#0d0e10; --navy2:#17181b;
  --bg:#101113;
}

/* --- teal-dark (dark) --- */
[data-theme="teal-dark"]{
  --page-bg:#061214; --surface:#0d2226; --surface2:#123036; --surface3:#0a1b1e;
  --ink:#e8f7fa; --muted:#88a6ae; --line:#1d3f47;
  --navy:#040f11; --navy2:#0a1c20;
  --bg:#061214;
}

/* --- copper-dark (dark) --- */
[data-theme="copper-dark"]{
  --page-bg:#120e09; --surface:#221a11; --surface2:#2b2116; --surface3:#1a140d;
  --ink:#f7f0e7; --muted:#a8937a; --line:#41321f;
  --navy:#0e0b07; --navy2:#1c1610;
  --bg:#120e09;
}

/* --- fuchsia-dark (dark) --- */
[data-theme="fuchsia-dark"]{
  --page-bg:#140a12; --surface:#251324; --surface2:#2e192d; --surface3:#1d0f1a;
  --ink:#fbecf5; --muted:#ac8ba0; --line:#452542;
  --navy:#100810; --navy2:#1e0f1d;
  --bg:#140a12;
}

/* --- indigo-dark (dark) --- */
[data-theme="indigo-dark"]{
  --page-bg:#0a0c1c; --surface:#151a3d; --surface2:#1c2250; --surface3:#101433;
  --ink:#eceefc; --muted:#8f96c2; --line:#2a3168;
  --navy:#070917; --navy2:#101335;
  --bg:#0a0c1c;
}

/* --- lime-dark (dark) --- */
[data-theme="lime-dark"]{
  --page-bg:#0c1108; --surface:#182212; --surface2:#1f2b17; --surface3:#131b0d;
  --ink:#f0f7e6; --muted:#96a882; --line:#2e401f;
  --navy:#090d06; --navy2:#141c0f;
  --bg:#0c1108;
}

/* --- light-classic (light) --- */
[data-theme="light-classic"]{
  --page-bg:#f7f8fb; --surface:#ffffff; --surface2:#f2f4f9; --surface3:#eceef4;
  --ink:#151a24; --muted:#6b7488; --line:#dfe3ec;
  --navy:#1a1a1e; --navy2:#26262c;
  --bg:#f7f8fb;
}

/* --- light-ocean (light) --- */
[data-theme="light-ocean"]{
  --page-bg:#f4f8fc; --surface:#ffffff; --surface2:#eff5fb; --surface3:#e6eff8;
  --ink:#0f2035; --muted:#65809c; --line:#d8e4f0;
  --navy:#0d2035; --navy2:#14304c;
  --bg:#f4f8fc;
}

/* --- light-sand (light) --- */
[data-theme="light-sand"]{
  --page-bg:#faf6f0; --surface:#ffffff; --surface2:#f7f1e8; --surface3:#f0e8dd;
  --ink:#2a2018; --muted:#8a7a68; --line:#e5dacb;
  --navy:#241a12; --navy2:#33261a;
  --bg:#faf6f0;
}

/* --- light-rose (light) --- */
[data-theme="light-rose"]{
  --page-bg:#fdf6f8; --surface:#ffffff; --surface2:#fbeff3; --surface3:#f7e8ee;
  --ink:#2b1a22; --muted:#8c7280; --line:#eddbe2;
  --navy:#26161e; --navy2:#35222b;
  --bg:#fdf6f8;
}

/* --- light-mint (light) --- */
[data-theme="light-mint"]{
  --page-bg:#f2faf6; --surface:#ffffff; --surface2:#eff9f4; --surface3:#e4f2ea;
  --ink:#16241d; --muted:#7a8f85; --line:#d5e7dd;
  --navy:#10241c; --navy2:#183429;
  --bg:#f2faf6;
}

/* --- light-lavender (light) --- */
[data-theme="light-lavender"]{
  --page-bg:#f7f5fd; --surface:#ffffff; --surface2:#f3f0fc; --surface3:#eae5f8;
  --ink:#201a2e; --muted:#847a99; --line:#ded8f0;
  --navy:#1b1526; --navy2:#272037;
  --bg:#f7f5fd;
}

/* --- light-coral (light) --- */
[data-theme="light-coral"]{
  --page-bg:#fff7f5; --surface:#ffffff; --surface2:#fef1ee; --surface3:#fbe7e1;
  --ink:#2c1c18; --muted:#8f7871; --line:#f2dcd5;
  --navy:#26170f; --navy2:#351f16;
  --bg:#fff7f5;
}

/* --- light-slate (light) --- */
[data-theme="light-slate"]{
  --page-bg:#f6f7f9; --surface:#ffffff; --surface2:#f3f5f8; --surface3:#eaedf2;
  --ink:#1e232b; --muted:#7d8695; --line:#dbe0e8;
  --navy:#1c2129; --navy2:#282f39;
  --bg:#f6f7f9;
}