/**
 * ==========================================================================
 * HELENERIU.FR - Grille Responsive Améliorée
 * ==========================================================================
 * Corrige les problèmes de grille Bootstrap et ajoute un système moderne
 * À placer APRÈS le fichier theme.css dans le head
 */

/* ==========================================================================
   1. VARIABLES CSS - Breakpoints Standardisés
   ========================================================================== */

:root {
  /* Breakpoints unifiés (résout le problème 767px vs 768px) */
  --bp-xs: 0;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* Container max-widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* Espacement responsive */
  --gutter: 1rem;
  --gutter-sm: 0.75rem;
  --gutter-lg: 1.5rem;
}

/* ==========================================================================
   2. RESET & BASE RESPONSIVE
   ========================================================================== */

/* Box-sizing global */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Images responsives par défaut (corrige le problème des images qui débordent) */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Conteneur principal responsive */
.container,
.container-fluid {
  width: 100%;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  margin-right: auto;
  margin-left: auto;
}

/* ==========================================================================
   3. GRILLE BOOTSTRAP CORRIGÉE - Media Queries Manquantes
   ========================================================================== */

/* Base: Mobile First (xs) - Toujours pleine largeur */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: var(--gutter-sm);
  padding-left: var(--gutter-sm);
}

.col-xs-1 { width: 8.33333%; }
.col-xs-2 { width: 16.66667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333%; }
.col-xs-5 { width: 41.66667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333%; }
.col-xs-8 { width: 66.66667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333%; }
.col-xs-11 { width: 91.66667%; }
.col-xs-12 { width: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: var(--container-sm);
  }

  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: var(--gutter-sm);
    padding-left: var(--gutter-sm);
  }

  .col-sm-1 { width: 8.33333%; }
  .col-sm-2 { width: 16.66667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.33333%; }
  .col-sm-5 { width: 41.66667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.33333%; }
  .col-sm-8 { width: 66.66667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.33333%; }
  .col-sm-11 { width: 91.66667%; }
  .col-sm-12 { width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }

  .col-md-1 { width: 8.33333%; }
  .col-md-2 { width: 16.66667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333%; }
  .col-md-5 { width: 41.66667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333%; }
  .col-md-8 { width: 66.66667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.33333%; }
  .col-md-11 { width: 91.66667%; }
  .col-md-12 { width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: var(--container-lg);
  }

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }

  .col-lg-1 { width: 8.33333%; }
  .col-lg-2 { width: 16.66667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333%; }
  .col-lg-5 { width: 41.66667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333%; }
  .col-lg-8 { width: 66.66667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.33333%; }
  .col-lg-11 { width: 91.66667%; }
  .col-lg-12 { width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-xl);
  }

  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: var(--gutter-lg);
    padding-left: var(--gutter-lg);
  }

  .col-xl-1 { width: 8.33333%; }
  .col-xl-2 { width: 16.66667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.33333%; }
  .col-xl-5 { width: 41.66667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.33333%; }
  .col-xl-8 { width: 66.66667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.33333%; }
  .col-xl-11 { width: 91.66667%; }
  .col-xl-12 { width: 100%; }
}

/* XXL devices (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-xxl);
  }
}

/* Clearfix pour les rows */
.row::before,
.row::after {
  display: table;
  content: " ";
}

.row::after {
  clear: both;
}

/* ==========================================================================
   4. GRILLE CSS GRID MODERNE (Alternative Flexbox/Grid)
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--gutter);
}

/* Grilles auto-adaptatives (corrige le problème minmax(350px)) */
.grid-auto-fit {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-auto-fill {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Grilles fixes par breakpoint */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .grid-cols-2-mobile {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   5. FLEXBOX UTILITIES
   ========================================================================== */

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

@media (max-width: 767px) {
  .flex-col-mobile { flex-direction: column; }
  .items-start-mobile { align-items: flex-start; }
}

/* ==========================================================================
   6. TYPOGRAPHIE RESPONSIVE
   ========================================================================== */

/* Taille de police minimale pour accessibilité (corrige font-size: 0.75em) */
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

/* Clamp pour typographie fluide */
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2, .section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Taille minimale garantie pour la lisibilité */
p, li, a, span, label, input, textarea, select {
  font-size: max(0.875rem, 14px);
}

/* FAQ et petits textes - minimum 14px (corrige le 0.75em) */
.faq-item,
.small-text,
.meta-text,
.breadcrumb a,
.footer-links a {
  font-size: max(0.875rem, 14px);
}

@media (max-width: 479px) {
  /* Éviter les textes trop petits sur très petits écrans */
  body {
    font-size: max(1rem, 16px);
  }

  .small-text,
  .meta-text {
    font-size: max(0.8125rem, 13px);
  }
}

/* ==========================================================================
   7. COMPOSANTS SPÉCIFIQUES - Corrections
   ========================================================================== */

/* Grille des témoignages (corrige minmax(350px)) */
.testimonials-grid,
.temoignages-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Grille des marques */
.brands-grid,
.marques-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Grille produits */
.products-grid,
.produits-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

@media (max-width: 479px) {
  .products-grid,
  .produits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

/* Breadcrumb responsive (améliore le truncation) */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-size: max(0.875rem, 14px);
}

.breadcrumb-item {
  max-width: none;
  overflow: visible;
}

@media (max-width: 479px) {
  .breadcrumb {
    font-size: max(0.75rem, 12px);
  }

  .breadcrumb-item:not(:last-child) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Afficher seulement les 2 derniers items sur très petit écran */
  .breadcrumb-item:nth-last-child(n+4) {
    display: none;
  }

  .breadcrumb-item:nth-last-child(4)::before {
    content: "...";
    margin-right: 0.5rem;
  }
}

/* Trust bar responsive unifié */
.trust-bar,
.trust-bar-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 767px) {
  .trust-bar,
  .trust-bar-content {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .trust-bar-item {
    width: 100%;
  }
}

/* ==========================================================================
   8. BOUTONS TACTILES - Accessibilité Mobile
   ========================================================================== */

/* Taille minimale pour les cibles tactiles (44x44px minimum WCAG) */
button,
.btn,
[role="button"],
a.btn,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.25rem;
  touch-action: manipulation;
}

/* Boutons plus grands sur mobile */
@media (max-width: 767px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .add-to-cart,
  .checkout-btn {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
  }

  /* Boutons inline sur mobile */
  .btn-group,
  .button-group {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   9. ESPACEMENT RESPONSIVE
   ========================================================================== */

/* Sections */
.section,
section {
  padding: 3rem 1rem;
}

@media (max-width: 767px) {
  .section,
  section {
    padding: 2rem 0.75rem;
  }
}

@media (max-width: 479px) {
  .section,
  section {
    padding: 1.5rem 0.5rem;
  }
}

/* Margins responsive */
.my-responsive {
  margin-top: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.py-responsive {
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* ==========================================================================
   10. UTILITAIRES D'AFFICHAGE RESPONSIVE
   ========================================================================== */

/* Hide/Show par breakpoint */
.hide-xs { display: none !important; }

@media (min-width: 576px) {
  .hide-xs { display: block !important; }
  .hide-sm { display: none !important; }
  .show-xs-only { display: none !important; }
}

@media (min-width: 768px) {
  .hide-sm { display: block !important; }
  .hide-md { display: none !important; }
  .show-sm-only { display: none !important; }
}

@media (min-width: 992px) {
  .hide-md { display: block !important; }
  .hide-lg { display: none !important; }
  .show-md-only { display: none !important; }
}

@media (min-width: 1200px) {
  .hide-lg { display: block !important; }
  .show-lg-only { display: none !important; }
}

/* Mobile only */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-desktop-only { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
  .hide-desktop { display: none !important; }
}

/* ==========================================================================
   11. ACCESSIBILITÉ & PRÉFÉRENCES UTILISATEUR
   ========================================================================== */

/* Respect des préférences de mouvement réduit */
@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;
  }
}

/* Mode sombre amélioré (garde la couleur de marque) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #2c2c2c;
    --color-accent: #a8906f; /* Version plus claire du marron signature */
    --color-text: #e0e0e0;
    --color-text-light: #b0b0b0;
    --color-border: #404040;
    --color-surface: #1a1a1a;
    --color-background: #121212;
  }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-border: #000000;
  }

  a, button, .btn {
    text-decoration: underline;
    outline: 2px solid currentColor;
  }
}

/* ==========================================================================
   12. IMPRESSION
   ========================================================================== */

@media print {
  /* Cacher les éléments non essentiels */
  .mobile-menu-toggle,
  .mobile-menu-overlay,
  .cart-icon,
  .search-toggle,
  .social-links,
  .cookie-banner,
  .newsletter-popup {
    display: none !important;
  }

  /* Afficher les URLs des liens */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Optimiser les couleurs pour l'impression */
  body {
    color: #000;
    background: #fff;
  }
}