/* ── Palette de couleurs ── */
:root {
  --color-primary:   #0F1A2E;
  --color-secondary: #162035;
  --color-accent:    #E8A020;
  --color-accent-dk: #C8881A;
  --color-page-bg:   #F5F6F8;
  --color-card-bg:   #FFFFFF;
  --color-badge:     #1A7F5A;
  --color-border:    #E0E2E8;
}

/* Fond de page global */
html { overflow-x: hidden; }
body {
  background-color: var(--color-page-bg);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
main { min-width: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:40px; height:40px; border:4px solid #e5e7eb; border-top-color: var(--color-accent); border-radius:50%; animation:spin 0.8s linear infinite; margin:3rem auto; }

/* ── Animations Hero ── */
@keyframes pulse       { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes heroFadeUp  { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes heroBgZoom  { from { transform:scale(1); } to { transform:scale(1.07); } }
@keyframes btnGlow     { 0%,100% { box-shadow:0 8px 28px rgba(232,160,32,.35); } 50% { box-shadow:0 12px 44px rgba(232,160,32,.65); } }
@keyframes chipSlide   { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }

.hero-anim { opacity:0; animation:heroFadeUp .7s cubic-bezier(.22,.68,0,1.2) forwards; }
.hero-chip { opacity:0; animation:chipSlide .55s ease forwards; }
.hero-btn  { animation:btnGlow 2.8s ease-in-out infinite; }

/* Étoiles */
.stars { color: #fbbf24; }

/* Cartes produits */
.product-card { transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--color-border); background: var(--color-card-bg); }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(15,26,46,0.12); }
.product-card h3 { overflow-wrap: anywhere; }

/* Toast notification */
#toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; background: var(--color-primary); color:#fff; padding:0.75rem 1.25rem; border-radius:0.75rem; font-size:0.875rem; transform:translateY(100px); opacity:0; transition:all 0.3s; display:flex; align-items:center; gap:0.5rem; max-width:320px; }
#toast.show { transform:translateY(0); opacity:1; }
#toast.success { border-left:4px solid #22c55e; }
#toast.error   { border-left:4px solid #ef4444; }

/* Input focus */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px rgba(232,160,32,0.15); }

/* Ligne clamp */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width: 767px) {
  .product-card .p-4 { padding: 0.75rem; }
  .product-card .text-lg { font-size: 1rem; line-height: 1.35; }
  .product-card button { width: 2.25rem; height: 2.25rem; }
  #toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .product-card .line-through { display: block; margin-left: 0; }
  .product-card .p-4 { padding: 0.65rem; }
}

/* Overflow horizontal : tables dans pages admin & catalogue */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Touch targets minimum 44px (WCAG 2.5.5) */
@media (max-width: 767px) {
  button, [role="button"], a.btn { min-height: 44px; }
  select { min-height: 44px; }
}

/* Impression — page de confirmation commande */
@media print {
  header, footer, #cookie-banner, #section-compte-invite,
  .no-print, button, [role="button"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: none; }
  .max-w-3xl, .max-w-5xl, .max-w-7xl { max-width: 100%; padding: 0; }
  .rounded-2xl, .rounded-3xl, .rounded-xl { border-radius: 4px; border: 1px solid #ddd; }
  .shadow-sm, .shadow-xl { box-shadow: none; }
  .grid { display: block; }
  .lg\:col-span-3, .lg\:col-span-2 { width: 100%; }
}