Melfe/src_backup/app/globals.css

/* ============================================== */
/* GLOBALS.CSS FINAL CORRIGÉ - MELHFA E-COMMERCE */
/* Compatible Tailwind v3 + Next.js 14 - SANS ERREURS */
/* ============================================== */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================== */
/* VARIABLES CSS CUSTOM */
/* ============================================== */

@layer base {
  :root {
    /* Couleurs de base */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    /* Composants UI */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Couleurs primaires */
    --primary: 222.2 84% 4.9%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;

    /* États et interactions */
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    /* Bordures et inputs */
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    /* Border radius global */
    --radius: 0.5rem;
  }

  /* Mode sombre */
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

/* ============================================== */
/* STYLES DE BASE - SANS CLASSES PROBLÉMATIQUES */
/* ============================================== */

@layer base {
  html {
    scroll-behavior: smooth;
    font-family: system-ui, sans-serif;
  }

  body {
    margin: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
  }

  /* Suppression des bordures par défaut */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(var(--border));
  }

  /* Scrollbar personnalisée */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Sélection de texte */
  ::selection {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
}

/* ============================================== */
/* COMPOSANTS PERSONNALISÉS */
/* ============================================== */

@layer components {

  /* Effets de hover pour cartes */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }

  /* Effet zoom pour images */
  .image-zoom {
    @apply transition-transform duration-700 hover:scale-105;
  }

  /* Container parallax */
  .parallax {
    transform: translateZ(0);
    will-change: transform;
  }

  /* Grid responsive pour produits */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  @media (max-width: 640px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  }

  /* Styles de focus Ring personnalisés */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  /* Estados de status/badges */
  .status-success {
    @apply bg-green-100 text-green-800 border border-green-200 px-3 py-1 rounded-full text-sm font-medium;
  }

  .status-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200 px-3 py-1 rounded-full text-sm font-medium;
  }

  .status-error {
    @apply bg-red-100 text-red-800 border border-red-200 px-3 py-1 rounded-full text-sm font-medium;
  }

  .status-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200 px-3 py-1 rounded-full text-sm font-medium;
  }

  /* Cartes de produits MELHFA */
  .melhfa-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }

  /* Boutons personnalisés */
  .btn-primary {
    @apply bg-black text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 hover:bg-gray-800 focus:ring-2 focus:ring-black focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-900 px-6 py-3 rounded-lg font-medium transition-all duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
}

/* ============================================== */
/* UTILITAIRES PERSONNALISÉS */
/* ============================================== */

@layer utilities {

  /* Espacement de sections */
  .section-padding {
    @apply py-16 md:py-20 lg:py-24;
  }

  .container-padding {
    @apply px-6 lg:px-8;
  }

  /* Typographie */
  .heading-xl {
    @apply text-4xl md:text-5xl lg:text-6xl font-light tracking-tight leading-none;
  }

  .heading-lg {
    @apply text-3xl md:text-4xl font-light tracking-wide leading-tight;
  }

  .heading-md {
    @apply text-2xl md:text-3xl font-light tracking-wide;
  }

  .body-lg {
    @apply text-lg md:text-xl text-gray-600 leading-relaxed;
  }

  .body-sm {
    @apply text-sm text-gray-600 leading-relaxed;
  }

  /* Équilibrage du texte */
  .text-balance {
    text-wrap: balance;
  }

  /* Utilitaires de layout */
  .center-absolute {
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
  }

  .center-flex {
    @apply flex items-center justify-center;
  }

  /* Ratios d'aspect personnalisés */
  .aspect-product {
    aspect-ratio: 3 / 4;
  }

  .aspect-hero {
    aspect-ratio: 16 / 9;
  }

  /* Safe area pour mobile */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Masquer scrollbar */
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Conteneur max-width pour MELHFA */
  .container-melhfa {
    @apply max-w-[1400px] mx-auto px-6;
  }
}

/* ============================================== */
/* ANIMATIONS PERSONNALISÉES */
/* ============================================== */

/* Keyframes */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-subtle {

  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }

  70% {
    transform: translate3d(0, -4px, 0);
  }

  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* Classes d'animation */
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

.animate-slide-in {
  animation: slide-in 0.5s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.3s ease-out;
}

.animate-bounce-subtle {
  animation: bounce-subtle 1s ease-in-out;
}

/* ============================================== */
/* STYLES RESPONSIFS */
/* ============================================== */

@media (max-width: 640px) {
  .heading-xl {
    @apply text-3xl;
  }

  .heading-lg {
    @apply text-2xl;
  }

  .section-padding {
    @apply py-12;
  }
}

/* ============================================== */
/* ACCESSIBILITÉ */
/* ============================================== */

@media (prefers-contrast: high) {
  .melhfa-card {
    @apply border-2 border-gray-800;
  }
}

@media (prefers-reduced-motion: reduce) {

  .animate-fade-in-up,
  .animate-slide-in,
  .animate-scale-in,
  .animate-bounce-subtle,
  .card-hover,
  .image-zoom {
    animation: none;
    transition: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================== */
/* STYLES D'IMPRESSION */
/* ============================================== */

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .melhfa-card {
    @apply border border-gray-400 shadow-none;
  }
}