/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 30 2026 | 14:50:12 */
/* =========================================
   THUMB GALLERY (BDThemes / Element Pack)
   Skin réutilisable (sans IDs Elementor)
   - Ajoute la classe: tg-thumb-gallery sur le widget
   - Optionnel: tg-feature-block sur la section/parent
========================================= */

/* ---------- Variables (modifiables par instance via CSS) ---------- */
.tg-thumb-gallery{
  --tg-h: clamp(460px, 38vw, 660px);
  --tg-radius: 22px;
  --tg-pad: clamp(16px, 2vw, 34px);

  --thumb-w: 120px;
  --thumb-h: 80px;
  --thumb-gap: 12px;

  --ui-gap: 10px;
  --accent: #EF4C23;
  --shadow: 0 14px 34px rgba(0,0,0,.14);
  --bg: rgba(0, 59, 92, .06);
}

/* =========================================================
   BTI PRODUCT SLIDER — ordre maquette + bouton pastille
   Scope: ajoute la classe "bti-product-slider" au widget/section
========================================================= */

.bti-product-slider .bdt-ep-carousel-item{
  position: relative;
  background-color: var(--bleu-bti);
  border-radius: var(--btn-radius-15);
}
.bdt-ep-carousel-thumbnail {
    position: relative;
    overflow: hidden;
    background-image: url(/wp-content/uploads/2026/02/Elements-graphiques.svg);
    background-position: center;
	background-size: 130%;
	overflow: visible;
	height: 270px;
	padding: var(--btn-py);
}

@media screen and (max-width: 768px) {
	.bdt-ep-carousel-thumbnail {background-size: 115% !important;}
	.bdt-ep-carousel-item {margin-left: 6px; margin-right: 6px;}
}

/* Zone texte sous l’image */
.bti-product-slider .bdt-ep-carousel-desc{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .9vw, 14px);
}
.bdt-ep-carousel-desc {padding: var(--mb-h5) !important;}

/* 1) Catégorie (1ère ligne) */
.bti-product-slider .bti-card-cat{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--orange-bti, #EF4C23);
  font-size: var(--mt-h2);
  margin: 0;
  /* optionnel mais safe : évite que ça se mette sur 2 lignes */
  display: inline-flex;
  align-items: baseline;
}
/* Ajout du " /" (avec espace insécable) */
.bti-product-slider .bti-card-cat::after{
  content: " \00A0/";
  display: inline;
}

/* 2) Titre (2e ligne) */
.bti-product-slider .bdt-ep-carousel-title{
  margin: 0 !important;
  line-height: 1.05;
}

.bti-product-slider .bdt-ep-carousel-title a{
  color: var(--blanc, #fff);
  text-decoration: none;
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* 3) Description (3e ligne) */
.bti-product-slider .bti-card-desc{
  color: rgba(255,255,255,.9);
  max-width: 34ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.35;
  padding-right: 30%;
}

/* --- Bouton "Voir le produit" => pastille + (normal/hover) --- */
.bti-product-slider .bdt-ep-carousel-button.bti-plus-btn{
  position: absolute;
  right: clamp(16px, 1.6vw, 26px);
  bottom: clamp(16px, 1.6vw, 26px);

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  color: var(--blanc, #fff) !important;
  text-decoration: none !important;
}

/* pastille image (normal) */
.bti-product-slider .bdt-ep-carousel-button.bti-plus-btn::before{
  content:"";
  width: clamp(44px, 3.4vw, 56px);
  height: clamp(44px, 3.4vw, 56px);
  background: url("/wp-content/uploads/2026/02/Pastille-plus.svg")
    center / contain no-repeat;
}

/* hover => pastille orange */
.bti-product-slider .bdt-ep-carousel-button.bti-plus-btn:hover::before{
  background-image: url("/wp-content/uploads/2026/02/Pastille-plus-orange.svg");
}

/* label "Voir le produit" */
.bti-product-slider .bdt-ep-carousel-button.bti-plus-btn span{
  background: transparent !important;
  color: var(--blanc, #fff) !important;
  font-size: 12px;
  line-height: 1;
  padding: 0 !important;
}

/* Mobile: évite que la pastille écrase le texte */
@media (max-width: 767px){
  .bti-product-slider .bti-card-desc{ max-width: 26ch; }
  .bti-product-slider .bdt-ep-carousel-button.bti-plus-btn{
    right: 14px;
    bottom: 14px;
  }
}


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

span.pc-category.bdt-first-column {display: none;}

/* Optionnel: aligne la section en haut (si tu ajoutes tg-feature-block au parent) */
.tg-feature-block > .elementor-container,
.tg-feature-block > .e-con-inner{
  align-items: flex-start;
}

/* ---------- GALLERY: hauteur stable sans casser la mécanique ---------- */
.tg-thumb-gallery .bdt-slideshow,
.tg-thumb-gallery .bdt-slideshow-items{
  height: var(--tg-h) !important;
  min-height: 0 !important;
}

/* Neutralise le ratio inline sur le <ul> (sinon la hauteur peut "exploser") */
.tg-thumb-gallery .bdt-slideshow-items{
  aspect-ratio: auto !important;
}

/* Cadre + fond (repère pour les contrôles absolus) */
.tg-thumb-gallery .bdt-slideshow{
  position: relative !important;
  border-radius: var(--tg-radius);
  overflow: hidden;
  background: var(--bg);
}

/* IMPORTANT: ne pas changer le position/display des <li> */
.tg-thumb-gallery .bdt-slideshow-items > li{
  height: 100% !important;
  padding: var(--tg-pad);
  box-sizing: border-box;
}

/* Image: pas de crop, centrée */
.tg-thumb-gallery .bdt-slideshow-items img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
}

/* ---------- RESET UIkit/BDT: évite les déplacements en tablette/mobile ---------- */
.tg-thumb-gallery .bdt-thumb-gallery-navigation-wrapper,
.tg-thumb-gallery .bdt-thumbnav-wrapper,
.tg-thumb-gallery .bdt-slidenav-container{
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

/* Certains thèmes cachent les contrôles (hover-only / visible@m / etc.) */
.tg-thumb-gallery .bdt-thumb-gallery-navigation-wrapper,
.tg-thumb-gallery .bdt-thumbnav-wrapper{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ---------- THUMBS ---------- */
.tg-thumb-gallery .bdt-thumbnav-wrapper{
  position: absolute !important;
  left: var(--tg-pad) !important;
  bottom: var(--tg-pad) !important;
  z-index: 50 !important;
}

.tg-thumb-gallery .bdt-thumbnav{
  display: flex !important;
  gap: var(--thumb-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tg-thumb-gallery .bdt-thumb-gallery-thumbnav > a{
  width: var(--thumb-w) !important;
  height: var(--thumb-h) !important;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}

.tg-thumb-gallery .bdt-thumb-gallery-thumbnav.bdt-active > a{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- ARROWS: toujours visibles + en bas à droite ---------- */
.tg-thumb-gallery .bdt-thumb-gallery-navigation-wrapper{
  position: absolute !important;
  right: var(--tg-pad) !important;
  bottom: var(--tg-pad) !important;
  left: auto !important;
  top: auto !important;
  z-index: 60 !important;
}

/* Neutralise le centrage / positionnement auto du container des flèches */
.tg-thumb-gallery .bdt-arrows-container.bdt-slidenav-container{
  position: static !important;
  width: auto !important;
}

/* Empile les flèches en colonne */
.tg-thumb-gallery .bdt-arrows-container{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ui-gap) !important;
  align-items: center !important;
}

/* Next en haut, Prev en bas (optionnel mais pratique) */
.tg-thumb-gallery .bdt-navigation-next{ order: 1; }
.tg-thumb-gallery .bdt-navigation-prev{ order: 2; }

/* Boutons */
.tg-thumb-gallery a.bdt-slidenav{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid !important;
  place-items: center !important;
  text-decoration: none;
  padding: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Force “toujours visible” même si le plugin les met hover-only */
.tg-thumb-gallery .bdt-visible-toggle .bdt-slidenav,
.tg-thumb-gallery .bdt-visible-toggle:not(:hover) .bdt-slidenav{
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Hover */
.tg-thumb-gallery a.bdt-slidenav:hover{
  transform: translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .tg-thumb-gallery{
    --tg-h: clamp(360px, 55vw, 520px);
  }
}

@media (max-width: 767px){
  .tg-thumb-gallery{
    --tg-h: clamp(300px, 70vw, 440px);
    --tg-pad: 14px;
    --thumb-w: 92px;
    --thumb-h: 62px;
  }

  .tg-thumb-gallery a.bdt-slidenav{
    width: 40px !important;
    height: 40px !important;
  }

  /* Évite collision thumbs/flèches: thumbs scrollables */
  .tg-thumb-gallery .bdt-thumbnav{
    max-width: calc(100% - 70px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tg-thumb-gallery .bdt-thumbnav::-webkit-scrollbar{
    display: none;
  }
}



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

/* =========================================================
   BTI — Cards style "produits standards"
========================================================= */

.bti-product-grid{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:28px;
}

@media (max-width:1200px){
	.bti-product-grid{
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}
}

@media (max-width:900px){
	.bti-product-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

@media (max-width:640px){
	.bti-product-grid{
		grid-template-columns:1fr;
	}
}

/* Carte */
.bti-product-card{
	background:#c7d2de; /* gris bleuté */
	border-radius:22px;
	overflow:hidden;
	position:relative;
	height:100%;
	display:flex;
	flex-direction:column;
}

/* Zone image */
.bti-product-card__media-wrap{
	position:relative;
	min-height:260px;
	background:#f2f4f6;
	overflow:hidden;
}

/* petit décor style carte produit */
.bti-product-card__media-wrap::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 62%, rgba(255,255,255,.18) 63%, rgba(255,255,255,.18) 76%, rgba(255,255,255,0) 77%);
	pointer-events:none;
}

.bti-product-card__media-link{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	height:100%;
	padding:26px 24px 0;
	text-decoration:none !important;
}

.bti-product-card__media{
	max-width:100%;
	width:100%;
	height:230px;
	object-fit:contain;
	object-position:center bottom;
	display:block;
}

.bti-product-card__media--placeholder{
	width:100%;
	height:230px;
	background:rgba(255,255,255,.35);
}

/* Bloc bleu */
.bti-product-card__content{
	background:var(--bleu-bti, #0d4874);
	color:#fff;
	padding:26px 22px 20px;
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	min-height:270px;
}

/* catégorie orange */
.bti-product-card__category{
	color:var(--orange-bti, #f85a2a);
	font-size:28px;
	line-height:1;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:6px;
}

.bti-product-card__category span{
	color:var(--orange-bti, #f85a2a);
}

/* titre blanc gras */
.bti-product-card__title{
	margin:0 0 10px;
	font-size:24px;
	line-height:1.05;
	font-weight:800;
}

.bti-product-card__title a{
	color:#fff !important;
	text-decoration:none !important;
}

/* description */
.bti-product-card__desc{
	color:#fff;
	font-size:16px;
	line-height:1.35;
	font-weight:400;
	max-width:26ch;
}

/* footer / CTA */
.bti-product-card__footer{
	margin-top:auto;
	padding-top:18px;
}

.bti-product-card__button{
	display:flex;
	align-items:center;
	gap:14px;
	text-decoration:none !important;
	color:#fff !important;
	font-weight:700;
}

.bti-product-card__button-icon{
	width:52px;
	height:52px;
	border:2px solid #fff;
	border-radius:50%;
	position:relative;
	flex:0 0 52px;
}

.bti-product-card__button-icon::before,
.bti-product-card__button-icon::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	background:#fff;
	transform:translate(-50%, -50%);
}

.bti-product-card__button-icon::before{
	width:22px;
	height:2px;
}

.bti-product-card__button-icon::after{
	width:2px;
	height:22px;
}

.bti-product-card__button-label{
	font-size:14px;
	line-height:1.2;
	font-weight:700;
}

/* Hover */
.bti-product-card__button:hover .bti-product-card__button-icon{
	background:var(--orange-bti, #f85a2a);
	border-color:var(--orange-bti, #f85a2a);
}

.bti-product-card__title a:hover,
.bti-product-card__button:hover .bti-product-card__button-label{
	color:#fff !important;
}

/* =========================================================
   BTI — PAGE CARDS (Shortcode) : GRID 3 COLONNES
   Wrapper HTML: <div class="bti-product-slider bti-page-cards"> ... </div>
========================================================= */

/* 1) Layout en grille */
.bti-page-cards{
  --bti-card-gap: 35px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bti-card-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablette: 2 colonnes */
@media (max-width: 1024px){
  .bti-page-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 colonne */
@media (max-width: 767px){
  .bti-page-cards{
    grid-template-columns: 1fr;
  }
}

/* 2) Neutralise l’héritage "swiper-slide" (width/margin inline) */
.bti-page-cards > article.bdt-ep-carousel-item{
  width: auto !important;
  margin: 0 !important;
  flex: initial !important;
}

/* 3) Carte (structure) */
.bti-page-cards > article.bdt-ep-carousel-item{
  position: relative;
  border-radius: var(--btn-radius-15, 24px);
  overflow: hidden;
  background: var(--bleu-bti, #0b3d59);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Colle la zone texte à l’image (bdt-margin-top met un gap) */
.bti-page-cards .bdt-ep-carousel-desc.bdt-margin-top{
  margin-top: 0 !important;
}