/**
 * ==========================================================================
 * HELENERIU.FR - Corrections Critiques
 * ==========================================================================
 * Ce fichier contient les corrections urgentes pour les bugs identifiés
 * À placer EN DERNIER dans le head pour override les styles problématiques
 */

/* ==========================================================================
   1. FIX CRITIQUE: Menu Mobile Caché
   Override du bug dans core.min.css
   ========================================================================== */

/* Supprimer le display:none!important de core.min.css - SANS media query */
.mobile-menu-overlay {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.is-open,
.mobile-menu-overlay[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: #fff;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 10000;
}

.mobile-menu-overlay.is-open .mobile-menu-panel,
.mobile-menu-overlay[aria-hidden="false"] .mobile-menu-panel {
  transform: translateX(0);
}

/* ==========================================================================
   2. FIX: Images qui débordent
   ========================================================================== */

/* Force toutes les images à être responsives */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Images dans les conteneurs */
.product-image img,
.brand-logo img,
.testimonial-image img,
.category-image img,
figure img,
.img-responsive,
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   3. FIX: Grille des témoignages (minmax(350px) problématique)
   ========================================================================== */

.testimonials-grid,
.temoignages-grid,
[class*="testimonial"] .grid,
.avis-clients-grid {
  display: grid !important;
  gap: 1rem;
  /* Utiliser min() pour éviter le débordement */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

@media (max-width: 479px) {
  .testimonials-grid,
  .temoignages-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   4. FIX: Grille des marques
   ========================================================================== */

.brands-grid,
.marques-grid,
.brand-list {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
}

@media (max-width: 479px) {
  .brands-grid,
  .marques-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   5. FIX: Taille de police trop petite
   ========================================================================== */

/* Empêcher les polices trop petites sur mobile */
@media (max-width: 767px) {
  body,
  p,
  li,
  a,
  span,
  label {
    font-size: max(0.875rem, 14px) !important;
  }

  /* FAQ */
  .faq-question,
  .faq-answer,
  .faq-item {
    font-size: max(0.9375rem, 15px) !important;
  }

  /* Navigation */
  .nav-link,
  .menu-link {
    font-size: max(1rem, 16px) !important;
  }

  /* Boutons */
  .btn,
  button,
  input[type="submit"] {
    font-size: max(0.9375rem, 15px) !important;
  }
}

/* Très petits écrans - éviter le 0.75em */
@media (max-width: 479px) {
  .small-text,
  .meta,
  .caption,
  small {
    font-size: max(0.8125rem, 13px) !important;
  }
}

/* ==========================================================================
   6. FIX: Boutons tactiles trop petits
   ========================================================================== */

/* Garantir une taille minimale pour les cibles tactiles */
@media (max-width: 991px) {
  button,
  .btn,
  [role="button"],
  a.btn,
  input[type="submit"],
  input[type="button"],
  .add-to-cart,
  .checkout-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.625rem 1rem !important;
  }

  /* Liens dans les listes */
  nav a,
  .menu a,
  .footer-links a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 0.5rem;
  }
}

/* ==========================================================================
   7. FIX: Breadcrumb tronqué
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  overflow: visible !important;
  max-width: 100% !important;
}

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

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

  .breadcrumb-item:not(:last-child):not(:nth-last-child(2)) {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   8. FIX: Trust bar incohérente
   ========================================================================== */

.trust-bar,
.trust-bar-content,
.reassurance-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem;
}

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

  .trust-bar-item,
  .reassurance-item {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   9. FIX: Tableaux responsives
   ========================================================================== */

table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 767px) {
  .table-responsive,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Option: Tableaux verticaux sur mobile */
  table.table-stack-mobile thead {
    display: none;
  }

  table.table-stack-mobile tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 0.5rem;
  }

  table.table-stack-mobile td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
  }

  table.table-stack-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 1rem;
  }
}

/* ==========================================================================
   10. FIX: Formulaires responsives
   ========================================================================== */

input,
textarea,
select {
  max-width: 100% !important;
  width: 100%;
}

@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Évite le zoom sur iOS */
    min-height: 44px;
    padding: 0.625rem;
  }

  /* Formulaires en colonnes */
  .form-row,
  .form-group {
    flex-direction: column !important;
  }

  .form-row > *,
  .form-group > * {
    width: 100% !important;
    margin-bottom: 0.75rem;
  }
}

/* ==========================================================================
   11. FIX: Footer responsive
   ========================================================================== */

@media (max-width: 767px) {
  .footer,
  footer {
    text-align: center;
  }

  .footer-columns,
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .footer-column,
  .footer-col {
    width: 100% !important;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .footer-links a {
    padding: 0.5rem;
  }
}

/* ==========================================================================
   12. FIX: Modal/Popup responsive
   ========================================================================== */

.modal,
.popup,
[class*="modal"],
[class*="popup"] {
  max-width: 95vw !important;
  max-height: 90vh !important;
  overflow-y: auto;
}

@media (max-width: 479px) {
  .modal,
  .popup {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   13. FIX: Slider/Carousel responsive
   ========================================================================== */

.slider,
.carousel,
.swiper,
[class*="slider"],
[class*="carousel"] {
  max-width: 100%;
  overflow: hidden;
}

.slider img,
.carousel img,
.swiper img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   14. FIX: Vidéos responsives
   ========================================================================== */

video,
iframe[src*="youtube"],
iframe[src*="vimeo"],
.video-container,
.embed-responsive {
  max-width: 100%;
  width: 100%;
}

.video-container,
.embed-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video,
.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   15. FIX: Scroll horizontal non désiré
   ========================================================================== */

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Conteneur principal */
.wrapper,
.page-wrapper,
#wrapper,
main {
  overflow-x: hidden;
  max-width: 100%;
}

/* ==========================================================================
   16. FIX: Mode sombre - Couleur d'accent cohérente
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Garder la couleur de marque au lieu de passer au rouge */
    --color-primary: #2c2c2c !important;
    --color-accent: #a8906f !important; /* Version claire du marron signature */
  }
}

/* ==========================================================================
   17. FIX: Animations désactivées si préférence
   ========================================================================== */

@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;
  }
}

/* ==========================================================================
   18. FIX: Cacher le bloc blog sur les pages catégorie
   ========================================================================== */

/* Masquer "Categories from the blog" sur les pages produits/catégorie */
#category .columns_everblog_wrapper.category_wrapper,
#products .columns_everblog_wrapper.category_wrapper,
.category-page .columns_everblog_wrapper.category_wrapper,
section#main .columns_everblog_wrapper.category_wrapper {
  display: none !important;
}

/* ========================================
   ACCESSIBILITE - Skip Link - 2025-12-23
   ======================================== */

/* Skip Link - invisible par défaut, visible au focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c3e50;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 100000;
  transition: top 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #f39c12;
  outline-offset: 2px;
}

.skip-link:hover {
  background: #34495e;
  color: #ffffff;
  text-decoration: none;
}

/* Ancre main-content invisible */
#main-content {
  outline: none;
}

/* Focus visible pour tous les éléments interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #8b7355;
  outline-offset: 2px;
}

/* Amélioration focus pour le zoom produit */
.layer[role="button"]:focus {
  outline: 3px solid #8b7355;
  outline-offset: 2px;
  background: rgba(139, 115, 85, 0.8);
}

/* Lecteur d'écran only - classe utilitaire */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ========================================
   FONT DISPLAY SWAP - 2025-12-23
   Évite le FOIT (Flash of Invisible Text)
   ======================================== */

/* Override font-face pour ajouter font-display: swap */
@font-face {
  font-family: "Manrope";
  font-display: swap;
}

/* Material Icons - force swap */
.material-icons {
  font-display: swap;
}