/* ═══════════════════════════════════════════════════════════════
   OPTIMISATIONS CSS GLOBALES
   À charger APRÈS style.css, farm.css, motion.css pour surcharger
   les règles redondantes et améliorer les performances.
   ═══════════════════════════════════════════════════════════════ */

/* ── Optimisation des inputs/formulaires ── */
input:focus,textarea:focus,select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px var(--gold-alpha-12);
  outline: none;
}

input::placeholder,textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* ── Optimisation des transitions d'état ── */
button, .chip, .tab, input, textarea, select {
  transition: background var(--duration-base) ease,
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease,
              transform var(--duration-fast) ease,
              color var(--duration-base) ease;
}

/* ── Boutons : amélioration de l'accessibilité ── */
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Images et vidéos : optimisation ── */
img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Cartes produit : améliorations ── */
.card {
  transition: border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease,
              transform var(--duration-fast) ease;
}

.card:hover {
  border-color: var(--gold-alpha-25);
  box-shadow: 0 2px 12px var(--gold-alpha-15);
}

/* ── Hiérarchie visuelle des titres ── */
h1 { font-size: clamp(20px, 5vw, 24px); }
h2 { font-size: clamp(18px, 4.5vw, 22px); }
h3 { font-size: clamp(16px, 4vw, 18px); }

/* ── Textes compacts sur mobile ── */
@media (max-width: 380px) {
  .pname { font-size: 14px; }
  .stat-line { font-size: 9px; }
  .price-tile .tile-price { font-size: 14px; }
}

/* ── Améliorations responsives ── */
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: 4px 12px 24px; }
  header { padding: 16px 12px 12px; }
}

@media (max-width: 480px) {
  .chips { gap: 6px; padding: 12px 12px 8px; }
  .chip { padding: 6px 12px; font-size: 12px; }
  main { padding: 4px 8px 20px; }
}

/* ── Élimination des animations sur les appareils avec prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Optimisation des sélecteurs répétitifs ── */
.error-msg, .warning-msg {
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.4;
}

.success-msg {
  color: #4CAF50;
  font-size: 12px;
  margin-top: 8px;
}

/* ── Amélioration du contraste et lisibilité ── */
.muted, [class*="muted"] {
  color: var(--muted);
  line-height: 1.5;
}

/* ── États de chargement et skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 0%, rgba(69, 42, 99, 0.6) 50%, var(--panel) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tooltip et infobulles ── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Barre de défilement personnalisée (webkit) ── */
.app-scroll::-webkit-scrollbar {
  width: 6px;
}

.app-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.app-scroll::-webkit-scrollbar-thumb {
  background: var(--gold-alpha-35);
  border-radius: var(--radius-pill);
}

.app-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gold-alpha-50);
}

/* Scrollbar Firefox */
.app-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-alpha-35) transparent;
}

/* ── Amélioration du contraste du focus au clavier ── */
*:focus-visible {
  outline-color: var(--gold);
  outline-width: 2px;
  outline-offset: 1px;
}

/* ── Optimisation des listes ── */
ul, ol {
  margin: 0;
  padding-left: var(--sp-lg);
}

li {
  margin: 4px 0;
}

/* ── Liens : meilleure accessibilité ── */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

a:hover, a:focus-visible {
  color: #FFB75E;
  text-decoration: underline;
}

/* ── Textes bloqués à la sélection ── */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Optimisation de la performance : utiliser will-change sparingly ── */
.animate-in, [class*="animate"] {
  will-change: opacity, transform;
}

.animate-in:not(.animating) {
  will-change: auto;
}

/* ── Amélioration de la lisibilité sur petit écran ── */
@media (max-width: 360px) {
  body { font-size: 13px; }
  button { padding: 11px 18px; font-size: 12px; }
  .card { padding: 10px 10px 12px; }
}

/* ── Badge sur les produits : meilleure lisibilité ── */
[class*="badge"], [class*="tag"] {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ── Transparence progressive pour listes longues ── */
.virtual-scroll-item {
  contain: layout style;
}

/* ── Optimisation des panneaux modaux ── */
.modal, .sheet, .overlay {
  animation: fadeIn var(--duration-base) ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content, .sheet-body {
  animation: slideUp var(--duration-base) var(--easing-in-out);
}

@keyframes slideUp {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Optimisation des prix (met l'accent sur le montant) ── */
[class*="price"] {
  font-weight: 700;
  color: var(--gold);
  font-size: inherit;
}

[class*="price"].old-price, [class*="price"].strikethrough {
  text-decoration: line-through;
  color: var(--muted);
  opacity: 0.7;
}

/* ── Amélioration du contraste des boutons secondaires ── */
.secondary-btn, button.secondary {
  color: var(--text);
  border-color: var(--line);
  background: transparent;
}

.secondary-btn:hover, button.secondary:hover {
  background: var(--gold-alpha-08);
  border-color: var(--gold-alpha-25);
}

/* ── Code promo : meilleur focus visuel ── */
.promo-code-input {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Indicateurs de progression ── */
.progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width var(--duration-slow) ease;
}

/* ── Espacement cohérent après sections ── */
.section-divider, hr {
  margin: var(--sp-lg) 0;
  border: none;
  height: 1px;
  background: var(--line-alpha-35);
}

/* ── Amélioration du contraste des badges inactifs ── */
.badge.inactive, .tag.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Print styles (amélioration) ── */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v90 — Accessibilité + touch targets + responsive finition
   (aucune modification d'identité visuelle)
   ═══════════════════════════════════════════════════════════════ */

/* Feedback presse bouton (performance.js) — discret */
button.btn-press {
  transform: scale(0.97);
}

/* Focus visible cohérent sur éléments role=button (price-tiles, mix-link…) */
[role="button"]:focus-visible,
.price-tile:focus-visible,
.mix-link:focus-visible,
.icon-wrap[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Touch targets minimum ~44px (recommandation mobile) sans changer le look */
.price-tile {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.add-btn {
  min-width: 44px;
  min-height: 44px;
}
.chip, .nav-item, .tab {
  min-height: 40px;
}

/* Très petits écrans : éviter overflow horizontal */
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 10px; }
  .price-tiles { gap: 4px; }
  .pname { font-size: 13px; line-height: 1.25; }
  main { padding-left: 8px; padding-right: 8px; }
}

/* Empêcher le zoom involontaire sur inputs iOS tout en autorisant le zoom page */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Réduction de motion déjà présente ; renforcer sur les transforms de feedback */
@media (prefers-reduced-motion: reduce) {
  button.btn-press { transform: none; }
}