/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 /*#header{ background: red !important; }*/

 /* Menu */
/* /modules/tdmegamenu/views/css/megamenu_custom.css */

/* 1. Fond bleu pour chaque item du menu */
/*
 * modules/tdmegamenu/views/css/megamenu_custom.css
 */

/* 1. Fond bleu et position */
/*
 * modules/tdmegamenu/views/css/megamenu_custom.css
 */

/* --- 0. Disposition du menu en flex pour items de même largeur --- */
/*
 * modules/tdmegamenu/views/css/megamenu_custom.css
 */
/* === variables de réglage === */
:root{
  --side-start: #F7F7F7;  /* clair */
  --side-end:   #D1D1D1;  /* foncé */
  --page-bg:    #ffffff;  /* fond général hors dégradés (pour masquer autour du slider) */
  --color-body-link:#000000; /* couleur des liens */
}

/* --- Réglages rapides --- */
:root{
  /* largeur max de ta colonne de contenu */
  --content-max: 1200px;

  /* couleurs des côtés */
  --side-start: #F7F7F7; /* plus clair */
  --side-end:   #D1D1D1; /* plus foncé */

  /* padding horizontal interne éventuel du wrapper */
  --content-pad-x: 24px;
}

/* --- Réglages rapides --- */
:root{
  --content-max: 1240px;      /* largeur max de ta colonne de contenu */
  --side-start: #F7F7F7;      /* plus clair */
  --side-end:   #D1D1D1;      /* plus foncé */
  --content-pad-x: 24px;
  --page-bg: #fff;            /* fond global (header/footer) */
  --color-body-text: #000;  /* couleur du texte */
}

.soco-h1-underline h1,h1.soco-h1-underline {
  position: relative !important;
  display: inline-block !important;
  margin: 0  !important;
  line-height: 1.1 !important;
  /* ↓ marge texte → courbe (réduite) */
  padding-bottom: 0.9em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #283186 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important  ;
}
h1.soco-h1-underline{
  margin-bottom: 24px !important;
}
/* Courbe sous le texte, petite, sans toucher au titre */
.soco-h1-underline h1, h1.soco-h1-underline{
  font-weight: 600 !important;
}
.soco-h1-underline h1::after, h1.soco-h1-underline::after{
  content: "" !important;
  position: absolute !important;
  left: -0.55em !important;          /* démarre un peu avant le début du titre */
  bottom: -0.08em !important;         /* remonte légèrement la courbe, sans toucher le texte */
  width: 9.2em !important;           /* longueur compacte (augmente ou réduit si besoin) */
  aspect-ratio: 261 / 48 !important; /* garde les proportions d’origine */
  height: auto !important;
  pointer-events: none !important;

  background-image: url("../img/courbe_logo.svg"); /* adapte le chemin si besoin */
  background-repeat: no-repeat !important;
  background-size: 100% 100%  !important;
  background-position: left bottom  !important;

  /* finesse maîtrisée */
  transform-origin: left bottom !important;
  transform: scaleY(0.70) !important;
}

.soco-h1-underline.elementor-widget-heading,.soco-h1-underline.elementor-widget-heading {
  
  border-bottom: none !important;
}
a {
  text-decoration: none;
  background-color: transparent;
  color: var(--color-body-link, #000);
}
/* Fond global */
html, body { background: var(--page-bg); }
#wrapper {
  padding-top: 0;
  padding-bottom:0;
  color: var(--color-body-text, #000);
}
/* Colonne principale */
/* Partout sauf sur les pages catégorie */
/* Appliquer au #content-wrapper partout SAUF sur body#category et body#search */
body:not(#category):not(#search) #content-wrapper,
/* Et, sur les pages exclues, appliquer le style à .container */
body#category .container,
body#search .container {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  background: #fff;
  padding-inline: var(--content-pad-x);
  box-shadow: 0 0 28px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.06);
  z-index: 1;
}




/* === Dégradés latéraux autour du contenu, portés par le WRAPPER ===
   (ainsi pas d'effet derrière header/footer) */
#wrapper{
  position: relative;
  overflow: visible; /* pour laisser sortir les pseudo-éléments */
  z-index: 0;
}

/* bandes latérales dimensionnées par rapport à --content-max */
#wrapper::before,
#wrapper::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - var(--content-max)) / 2));
  pointer-events: none;
  z-index: 0;
}

/* gauche : clair -> foncé, poussé jusqu'au bord de l'écran */
#wrapper::before{
  left: 0;
  /* pousse la bande pour coller au bord du viewport */
  transform: translateX(calc(-1 * (100vw - 100%) / 2));
  background: linear-gradient(to right, var(--side-start), var(--side-end));
  box-shadow: inset -12px 0 24px rgba(0,0,0,.08);
}

/* droite : dégradé inversé */
#wrapper::after{
  right: 0;
  transform: translateX(calc((100vw - 100%) / 2));
  background: linear-gradient(to left, var(--side-start), var(--side-end));
  box-shadow: inset 12px 0 24px rgba(0,0,0,.08);
}

/* Sur écrans <= content-max : on coupe les bandes */
@media (max-width: calc(var(--content-max) + 1px)) {
  #wrapper::before, #wrapper::after { width: 0; transform: none; }
}

/* === Slider full-width (ce que tu as déjà ajouté) === */
/* Option A : entourer le slider d’un conteneur .full-bleed */
html, body { overflow-x: clip; } /* évite le scroll horizontal */
.full-bleed{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  padding-left: 0; padding-right: 0;
  z-index: 2; /* au-dessus des dégradés du wrapper */
}

/* Option B : si pas possible d’ajouter .full-bleed, cibler ton widget slider */
#content-wrapper .elementor-widget-td-slider,
#content-wrapper .slick-slider,
#content-wrapper .home-slider{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  z-index: 2;
}
/* 1) NE PAS élargir tous les slick par défaut (on annule l'Option B globale) */
#content-wrapper .slick-slider,
#content-wrapper .home-slider{
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  transform: none !important;
  z-index: auto !important;
}

/* 2) Garder SEULEMENT le slider héros en full-bleed */
#content-wrapper .elementor-widget-td-slider{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  z-index: 2;
}

/* 3) Sécuriser le carrousel .categories pour rester dans la colonne */
#content-wrapper .categories,
#content-wrapper .categories .slick-slider{
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;      /* occupe la largeur de #content-wrapper */
  max-width: 100% !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Si par hasard tu avais mis .full-bleed sur .categor*

/* 1. Fond bleu et position */
.td_mega_menu.menu-horizontal .element_li_depth_0 {
  background-color: #283186 !important;
  position: relative;
  
  /* 2. Barre à gauche de **tous** les items */
  /*border-left: 1px solid #ffffff !important;
  /* on supprime la border-right par défaut */
  border-right: none !important;
}

/* 3. Barre à droite **seulement** du dernier item */
.td_mega_menu.menu-horizontal .element_li_depth_0:last-child {
 /* border-right: 1px solid #ffffff !important;*/
}

/* 4. Texte en majuscules */
.td_mega_menu.menu-horizontal .element_li_depth_0 a {
  text-transform: uppercase !important;
    font-weight: 600 !important;
      letter-spacing: -0.5px;

}

/* 5. Survol de tout le <li> en jaune */
.td_mega_menu.menu-horizontal .element_li_depth_0:hover {
  background-color: #f6ea0f !important;
}


/* 5b. Contraste du texte et icônes au survol */
.td_mega_menu.menu-horizontal .element_li_depth_0:hover a {
  color: #000 !important;
}

/* 6. Style spécifique pour l’item “home” */
.td_mega_menu.menu-horizontal .home_icon > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #ffffff !important;
}

/* Desktop : menu centré, espacement qui s’adapte */
@media (min-width: 992px){
  .td_mega_menu.menu-horizontal > ul{
    display: flex;
    justify-content: center;      /* centre le bloc d’items */
    align-items: center;
    gap: clamp(8px, 2vw, 28px);   /* espace auto selon la largeur */
    flex-wrap: nowrap;
  }

  /* Nettoyage des marges par item */
  .td_mega_menu.menu-horizontal .element_li_depth_0{
    margin: 0 !important;
  }

  /* Liens : centrés et compacts */
  .td_mega_menu.menu-horizontal .element_li_depth_0 > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 14px !important;         /* ajuste si besoin */
    white-space: nowrap !important;
  }
}

/* 7. Remplacement de l’icône IcoFont par FA */
/*    On cache l’IcoFont et on injecte FA via ::before */
.home_icon .icon-home {
  font-size: 24px !important;
  color: transparent !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  position: relative !important;
  font-style: normal !important;
  margin :0 20% !important;
}
.home_icon .icon-home::before {
  content: "\f015" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  speak: none !important;
  display: inline-block !important;
  line-height: 1 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.elementor-2 .elementor-element.elementor-element-6d4c7690 .menu-horizontal .item-level-0 {
  margin: 0px !important;
  padding: 0 2px;
}
.elementor-3 .elementor-element.elementor-element-450cdd67 .menu-horizontal .item-level-0 {
  margin: 0px !important;
  padding: 0 2px;
}



/* Assure-toi que Poppins est chargé dans ton thème (Google Fonts ou local) */

.mainCategories {
  --bar-width: 200px;       /* largeur des barres */
  --bar-thickness: 2px;     /* épaisseur des barres */
  --bar-gap: 10px;          /* écart titre <-> barre */
  --title-max: 64px;        /* 48pt ≈ 64px */
  --overlay: rgba(0,0,0,.35);
  color: #fff;
}

/* Carte/colonne avec image de fond */
.mainCategories .mainCategories__item {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
  overflow: hidden;
  border-radius: .5rem;           /* optionnel, arrondi léger */
}

.mainCategories .mainCategories__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--overlay), rgba(0,0,0,.45));
}

.mainCategories .mainCategories__content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  margin: 0 auto;
}

/* Titre H2 avec barres centrées */
/* Assure-toi de charger Poppins 800 si besoin */
.elementor-1 .elementor-element.elementor-element-3595879 .elementor-cta__content {
  min-height: 215px;
  text-align: center;
  padding: 0px 15px 0px 150px !important;
}


.mainCategories {
  --h3-min: 16px !important;     /* taille mini sur très petit écran */
  --h3-max: 22px !important;     /* ≈ 30pt : plus petit que ton H2 */
}

.mainCategories h3.elementor-cta__title {
  font-weight: bold !important;          /* plus gras que 700 */
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(var(--h3-min), 3vw, var(--h3-max)) !important;
  margin: 2.4rem 0 2rem !important;
}


.mainCategories h3::before,
.mainCategories h3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--bar-width), 50%);
  height: var(--bar-thickness);
  background: currentColor; /* blanc (hérite de h2) */
  opacity: .95;
}

.mainCategories h3::before {
  top: calc(-1 * var(--bar-gap) - var(--bar-thickness));
}

.mainCategories h3::after {
  bottom: calc(-1 * var(--bar-gap) - var(--bar-thickness));
}

/* Paragraphe sous le H2 */
.mainCategories .elementor-cta__description {
  margin: 0;
  font-weight: 500 !important;                /* semi-gras */
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .04em;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4;
}

/* Petites attentions responsive */
@media (max-width: 576px) {
  .mainCategories .mainCategories__item {
    min-height: 280px;
    padding: 2rem 1rem;
  }
  .mainCategories { --bar-width: 160px; }
}

.cat-grid h3{
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

}
/* Baseline: jamais de zoom par défaut */
.cat-row .cat-card .elementor-widget-image img{
  transform: none !important;
}

/* ✅ Zoom seulement sur la colonne survolée */
.cat-row > .elementor-container > .elementor-column:hover
  .cat-card .elementor-widget-image img{
  transform: scale(1.05) !important;
}

.elementor:not(.elementor-bc-flex-widget) .cat-grid  .elementor-widget-wrap {
  padding: 10px 15px;
}
.cat-row > .elementor-container p{
letter-spacing: -0.06rem;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

/* Appliquer sur les <h2 class="elementor-heading-title"> ... </h2> */
/* À mettre sur <h2 class="elementor-heading-title">Mon titre</h2> */

.elementor-widget-heading {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid #d6d4d4;
}
.elementor-widget-heading:has( h3){
  border-bottom: 0 !important;
}
.elementor-widget-heading h2.elementor-heading-title {
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
  border-bottom: 2px solid #000;
    border-bottom-color: #000;
  margin-bottom: -1px;
}
.elementor-widget-heading h2.elementor-heading-title  {
  text-transform: uppercase !important;
  font-weight: 600 ! important;
  font-size: 16px !important;
  line-height: 30px  !important;
}

.elementor-widget-heading h2.elementor-heading-title.elementor-heading-title::after {
  content: "";
  display: block;
  width: 0 !important;
  height: 0!
;
  background: transparent;
  margin: none !important;
}


/**** footer  ***/
.elementor-widget-icon-box.elementor-view-default .elementor-icon {
  fill: #000 ! important;
  color: #000 !important;
}
h3.elementor-icon-box-title {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
p.elementor-icon-box-description {
  color: #000000 !important;
  font-weight: 500 !important;
  font-style: normal !important;

}

/* Table : lignes blanches entre cellules */
#category table{
  border-collapse: collapse;     /* bords nets, pas d'espace fantôme */
  width: 100%;
}

/* Cellules : fond gris, texte uppercase centré H/V, bordure blanche */
#category table td{
  background:#EDEDED;            /* gris clair des cellules */
  border:1px solid #FFFFFF;      /* trait blanc entre chaque cellule */
  padding:40px;
  text-transform:uppercase;
  text-align:center;
  vertical-align:middle;
}

/* Le contenu des cellules est centré même avec plusieurs liens */


/* Liens : noir, uppercase, pas de soulignement (sauf au survol) */
#category table td a{
  color:#000 !important;         /* écrase les <span style="color: #0066cc;"> */
  text-decoration:none !important;
  font-weight:600;
  letter-spacing:.2px;
}
#category table td a:hover{
  text-decoration:underline;
}

/* Les <hr> existants deviennent des petits séparateurs blancs discrets */
#category table td hr{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.9);
  margin:4px 0;
}


/* =========================
   SLIDER — Styles de base
   ========================= */

/* Titre : #f6ea0f, semi-gras, 54px, ombre déportée */
.td-slides .slick-slide-inner .td-slide-heading{
  color:#f6ea0f !important;
  font-weight:600 !important;
  font-size:54px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-shadow:
    3px 4px 0 #283186,
    0 0 2px rgba(41,50,135,.25) !important; /* petit halo pour lisibilité */
  margin:0 !important;
}

/* Sous-titre : #FFF, semi-gras, 25px, ombre déportée */
.td-slides .slick-slide-inner .td-slide-description{
  color:#FFFFFF !important;
  font-weight:600 !important;
  font-size:25px !important;
  line-height:1.15 !important;
  text-transform:uppercase !important;
  text-shadow:
    2px 3px 0 #283186,
    0 0 1px rgba(41,50,135,.20) !important;
  margin:.9em 0 0 !important;   /* ↑ espacement augmenté */
}

/* Bouton : fond #283186, bordure #FFF */
.td-slides .slick-slide-inner .td-slide-button,
.td-slides .slick-slide-inner .btn.btn-primary.td-button.td-slide-button{
  background:#283186 !important;
  border:2px solid #FFFFFF !important;
  color:#FFFFFF !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  padding:.8em 1.4em !important;
  border-radius:0 !important;
  transition:transform .2s ease, filter .2s ease;
  margin-top:1.2em !important; /* ↑ espacement augmenté */
}
.td-slides .slick-slide-inner .td-slide-button:hover,
.td-slides .slick-slide-inner .btn.btn-primary.td-button.td-slide-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* =========================
   SLIDER — Animations
   ========================= */

/* État initial (avant apparition) */
.td-slides .slick-slide-inner .td-slide-heading,
.td-slides .slick-slide-inner .td-slide-description,
.td-slides .slick-slide-inner .td-slide-button{
  opacity:0;
  will-change: transform, opacity;
}

/* Points de départ distincts */
.td-slides .slick-slide-inner .td-slide-heading{     transform: translateX(-28px); }        /* arrive de la gauche */
.td-slides .slick-slide-inner .td-slide-description{ transform: translateY(22px); }         /* remonte */
.td-slides .slick-slide-inner .td-slide-button{      transform: translateY(26px) scale(.94);}/* pop */

/* Déclenchement sur la slide active (stagger) */
.td-slides .slick-slide.slick-active .td-slide-inner .td-slide-heading,
.td-slides .slick-slide.slick-active .slick-slide-inner .td-slide-heading{
  animation: sld-left-reveal 600ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 60ms;
}
.td-slides .slick-slide.slick-active .td-slide-inner .td-slide-description,
.td-slides .slick-slide.slick-active .slick-slide-inner .td-slide-description{
  animation: sld-fade-up 650ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 180ms;
}
.td-slides .slick-slide.slick-active .td-slide-inner .td-slide-button,
.td-slides .slick-slide.slick-active .slick-slide-inner .td-slide-button{
  animation: sld-pop-bounce 700ms cubic-bezier(.34,1.56,.64,1) both; /* léger overshoot */
  animation-delay: 320ms;
}

/* Keyframes */
@keyframes sld-left-reveal{
  from{ opacity:0; transform: translateX(-28px); }
  to  { opacity:1; transform: translateX(0); }
}
@keyframes sld-fade-up{
  from{ opacity:0; transform: translateY(22px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes sld-pop-bounce{
  0%  { opacity:0; transform: translateY(26px) scale(.94); }
  60% { opacity:1; transform: translateY(0)    scale(1.02); }
  100%{ opacity:1; transform: translateY(0)    scale(1); }
}

/* Accessibilité : désactiver les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .td-slides .slick-slide-inner .td-slide-heading,
  .td-slides .slick-slide-inner .td-slide-description,
  .td-slides .slick-slide-inner .td-slide-button{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


@media (max-width: 1190px) {
  .menu-horizontal .item-level-0 > a {
    font-size: 12px !important;
  }

  .elementor-2 .elementor-element.elementor-element-5d512184:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-5d512184 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #283186;
  }  
}
@media (max-width: 1024px) {
  .elementor-2 .elementor-element.elementor-element-5d512184:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-5d512184 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    min-height: 50px;
  }  
  .elementor-widget-container .btn-toggle i {
  color: #f6ea0f;
  margin-top: 10px;
  font-weight: bold !important;
}
}


/* Block categories */
#wrapper .block-categories .h6.text-uppercase.facet-label {
margin-bottom: 0;
}

.block-categories li li ul {
display: none;
}

.block-categories li {
position: relative; 
}

.block-categories li a {
font-weight: 600;
text-transform: none;
color: #000;
display: block;
line-height: 16px;
padding: 9px 30px 9px 16px;
border-bottom: 1px solid #d6d4d4; 
}

.block-categories li li a:before {
margin-left: -21px;
}

.block-categories li li a {
padding-left: 36px;
}

.block-categories li li li a {
padding-left: 46px;
}

.block-categories li li li li a {
padding-left: 56px;
}

.block-categories li li li li li a {
padding-left: 66px;
}

.block-categories li span.grower {
display: block;
background: #f6f6f6;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
font-family: Material Icons;
font-size: 18px; 
}

.block-categories li span.grower.OPEN:before,
.block-categories li span.grower.CLOSE:before {
content: "\E15B";
display: block;
vertical-align: middle;
color: #333;
width: 30px;
height: 34px;
line-height: 34px;
text-align: center; 
}

.block-categories li span.grower.CLOSE:before {
content: "\E145";
color: silver; 
}

.block-categories li span.grower:hover + a,
.block-categories li a:hover,
.block-categories li a.selected {
background: #f6f6f6;
text-decoration: none;
}

.block-categories li li a {
font-weight: normal;
}

.block-categories li li a:before {
content: "\E5CC";
font-family: Material Icons;
line-height: 14px;
padding-right: 8px;
vertical-align: -2px;
}
#left-column .block .block_content, #right-column .block .block_content {
  margin: 0 0 0 !important;
}
.block-categories .h6.text-uppercase.facet-label {
  margin-bottom: 0 !important;
}

.elementor-column .text-uppercase,.left_column p.title_block,.elementor-column .text-uppercase,.block-categories div.h6 {
  position: relative;
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #d6d4d4;
}
.elementor-column  .text-uppercase span, .elementor-column  .text-uppercase a ,.left_column p.title_block span,.block-categories div.h6 a {
  display: inline-block;
  border-bottom: 2px solid #000;
    border-bottom-color: #000;
  margin-bottom: -1px;
}

/* Block brands */
#search_filters_brands .text-uppercase,
#search_filters_suppliers .text-uppercase,
.list-block .text-uppercase {
margin-bottom: 0;
}

#search_filters_brands ul li,
#search_filters_suppliers ul li,
.list-block ul li ,.left_column li.elementor-icon-list-item {
padding: 0;
border-bottom: 1px solid #d6d4d4;
}

#search_filters_brands ul li a,
#search_filters_suppliers ul li a,
.list-block ul li a,.left_column .elementor-icon-list-item a {
display: block;
line-height: 17px;
padding: 9px 0px 9px 16px;
}

#search_filters_brands ul li a:hover,
#search_filters_suppliers ul li a:hover,
.list-block ul li a:hover,.left_column li a:hover {
text-decoration: none;
background: #f6f6f6;
}

#search_filters_brands ul li a:before,
#search_filters_suppliers ul li a:before,
.list-block ul li a:before,.left_column li a:before{
font-family: "FontAwesome";
content: "\f105";
display: inline;
padding-right: 8px;
}

/*** HOME PAGE TABS ***/
/* Tabs nav */
.box-nav-tab ul.nav-tabs {
border: none !important;
border-bottom: 1px solid #d6d4d4 !important;
margin-bottom: 20px !important;
}

.box-nav-tab ul.nav-tabs li.nav-item {
display: inline-block;
margin: 0 10px !important;
}
elementor-1 .elementor-element.elementor-element-52c04031 .nav-tabs .nav-link.active {
  background-color: none !important;
  color: #000 !important;
}
.box-nav-tab ul.nav-tabs li.nav-item a {
display: block;
padding: 0;
margin: 0 0;
font-weight: bold;
font-size: 16px;
line-height: 30px;
text-transform: uppercase;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.elementor-1 .elementor-element.elementor-element-52c04031 .nav-tabs .nav-link.active {
  background-color: none !important;
  color: #000;
}
.box-nav-tab ul.nav-tabs li.nav-item a.active,
.box-nav-tab ul.nav-tabs li.nav-item a:hover {
border:none !important;
background: none !important ;
color: #000 !important;
font-weight: 700 !important;
border-bottom: 2px solid #000 !important;
}
.elementor-1 .elementor-element.elementor-element-52c04031 .nav-tabs .nav-item .nav-link, .box-nav-tab  .nav-tabs .nav-item .nav-link {
  padding: 7px 30px 7px 30px;
  font-weight: 500;
  background:none !important;
  background-color: transparent !important;
  color: #000000 !important;
  border-radius: 0 !important;
}
#index .box-nav-tab  ul.nav-tabs {
text-align: center;
}



footer   div.footer_block p.title_block span.title {
  border-color: #f6ea0f !important;
  display: inline-block;
  border-bottom: 2px solid #1b82d6;
    border-bottom-color: rgb(27, 130, 214);
  margin-bottom: -4px;
  padding: 18px 0;
}

footer  .title_block:first-child::after {
  content: "";
  border: none !important;
  border-top-style: solid;
  border-top-width: 0;
  width: 0;
  border-color: transparent;
}


footer  .title_block  {
  color: #fff;
  cursor: initial;
  border-bottom: 1px solid #363636;
    border-bottom-color: rgb(54, 54, 54);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 16px;
}
footer .title_block {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
margin-bottom: 12px !important;
  padding: 0px 0px 3px 0px !important;
}


/* ===========================
   Annuaire des marques A-Z
   =========================== */
.brand-directory {
  --bd-border:#e6e6e6;
  --bd-text:#333;
  --bd-muted:#777;
  --bd-bg:#fff;

  /* DIMENSIONS FIXES DES VIGNETTES (demande client) */
  --logo-w: 250px;
  --logo-h: 145px;
}

.brand-directory__toolbar {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.brand-directory__search .form-control {
  height: 44px;
  font-size: 16px;
}

/* Index A-Z */
.brand-index {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.brand-index__item {
  width: 34px; height: 34px;
  border:1px solid var(--bd-border);
  border-radius: .5rem;
  display:flex; align-items:center; justify-content:center;
  text-decoration: none;
  color: var(--bd-text);
  font-weight:600; font-size:14px;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.brand-index__item:hover { transform: translateY(-1px); background:#f7f7f7; }
.brand-index__item.disabled { opacity:.35; pointer-events:none; }

.brand-letter-section { margin-bottom: 2rem; }
.brand-letter-heading {
  font-size: 22px; font-weight: 700; margin: 1rem 0 .75rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--bd-border);
}

/* ===========================
   Grille 5 -> 4 -> 3 -> 2 -> 2
   =========================== */
.brand-grid {
  display: grid;
  gap: .9rem;
  align-items: stretch;
}

/* Desktop large (≥1200px) : 5 par ligne */
@media (min-width: 1200px) {
  .brand-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Desktop (≥992px et <1200px) : 4 par ligne */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablette (≥768px et <992px) : 3 par ligne */
@media (min-width: 768px) and (max-width: 991.98px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile paysage (≥576px et <768px) : 2 par ligne */
@media (min-width: 576px) and (max-width: 767.98px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (<576px) : 2 par ligne (passe à 1 si tu préfères) */
@media (max-width: 575.98px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================
   Carte / vignette
   =========================== */
.brand-tile { display:block; text-decoration: none; color: inherit; }

.brand-card {
  background: var(--bd-bg);
  border:1px solid var(--bd-border);
  border-radius: 14px;
  padding: .9rem;
  display: grid;
  grid-template-rows: auto auto; /* média + nom */
  gap: .6rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  height: 100%;
}
.brand-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
  border-color: #ddd;
}

/* Boîte vignette : FIXE 250×145, centrée dans la carte */
.brand-card__media {
  width: 100%;                 /* la carte peut être plus large, on centre la boîte */
  max-width: var(--logo-w);    /* on ne dépasse jamais 250px de large */
  height: var(--logo-h);       /* hauteur fixe 145px */
  margin-inline: auto;         /* centrage horizontal dans la carte */
  padding: 10px;
  display:flex; align-items:center; justify-content:center;
  background: #fafafa;
  border-radius: 10px;
  overflow: hidden;
}

/* Logo : rempli la boîte sans déformation, pas d’upscale au-delà de 250×145 */
.brand-logo {
  max-width: var(--logo-w);
  max-height: var(--logo-h);
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

/* Placeholder si pas d'image (même boîte) */
.brand-logo--placeholder {
  width: 100%; height: 100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 38px; font-weight:800; color:#999;
}

/* Nom de la marque : 2 lignes max pour stabiliser la hauteur */
.brand-card__name {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--bd-text);
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.brand-empty { color: var(--bd-muted); text-align: center; margin-top: 1.5rem; }



#page #left-column {
  padding: 30px 0 !important;
}

.block-category{
  padding: 30px;
}

/* ====== HEADER CAT ====== */
/* ====== HEADER CAT (scopé) ====== */
/* ==========================================================
   CATEGORY PAGE — HERO + SUBCATEGORY GRID (TVH-like)
   - Titre SOUS la vignette, fond #283186de, texte blanc
   - PAS de border-radius sur les vignettes
   - Bordure 1px grise UNIQUEMENT autour de la photo
   - Photo entière visible (contain), centrée H/V
   - Vignettes carrées (même LxH)
   ========================================================== */
/* ==========================================================
   CATEGORY PAGE — HERO + SUBCATEGORY GRID (TVH-like)
   - HERO gris full-bleed (texte / image)
   - Sous-catégories : image contain, bordure 1px grise, titre dessous bg #283186de
   - Responsive : 1 / 2 / 3 / 4 colonnes (≥992px)
   ========================================================== */

/* ---------- Variables safe ---------- */
:root{
  --content-pad-x: 24px;
  --grey-border: #E0E0E0;
  --title-bg-hex8: #283186de;          /* avec alpha */
  --title-bg-rgba: rgba(40,49,134,.87);/* fallback */
}

/* ---------- HERO (full-bleed gris) ---------- */
.tvh-hero{
  background: #f2f2f2;
  padding: 28px 0 34px;
}
.tvh-hero.full-bleed{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  margin-top: -30px;
  padding: 30px 50px;
}
.tvh-hero__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad-x);
}
.tvh-hero--split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 992px){
  .tvh-hero--split{
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    align-items: center;
  }
}
.tvh-hero__media{
  margin: 0;
  border-radius: 12px;               /* garde un léger radius pour le HERO */
  overflow: hidden;
  /*background: #fff;
  border: 1px solid var(--grey-border);*/
}
.tvh-hero__media img{
  display:block; width:100%; height:auto; object-fit: cover;
}
.cat-title-wrap{
  display:flex; align-items:flex-end;
  border-bottom: 1px solid #D6D4D4;
  margin: 0 0 12px;
}
h1.cat-title{
  display:inline-block;
  margin:0; padding:0;
  border-bottom: 2px solid #000;
  font-weight:700; text-transform:uppercase;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height:1.15;
}
.tvh-hero__lead{
  max-width: 90ch;
  color:#222;
  line-height:1.6;
  font-size: 14px;
}

/* ---------- SOUS-CATÉGORIES ---------- */

 h2.cat-title {
  display: inline-block;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #f6ea0f;
  font-weight: 500;
  text-transform:normal !important;
  font-size: clamp(1rem, 2.2vw, 1.6rem) !important;
  line-height: 1.15;
  padding-bottom: 5px;
  margin-bottom: 20px !important;
}
#js-product-list-header .subcats{ margin-top: 22px; }

/* Grille responsive : 1 / 2 / 3 / 4 colonnes */
#js-product-list-header .subcats-grid{
  --gap: 16px;
  display:grid; gap: var(--gap);
  list-style:none; margin:0; padding:0;
  grid-template-columns: 1fr;                      /* <576px : 1 */
}
@media (min-width: 576px){
  #js-product-list-header .subcats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)); /* ≥576px : 2 */
  }
}
@media (min-width: 768px){
  #js-product-list-header .subcats-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)); /* ≥768px : 3 */
  }
}
@media (min-width: 992px){
  #js-product-list-header .subcats-grid{
    grid-template-columns: repeat(4, minmax(0,1fr)); /* ≥992px : 4 */
  }
}

/* Items */
#js-product-list-header .subcats-item{ margin:0; padding:0; }

/* Carte : pas de radius */
#js-product-list-header .subcat-card{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  background:#fff;
  border-radius: 0;                   /* pas de radius sur la vignette */
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Bloc image : carré strict, bordure 1px grise, image 100% visible */
#js-product-list-header .subcat-media{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;               /* même largeur/hauteur */
  background:#fff;
  border: 1px solid var(--grey-border);
  overflow:hidden;
}
/* Fallback vieux navigateurs */
@supports not (aspect-ratio: 1 / 1){
  #js-product-list-header .subcat-media::before{ content:""; display:block; padding-bottom:100%; }
  #js-product-list-header .subcat-media > img{ position:absolute; inset:0; }
}
#js-product-list-header .subcat-media img{
  display:block; width:100%; height:100%;
  object-fit: contain;                /* image entière */
  object-position: center center;     /* centrée H/V */
  transform: none;
  transition: none;
}

/* Barre-titre SOUS l’image (pas de bordure ici) */
#js-product-list-header .subcat-bar{
  background: #283186;/*var(--title-bg-hex8);*/
  background: #283186;/*var(--title-bg-rgba);    /* fallback */
  padding: 10px 12px;
  border: none;
}
#js-product-list-header .subcat-title--below{
  display:block; color:#fff;
  font-weight:700;
  font-size: clamp(12px, 1.1vw, 13px);
  line-height:1.2;
  text-transform: uppercase;
  text-align:left;
  letter-spacing: clamp(-0.030em, -0.2vw, -0.005em);

  word-break: break-word;
}

/* Hover doux */
#js-product-list-header .subcat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* Focus accessibilité */
#js-product-list-header .subcat-card:focus-visible{
  outline: 2px solid #283186; outline-offset: 2px;
}

.elementor-2 .elementor-element.elementor-element-e1cb319 a.elementor-button, .elementor-2 .elementor-element.elementor-element-e1cb319 .elementor-button {
  font-weight: 500    !important;
  fill: #283186 !important;
  color: #283186 !important;
  background-color: #f6ea0f !important;
}
.elementor-2 .elementor-element.elementor-element-e1cb319 .elementor-button {
  border-style: solid !important;
  border-width: 1px 1px 1px 1px !important;
  border-color: #283186 !important;
}

#js-product-list-header, #products {
  padding: 30px;
}
/* ===== Ajustements "chevron + lumière" sur la barre bleue ===== */

/* Barre : on garde la base et on prépare les calques d'effets */
#js-product-list-header .subcat-bar{
  position: relative;
  color: #fff; /* garantit le blanc pour le texte et les pseudo-éléments */
  background: linear-gradient(180deg, rgba(40,49,134,0.94) 0%, rgba(40,49,134,0.86) 100%);
  padding-right: 48px; /* un peu plus d'espace pour le chevron agrandi */
  overflow: hidden;    /* masque le sheen quand il glisse */
}

/* 1) Effet "gloss" doux en haut (lumière statique) */
#js-product-list-header .subcat-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  /* liseré lumineux en haut qui s'atténue vers le bas */
  background: linear-gradient(to bottom, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 55%);
  pointer-events: none;
  z-index: 0;
}

/* 2) Sheen diagonal (lumière mobile au survol) */
#js-product-list-header .subcat-bar::after{
  content: "›";                    /* chevron */
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  color: #fff;                     /* chevron bien blanc */
  font-size: 1.45em;               /* plus grand */
  z-index: 2;                      /* au-dessus du sheen */
  transition: transform .25s ease;
}

/* Le "sheen" est un pseudo-élément ajouté sur le wrapper carte pour glisser au-dessus de la barre */
#js-product-list-header .subcat-card{
  position: relative;
}
#js-product-list-header .subcat-card::after{
  content: "";
  position: absolute;
  /* bande lumineuse inclinée qui part de la gauche et balaye vers la droite */
  top: auto; bottom: 0;            /* se limite à la hauteur de la barre */
  left: -30%;
  height: 100%;                    /* couvre barre + éventuels arrondis (même si 0 ici) */
  width: 40%;
  transform: skewX(-25deg);
  background: linear-gradient(90deg,
              rgba(255,255,255,0.00) 0%,
              rgba(255,255,255,0.35) 45%,
              rgba(255,255,255,0.00) 100%);
  opacity: 0;                      /* invisible au repos */
  pointer-events: none;
  z-index: 1;                      /* entre le texte (2) et le fond (0) */
  transition: transform .6s ease, opacity .35s ease;
}

/* Hover/focus : chevron qui glisse un peu + sheen qui balaye la barre */
#js-product-list-header .subcat-card:hover .subcat-bar::after,
#js-product-list-header .subcat-card:focus-visible .subcat-bar::after{
  transform: translateY(-50%) translateX(6px);
}
#js-product-list-header .subcat-card:hover::after,
#js-product-list-header .subcat-card:focus-visible::after{
  opacity: .9;
  transform: translateX(220%) skewX(-25deg); /* balayage vers la droite */
}

/* Option : bleu un poil plus profond au hover pour accentuer la lumière */
#js-product-list-header .subcat-card:hover .subcat-bar,
#js-product-list-header .subcat-card:focus-visible .subcat-bar{
  background: linear-gradient(180deg, rgba(31,39,115,0.97) 0%, rgba(31,39,115,0.90) 100%);
}

/* Laisse sticky fonctionner */
.tvh-hero--sticky .tvh-hero__inner {
  overflow: visible;
}

/* Colonne image : sticky sans forcer de hauteur */
.tvh-hero__col--media.is-sticky {
  position: sticky;
  top: 0;                 /* ajuste si tu as un header fixe */
  align-self: flex-start; /* évite l'étirement vertical */
  height: auto;           /* pas de 100vh ici */
}

/* Figure/image : taille naturelle, pas d'étirement */
.tvh-hero__media {
  height: auto;           /* supprime tout 100% précédent */
}
.tvh-hero__media img {
  display: block;
  width: auto;            /* taille naturelle */
  max-width: 100%;        /* ne déborde pas en responsive */
  height: auto;           /* conserve les proportions */
  object-fit: contain;    /* au cas où, mais non nécessaire si auto */
}

/* Si tu avais mis un z-index, garde-le bas pour ne pas couvrir le texte */
.tvh-hero__col--media.is-sticky {
  z-index: 1;
}

/* Optionnel : donner un peu de hauteur au contenu texte pour que le sticky soit visible sur une zone suffisante */
.tvh-hero__col--text {
  padding-bottom: 3rem;
  padding-left: 30px;
}

/* Valeur par défaut au cas où le JS ne tourne pas */
:root { --sticky-header-h: 0px; }

/* Colonne image : sticky sous le/les headers */
.tvh-hero__col--media.is-sticky {
  position: sticky;
  top: var(--sticky-header-h);
  align-self: flex-start;
  height: auto;
  z-index: 1;              /* le header garde la priorité d’empilement */
}

/* Laisse sticky fonctionner et conserve la taille native de l’image */
.tvh-hero--sticky .tvh-hero__inner { overflow: visible; }
.tvh-hero__media { height: auto; }
.tvh-hero__media img {
  display: block;
  width: auto;             /* taille native */
  max-width: 100%;         /* responsive: ne dépasse pas la colonne */
  height: auto;
  object-fit: contain;
}

.elementor-button,.elementor-button-link.elementor-button  {
  background: #f6ea0f !important;
  color: #283186 !important;
  border: 1px solid #283186 !important;
  border-radius: 0 !important;
  padding: 10px 16px;
  transition: filter .2s ease;
  font-weight: 500 !important;
}
.elementor-button-content-wrapper .elementor-button-icon,.elementor-button-content-wrapper .elementor-button-text {
  color: #283186 !important;
}
#wrapper .elementor-button,#wrapper .elementor-button-link.elementor-button ,#wrapper .elementor-button-content-wrapper .elementor-button-icon,#wrapper  .elementor-button-content-wrapper .elementor-button-text {
  color: #000 !important;
  border:none !important;

}



#brand-directory,.product-category{
  padding: 30px;
}

/* ===========================
   ANA BREADCRUMB (scopé)
   =========================== */
/* =========================================
   ANA BREADCRUMB — tout JAUNE sauf l’actif
   Flèche jaune qui chevauche le blanc (sans bordure)
   ========================================= */
#ana-breadcrumb{
  --bc-h: 46px;
  --bc-yellow: #f6ea0f;
  --bc-text: #1f1f1f;
  --bc-active: #ffffff;

  background: var(--bc-yellow) !important; /* JAUNE sur toute la barre */
  width: 100%;
  position: relative;
  overflow: visible !important;
  z-index: 1000 !important;
  margin-bottom: 30px;;
}

#ana-breadcrumb .ana-bc-container{
  padding-left: 30px;  /* demandé */
  padding-right: 0;
  background: transparent !important;
}

#ana-breadcrumb .ana-bc-nav{ display:block; }

#ana-breadcrumb .ana-bc-list{
  display: flex;
  align-items: stretch;
  height: var(--bc-h);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bc-yellow) !important; /* continuité jaune à gauche */
  overflow: visible !important;
}

/* Items non-actifs (JAUNE explicite) */
#ana-breadcrumb .ana-bc-item{
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  font-size: .935rem;
  line-height: 1;
  z-index: 1;
}
#ana-breadcrumb .ana-bc-item .ana-bc-link{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px 0 14px;
  background: var(--bc-yellow) !important;
  color: var(--bc-text);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
}

/* === FLÈCHE JAUNE — chevauche l’ACTIF (blanc) pour “se fondre” dedans === */
#ana-breadcrumb .ana-bc-arrow{
  flex: 0 0 22px;                 /* largeur visible de la flèche */
  height: var(--bc-h);
  line-height: 0;
  display: flex;
  align-items: stretch;
  margin: 0;
  position: relative;
  z-index: 3;                     /* au-dessus de l’actif */
  margin-right: -22px;            /* << chevauche le bloc blanc de 12px */
  pointer-events: none;           /* pas cliquable */
}
#ana-breadcrumb .ana-bc-arrow-svg{
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);       /* anti-alias plus propre */
}
#ana-breadcrumb .ana-bc-arrow-svg polygon{
  fill: var(--bc-yellow) !important;  /* triangle JAUNE */
  /* pas de stroke: raccord naturel jaune → blanc */
}

/* Élément ACTIF (dernier) : BLANC */
#ana-breadcrumb .ana-bc-item.is-current{
  position: relative;
  z-index: 2;                        /* sous la flèche, au-dessus des jaunes */
}
#ana-breadcrumb .ana-bc-item.is-current .ana-bc-current{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px 0 35px;
  background: var(--bc-active) !important;
  color: var(--bc-text);
  font-weight: 600;
  text-transform: uppercase;
}

/* Icône home (facultatif) */
#ana-breadcrumb .ana-bc-home{
  fill: currentColor;
  opacity: .9;
  margin-right: 6px;
  transform: translateY(1px);
}

/* Mobile */
@media (max-width: 576px){
  #ana-breadcrumb{ --bc-h: 40px; }
  #ana-breadcrumb .ana-bc-item .ana-bc-link{ padding: 0 12px 0 10px; }
  #ana-breadcrumb .ana-bc-arrow{ flex-basis: 18px; margin-right: -24px; }
}

/*body:not(#index):not(#category):not(#search):not(#cms) #content-wrapper, body#category .container, body#search .container { box-shadow: none !important; background: transparent !important; }
/* Ne plus cibler .container de façon globale en catégorie */
 /* (retire l'ancien `body#category .container { ... }`) */



/* 0) On supprime l’ombre par défaut sur TOUS les .container de la page catégorie */
body#category #content-wrapper > .container {
  box-shadow: none !important;
  background: transparent !important;
}

/* 1) On remet l’ombre UNIQUEMENT au container qui contient le listing */
body#category #content-wrapper > .container:has(#js-product-list),
body#category #content-wrapper > .container:has(#js-product-list-header),
body#category #content-wrapper > .container:has(#products) {
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
  background: #fff !important;
  border-radius: 10px;
  overflow: hidden;
  /* pour que l’ombre ne “remonte” pas visuellement le long des côtés du breadcrumb */
  margin-top: 0; 
  padding-top: 0.5rem;
}

 body#category .container.ana-bc-container { box-shadow: none !important; background: transparent !important; }


 /* Catégorie : limiter le tableau à la largeur de .tvh-hero__lead */
body#category .tvh-hero__lead table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;      /* évite les débordements */
  border-collapse: collapse;
}

/* Empêcher le contenu long de déborder */
body#category .tvh-hero__lead th,
body#category .tvh-hero__lead td {
  word-break: break-word;
  overflow-wrap: anywhere;
}


/******************************
 * Socoloc – Listing produits (v2)
 * 4 colonnes sans espaces excessifs
 * 1 seule bordure + ombrage
 ******************************/
/*** prdoducts listing ***/
/* Carte produit : bordure + ombre déportée */
.products .product-miniature .product-container,
.products .product-miniature .product-container{
  position: relative;
  margin: 0 auto;
  padding: 0 ;
  max-width: 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  background: #fff;                         /* indispensable pour voir l’ombre */
  border: 1px solid #D6D4D4;                /* bordure */
  box-shadow:
    10px 12px 24px rgba(0,0,0,.12),         /* ombre déportée bas/droite */
    0 1px 2px rgba(0,0,0,.06);              /* ombre proche douce */
  transition: box-shadow .25s ease, transform .25s ease;
}

/* (Optionnel) Survol : ombre un peu plus marquée + léger lift */
.products .product-miniature:hover .product-container,
.products .product-miniature:hover .product-container{
  transform: translateY(-2px);
  box-shadow:
    14px 16px 28px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.08);
}
.products .product-miniature .product-container .product-description {
  padding:40px 20px !important;
}
.products .product-miniature .product-container .product-title {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: #000 !important;
}
.products .product-miniature .product-container .product-title a {
  color: #000 !important;
}

.products .product-miniature.style-6 .product-container .product-description {
  padding-top: 10px;
  overflow: hidden;
  text-align: center;
  position: relative;
}

 .products .product-miniature .product-mini__actions .btn-details {
  display: inline-block;
  background: #f6ea0f !important;
  color: #283186  !important;
  border: 1px solid #283186 ;
  border-radius: 0 !important;
  padding: 8px 14px;
  font-weight: 600;
  text-transform: none;
  text-align: center;
  margin: 8px auto 0;
}

/* — Carte produit : 1 bordure + ombrage ; pas de rayon — */
.products .product-miniature{
  background: #fff;
  border: none;     /* <= unique bordure */
  box-shadow: n;
  border-radius: 0;
  padding: 12px 12px 14px;
  margin: 0 0 16px;                      /* <= plus de marge latérale */
}

/* — Supprimer toute bordure/ombre interne potentielle — */
.products .product-miniature .thumbnail-container,
.products .product-miniature .product-thumbnail,
.products .product-miniature .sclc-thumb{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* — Vignette : largeur 100%, hauteur harmonisée, centrage vertical — */
.sclc-thumb{
  position: relative;
  display: block;
  height: var(--sclc-media-h, 240px);    /* hauteur commune */
  overflow: hidden;                       /* masque le surplus haut/bas */
}

/* Images (cover + rollover) : largeur 100%, hauteur auto, centrées verticalement */
.sclc-img{
  position: absolute !important;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}

/* Rollover au survol */
.sclc-cover{ z-index: 1; }
.sclc-roll{ z-index: 2; opacity: 0; transition: opacity .2s ease; }
.sclc-thumb:hover .sclc-roll{ opacity: 1; }

/* — Titre produit : centré, uppercase, plus compact — */
.products .product-miniature .product-title,
.products .product-miniature .sclc-title{
  text-align: center;
  margin: 10px 0 6px;
}
.products .product-miniature .product-title a,
.products .product-miniature .sclc-title a,
.products .product-miniature .product-title{
  font-size: 0.9rem;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #222;
}

/* — Description courte : centrée — */
.products .product-miniature .product-description,
.products .product-miniature .sclc-desc{
  text-align: center;
  font-size: .88rem;
  line-height: 1.35;
  color: #444;
  margin: 4px 0 10px;
}

/* — Bouton “Plus de détails” : centré, #f6ea0f, sans radius — */
.products .product-miniature .btn-more,
.products .product-miniature .sclc-more,
.products .product-miniature a.btn{
  display: inline-block;
  background: #f6ea0f !important;
  color: #000 !important;
  border: 1px solid #d8c900;
  border-radius: 0 !important;
  padding: 8px 14px;
  font-weight: 600;
  text-transform: none;
  text-align: center;
  margin: 8px auto 0;
}
.products .product-miniature .btn-more:hover,
.products .product-miniature .sclc-more:hover,
.products .product-miniature a.btn:hover{
  filter: brightness(0.96);
  text-decoration: none;
}

/* — Centrer les blocs texte/bouton — */
.products .product-miniature .thumbnail-container,
.products .product-miniature .product-description,
.products .product-miniature .button-container{
  text-align: center;
}

/* — Ajustements responsive de la hauteur visuelle — */
@media (max-width: 991.98px){
  .sclc-thumb{ height: var(--sclc-media-h-md, 220px); }
}
@media (max-width: 575.98px){
  .sclc-thumb{ height: var(--sclc-media-h-sm, 200px); }
}

/* — Important : annuler nos anciennes marges horizontales pour garder 4 colonnes — */
.products .products-list .product-miniature,
#products .products .product-miniature{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (optionnel) si ton thème a des gouttières trop larges sur les colonnes,
   tu peux les réduire légèrement (décommente si besoin) */
/*
#products .products .col-lg-3,
.products .products .col-lg-3{
  padding-left: 10px;
  padding-right: 10px;
}
#products .products{
  margin-left: -10px;
  margin-right: -10px;
}
*/

.product-information .h1,.product-information  .h2,.product-information  .h3, .product-information .h4, .product-information .h5,.product-information .h6,.product-information  h1,.product-information  h2,.product-information  h3,.product-information  h4,.product-information  h5,.product-information  h6 {
  font-weight: 400;
  font-family: inherit;
  color: var(--color-heading-text);
}

.products .product-miniature.style-1 .product-container .button-container {
  position: absolute;
  bottom: -15px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  opacity: 0;
  transition: all .3s ease 0s;
  z-index: 10 !important
}



.main_categories .elementor-cta__content {
  min-height: 225px;
  text-align: center;
  padding: 31px 0px 0px 0;

  width: 50%;
  float: right;
}
.main_categories h3::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: #000;
  margin: 10px auto 0;
}
.main_categories h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 15px !important;
}

.main_categories  p {
  letter-spacing: -0.06rem;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

/* Wrapper optionnel si ton conteneur image n'est pas positionné */
.anacv-img-wrap { position: relative; }

/* Bouton overlay — discret, animé, posé en bas-gauche de l'image */
.anacv-play-btn{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #f6ea0f;        /* jaune Socoloc */
  color: #283186;              /* bleu Socoloc */
  border: 1px solid #283186;
  border-radius: 999px;
  padding: .5rem .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  z-index: 3;                  /* au-dessus de l'image */
}
.anacv-play-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.anacv-play-btn svg{ display:block }

/* On garde la modal du module mais on masque son visuel (poster/iframe) injecté dans le hook) */
.anacv-wrapper > .anacv-poster-wrap{ display: none !important; }
/* Optionnel : si le module injecte directement une iframe/vidéo (pas de poster), on la cache aussi */
.anacv-wrapper > iframe,
.anacv-wrapper > video{ display: none !important; }

/* Modal du module : largeur & aspect corrects */
.anacv-modal .modal-dialog{ max-width: 960px;  z-index: 4440000;}
.anacv-modal .modal-body{ padding: 0; }
.anacv-modal .anacv-embed{ width: 100%; height: min(70vh, 70vw); display: block; }


/* Bouton play centré sur la vignette (modal) */
.anacv-poster-wrap { position: relative; display:block; }
.anacv-poster-wrap img { display:block; width:100%; height:auto; }

.tab-content__video-icon.anacv-play{
  position:absolute; inset:0; margin:auto;
  display:flex; align-items:center; justify-content:center;
  width:90px; height:90px; line-height:90px; text-align:center;
  font-size:20px;
  color:#fff; background-color:var(--pifoxen-primary, #ff5858);
  border-radius:50%;
  transition:all .5s ease;
  z-index:2;
}
.tab-content__video-icon.anacv-play:before{
  position:absolute; content:""; top:-12px; left:-12px; right:-12px; bottom:-12px;
  border-radius:50%; border:1px solid rgba(255,255,255,.15); z-index:1;
}
.tab-content__video-icon.anacv-play:hover{
  background-color:var(--pifoxen-base, #ff7a00);
  color:#fff;
}
.tab-content__video-icon .anacv-svg-play{ pointer-events:none; }

/* Ripple */
@keyframes ripple {
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.35); }
  70%  { box-shadow:0 0 0 20px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.tab-content__video-icon .ripple,
.tab-content__video-icon .ripple:before,
.tab-content__video-icon .ripple:after{
  position:absolute; top:50%; left:50%;
  width:115px; height:115px; transform:translate(-50%,-50%);
  border-radius:50%; animation:ripple 2.6s infinite;
  content:"";
}
.tab-content__video-icon .ripple:before{ animation-delay:.9s; }
.tab-content__video-icon .ripple:after { animation-delay:.6s; }

/* Modal au-dessus du header */
.anacv-modal { z-index: 20010 !important; }
.modal-backdrop { z-index: 20000 !important; }

/* Inline : la vidéo prend la largeur du parent (ex: .tvh-hero__col--media) */
.tvh-hero__col--media .anacv-inline,
.tvh-hero__col--media .anacv-inline .ratio,
.tvh-hero__col--media .anacv-inline .anacv-embed{
  width:100%; max-width:100%;
}

/* Bouton play centré (modal) – garde ton style visuel existant */
.anacv-poster-wrap{ position:relative; display:block; }
.anacv-poster-wrap img{ display:block; width:100%; height:auto; }
.anacv-play{
  position:absolute; inset:0; margin:auto;
  display:flex; align-items:center; justify-content:center;
  width:90px; height:90px; line-height:90px; text-align:center;
  font-size:20px; color:#fff; background:#283186; border-radius:50%;
  z-index:2;
}

/* Modale au-dessus du header + clic vidéo garanti */
.anacv-modal{ z-index: 20010 !important; }      /* au-dessus du header */
.modal-backdrop{ z-index: 20000 !important; }
.anacv-modal .modal-body,
.anacv-modal .modal-content,
.anacv-modal iframe.anacv-embed,
.anacv-modal video.anacv-embed{
  position: relative; z-index: 1; pointer-events: auto; /* pas d’overlay bloquant */
}

/* Inline : la vidéo/iframe prend la largeur du conteneur courant */
.anacv-inline, .anacv-inline .ratio, .anacv-inline .anacv-embed{ width:100%; max-width:100%; }

/**** ANACV – Correctifs finaux (modal + bouton) ****/
.products .product-miniature .product-mini__actions .btn-details
/* 1) Forcer le bouton Play unique, centré, sans déplacement au survol */
.tvh-hero__media { position: relative; }
.tvh-hero__media .anacv-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  color: #fff !important;
  background: #283186 !important;
  border: none !important;
  text-decoration: none !important;
  z-index: 3 !important;
  /* NE PAS déplacer le bouton au hover (pas de translate) */
  transition: filter .2s ease, background-color .2s ease !important;
}
.tvh-hero__media .anacv-play-btn:hover {
  background: #1f2773 !important;
  filter: none !important;
}
/* halo et ripple */
.tvh-hero__media .anacv-play-btn:before{
  content:""; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
}
.tvh-hero__media .anacv-play-btn .ripple,
.tvh-hero__media .anacv-play-btn .ripple:before,
.tvh-hero__media .anacv-play-btn .ripple:after{
  position:absolute; top:50%; left:50%;
  width:115px; height:115px; transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(40,49,134,.35);
  animation: anacv-ripple 3s infinite;
  border-radius:50%;
}
.tvh-hero__media .anacv-play-btn .ripple:before{ content:""; animation-delay:.9s; }
.tvh-hero__media .anacv-play-btn .ripple:after { content:""; animation-delay:.6s; }
@keyframes anacv-ripple{
  0%{ box-shadow:0 0 0 0 rgba(40,49,134,.35); }
  70%{ box-shadow:0 0 0 20px rgba(40,49,134,0); }
  100%{ box-shadow:0 0 0 0 rgba(40,49,134,0); }
}

/* 2) Neutraliser les ANCIENS styles qui entraient en conflit
      (bouton bas-gauche + libellé “Lire la vidéo”) */
.anacv-img-wrap .anacv-play-btn,
.anacv-play-btn.anacv-legacy,
.anacv-poster-wrap .anacv-play,
.tab-content__video-icon.anacv-play {
  display: none !important;
}

/* 3) Empêcher tout overlay du conteneur image de bloquer le clic */
.tvh-hero__media::before,
.tvh-hero__media::after,
.tvh-hero__media .overlay,
.tvh-hero__media .shade,
.tvh-hero__media .mask { pointer-events: none !important; }

/* 4) Z-index : la modale doit passer au-dessus du breadcrumb et du header */
.anacv-modal         { z-index: 1000002 !important; }  /* > breadcrumb (1000) */
.modal-backdrop      { z-index: 1000001 !important; }
/* S'assurer que le contenu de la modale capte bien les clics */
.anacv-modal .modal-content,
.anacv-modal .modal-body { position: relative; pointer-events: auto !important; }

/* 5) Taille de la vidéo dans la modale */
.anacv-modal .modal-body { padding: 0 !important; }
.anacv-modal .anacv-embed { width: 100% !important; height: min(70vh, 70vw) !important; display: block !important; }

/***** ANACV — Correctifs modale : z-index + overlays + clics *****/

/* 1) Mettre la modale tout en haut de tous les empilements */
.anacv-modal { 
  display: none;;
  position: fixed;           /* modal Bootstrap est fixed de base, on s'assure */
  z-index: 2147483647 !important; /* plus haut que n'importe quel header/breadcrumb */
}
.modal-backdrop.show {
  display: none;
  z-index: 0 !important; /* juste derrière la modale */
}

/* 2) Neutraliser tout “voile” ajouté par le thème sur la modale */
.anacv-modal::before,
.anacv-modal::after,
.anacv-modal .modal-content::before,
.anacv-modal .modal-content::after,
.anacv-modal .overlay,
.anacv-modal .shade,
.anacv-modal .mask {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* 3) S’assurer que le contenu capte bien les clics */
.anacv-modal,
.anacv-modal .modal-dialog,
.anacv-modal .modal-content,
.anacv-modal .modal-body,
.anacv-modal .anacv-embed,
.anacv-modal iframe,
.anacv-modal video {
  pointer-events: auto !important;
}

/* 4) Taille & padding du contenu */
.anacv-modal .modal-body { padding: 0 !important; }
.anacv-modal .anacv-embed,
.anacv-modal iframe,
.anacv-modal video {
  width: 100% !important;
  height: min(70vh, 70vw) !important;
  display: block !important;
}

/* 5) Par sécurité, éviter qu’un breadcrumb/entête colle au-dessus */
.breadcrumb,
#breadcrumb,
#ana-breadcrumb,
.header,
#header,
.elementor-header,
.elementor-header-sticky {
  z-index: 1000 !important; /* assez haut pour le site, mais très inférieur à la modale */
}

/* 6) Bloqueurs d’événements résiduels que certains thèmes insèrent dans <body> */
body.modal-open { pointer-events: auto !important; }



/* Liste avec ticks Font Awesome */
.elementor-text-editor {
  list-style: none;         /* on enlève les puces natives */
  padding-left: 0;
  margin: 0;
}

.elementor-text-editor li {
  position: relative;
  padding-left: 1.6em;      /* espace pour l’icône */
}

/* Icône avant chaque <li> */
.elementor-text-editor li::before {
  content: "\f00c";         /* code du check */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; /* compat FA6/FA5 */
  font-weight: 900;         /* solid */
  position: absolute;
  left: 0;
  top: 0.35em;
  color: #f6ea0f;           /* couleur demandée */
  font-size: 1em;        /* taille de l’icône (ajuste si besoin) */
  line-height: 1;
}


/* ===== Empty Category CTA ===== */
.empty-category-cta {
  position: relative;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  /*box-shadow: 0 10px 30px rgba(0,0,0,.06);*/
  overflow: hidden;
  margin: 12px 0 24px;
}

.empty-category-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(40,49,134,0.08) 0%, rgba(40,49,134,0) 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(246,234,15,0.10) 0%, rgba(246,234,15,0) 70%);
  pointer-events: none;
}

.empty-category-cta__content {
  position: relative; /* au-dessus du ::before décoratif */
  z-index: 1;
}

.empty-category-cta__title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #283186; /* bleu Anagramme/Socoloc style */
}

.empty-category-cta__subtitle {
  margin: 0 0 14px;
  font-size: 1rem;
}

.empty-category-cta__bullets {
  margin: 0 0 18px 0;
  padding: 0;
  list-style: none;
}

.empty-category-cta__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: .98rem;
  position: relative;
  padding-left: 28px;
}

.empty-category-cta__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  font-weight: 700;
  color: #f6ea0f; /* jaune */
  background: #283186;       /* pastille bleue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2px);
  font-size: 12px;
}

.empty-category-cta__btn {
  font-weight: 500;
  text-transform: none;
  letter-spacing: .03em;
  padding: .9rem 1.2rem;
  border-radius: 0;
  box-shadow: 0 10px 20px rgba(40,49,134,.15);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

/* Harmonise avec ta charte #283186 / #f6ea0f */
.empty-category-cta__btn.btn-primary {
  background-color: #283186;
  border-color: #283186;
}
.empty-category-cta__btn.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 26px rgba(40,49,134,.22);
  transform: translateY(-1px);
}