.catalog-hero{background: url('/images/hero-index.png') center 75%/cover no-repeat; color:#fff; text-align:center; padding:80px 20px; position:relative;}
    .catalog-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
    .catalog-hero .container{position:relative;z-index:1}
    .produits-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;align-items:stretch}
    .produit-item{background:#fff;border-radius:18px;box-shadow:0 8px 28px rgba(0,0,0,.08);padding:18px;display:flex;flex-direction:column}
    .produit-item .image-preview{display:block;position:relative;border-radius:14px;overflow:hidden;margin-bottom:12px}
    .produit-item .image-preview img{display:block;width:100%;height:auto}
    .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 0 14px}
    .price-badge{display:inline-block;background:#C7B299;color:#111;padding:8px 12px;border-radius:9999px;font-weight:700}
    .price-note{font-size:.9rem;color:#555;margin:0}
    .btn-wrap{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
    .label{display:inline-block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:#f5efe7;color:#7a6a56;border:1px solid #e3d9c9;border-radius:9999px;padding:4px 10px}
	  

/* Place le prix et la note sur une ligne, centrés verticalement */
.price-row{
  display:flex;
  align-items:center;     /* ⇦ centrage vertical */
  gap:10px;               /* espace entre l’étiquette et la note */
  overflow:visible;       /* évite tout rognage visuel du SVG */
}
.price-row .ws-price-tag{ /* le SVG */
  flex:0 0 auto;
  display:block;          /* supprime l’espace baseline des inline-SVG */
}
.price-row .price-note{   /* la note à droite */
  margin:0;
  line-height:1.1;
  font-size:.95rem;
  font-weight:400;
  color:#222;
  white-space:nowrap;     /* évite le retour à la ligne */
  font-style: italic;      /* italique */
  transform: translateY(-10px); /* remonte un peu (optique) */
}

/* Mobile : texte plus grand et sans décalage */
@media (max-width: 768px){  .price-row .price-note{    font-size: clamp(1rem, 3.8vw, 1.25rem);    line-height: 1.25;  } }
/* Très petit écran : autoriser le retour à la ligne si besoin */
@media (max-width: 360px){  .price-row .price-note{    white-space: normal; /* au lieu de nowrap */  } }




	  /* ==== Produits : variante 3 colonnes alignée sur la largeur standard ==== */
.produits-container.cols-3{
  display: grid;                         /* remplace flex par grid */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  position: relative;                    /* garde le repère pour .compare-between si besoin */
}
.produits-container.cols-3 .produit-item{
  max-width: none;                       /* enlève le 48% hérité du layout 2 colonnes */
  flex: initial;                         /* neutralise le flex du layout 2 colonnes */
}

/* Responsive : 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 767.98px){
  .produits-container.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
  
	  
	  /* Centrer les CTA dans les cartes (catalogue en 3 colonnes) */
.produits-container.cols-3 .produit-item .btn-wrap{
  display: flex;
  flex-direction: column;   /* Détails au-dessus, Acheter en dessous */
  align-items: center;      /* centrage horizontal */
  justify-content: center;
  gap: 8px;
  text-align: center;
}

/* Bouton Comparer placé entre les 2 premières colonnes */
.compare-inline{
  grid-column: 1 / 3;                 /* occupe les colonnes 1 et 2 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 1000px){
  .compare-inline{ grid-column: 1 / -1; }  /* s'étend sur toute la ligne quand la grille passe à 2/1 col. */
}

	  /* --- Grille 3 colonnes (on s'assure du layout) --- */
.produits-container.cols-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 26px;
  grid-auto-flow: row; /* évite que les items changent de ligne de façon imprévisible */
}

/* --- CTA centrés dans chaque carte --- */
.produits-container .produit-item .btn-wrap{
  display: flex;
  flex-direction: column;   /* Détails au-dessus, Acheter en dessous */
  align-items: center;      /* centre horizontalement */
  gap: 8px;
  text-align: center;
}
.produits-container .produit-item .btn-wrap .btn{
  width: 100%;
  max-width: 260px;         /* joli centrage sans faire 100% de la colonne */
}

/* --- Bouton "Comparer" calé entre les 2 premières colonnes --- */
.compare-inline{
  grid-column: 1 / 3;       /* occupe les colonnes 1 et 2 */
  grid-row: 2;              /* forcé sur la 2e ligne, sous les deux cartes */
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1000px){
  .compare-inline{
    grid-column: 1 / -1;    /* en responsive, on le met pleine largeur */
    grid-row: auto;
  }
}

	  /* Séparateur + wrapper du bouton Comparer (même logique qu'index) */
.compare-between{
  display:flex; align-items:center; gap:14px;
  position:absolute;               /* flottant sur desktop, centré via JS */
  left:50%; transform:translate(-50%, -50%);
  z-index:5;
}
.compare-sep .sep-line{
  display:inline-block; height:1px; width:52px; opacity:.5;
  background:linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,.35), rgba(0,0,0,.0));
  border-radius:999px;
}
.btn-compare .txt-long{ display:none; }
@media (min-width: 1000px){
  .btn-compare .txt-short{ display:none; }
  .btn-compare .txt-long{ display:inline; }
}
/* Mobile/Tablet : on remet dans le flux, pas de positionnement absolu */
@media (max-width: 767.98px){
  .compare-between{ position:static; transform:none; left:auto; }
}
	  
	  /* Affichage du texte du bouton "Comparer" selon le viewport */
.btn-compare .txt-mobile { display:inline; }   /* par défaut: mobile */
.btn-compare .txt-desktop { display:none; }

@media (min-width: 1000px){
  .btn-compare .txt-mobile { display:none !important; }   /* desktop/tablette */
  .btn-compare .txt-desktop { display:inline !important; }
}

/* Bouton Comparer – ajustement mobile */
.btn-compare {
  white-space: normal;   /* autorise le retour à la ligne si nécessaire */
  text-align: center;    /* centre le texte multi-ligne */
  padding: 10px 14px;    /* un peu plus de respiration */
  line-height: 1.3;
}

@media (max-width: 1000px){
  .btn-compare {
    font-size: 0.95rem;   /* réduit légèrement la taille du texte */
    max-width: 90%;       /* limite la largeur pour ne pas coller aux bords */
  }
}
	  
	  /* Corrige largeur du bouton Comparer sur mobile */
@media (max-width: 1000px){
  .btn-compare {
    max-width: 100% !important;  /* occupe toute la largeur dispo */
    width: 100% !important;      /* force le bouton à s'étendre */
    font-size: 0.9rem;           /* ajuste un peu la taille */
    white-space: normal;         /* autorise retour ligne */
    padding: 12px;               /* un peu plus d’air */
    box-sizing: border-box;      /* inclus padding dans la largeur */
  }
}

/* Grille 3 colonnes desktop */
.produits-container.cols-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:26px;
  grid-auto-flow: row;
  position: relative; /* pour positionner le bouton en absolu sur desktop */
}

/* ➜ Jamais 2 colonnes : dès 1023px et moins, on passe à 1 colonne */
@media (max-width: 767.98px){
  .produits-container.cols-3{ grid-template-columns: 1fr; }
}

/* Texte différent mobile/desktop */
.btn-compare .txt-mobile  { display:inline; }
.btn-compare .txt-desktop { display:none;  }
@media (min-width:1000px){
  .btn-compare .txt-mobile  { display:none !important; }
  .btn-compare .txt-desktop { display:inline !important; }
}

	  @media (max-width: 767.98px){
  .compare-between{
    position: static;      /* bouton reste dans le flux */
    transform: none;
    left: auto;
    justify-content: center;  /* ✅ centre le bouton horizontalement */
    width: 100%;              /* occupe toute la ligne */
  }

  .btn-compare{
    display: inline-block; /* bouton centré par justify-content */
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
    font-size: 0.95rem;
    box-sizing: border-box;
  }
}


/* Traits de séparation (comme index) */
.compare-between{
  display:flex; align-items:center; gap:14px;
  position:absolute; left:50%; transform:translate(-50%, -50%); z-index:5;
}
.compare-sep .sep-line{
  display:inline-block; height:1px; width:52px; opacity:.5;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.35), rgba(0,0,0,0));
  border-radius:999px;
}

/* ===== MOBILE ≤1023px : 1 seule colonne + centrage VRAI du bloc bouton ===== */
@media (max-width: 767.98px){

  /* 1) La grille passe bien à 1 colonne et centre les items par défaut */
  .produits-container.cols-3{
    grid-template-columns: 1fr;   /* jamais 2 colonnes */
    justify-items: center;        /* centre CHAQUE item dans la colonne */
  }

  /* 2) Le bloc "Comparer" en tant qu'item de grille est centré */
  .produits-container.cols-3 > .compare-between{
    justify-self: center;         /* centre l’item lui-même */
    width: 100%;                  /* prend la ligne pour mieux centrer son contenu */
    max-width: 720px;             /* limite confortable */
    position: static;             /* pas d'absolu en mobile */
    transform: none; left: auto;  /* sécurité */
    display: flex;
    justify-content: center;      /* centre le bouton à l’intérieur */
    align-items: center;
    gap: 14px;
  }

  /* 3) On évite l’effet visuel "décalé" : on masque les traits ou on les rend symétriques */
  .compare-sep .sep-line{
    display: inline-block;   /* on NE les cache plus */
    width: 40px;             /* version courte en mobile si tu veux */
  }

  /* 4) Le bouton lui-même ne déborde pas et reste bien centré */
  .btn-compare{
    display: block;
    width: 100%;
    max-width: 560px;             /* texte long OK sur 1–2 lignes */
    margin: 0 auto;               /* centre le bouton s'il est plus étroit que 100% */
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }
}

	  /* === Bouton beige pour "Détails" (cohérent avec la charte) === */
.btn-beige{
  background:#C7B299;
  color:#111;
  border:1px solid #B89F82;
  border-radius:9999px;
  padding:10px 18px;
  font-weight:600;
  transition:.2s ease;
  box-shadow:0 6px 16px rgba(199,178,153,.25);
}
.btn-beige:hover{ filter:brightness(.96); transform:translateY(-1px); }
.btn-beige:active{ transform:translateY(0); }


/* === Barres beiges de part et d’autre du bouton "Comparer" === */
.compare-between{ display:flex; align-items:center; gap:14px; }
.compare-sep .sep-line{
  display:inline-block;
  height:2px;
  width:64px;
  background:linear-gradient(90deg, rgba(199,178,153,0), #C7B299, rgba(199,178,153,0));
  border-radius:999px;
  opacity:1;
}

/* === Libellé long uniquement sur mobile, court sur desktop === */
.btn-compare .txt-mobile{ display:inline; }
.btn-compare .txt-desktop{ display:none; }
@media (min-width:1000px){
  .btn-compare .txt-mobile{ display:none !important; }
  .btn-compare .txt-desktop{ display:inline !important; }
}

/* === Bouton "Comparer" bien centré et lisible sur mobile === */
@media (max-width: 767.98px){
  .produits-container.cols-3{
    grid-template-columns:1fr;      /* 3 ➜ 1 colonne, jamais 2 */
    justify-items:center;           /* centre chaque item */
  }
  .produits-container.cols-3 > .compare-between{
    justify-self:center; width:100%; max-width:720px;
    position:static; transform:none; left:auto;
    justify-content:center;
  }
  .compare-sep .sep-line{ width:40px; }  /* barres beiges visibles aussi en mobile */
  .btn-compare{
    display:block; width:100%; max-width:560px;
    white-space:normal; text-align:center; line-height:1.3;
    padding:12px; box-sizing:border-box; font-size:.95rem;
    margin:0 auto;
  }
}

/* === Garde tes CTA centrés dans chaque carte === */
.produits-container .produit-item .btn-wrap{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.produits-container .produit-item .btn-wrap .btn{
  width:100%; max-width:260px;
}

	
	  /* Grille : 3 colonnes desktop, 1 colonne mobile (jamais 2) */
.produits-container.cols-3{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:26px; grid-auto-flow:row; position:relative;
}
@media (max-width: 767.98px){
  .produits-container.cols-3{ grid-template-columns:1fr; }
}

/* Mobile : le bloc "Comparer" reste dans le flux à cet endroit du DOM */
@media (max-width: 767.98px){
  .produits-container.cols-3 > .compare-between{
    position: static; transform:none; left:auto; /* pas d'absolu */
    justify-self:center; width:100%; max-width:720px;
    display:flex; justify-content:center; align-items:center; gap:14px;
  }
}
	  
	  /* ======= FIX MOBILE : bouton Comparer après les 2 boards, avant les bandes ======= */
@media (max-width: 767.98px){

  /* 1) Toujours 1 colonne en mobile */
  .produits-container.cols-3{
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  /* 2) Le bloc Comparer reste un VRAI item de grille à sa place du DOM */
  .produits-container.cols-3 > .compare-between{
    position: static !important;     /* neutralise toutes les positions absolues */
    grid-column: 1 / -1 !important;  /* prend toute la ligne à l’endroit exact du DOM */
    transform: none !important;
    left: auto !important;
    justify-self: center;            /* centre le bloc dans la colonne */
    width: 100%;
    max-width: 720px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }

  /* 3) Bouton lisible et centré */
  .btn-compare{
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  /* 4) (option) barres beiges : réduites pour ne pas sembler décaler */
  .compare-sep .sep-line{ width: 40px; }
}

/* ===== OVERRIDES FINAUX — NEUTRALISE LES RÈGLES CONTRADICTOIRES ===== */

/* 3 colonnes desktop, 1 colonne ≤ 1023px (jamais 2) */
.produits-container.cols-3{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  grid-auto-flow: row !important;
  position: relative !important; /* repère pour le centrage desktop */
}
@media (max-width: 767.98px){
  .produits-container.cols-3{
    grid-template-columns: 1fr !important;   /* ✅ 1 seule colonne */
    justify-items: center;                    /* centre chaque item */
  }
}

/* Le bloc "Comparer" reste un item de grille AU BON ENDROIT en mobile */
@media (max-width: 767.98px){
  .produits-container.cols-3 > .compare-between{
    position: static !important;              /* sort de l'absolu */
    left: auto !important; transform: none !important; top: auto !important;
    grid-column: 1 / -1 !important;           /* sa propre ligne, centré */
    grid-row: auto !important;
    justify-self: center !important;
    width: 100%; max-width: 720px;
    display: flex; justify-content: center; align-items: center; gap: 14px;
  }
  /* barres visibles et symétriques en mobile */
  .compare-sep .sep-line{ display: inline-block !important; width: 40px !important; }
}

/* Nettoyage : désactive TOUT effet résiduel de .compare-inline */
.compare-inline{ display: none !important; }
@media (max-width:1000px){
  .compare-inline{ display: none !important; }
}

/* Texte du bouton */
.btn-compare .txt-mobile{ display:inline; }
.btn-compare .txt-desktop{ display:none; }
@media (min-width:1000px){
  .btn-compare .txt-mobile{ display:none !important; }
  .btn-compare .txt-desktop{ display:inline !important; }
}

/* Bouton lisible en mobile */
@media (max-width:1000px){
  .btn-compare{
    display:block; width:100%; max-width:560px; margin:0 auto;
    white-space:normal; text-align:center; line-height:1.3; padding:12px;
    box-sizing:border-box; font-size:.95rem;
  }
}
	  
	/* ========= PATCH MINIMAL (à coller tout en bas) ========= */

/* Source de vérité responsive : 3 colonnes desktop -> 1 colonne <=1000px (jamais 2) */
.produits-container.cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  position: relative !important;
}
@media (max-width: 767.98px){
  .produits-container.cols-3{
    grid-template-columns: 1fr !important;
    justify-items: center; /* centre chaque item en 1 colonne */
  }
}

/* En mobile, le bloc "Comparer" redevient un VRAI item de grille,
   placé ENTRE les 2 boards et les bandes, quel que soit l'ordre du DOM */
@media (max-width: 767.98px){
  .produits-container.cols-3 > .compare-between,
  .produits-container.cols-3 > .compare-inline{
    position: static !important;     /* sort de l'absolu */
    top: auto !important;
    left: auto !important;
    transform: none !important;

    grid-column: 1 / -1 !important;  /* prend toute la ligne */
    grid-row: 3 !important;          /* ✅ forcer l’item APRÈS la 2e carte */

    justify-self: center !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 720px;
  }

  /* Bouton lisible et centré (ne change ni la couleur ni le style global) */
  .btn-compare{
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  /* Barres beiges plus courtes en mobile (option visuelle, même couleur) */
  .compare-sep .sep-line{ width: 40px; }
}

/* Desktop >1000px : on ne touche à rien (ton JS recale le bouton en absolu) */

	  
	  /* ========= PATCH MINIMAL (à coller tout en bas) ========= */

/* Source de vérité responsive : 3 colonnes desktop -> 1 colonne <=1000px (jamais 2) */
.produits-container.cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  position: relative !important;
}
@media (max-width: 767.98px){
  .produits-container.cols-3{
    grid-template-columns: 1fr !important;
    justify-items: center; /* centre chaque item en 1 colonne */
  }
}

/* En mobile, le bloc "Comparer" redevient un VRAI item de grille,
   placé ENTRE les 2 boards et les bandes, quel que soit l'ordre du DOM */
@media (max-width: 767.98px){
  .produits-container.cols-3 > .compare-between,
  .produits-container.cols-3 > .compare-inline{
    position: static !important;     /* sort de l'absolu */
    top: auto !important;
    left: auto !important;
    transform: none !important;

    grid-column: 1 / -1 !important;  /* prend toute la ligne */
    grid-row: 3 !important;          /* ✅ forcer l’item APRÈS la 2e carte */

    justify-self: center !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 720px;
  }

  /* Bouton lisible et centré (ne change ni la couleur ni le style global) */
  .btn-compare{
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  /* Barres beiges plus courtes en mobile (option visuelle, même couleur) */
  .compare-sep .sep-line{ width: 40px; }
}


	/* === Desktop uniquement : boutons Détails / Acheter à la largeur du texte === */
@media (min-width: 1000px){
  .produits-container.cols-3 .produit-item .btn-wrap .btn{
    width: auto;          /* largeur selon le contenu */
    max-width: none;      /* retire la limite 260px */
    display: inline-flex; /* garde l’alignement interne propre */
    align-items: center;
    justify-content: center;
    white-space: nowrap;  /* évite les retours à la ligne dans le bouton */
    padding: 10px 18px;   /* cohérent avec tes styles actuels */
  }
}


/*=================================================================================================*/
/*================================COMPARATIF=========================================*/
/*=================================================================================================*/

 /* ————————————————————————————————————————————————
       Petites aides de mise en page, en s'alignant 
       sur l'esthétique existante (couleurs, arrondis)
       ———————————————————————————————————————————————— */
    .ws-compare-hero{ text-align:center; }
    .ws-compare-hero h1{ color:#fff; }

    .compare-lede{ max-width: 1000px; margin: 0 auto; text-align:center; }

    /* grille 2 cartes comme la liste produits */
    .compare-cards{ display:grid; grid-template-columns: 1fr; gap:24px; }
    @media (min-width: 900px){ .compare-cards{ grid-template-columns: 1fr 1fr; } }

    /* tableau comparatif accessible */
    .compare-grid{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.1); background:#fff; }
    .compare-grid thead th{ background:#f6f2ec; color:#6b5a46; font-family:'Poppins',sans-serif; font-weight:700; padding:14px 16px; text-align:left; }
    .compare-grid th, .compare-grid td{ padding:14px 16px; border-top:1px solid #eee; vertical-align:top; }
    .compare-grid th[scope=row]{ color:#C7B299; font-weight:700; width:28%; }
    .compare-grid td{ width:36%; }
    .compare-grid .emoji{ width:1.6em; display:inline-block; }

    /* encadré visuel */
    .compare-visual{ border-radius:16px; overflow:hidden; background:rgba(255,255,255,.6); backdrop-filter: blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
    .compare-visual img{ width:100%; height:auto; display:block; }

    /* petites notes typographiques */
    .ws-sub{ color:#777; font-size:.98rem; }
	  
	  /* Corrige le texte blanc du tableau comparatif */

#tableau td, 
#tableau p {
  color: #111 !important;
}



/* ===== CATALOGUE — Fix largeur mobile ===== */

/* Container mobile : 100% + gouttières, et pas de scroll horizontal */
#catalog{ overflow-x:hidden; }
@media (max-width: 767px){
  #catalog .container{
    width:100%;
    max-width:none;
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
    margin:0 auto;
  }
}

/* Grille : 1 seule colonne en mobile, quoi qu’il arrive */
@media (max-width: 767px){
  #catalog .produits-container{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px;
    width:100%;
    margin:0;
  }
}

/* Empêche un enfant de “pousser” la largeur (text long, image, abs/transform) */
#catalog .produits-container > *{ min-width:0; }
#catalog .produit-item{ min-width:0; box-sizing:border-box; }
#catalog .produit-item img{ max-width:100%; height:auto; display:block; }

/* Bouton Comparer : toujours dans le flux et centré en mobile */
@media (max-width: 767.98px){
  #catalog .compare-between{
    position: static !important;
    left:auto !important; top:auto !important; transform:none !important;
    justify-content:center; width:100%; max-width:720px; margin:0 auto;
  }
  #catalog .btn-compare{
    display:block; width:100%; max-width:560px; margin:0 auto;
    white-space:normal; text-align:center; line-height:1.3; padding:12px; box-sizing:border-box;
  }
}


/* ===== CATALOGUE — élargir le breakpoint "mobile" à 1200px ===== */
@media (max-width: 1200px){
  #catalog { overflow-x: hidden !important; }

  /* Grille : 1 colonne en "mobile large" (ex. 1080 px) */
  #catalog .produits-container{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #catalog .produits-container > *{ min-width: 0 !important; }

  /* Bouton "Comparer" : plus JAMAIS en absolu sur mobile/tablette */
  #catalog .compare-between,
  #catalog .compare-inline{
    position: static !important;
    top:auto !important; left:auto !important; transform:none !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }

  #catalog .btn-compare{
    display:block !important; width:100% !important; max-width:560px !important;
    margin:0 auto !important; white-space:normal !important; text-align:center !important;
    line-height:1.3 !important; padding:12px !important;
  }

  /* Images sécurisées */
  #catalog .produit-item img,
  #catalog .image-preview{
    display:block !important; width:100% !important; max-width:100% !important; height:auto !important;
  }
}


/* ================== CATALOGUE — KILL OVERFLOW, MOBILE & "LARGE MOBILE" ================== */
/* Si une règle plus haut repasse le bouton en absolu ou la grille en >1 col, on la neutralise ici. */

#catalog{ overflow-x:hidden !important; }

/* 1) A partir d'écrans ≤ 1200px (ton mobile est à 1080px CSS), le layout est "mobile" */
@media (max-width:1200px){
  /* Grille : 1 seule colonne stricte */
  #catalog .produits-container{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    width:100% !important;
    margin:0 !important;
  }
  #catalog .produits-container > *{ min-width:0 !important; }

  /* 2) Bouton "Comparer" ne doit JAMAIS être en absolu à ces tailles */
  #catalog .compare-between,
  #catalog .compare-inline{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important;
    transform:none !important;
    grid-column:1 / -1 !important;
    justify-self:center !important;
    justify-content:center !important;
    width:100% !important; max-width:720px !important;
    margin:0 auto !important;
  }
  #catalog .btn-compare{
    display:block !important; width:100% !important; max-width:560px !important;
    margin:0 auto !important; padding:12px !important;
    text-align:center !important; white-space:normal !important; line-height:1.3 !important;
  }

  /* 3) Médias : jamais plus larges que la colonne */
  #catalog .image-preview,
  #catalog .produit-item img{
    display:block !important; width:100% !important; max-width:100% !important; height:auto !important;
  }

  /* 4) Container : gouttières sûres et pas de largeur > viewport */
  #catalog .container{
    width:100% !important; max-width:100vw !important;
    padding-left:12px !important; padding-right:12px !important;
    margin:0 auto !important; box-sizing:border-box !important;
  }
}

/* 5) En toute taille : si un absolu persiste, on le clippe au container */
#catalog .produits-container{ position:relative !important; }

/* 6) Bonus sécurité : tout calcule sa largeur avec border-box (évite les +2px fantômes) */
#catalog, #catalog *{ box-sizing:border-box; }

/* 7) Supprime toute définition résiduelle de l’ancienne variante .compare-inline */
#catalog .compare-inline{ display:block !important; }  /* dans le flux, pas caché */








/* ====== Catalogue piloté par classes PHP ====== */

/* Desktop explicite : 3 colonnes, bouton comparer sur 2 colonnes */
#catalog .produits-container.cols-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:26px;
  grid-auto-flow:row;
  position:relative; /* repère pour le centrage flottant si tu l'utilises */
}
#catalog .produits-container.cols-3 .produit-item{ max-width:none; flex:initial; min-width:0; }
#catalog .produits-container.cols-3 .produit-item .btn-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
}
/* ✅ ici SEULEMENT on peut étendre sur deux colonnes */
#catalog .produits-container.cols-3 + .compare-between,
#catalog .produits-container.cols-3 ~ .compare-between{
  position:absolute; left:50%; transform:translate(-50%, -50%);
}
#catalog .produits-container.cols-3 .compare-inline{ grid-column:1 / 3; }

/* Mobile/tablette explicite : 1 colonne stricte, aucun absolu */
#catalog .produits-container.cols-1{
  display:grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-columns: 1fr;
  gap:22px;
  width:100%;
  margin:0;
}
#catalog .produits-container.cols-1 > *{ min-width:0; }
#catalog .produits-container.cols-1 .compare-inline{
  grid-column: 1 / -1 !important;  /* pas de 1/3 sur une grille à 1 col */
}
#catalog .produits-container.cols-1 + .compare-between,
#catalog .produits-container.cols-1 ~ .compare-between{
  position: static !important;
  left:auto !important; top:auto !important; transform:none !important;
  justify-content:center; width:100%; max-width:720px; margin:0 auto;
}
#catalog .produits-container.cols-1 .produit-item img,
#catalog .produits-container.cols-1 .image-preview{
  display:block; width:100%; max-width:100%; height:auto;
}

/* filet anti-scroll pour la page */
#catalog{ overflow-x:hidden; }





/* ===== Catalogue piloté par le HTML (cookie vw) ===== */

/* Desktop / tablette : 3 colonnes */
#catalog .produits-container.cols-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:26px;
  grid-auto-flow:row;
  position:relative; /* repère pour un éventuel centre flottant */
}
#catalog .produits-container.cols-3 .produit-item{ max-width:none; flex:initial; min-width:0; }
#catalog .produits-container.cols-3 .produit-item .btn-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
}
/* Si tu utilises la variante inline : OK en 3 colonnes seulement */
#catalog .produits-container.cols-3 .compare-inline{ grid-column: 1 / 3; }

/* Mobile : 1 colonne stricte */
#catalog .produits-container.cols-1{
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;  /* évite les colonnes implicites */
  gap:22px;
  width:100%;
  margin:0;
}
#catalog .produits-container.cols-1 > *{ min-width:0; }
#catalog .produits-container.cols-1 .compare-inline{
  grid-column: 1 / -1;     /* jamais 1/3 en 1 colonne */
}
/* Si tu as un bouton comparer flottant, on le remet dans le flux en mobile */
#catalog .produits-container.cols-1 + .compare-between,
#catalog .produits-container.cols-1 ~ .compare-between{
  position: static !important;
  left:auto !important; top:auto !important; transform:none !important;
  justify-content:center; width:100%; max-width:720px; margin:0 auto;
}

/* Médias safe */
#catalog .produits-container.cols-1 .image-preview,
#catalog .produits-container.cols-1 .produit-item img{
  display:block; width:100%; max-width:100%; height:auto;
}

/* Filet anti-scroll pour la page catalogue */
#catalog{ overflow-x:hidden; }

/* =====================================================================
   >>> DO NOT REMOVE <<<
   WOODSPORT — FINALIZER (keeps ALL your original classes untouched)
   Purpose: Enforce columns only.
   Rule: < 767px  => 1 column
         >= 768px => 3 columns
   Also: "Comparer" is never absolute on mobile to avoid breaking the grid.
   ===================================================================== */

/* >= 768 px => 3 columns (no change to your classes) */
@media (min-width: 768px){
  #catalog .produits-container,
  .produits-container,
  .produits-container.cols-3,
  .produits-container.cols-1{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
    align-items: stretch !important;
  }
}

/* < 768 px => 1 column ONLY */
@media (max-width: 767.98px){
  #catalog .produits-container,
  .produits-container,
  .produits-container.cols-3,
  .produits-container.cols-1{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

}

/* Safety: children can't force horizontal overflow */
#catalog .produits-container > *,
.produits-container > *{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ====== RESTAURATION HEADER / NAV / LANG (sans toucher au PHP) ====== */

/* 0) Empêcher que le header soit enfermé dans un conteneur défilant */
#catalog, .catalog{
  height: auto !important;
  overflow-y: visible !important;
}
/* on garde la sécurité horizontale si tu l’avais */
#catalog{ overflow-x: hidden; }

/* 1) Header toujours au-dessus, lisible, et collant en haut */
header.site, header{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10020;            /* plus haut que les overlays/hero */
  background: #fff;          /* fond solide pour passer devant les visuels */
}


/* Réduit UNIQUEMENT le <p class="label"> juste après le titre (h1..h6) des cartes */
@media (min-width:768px){
  main#catalog .produit-item :is(h1,h2,h3,h4,h5,h6)+p.label{font-size:.90rem!important;line-height:1.2!important;padding:3px 8px!important}
}
@media (max-width:767.98px){
  main#catalog .produit-item :is(h1,h2,h3,h4,h5,h6)+p.label{font-size:.88rem!important;line-height:1.2!important;padding:3px 8px!important}
}

/* === Prix : stabilité en DESKTOP (≥768px) === */
@media (min-width:768px){
  .price-row{
    display:flex;               /* sécurité */
    align-items:center;
    flex-wrap:wrap;             /* autorise la 2e ligne si ça serre */
    overflow:visible;           /* rien n’est rogné */
  }
  .price-row .ws-price-tag{ flex:0 0 auto; }     /* le badge ne s’étire pas */

  .price-row .price-note{
    display:inline-block !important;
    /* plancher en px (décorrélé de rem), cœur fluide en vw, plafond confortable */
    font-size:0.9rem !important;
    line-height:1.25;
	    font-weight:300;
    white-space:normal !important;   /* on permet le retour à la ligne */
    transform:none !important;       /* évite le “glissement” hors cadre */
    min-width:0; max-width:100%;
    position:relative; z-index:1;    /* reste au-dessus d’un éventuel badge/svg */
    color:inherit;                    /* sécurité si une règle mettrait color:transparent */
    opacity:1 !important; visibility:visible !important;
  }
}

/* Fenêtre étroite en desktop : forcer la note sous le badge si besoin */
@media (min-width:768px) and (max-width:1024px){
  .price-row .price-note{ flex-basis:100%; }
}

/* PC : ajustement vertical fin du libellé Amazon par rapport au prix */
@media (min-width:768px){
  #catalog #catalog .price-row{ align-items:center; } /* au cas où */

  #catalog #catalog .price-row .price-note.price-note--amazon{
    font-size:.9rem !important;   /* ta taille réduite */
    line-height:1.1;
    position:relative;
    top:-10px;                      /* remonte légèrement (ajuste -1 à -4px si besoin) */
  }
}


@media (max-width:767.98px){
  #catalog .price-row .price-note--amazon{ font-size:1rem;	    font-weight:300; }
}


/*==================================================================*/


/* Sous-titre + description sur une seule ligne */
.carousel-line{
  display:flex;
  flex-wrap:nowrap;       /* ← pas de retour à la ligne */
  align-items:baseline;
  column-gap:.5rem;
}

.carousel-line .sep{ display:none; } /* pas de tiret */

.carousel-subtitle{
  margin:0;
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;      /* ne coupe jamais */
  flex:0 0 auto;           /* garde sa taille */
}

.carousel-desc{
  margin:0;
  line-height:1.25;
  white-space:nowrap;      /* ne coupe jamais */
  overflow:hidden;         /* au besoin, coupe visuellement */
  text-overflow:ellipsis;  /* … si ça dépasse */
  flex:1 1 auto;           /* prend le reste de la ligne */
}

/* Forcer une seule ligne pour sous-titre + description */
.carousel-text .carousel-line{
  display:flex;
  flex-wrap:nowrap;            /* pas de retour à la ligne */
  align-items:baseline;
  gap:.5rem;
}

.carousel-text #carousel-subtitle,
.carousel-text #carousel-description{
  margin:0;
  white-space:nowrap;          /* tout sur une seule ligne */
}

.carousel-text #carousel-subtitle{
  font-weight:600;
  flex:0 0 auto;               /* largeur naturelle, pas d’étirement */
}

.carousel-text #carousel-description{
  flex:1 1 auto;               /* prend le reste */
  min-width:0;                 /* ⚠️ indispensable pour ellipsis en flex */
  overflow:hidden;             /* coupe visuellement si trop long */
  text-overflow:ellipsis;      /* ajoute … si ça dépasse */
}

/* Si un séparateur existe, on le masque */
.carousel-text .carousel-line .sep{ display:none !important; }
.carousel-text #carousel-description{ width:auto !important; flex-basis:auto !important; }


/* === PATCH : la ligne peut retourner à la ligne sans pousser le carrousel === */
.carousel-layout{
  display:flex;            /* 2 colonnes stables */
  gap:24px;
}

.carousel-text{            /* la colonne texte peut rétrécir si besoin */
  flex:0 1 520px;
  min-width:0;
}

.carousel-container{       /* la colonne carrousel garde la priorité */
  flex:1 1 0;
  min-width:0;
}

/* >>> autoriser les retours à la ligne dans la ligne de texte */
.carousel-text .carousel-line{
  display:flex;
  flex-wrap:wrap;          /* <-- au lieu de nowrap */
  align-items:baseline;
  gap:.4rem .5rem;
  min-width:0;
}

.carousel-text #carousel-subtitle,
.carousel-text #carousel-description{
  margin:0;
  white-space:normal !important;  /* <-- plus de nowrap */
}

.carousel-text #carousel-subtitle{
  font-weight:600;
  flex:0 0 auto;
}

@media (max-width:768px){
.carousel-text #carousel-subtitle{ margin-top:10px !important;    display:flex;
    flex-direction:column;
	}





.carousel-text #carousel-description{
  flex:1 1 100%;           /* prend la ligne si besoin */
  min-width:0;
  overflow:visible;        /* pas d’ellipsis ici */
  text-overflow:clip;
}

/* Mobile : on empile proprement */
@media (max-width:768px){
  .carousel-layout{ flex-direction:column; }
  .carousel-text, .carousel-container{ flex:0 1 auto; }
}

/* Pas de soulignement pour les liens-boutons */
.btn-wrap a.btn,
.btn-wrap a.btn:link,
.btn-wrap a.btn:visited,
.btn-wrap a.btn:hover,
.btn-wrap a.btn:focus {
  text-decoration: none;
}


.btn-wrap a.btn:focus-visible {
  outline: 2px solid #C7B299; /* ta couleur de marque */
  outline-offset: 2px;
}


.btn-wrap a.btn { text-decoration: none !important; }

/* Quand compare-between est dans .btn-wrap */
.btn-wrap .compare-between{
  position:static !important;
  left:auto !important; top:auto !important; transform:none !important;
  width:100%; display:flex; justify-content:center;
}
.btn-wrap .compare-between .btn{ width:100%; } /* option : plein large sur mobile */



/* Deux colonnes égales, largeur compacte identique */
.btn-wrap{
  display: inline-grid;                         /* shrink-to-fit */
  grid-template-columns: repeat(2, clamp(180px, 18ch, 220px));
  gap: 12px;
  justify-content: center;
}
.btn-wrap .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;                           /* compact */
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  white-space: normal;                           /* autorise le retour */
  text-wrap: balance;                            /* meilleur saut (si supporté) */
}
@media (max-width: 768px){
  .btn-wrap{
    grid-template-columns: 1fr;
    width: 100%;
  }
  .btn-wrap .btn{ width: 100%; }
}



/* Caractéristiques clés : pastilles compactes */
ul.kv{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;         /* enlève l'indent du UL */
}

ul.kv li{
  list-style: none !important;   /* enlève les puces */
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 9999px !important;
  background: #f5efe7 !important;
  color: #7a6a56 !important;
  border: 1px solid #e3d9c9 !important;
  font-size: .80rem !important;
  line-height: 1.2 !important;
}

/* Espace sous la liste de caractéristiques, avant le bloc prix/boutons */
ul.kv { margin-bottom: 16px !important; }   /* annule le margin-bottom:0 imposé ailleurs */
ul.kv + .cta-row { margin-top: 16px; }      /* si besoin, on pousse le bloc suivant */


/* Masquer si le bloc est recapturé dans la colonne vignettes/carrousel */
.col.thumb .kv,
.col.thumb .kv-title{
  display:none !important;
}

.kv{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
}
.kv li{ white-space:nowrap; font-weight:500; }
.kv-title{ margin:0 0 .25rem; font-size:1.05rem; font-weight:600; }

/* 1) Afficher à gauche quoi qu'il arrive */
.compare-col .col.text :is(.kv-title, .kv){
  display: block !important;
}
.compare-col .col.text .kv{
  display:flex !important;
  flex-wrap:wrap; gap:.6rem 1rem; list-style:none; margin:.5rem 0 0; padding:0;
}
.compare-col .col.text .kv li{ white-space:nowrap; font-weight:500; }
.compare-col .col.text .kv-title{ margin:0 0 .25rem; font-size:1.05rem; font-weight:600; }

/* 2) Masquer si aspiré dans un slider / colonne vignettes */
.col.thumb :is(.kv-title, .kv),
:is(.carousel, .carousel-track, .image-preview, .slider, .slides, .swiper, .splide, .slick-list, .slick-track, .flickity-viewport) :is(.kv-title, .kv){
  display:none !important;
}


/*==============================================================================*/