/* ============================================================
   Smart House Électronique — thème clair
   Overrides actifs uniquement quand <html data-theme="light"]
   (le mode sombre = styles natifs, aucun override)
   ============================================================ */

/* ---- Logo : blanc en sombre, violet (3C2B4B) en clair ---- */
.logo-l { display:none; }
html[data-theme="light"] .logo-d { display:none; }
html[data-theme="light"] .logo-l { display:inline; }

/* ---- Placeholder produit (sans image) : ICONE_W en sombre, ICONE_3C2B4B en clair ---- */
.ph-l { display:none; }
html[data-theme="light"] .ph-d { display:none; }
html[data-theme="light"] .ph-l { display:inline; }

/* ---- Logos marques : colorés en clair (sur tuile blanche), blancs en sombre ----
   Les SVG marques stockent la couleur de marque ; en sombre on les passe au blanc
   via filter (comme le logo Smart House qui bascule coloré/clair vs blanc/sombre). */
img.brand-mark { filter: brightness(0) invert(1); }            /* natif (sombre) → blanc */
html[data-theme="light"] img.brand-mark { filter: none; }      /* clair → couleur */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ---- Texte ambre (low-stock, coupon-min, bannière config) : #fbbf24/#fcd34d trop
   clairs sur fond clair (~1.9:1, échec AA) → ambre foncé en mode clair ---- */
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-amber-300 { color:#b45309 !important; }

/* ---- <html> lui-même porte bg-[#0d0d1a] text-white ---- */
html[data-theme="light"].bg-\[\#0d0d1a\] { background-color:#eef1f7 !important; }
html[data-theme="light"].text-white      { color:#1c1b2e !important; }

/* ---- Surfaces page (sombres) → fond clair ---- */
html[data-theme="light"] .bg-\[\#0d0d1a\],
html[data-theme="light"] .bg-\[\#0b0b14\],
html[data-theme="light"] .bg-\[\#0c0f1a\],
html[data-theme="light"] .bg-\[\#0d101f\],
html[data-theme="light"] .bg-\[\#0f101d\] { background-color:#eef1f7 !important; }

/* ---- Surfaces élevées (cartes, en-tête) → blanc ---- */
html[data-theme="light"] .bg-\[\#11131f\],
html[data-theme="light"] .bg-\[\#161a2f\],
html[data-theme="light"] .bg-\[\#1a1a2e\],
html[data-theme="light"] .bg-\[\#16213e\] { background-color:#ffffff !important; }

/* ---- Variantes opacité ---- */
html[data-theme="light"] .bg-\[\#11131f\]\/90 { background-color:rgba(255,255,255,.92) !important; }
html[data-theme="light"] .bg-\[\#1a1a2e\]\/95 { background-color:rgba(255,255,255,.94) !important; }
html[data-theme="light"] .bg-\[\#1a1a2e\]\/30 { background-color:rgba(255,255,255,.4)  !important; }

/* ---- Surfaces white/5 (hovers) → gris clair ---- */
html[data-theme="light"] .bg-white\/5 { background-color:rgba(15,23,42,.05) !important; }
/* NB : bg-white/40 (points bannière) laissé tel quel — reste blanc sur l'image */

/* ---- Surfaces grises Tailwind (gray-800/900) → surface claire ----
   Sinon, en mode clair, le bg reste sombre (#1f2937 / #111827) tandis que le
   .text-white est forcé en sombre (#1c1b2e) → texte sombre sur fond sombre,
   illisible (ex. bouton « Retour à la boutique » du panier vide). */
html[data-theme="light"] .bg-gray-800 { background-color:#e5e7eb !important; }
html[data-theme="light"] .bg-gray-900 { background-color:#eef1f7 !important; }
html[data-theme="light"] .hover\:bg-gray-700:hover { background-color:#d1d5db !important; }

/* ---- Bordures white/N → noir/N ---- */
html[data-theme="light"] .border-white\/10 { border-color:rgba(15,23,42,.10) !important; }
html[data-theme="light"] .border-white\/5  { border-color:rgba(15,23,42,.06) !important; }

/* ---- Texte ---- */
html[data-theme="light"] .text-white    { color:#1c1b2e !important; }
html[data-theme="light"] .text-gray-300 { color:#4b5364 !important; }
html[data-theme="light"] .text-gray-400 { color:#525a6b !important; }
html[data-theme="light"] .text-gray-500 { color:#6b7280 !important; }

/* ---- Accent texte cyan : trop clair sur blanc → cyan foncé (contraste AA+) ---- */
html[data-theme="light"] .text-\[\#00A3DA\] { color:#006586 !important; }

/* ---- Protéger le texte blanc sur fonds d'accent couleur ---- */
html[data-theme="light"] .bg-\[\#007BA3\].text-white,
html[data-theme="light"] .bg-\[\#006586\].text-white,
html[data-theme="light"] .bg-\[\#00A3DA\].text-white,
html[data-theme="light"] .bg-\[\#33b5e8\].text-white,
html[data-theme="light"] .bg-\[\#1ebe57\].text-white,
html[data-theme="light"] .bg-\[\#25d366\].text-white,
html[data-theme="light"] .bg-\[\#3C2B4B\].text-white,
html[data-theme="light"] .bg-\[\#007BA3\] .text-white,
html[data-theme="light"] .bg-\[\#006586\] .text-white,
html[data-theme="light"] .bg-\[\#00A3DA\] .text-white,
html[data-theme="light"] .bg-\[\#33b5e8\] .text-white,
html[data-theme="light"] .bg-\[\#1ebe57\] .text-white,
html[data-theme="light"] .bg-\[\#25d366\] .text-white,
html[data-theme="light"] .bg-\[\#3C2B4B\] .text-white { color:#fff !important; }

/* ---- Ombres allégées en mode clair ---- */
html[data-theme="light"] .shadow-black\/40,
html[data-theme="light"] .shadow-black\/20 { --tw-shadow-color: rgba(15,23,42,.16) !important; }

/* ---- Curseur de sélection & formulaires ---- */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color:#1c1b2e; }
html[data-theme="light"] input::placeholder { color:#9aa3b2; }
html[data-theme="light"] select option { background:#fff; color:#1c1b2e; }
/* ---- Focus clavier visible (cyan, sombre + clair) ---- */
:focus-visible { outline: 2px solid #00A3DA; outline-offset: 2px; border-radius: 6px; }

/* ---- Badge panier : pop à l'ajout ---- */
@keyframes sh-pop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: sh-pop .45s cubic-bezier(.2,.8,.2,1); }
/* ---- Toast ---- */
@keyframes sh-toast-in { from{opacity:0;transform:translate(-50%,1rem)} to{opacity:1;transform:translate(-50%,0)} }
.sh-toast { animation: sh-toast-in .3s ease forwards; }
.sh-toast.sh-toast-out { animation: sh-toast-in .3s ease reverse forwards; }

/* ---- Cibles tactiles : sélecteur de thème (global, toutes pages) ---- */
[data-theme-switch] button { min-height: 44px; min-width: 44px; }

/* ---- Icônes du sélecteur de thème : centrées et calées sur le conteneur ----
   Le SVG natif fait 24px (attributs width/height) mais le span h-4 w-4 ne fait que
   16px → le SVG débordait du span et l'icône semblait décentrée dans le bouton 44px
   (cible tactile). On passe le span en inline-flex 24px et l'icône remplit le span,
   parfaitement centrée dans le bouton. */
[data-theme-switch] button > span { display:inline-flex; width:1.5rem; height:1.5rem; align-items:center; justify-content:center; }
[data-theme-switch] button > span > svg { width:100%; height:100%; display:block; }

/* ---- Respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   Catalogue : vue Liste (compacte) — active via data-view="list"
   ============================================================ */
[data-catalog-items][data-view="list"] { grid-template-columns: 1fr !important; gap: .75rem !important; }
[data-catalog-items][data-view="list"] [data-product-card] {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  border-radius: 1.25rem !important;
}
[data-catalog-items][data-view="list"] [data-product-card] > .card-media {
  flex: 0 0 6.5rem; display: block; align-self: stretch; overflow: hidden; position: relative;
}
[data-catalog-items][data-view="list"] [data-product-card] > .card-media img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important;
}
[data-catalog-items][data-view="list"] [data-product-card] > div {
  flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.25rem !important;
}
[data-catalog-items][data-view="list"] [data-product-card] h3 { margin-top: .25rem !important; }
[data-catalog-items][data-view="list"] [data-product-card] > div > p { display: none; } /* description masquée en compact */
[data-catalog-items][data-view="list"] [data-product-card] > div > div:last-child {
  display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem !important;
}
[data-catalog-items][data-view="list"] [data-product-card] > div > div:last-child > span { margin: 0 !important; }
@media (max-width: 639px) {
  [data-catalog-items][data-view="list"] [data-product-card] > .card-media { flex-basis: 5.5rem; }
}

/* ---- RTL (Arabic) ---- */
[dir="rtl"] [data-cart-drawer] .absolute.inset-y-0.right-0 { right:auto; left:0; }
[dir="rtl"] [data-cart-drawer] .pl-10 { padding-left:0; padding-right:2.5rem; }
[dir="rtl"] [data-cart-drawer] .translate-x-full { transform: translateX(-100%) !important; }
[dir="rtl"] .sr-only:not(:focus) { } /* noop */
[dir="rtl"] a.focus\:left-3.focus\:not-sr-only { left:auto; right:0.75rem; }
[dir="rtl"] button[data-back-top] { right:auto; left:1.5rem; }

/* ---- Icônes inline (toggle thème, panier, nav…) ----
   svgWrap pose width/height="24" en attributs ; le SVG ignore alors la taille
   h-N/w-N du <span> parent et déborde (icônes 24px dans un bouton 32px → mal
   alignées). On force le SVG à remplir son <span> (flex item blockifié, donc
   dimensionné par h-N/w-N). Les icônes rendues via icon() gardent leur classe
   Tailwind (1er attribut class ; le 2e class="icon-svg" est ignoré par le parser). */
.icon-svg { width: 100%; height: 100%; }


/* ============================================================
   Liens texte : couleur de survol/actif unifiée au teal marque #00A3DA
   (identique au lien Suggestion/Plainte). Les boutons pleins (bg-*) et les
   tuiles/pills à fond au survol (hover:bg-*) gardent leur style propre.
   Spécificité (0,2,1) > .hover\:text-*:hover (0,2,0) → surcharge le blanc.
   ============================================================ */
a:not([class*="bg-"]):not([class*="hover\\:bg-"]):hover,
a:not([class*="bg-"]):not([class*="hover\\:bg-"]):active,
a:not([class*="bg-"]):not([class*="hover\\:bg-"]):focus-visible { color: #00A3DA; }