/* DJICapture — style.css */

/* ── Général ─────────────────────────────── */
html { scroll-behavior: smooth }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1,h2,h3 { font-family: 'Space Grotesk', 'Inter', sans-serif }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px }
::-webkit-scrollbar-thumb:hover { background: #9ca3af }

/* ── Header ──────────────────────────────── */
#site-header {
  background-color: rgba(10,10,10,0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#site-header.on-hero {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
#site-header.scrolled {
  background-color: rgba(10,10,10,0.97) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── Animations ──────────────────────────── */
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulse-glow { 0%,100% { box-shadow:0 0 0 0 rgba(0,212,255,.4) } 50% { box-shadow:0 0 0 8px rgba(0,212,255,0) } }

.animate-fade-in { animation: fadeIn .35s ease both }
.animate-fade-up { animation: fadeUp .5s ease both }

/* ── Texte dégradé ───────────────────────── */
.text-gradient { background: linear-gradient(135deg, #00D4FF, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }

/* ── Réassurance globale ─────────────────── */
.site-trust-strip {
  box-shadow:0 -1px 0 rgba(15,23,42,.03);
}
.site-trust-item {
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
  border:1px solid #EEF2F7;
  border-radius:.9rem;
  background:#fff;
  padding:.5rem .75rem;
}
.site-trust-icon {
  width:1.85rem;
  height:1.85rem;
  border-radius:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#0891B2;
  background:#ECFEFF;
  border:1px solid rgba(0,212,255,.22);
}
.site-trust-item strong {
  display:block;
  color:#111827;
  font-size:.72rem;
  line-height:1.1;
  font-weight:800;
}
.site-trust-item small {
  display:block;
  margin-top:.12rem;
  color:#7A8494;
  font-size:.63rem;
  line-height:1.1;
  font-weight:600;
}

/* ── Carte produit ───────────────────────── */
.product-card {
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color:rgba(0,212,255,.28) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.10);
}
.product-card::after {
  content:'';
  position:absolute;
  left:1rem;
  right:1rem;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.25), transparent);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.product-card:hover::after { opacity:1 }
.product-card .card-img {
  background:#fff !important;
}
.product-card .card-img.bg-gray-50,
.product-card .card-img.bg-gray-100,
.product-card-image,
.product-option-image,
.cart-product-image,
.checkout-product-image,
.order-product-image {
  background:#fff !important;
}
.product-card .card-img img {
  background:#fff;
  object-fit: contain;
  object-position: center;
  padding: 1rem;
  filter:none !important;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.product-card-image img {
  filter:none !important;
}
.product-card:hover .card-img img { transform: scale(1.06) }
.product-card .btn-primary,
.product-card button[onclick*="ajouterAuPanier"] {
  box-shadow:0 8px 18px rgba(0,212,255,.20);
}
.product-card .btn-primary:hover,
.product-card button[onclick*="ajouterAuPanier"]:hover {
  box-shadow:0 10px 24px rgba(0,212,255,.34);
}

/* ── Badges ──────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:9999px;
  border:1px solid transparent;
  padding:.35rem .7rem;
  font-size:.68rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.badge::before {
  content:'';
  width:.38rem;
  height:.38rem;
  border-radius:9999px;
  background:currentColor;
  opacity:.85;
}
.badge-nouveau,
.badge-info {
  background:rgba(0,212,255,.12);
  border-color:rgba(0,212,255,.28);
  color:#0891B2;
}
.badge-populaire,
.badge-warning {
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.28);
  color:#B45309;
}
.badge-promo,
.badge-danger,
.badge-rupture {
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.24);
  color:#DC2626;
}
.badge-stock,
.badge-success {
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.28);
  color:#15803D;
}
.badge-stock-limite {
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.28);
  color:#B45309;
}
.badge-muted {
  background:#F8FAFC;
  border-color:#E5E7EB;
  color:#64748B;
}
.trust-badge {
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.075);
  border-radius:1rem;
  padding:.75rem 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.trust-badge-icon {
  width:2.5rem;
  height:2.5rem;
  border-radius:.8rem;
  border:1px solid rgba(0,212,255,.25);
  background:rgba(0,212,255,.15);
  color:#00D4FF;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.trust-badge-title {
  display:block;
  color:#fff;
  font-size:.76rem;
  font-weight:800;
  line-height:1.1;
}
.trust-badge-text {
  display:block;
  color:rgba(255,255,255,.46);
  font-size:.68rem;
  font-weight:600;
  margin-top:.15rem;
}
.trust-badge-light {
  border-color:#E5E7EB;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.04);
}
.trust-badge-light .trust-badge-title { color:#111827 }
.trust-badge-light .trust-badge-text { color:#6B7280 }

/* ── Boutons ─────────────────────────────── */
.btn-primary { background:#00D4FF; color:#0A0A0A; font-weight:600; transition:background .2s, transform .15s, box-shadow .2s }
.btn-primary:hover { background:#00bce0; box-shadow:0 0 20px rgba(0,212,255,.35) }
.btn-primary:active { transform:scale(.97) }
.btn-secondary { background:#1A1A2E; color:#fff; border:1px solid rgba(255,255,255,.1); font-weight:600; transition:background .2s }
.btn-secondary:hover { background:#252545 }
.btn-outline { border:1px solid #00D4FF; color:#00D4FF; font-weight:600; transition:background .2s }
.btn-outline:hover { background:rgba(0,212,255,.1) }

/* ── Formulaires ─────────────────────────── */
.form-input { transition:border-color .2s, box-shadow .2s }
.form-input:focus { outline:none; border-color:#00D4FF; box-shadow:0 0 0 3px rgba(0,212,255,.12) }

/* ── Section hero ────────────────────────── */
.hero-blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none }

/* ── Glowing accent ──────────────────────── */
.glow { animation: pulse-glow 3s ease infinite }

/* ── Cart badge ──────────────────────────── */
@keyframes badge-pop { 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.3)} 100%{transform:scale(1);opacity:1} }
.badge-pop { animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1) forwards }

/* ── Filtres catalogue ───────────────────── */
.filter-btn { transition:all .15s ease }
.filter-btn.active { background:rgba(0,212,255,.12); color:#00D4FF; border-color:#00D4FF }

/* ── Onglets produit ─────────────────────── */
.tab-btn { border-bottom:2px solid transparent; padding:.875rem 1.25rem; font-size:.875rem; font-weight:500; color:#6B7280; white-space:nowrap; transition:color .2s, border-color .2s; cursor:pointer; background:none; border-left:none; border-right:none; border-top:none }
.tab-btn.active { border-bottom-color:#00D4FF; color:#00D4FF; font-weight:600 }
.tab-btn:hover:not(.active) { color:#374151 }
.tab-content { display:none }
.tab-content.active { display:block }

/* ── FAQ accordéon ───────────────────────── */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .3s ease }
.faq-item.open .faq-answer { max-height:500px }
.faq-item.open .faq-chevron, .faq-item.open .faq-icon { transform:rotate(180deg) }
.faq-chevron, .faq-icon { transition:transform .25s ease }

/* ── Galerie produit ─────────────────────── */
.thumb-img { transition:border-color .2s, opacity .2s }
.thumb-img.active { border-color:#00D4FF }
.thumb-img:not(.active) { opacity:.65 }
.thumb-img:not(.active):hover { opacity:1 }

/* ── Toast notification ──────────────────── */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; background:#1A1A2E; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:.75rem 1.25rem; font-size:.875rem; box-shadow:0 8px 32px rgba(0,0,0,.3); animation:fadeUp .3s ease both }

/* ── Page fond clair (pages hors hero) ───── */
.page-light {
  background:
    linear-gradient(180deg, #F8FAFC 0%, #F3F4F6 44%, #F8FAFC 100%);
}
.page-light .bg-white {
  border-color: rgba(226,232,240,.9);
}
.page-light .shadow-sm {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px rgba(15,23,42,.04);
}

/* ── Admin inputs ────────────────────────── */
.admin-input { width:100%; border:1px solid #E5E7EB; border-radius:.75rem; padding:.625rem .875rem; font-size:.875rem; background:#fff; transition:border-color .2s, box-shadow .2s; outline:none }
.admin-input:focus { border-color:#00D4FF; box-shadow:0 0 0 3px rgba(0,212,255,.12) }

.contact-input {
  width:100%;
  min-height:3.45rem;
  border:2px solid #D5DBE5;
  border-radius:.95rem;
  padding:.72rem 1rem;
  font-size:.95rem;
  font-weight:500;
  color:#1F2937;
  background:#fff;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.contact-input::placeholder {
  color:#9FA8B7;
  font-weight:500;
}
.contact-input:focus {
  border-color:#00D4FF;
  box-shadow:0 0 0 4px rgba(0,212,255,.14);
}
select.contact-input {
  appearance:auto;
  color:#1F2937;
}
textarea.contact-input {
  min-height:10.75rem;
  line-height:1.6;
  padding-top:.9rem;
}
/* ── Scrollbar masquée (nav admin) ───────── */
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none }
.scrollbar-hide::-webkit-scrollbar { display:none }

/* ── Bouton succès (panier) ──────────────── */
.btn-success { background:#22C55E; color:#fff; font-weight:600; transition:background .2s }
.btn-success:hover { background:#16a34a }

/* ── Étoiles avis ────────────────────────── */
.star-rating { display:inline-flex; gap:.2rem }
.star-rating .star { cursor:pointer; transition:transform .15s }
.star-rating .star:hover { transform:scale(1.2) }

/* ── Modal overlay ───────────────────────── */
.modal-overlay { animation: fadeIn .2s ease }
.modal-box { animation: fadeUp .25s ease }

/* ── Impression (admin commande détail) ──── */
@media print {
  #site-header, #admin-nav, footer, .no-print { display:none !important }
  body { background:#fff !important; color:#000 !important; font-size:12pt }
  .print-only { display:block !important }
  a { color:inherit !important; text-decoration:none !important }
  .bg-white { box-shadow:none !important; border:1px solid #ddd !important }
  .rounded-2xl { border-radius:4px !important }
}
.print-only { display:none }

/* ── Mobile ──────────────────────────────── */
@media (max-width:1024px) {
  .product-card:hover { transform:none; box-shadow:none }
  .product-card:hover .card-img img { transform:none }
}
@media (max-width:768px) {
  #page-spacer { height:64px !important }
}