/* ==================================================================
   File: custom-accueil-contrast-cls.css
   Purpose: Safe merge of custom-accueil-contrast.css + custom-cls-fix.css
   Notes:
   - Order preserved: accueil+contrast first, then CLS fixes (to ensure reserved space applies).
   - No change to menu base color (keeps white on blue) and slider styles.
   - CLS fixes scoped to product thumbs and slideshow to avoid layout regressions.
   Version: 2025-10-04
   ================================================================== */

/* ===== BEGIN: custom-accueil-contrast.css ===== */

/* ==================================================================
   File: custom-accueil-contrast.css
   Purpose: Safe merge of custom-accueil.css + custom-contrast.css
   Notes:
   - Keeps current homepage/header layout rules.
   - Removes the base color conflict for #menu links (keeps white on blue).
   - All other contrast/accessibility improvements preserved.
   - If your navbar has a light background, change the color at the end
     in the '#menu .nav > li > a' rule to #222 (or adjust variables).
   Version: 2025-10-04
   ================================================================== */

/* ==========================
   VARIABLES (logo + slider)
   ========================== */
:root {
  /* Logo */
  --logo-size-desktop: 150px;
  --logo-size-mobile: 100px;

  /* Slider titles */
  --title-size-pc: 2.0rem;
  --title-size-mobile: 0.8rem;
  --title-color: #000000;
  --title-font: Arial, sans-serif;
  --title-weight: 700;

  /* Slider buttons */
  --btn-size-pc: 1.2rem;
  --btn-size-mobile: 1rem;
  --btn-padding-pc: 14px 28px;
  --btn-padding-mobile: 10px 20px;
  --btn-radius: 8px;
  --btn-font: Arial, sans-serif;
  --btn-color: #fff;
  --btn-bg: #000000;
  --btn-bg-hover: #333333;

  /* Slider pagination */
  --bullet-size: 12px;
  --bullet-color: #fff;
  --bullet-border: #007BFF;
  --bullet-active: #007BFF;
}

/* ==================================================================
   >>> BEGIN: custom-accueil.css (kept as-is, except variables consolidated)
   ================================================================== */

/* LOGO */
#logo img {
  max-width: var(--logo-size-desktop);
  height: auto;
  display: block;
}

/* Logo en mobile */
@media (max-width: 575px) {
  #logo {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #logo img {
    max-width: var(--logo-size-mobile);
    margin: 0 !important;
  }
}

/* Alignement Header : Logo + Recherche + Panier */
.header-align-fix {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Moteur de recherche */
.search-zone {
  flex: 0 0 940px;
  display: flex;
  align-items: center;
}

/* Panier */
.cart-zone {
  flex: 0 0 340px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 35px;
  margin-left: auto;
  margin-right: 10px;
}

/* Responsive Tablette */
@media (max-width: 991px) {
  .search-zone { flex: 0 0 70%; min-width: 300px; }
  .cart-zone   { flex: 0 0 200px; }
}

/* TOP LINKS */
#top-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}
#top-links .fa-phone,
#top-links .fa-user,
#wishlist-total .fa-heart {
  font-size: 24px;
  color: #555;
}
#top-links li:first-child span {
  font-size: 22px;
  font-weight: 600;
  color: #000;
}
#top-links .dropdown > a span {
  font-size: 22px;
  font-weight: 500;
  color: #111;
}
#wishlist-total span {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  background: #f8f9fa;
  padding: 3px 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}
#top-links li { margin-left: 12px; }
#top-links a:hover i { color: #007bff; }
#top-links a span { border-bottom: 2px solid transparent; transition: border-color 0.3s ease; }
#top-links a:hover span { border-bottom: 2px solid #007bff; }
#wishlist-total:hover span { background: #007bff; color: #fff; }
@media (max-width: 768px) {
  #top-links li span, #wishlist-total span { font-size: 16px; }
}

/* PRODUITS VEDETTE */
.featured-buttons { display: flex; width: 100%; }
.featured-buttons .add_cart { flex: 1; border-radius: 0; text-align: center; }
.featured-buttons button[onclick^="wishlist.add"] {
  width: 50px; min-width: 50px; text-align: center; border-left: 1px solid #ddd;
}

/* MOBILE : logo + recherche + panier pleine largeur */
@media (max-width: 575px) {
  .header-align-fix { flex-direction: column; align-items: stretch; gap: 5px; margin:0; padding:0; }
  #logo { margin:0 !important; padding:0 !important; display:flex; justify-content:flex-start; align-items:flex-start; }
  #logo img { max-width: var(--logo-size-mobile); margin:0 !important; display:block; }

  .header-align-fix > div[style*="flex:0 0 958px"],
  .header-align-fix > div[style*="flex:0 0 940px"],
  .search-zone {
    flex: 1 1 100% !important; width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 !important; display:flex !important;
  }
  .header-align-fix > div[style*="flex:0 0 958px"] #me_search,
  .header-align-fix > div[style*="flex:0 0 940px"] #me_search { flex:1 1 100% !important; width:100% !important; max-width:100% !important; }

  .header-align-fix > div[style*="flex:0 0 299px"],
  .header-align-fix > div[style*="flex:0 0 340px"],
  .cart-zone {
    flex:1 1 100% !important; width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 !important; display:flex !important; justify-content:center !important;
  }
  .header-align-fix > div[style*="flex:0 0 299px"] #cart,
  .header-align-fix > div[style*="flex:0 0 340px"] #cart,
  .header-align-fix > div[style*="flex:0 0 299px"] button,
  .header-align-fix > div[style*="flex:0 0 340px"] button { width:100% !important; display:block !important; text-align:center !important; }
}

/* Correction mobile : logo + search */
@media (max-width: 575px) {
  .header-align-fix { margin:0 !important; padding:0 !important; gap:5px !important; align-items:flex-start !important; }
  #logo { margin:0 !important; padding:0 !important; }
  #logo img { max-width: var(--logo-size-mobile); margin:0 !important; display:block; }
  .header-align-fix > div[style*="flex:0 0 958px"],
  .header-align-fix > div[style*="flex:0 0 940px"],
  .search-zone, #me_search, #me_search > * {
    flex:1 1 100% !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important;
  }
  #me_search_input { width:100% !important; }
  .cart-zone,
  .header-align-fix > div[style*="flex:0 0 299px"],
  .header-align-fix > div[style*="flex:0 0 340px"] {
    flex:1 1 100% !important; width:100% !important; margin:0 !important; padding:0 !important;
  }
}

/* Logo aligné automatiquement avec #top-links (MOBILE) */
@media (max-width: 575px) {
  .header-align-fix { display:flex; flex-direction:column; align-items:stretch; }
  #logo { align-self:flex-start; margin:0 !important; padding:0 !important; }
  #logo img { max-width: var(--logo-size-mobile); height:auto; display:block; }
  #logo, #top-links { display:flex; align-items:center; }
}

/* Correction MOBILE : Logo vraiment collé en haut à gauche */
@media (max-width: 575px) {
  .header-align-fix { flex-direction:column; align-items:stretch; margin:0 !important; padding:0 !important; gap:5px !important; }
  #logo { margin:0 !important; padding:0 !important; display:flex; justify-content:flex-start; align-items:flex-start; }
  #logo img { max-width: var(--logo-size-mobile); height:auto; display:block; margin:0 !important; }
  .search-zone,
  .header-align-fix > div[style*="flex:0 0 940px"],
  .header-align-fix > div[style*="flex:0 0 958px"],
  #me_search {
    flex:1 1 100% !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; display:flex !important;
  }
  #me_search_input { width:100% !important; }
  .cart-zone,
  .header-align-fix > div[style*="flex:0 0 299px"],
  .header-align-fix > div[style*="flex:0 0 340px"] {
    flex:1 1 100% !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important;
    display:flex !important; justify-content:center !important;
  }
  .cart-zone #cart, .cart-zone button { width:100% !important; text-align:center !important; }
}

/* Correction MOBILE : logo vraiment collé tout en haut */
@media (max-width: 575px) {
  nav#top, nav#top .container, .header-align-fix { margin-top:0 !important; padding-top:0 !important; }
  #logo { margin-top:0 !important; padding-top:0 !important; }
}

/* Correction MOBILE : Logo vraiment collé en haut de la page */
@media (max-width: 575px) {
  nav#top, nav#top .container, .header-align-fix { margin-top:0 !important; padding-top:0 !important; }
  .header-align-fix > div[style*="max-width:220px"] { margin:0 !important; padding:0 !important; flex:0 0 auto !important; }
  #logo { margin:0 !important; padding:0 !important; display:flex; justify-content:flex-start; align-items:flex-start; }
  #logo img { max-width: var(--logo-size-mobile); margin:0 !important; display:block; }
}

/* LOGO collé vraiment tout en haut (au-dessus de la barre top) */
@media (max-width: 575px) {
  #logo { position:absolute; top:5px; left:10px; z-index:1000; }
  .header-align-fix { margin-top:60px; }
}
@media (max-width: 575px) {
  .header-align-fix { margin-top:50px; }
  #top-links .fa-phone, #top-links .fa-user, #wishlist-total .fa-heart { font-size:30px; }
  #top-links li span { font-size:18px; }
}

/* Décalage haut des icônes Top-links (mobile) */
@media (max-width: 575px) {
  #top-links { margin-top:12px; }
}

/* Réduction espace entre le panier et le menu (mobile) */
@media (max-width: 575px) {
  .cart-zone, #cart { margin-bottom:0 !important; }
  nav#menu { margin-top:0 !important; }
}

/* PANIER - Optimisation responsive + accessibilité */
#cart button, #cart .btn {
  font-size:16px !important; font-weight:600; line-height:1.4;
  padding:10px 14px; color:#fff !important; background-color:#0d0d0d !important; border-color:#0d0d0d !important;
}
#cart i.fa-shopping-cart { font-size:20px !important; margin-right:6px; color:#ffffff !important; }
@media (max-width: 991px) {
  #cart button, #cart .btn { font-size:17px !important; }
  #cart i.fa-shopping-cart { font-size:22px !important; }
}
@media (max-width: 575px) {
  #cart button, #cart .btn { font-size:18px !important; padding:12px 16px; }
  #cart i.fa-shopping-cart { font-size:24px !important; }
}
@media (max-width: 575px) {
  #cart button:active, #cart button:focus, #cart button:hover {
    background-color:#1a1a1a !important; border-color:#1a1a1a !important; color:#007bff !important; transition:all 0.2s ease;
  }
  #cart button:active i, #cart button:focus i, #cart button:hover i { color:#007bff !important; transform:scale(1.1); }
}

/* Correction finale espace (mobile) : menu ↔ slideshow */
@media (max-width: 575px) {
  .cart-zone { margin-top:5px !important; margin-bottom:5px !important; }
  nav#menu { margin-bottom:5px !important; }
  #deco_fond, #common-home .container.deco_fond, #common-home .row, #common-home #content { margin:0 !important; padding:0 !important; }
  #common-home .swiper-viewport { margin-top:5px !important; margin-bottom:5px !important; padding:0 !important; }
}

/* Menu Catégories - lisibilité (PC & SEO) */
#menu .nav > li > a,
#menu .nav > li > span {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #fff !important; /* assure contraste sur fond bleu */
}
#menu .dropdown-menu > li > a { font-size:16px !important; font-weight:500; line-height:1.4; }

/* SLIDER STYLES (overlay + buttons + swiper) */
.slider-overlay { position:absolute; z-index:10; max-width:90%; padding:10px 15px; text-align:center; }
.slider-title {
  font-size: var(--title-size-pc); font-weight: var(--title-weight); line-height:1.3;
  color: var(--title-color); font-family: var(--title-font); margin:0 0 10px;
  text-shadow:0 2px 5px rgba(0,0,0,0.4); position:relative;
}
.overlay-top-center .slider-title { color:#000000; font-size:2.5rem; }

[class^="btn-slider-"] {
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--btn-padding-pc); font-size:var(--btn-size-pc); font-family:var(--btn-font);
  font-weight:600; text-transform:uppercase; border-radius:var(--btn-radius); text-decoration:none;
  transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  color:var(--btn-color); background:var(--btn-bg); border:none; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.25);
}
[class^="btn-slider-"]:hover { background:var(--btn-bg-hover); transform:scale(1.05); box-shadow:0 6px 12px rgba(0,0,0,0.3); }
[class^="btn-slider-"]:active { transform:scale(0.95); background:var(--btn-bg-hover); box-shadow:0 2px 4px rgba(0,0,0,0.2); transition:transform 0.1s ease; }

/* Positions prédéfinies */
.overlay-top-left{top:20px;left:20px;text-align:left;}
.overlay-top-center{top:20px;left:50%;transform:translateX(-50%);text-align:center;}
.overlay-top-center-high{top:5px;left:50%;transform:translateX(-50%);text-align:center;}
.overlay-top-right{top:20px;right:20px;text-align:right;}
.overlay-middle-left{top:50%;left:20px;transform:translateY(-50%);text-align:left;}
.overlay-middle-center{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.overlay-middle-right{top:50%;right:20px;transform:translateY(-50%);text-align:right;}
.overlay-bottom-left{bottom:20px;left:20px;text-align:left;}
.overlay-bottom-center{bottom:20px;left:50%;transform:translateX(-50%);text-align:center;}
.overlay-bottom-right{bottom:0px;right:50px;text-align:right;}

.overlay-inline{display:flex;align-items:center;gap:10px;justify-content:center;}
.overlay-inline .slider-title{margin:0;}

/* Mobile slider adaptations */
@media (max-width: 767px) {
  .slider-title { display:none !important; }
  [class^="btn-slider-"] {
    font-size:0.9rem; padding:8px 16px; min-height:44px; min-width:100px;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .slider-overlay {
    max-width:95%; padding:8px; bottom:0px; right:0px; left:auto; top:auto; text-align:right; transform:none;
  }
  .slider-overlay span[class^="btn-slider-"] {
    margin:0; display:inline-block; pointer-events:auto; cursor:pointer;
    transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .slider-overlay span[class^="btn-slider-"]:active {
    transform:scale(0.92); background:var(--btn-bg-hover); box-shadow:0 2px 4px rgba(0,0,0,0.2);
  }
  .slider-overlay a[class^="btn-slider-"],
  .slider-overlay button[class^="btn-slider-"],
  .slider-overlay span[class^="btn-slider-"] {
    display:flex !important; align-items:center !important; justify-content:center !important;
    text-align:center; line-height:1.2;
  }
}

/* SWIPER pagination */
.swiper-pagination { bottom:12px !important; text-align:center; }
.swiper-pagination-bullet {
  width:var(--bullet-size); height:var(--bullet-size); background:var(--bullet-color);
  border:2px solid var(--bullet-border); border-radius:50%; opacity:0.6; transition:all 0.3s ease; margin:0 5px !important;
}
.swiper-pagination-bullet-active { background:var(--bullet-active); opacity:1; transform:scale(1.2); }

/* Supprimer les flèches */
.swiper-button-next, .swiper-button-prev { display:none !important; }

/* Lien global image + bouton (slider-link) */
.slider-link { display:block; position:relative; text-decoration:none; color:inherit; }
.slider-link img.slider-img { width:100%; height:auto; display:block; }

/* ==================================================================
   >>> END: custom-accueil.css
   ================================================================== */


/* ==================================================================
   >>> BEGIN: custom-contrast.css (merged; base menu color conflict removed)
   ================================================================== */

/* Menu principal (HOVER/OPEN uniquement - conserve le texte blanc au repos) */
#menu .nav > li > a:hover,
#menu .nav.open > a {
  color: #fff !important;
  background-color: #0074cc !important;
}

/* Bouton Ajouter au panier */
.add_cart { background-color:#0074cc !important; color:#fff !important; }
.add_cart:hover { background-color:#005fa3 !important; }

/* Bouton Wishlist (cœur) */
.button-group button .fa-heart { color:#cc0000 !important; }

/* Titres & textes produits / blog */
.product-thumb h4 a, .product-thumb p { color:#222 !important; }

/* Accessibilité visuelle pour lecteurs d’écran */
.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;
}

/* Boutons CTA pour liens SEO */
.seo-links { list-style:none; padding:0; }
.seo-links li { margin-bottom:10px; }
.seo-links .cta-link {
  display:block; padding:14px 18px; font-size:16px; background-color:#0074cc;
  color:#fff !important; border-radius:6px; text-align:center; text-decoration:none;
  transition:background-color 0.2s ease-in-out;
}
.seo-links .cta-link:hover { background-color:#005fa3; }

/* Liens footer (PC) */
footer .list-unstyled li a {
  display:inline-block; padding:4px 0; min-height:auto; font-size:15px; line-height:1.4;
}
footer .list-unstyled li { margin-bottom:2px; }

/* Zones tactiles accessibles sur mobile */
@media (max-width: 767px) {
  footer .list-unstyled li a { padding:10px 0; min-height:48px; }
  footer .list-unstyled li { margin-bottom:6px; }
}

/* Lisibilité liens "Lire la suite" */
.description a { color:#0074cc !important; text-decoration:underline; font-weight:600; }
.description a:hover, .description a:focus { color:#005fa3 !important; text-decoration:underline; }

/* Correctifs contraste - Produits Vedette */
.featured .price-new, .product-layout .price-new, .product-thumb .price-new {
  color:#000000 !important; font-weight:700;
}
.featured .price-old, .product-layout .price-old, .product-thumb .price-old {
  color:#a00000 !important; text-decoration:line-through; font-weight:600;
}
.featured .price-tax, .product-layout .price-tax, .product-thumb .price-tax {
  color:#333333 !important; font-size:90%;
}
.featured a, .product-layout a, .product-thumb a { color:#003366 !important; font-weight:600; }
.featured a:hover, .product-layout a:hover, .product-thumb a:hover { color:#ff6600 !important; }

/* ==================================================================
   >>> END: custom-contrast.css
   ================================================================== */


/* ===== BEGIN: custom-cls-fix.css ===== */
/* ============================================================
   CLS FIX MINIMAL & REVERSIBLE (produits + logo + slider)
   - Scopé finement pour ne rien casser
   - Supprimez ce fichier pour rollback instantané
   ============================================================ */

/* ---------- Produits : réserve l’espace sans déformer ---------- */
.product-thumb .image,
.product-layout .product-thumb .image,
.product-grid .product-thumb .image,
.product-list .product-thumb .image {
  position: relative;
  /* Réserve un carré (adapter si vos vignettes ne sont pas carrées) */
  aspect-ratio: 1 / 1;
  overflow: hidden; /* évite les débordements */
}

.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit le cadre sans étirer */
  display: block;
}

/* Si tes vignettes sont 4:3 au lieu de 1:1, remplace par: aspect-ratio: 4 / 3; */


/* ---------- Slideshow / bannières : bloque la hauteur ---------- */
.slideshow .swiper-container,
.slideshow .swiper,
#slideshow0,
#slideshow {             /* adapte selon l’ID de ton module */
  min-height: 310px;     /* ta hauteur admin PC (ex: 1200x310) */
}

/* Image du slide : occupe l’espace réservé sans shift */
.slideshow img,
#slideshow img,
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Mobile : hauteur de slide plus compacte si besoin ---------- */
@media (max-width: 767px) {
  .slideshow .swiper-container,
  .slideshow .swiper,
  #slideshow0,
  #slideshow {
    min-height: 220px;   /* ajuste selon tes visuels mobiles */
  }
}

/* ---------- Police : atténue le shift lié aux fonts externes ---------- */
/* Si tu utilises une @font-face custom, assure-toi d’avoir `font-display: swap;` dans ta feuille principale.
   Ici on ajoute un fallback propre pour limiter le “reflow” de titre à texte. */
html {
  text-rendering: optimizeLegibility;
}

/* ---------- Divers : évite les flashes d’éléments tardifs ---------- */
img { /* ne force PAS une largeur globale (pour ne pas casser ailleurs) */
  /* intentionally blank: on laisse les règles précédentes, bien ciblées */
}