:root {
	/* Définition des variables globales de couleur */
	--yellow-color: #ffda44;
	--dark-color: #343c47;
	--light-yellow-color: #fffbea;
}

.filter-invers {
	/* Inverse les couleurs (utilisé souvent pour les icônes sur fond clair) */
	filter: invert(100%);
}
#header_desktop{
	width:100% !important;
	padding:0 !important;
}
#header_top{
	z-index:10 !important;
}
#header_btm{
	z-index:5 !important;
}
.header-mobile {
	/* Fixe le header mobile en haut de l’écran avec une priorité d’affichage */
	position: fixed;
	z-index: 9999;
}

body {
	/* Supprime les marges et padding par défaut */
	padding: 0px !important;
	margin: 0px !important;
}

.add_to_cart_button {
	/* Animation douce sur les boutons "ajouter au panier" */
	transition: all ease-out 0.3s !important;
}

.hidden {
	/* Cache tout débordement d’un élément */
	overflow: hidden;
}

.elementor-carousel-image {
	/* Force l’image à s’ajuster dans son conteneur sans la couper */
	background-size: contain;
}

/* Dégradé de fond sur certaines pages spécifiques */
.page-id-127 main,
.page-id-97 main,
.page-id-93 main,
.page-id-95 main,
.page-id-87 main,
.page-id-83 main,
.page-id-85 main,
.page-id-812 main {
	background: linear-gradient(transparent 650px, #FFFBEA 800px) !important;
}

/* Cache le texte personnalisé sur certaines catégories */
.category-63 .custom-text-container,
.category-48 .custom-text-container,
.category-46 .custom-text-container,
.category-72 .custom-text-container,
.category-44 .custom-text-container {
	display: none;
}

.sub-menu {
	/* Force les sous-menus à prendre toute la largeur */
	width: 100%;
}

/* Mise en avant du bouton "Contact" dans le menu */
.menu-item-104 a {
	box-shadow: inset 0px 0px 0px black !important;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.49);
	color: var(--dark-color) !important;
	background-color: var(--yellow-color);
	border-radius: 10px;
	padding: 5px 20px !important;
	transition: all ease-out 0.3s !important;
}
.menu-item-104 a::after {
	display: none !important;
}
.menu-item-104 a:hover {
	box-shadow: inset 2px 2px 3px black !important;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

/* Supprime le soulignement des liens du sous-menu */
.elementor-sub-item {
	text-decoration: none !important;
}

.footer {
	/* Couleur de fond du pied de page */
	background-color: #FFFBEA;
}

/* Couleur de l’icône de compte utilisateur */
.acount-icon .cls-1 {
	stroke: none !important;
	fill: var(--yellow-color) !important;
}

.color-white {
	/* Texte en blanc */
	color: white !important;
}

/* Supprime les soulignements des h3 */
h3 {
	text-decoration: none !important;
}

.display-none {
	/* Cache l’élément */
	display: none;
}

/* Changement de style des puces de listes */
ul {
	list-style-type: square;
}
ul ul {
	list-style-type: disclosure-closed;
}

/*
p {
    font-family: 'DM-sans', sans-serif !important;
}
*/

/* Style pour les liens dans les paragraphes */
p a {
	font-family: 'DM-sans', sans-serif !important;
	font-weight: bold !important;
}

/* Renforce la graisse des textes en <strong> */
strong {
	font-weight: bold !important;
}

/* Ajoute des bords arrondis et masque le dépassement */
.border-radius {
	border-radius: 20px;
	overflow: hidden;
}

/*
h1,h2,h3 strong {
	font-weight: bolder !important;
}
*/

/* Cercle décoratif placé à côté des titres */
.title-circle {
	width: 50px;
	height: 50px;
	background-color: var(--yellow-color);
	border-radius: 25px;
	position: absolute;
	left: -10px;
	top: -2px;
	z-index: 0;
}

/* Positionnement relatif pour les titres contenant un cercle */
.title-with-circle {
	position: relative !important;
	z-index: 1;
}

/* Fait en sorte qu’un élément prenne toute la largeur d’une grille */
.col-span-full {
	grid-column: 1 / -1;
}

/* Positionnement utilitaire */
.top {
	top: 0px;
}
.left {
	left: 0px;
}
.bottom {
	bottom: 0px;
}
.right {
	right: 0px;
}

.simple-translate-dark-theme {
	/* Cache le widget de traduction en thème sombre */
	display: none;
}

/* Rotation d’un triangle (utilisé pour flèche ou icône) */
.triangle-rotate {
	transform: rotate(-45deg);
}

/* Couvre les images dans les carrousels d’articles + coins arrondis */
.single-post .elementor-carousel-image {
	background-size: cover !important;
	border-radius: 5px;
}

.show-more{
	padding: 4px 8px;
	border: solid 2px var(--dark-color);
	background: var(--dark-color);
	color: white !important;
	cursor:pointer;
	border-radius:6px;
	transition: all ease-out 0.3s !important;
}

.show-more:hover{
	color:var(--dark-color) !important;
	background:transparent;
		
}


@media screen and (min-width: 1440px) {
    .eventail-card {
        min-width: 620px;
        min-height: 350px;
    }
}

.eventail-card {
    max-width: 620px;
}

.eventail-card:hover {
    transform: scale(1.01) !important;
}
.bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--dark-color), transparent); /* Dégradé sombre */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease; /* Transition fluide */
}

.bg:hover::before {
    opacity: 1; /* Rendu visible au survol */
}

.hg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--dark-color), transparent); /* Dégradé sombre */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease; /* Transition fluide */
}

.hg:hover::before {
    opacity: 1; /* Rendu visible au survol */
}

.hd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(225deg, var(--dark-color), transparent); /* Dégradé sombre */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease; /* Transition fluide */
}

.hd:hover::before {
    opacity: 1; /* Rendu visible au survol */
}
.bd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(315deg, var(--dark-color), transparent); /* Dégradé sombre */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease; /* Transition fluide */
}

.bd:hover::before {
    opacity: 1; /* Rendu visible au survol */
}

/*.dom-front-page{
    background: linear-gradient(transparent 1%, #FFFBEA 5% 100%) !important;
}*/

.uc_more_btn{
    border: solid 3px;
}
.black-border{
      text-shadow: 
    -1px -1px 0 black, /* Haut-gauche */
    1px -1px 0 black,  /* Haut-droite */
    -1px 1px 0 black,  /* Bas-gauche */
    1px 1px 0 black;   /* Bas-droite */
}
.h1-txt{
    font-size: 40px;
    font-weight: 600 !important;
}

.solution-card{
    border-radius: 20px;
    overflow: hidden;
    max-height: 433px;
    max-width:650px !important;
}
.global-solution-card{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  
    border-radius: 20px;
    overflow: hidden;
}
.img-solution-card {
    position: relative; /* Nécessaire pour les éléments enfants absolus */
    width: 100%;
    height: 100%;
    
}
.button-solution-card{
    background-color: var(--yellow-color);
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--dark-color);
    text-decoration: none !important;
    border: solid 3px var(--dark-color) ;
    z-index: 30;
    position: absolute;
    bottom: 20px;
    left: 20px;
    transition: all 0.5s ease-in-out;
    font-weight: bold;
}
.button-solution-card:hover{
    color: white;
    transition: all 0.3s ease-in-out;
	background-color: rgba(0,0,0,0.38);

}
.front-img-solution-card, .front-img-solution-card-convoyage, .front-img-solution-card-chassis, .front-img-solution-card-postetravail {
    width: 100%;
    height: 100%; 
}
.back-img-solution-card {
    display: block;
    width: 100%;
    height: 100% !important;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    30% { opacity: 1; }
    50% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

.front-img-solution-card {
    
    position: absolute;
    left: 0px;
    top: 0px;
    animation: fadeOut 10s ease-in-out infinite; /* Animation qui se répète toutes les 5s */
    animation-delay: 2s; /* Délai initial, ajustez selon vos besoins */
    transition: all 0.7s ease-in-out;
    border-radius: 20px;
}

.front-img-solution-card-convoyage{
      position: absolute;
    left: 0px;
    top: 0px;
    animation: fadeOut 10s ease-in-out infinite; /* Animation qui se répète toutes les 5s */
    animation-delay: 3s; /* Délai initial, ajustez selon vos besoins */
    transition: all 0.7s ease-in-out;
    border-radius: 20px;  
}
.front-img-solution-card-chassis{

      position: absolute;
    left: 0px;
    top: 0px;
    animation: fadeOut 10s ease-in-out infinite; /* Animation qui se répète toutes les 5s */
    animation-delay: s; /* Délai initial, ajustez selon vos besoins */
    transition: all 0.7s ease-in-out;
    border-radius: 20px;  
}

.front-img-solution-card-postetravail{
      position: absolute;
    left: 0px;
    top: 0px;
    animation: fadeOut 10s ease-in-out infinite; /* Animation qui se répète toutes les 5s */
    animation-delay: 4s; /* Délai initial, ajustez selon vos besoins */
    transition: all 0.7s ease-in-out;
    border-radius: 20px;  
}

.section-txt-solution-card{
    width: 40%;
    display: block;
    margin-left: -30px;
    position: absolute;
    z-index: 10;
    height: 100%;
    right: 0px;

}
.txt-solution-card{
    background-color: var(--dark-color);
    height: 100%;
    width: 100%;
    clip-path: polygon(00% 0%, 100% 0%, 100% 100%, 10% 100%);
    padding: 10px 5px 10px 0px;
    color: white;
}
.txt-solution-card p{
	letter-spacing:-0.7px;
}

@media screen and (max-width: 700px){
    .txt-solution-card p{
		letter-spacing: -0.5px;
        font-size:11px;
    }
     .txt-solution-card h3{
         font-size:15px;
         margin-bottom:7px;
     }
    .txt-solution-card .over-txt{
        display:none;
    }
}
.shape-outside{
    clip-path: polygon(0% 0%, 30% 0%, 60% 100%, 0% 100%);
    shape-outside: polygon(0% 0%, 10% 0%, 50% 100%, 0% 100%);
    
    height: 100%;
    min-width:30%;
    -webkit-clip-path: polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%);
    float: left;
}
.title-solution-card{
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: bold;
}

.fiche-technique table{
    border-radius: 10px;
    overflow: hidden;
}
.fiche-technique table th{
    border: none !important;
}
.fiche-technique table td{
    border: none !important;
    text-align: center;
    
}

.fiche-technique tr:nth-child(2n+1){
     background-color: #fffeef ;
}
.fiche-technique tr:nth-child(2n+1):hover{
     background-color: #f6f5e7 ;
}
table tbody tr:hover > td, table tbody tr:hover > th {
    background-color: transparent !important;
}
.fiche-technique td{
    padding: 5px 10px !important;
}

.shadow-product{
    box-shadow: 0px 0px 10px lightgrey;
}
.bento-fiche-technique-content{
	overflow:auto;
	max-height:80dvh;
}
.bento-fiche-technique{
    box-shadow: 0px 0px 10px lightgrey;
	min-height:fit-content;
	max-height:100vh;
}
.fiche-technique{
	overflow:auto;
}
.section-image-produit{
    box-shadow: 0px 0px 10px lightgrey !important;
}
.product-icon-section{
     box-shadow: 0px 0px 10px lightgrey;
}
.product-right-bento{
    gap: 20px;
}
.flex-control-nav{
    margin-top:  20px !important;
}
table tbody tr:hover > td, table tbody tr:hover > th{
	background-color: transparent !important;
}
table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th{
	background-color: transparent !important;
}
tr:nth-child(2n+1){
	background-color: rgba(0,0,0,0.06) !important;
}
table{
    border-collapse: collapse;
}
.step-download-link .button{
	background: transparent !important;
	color:white !important;
}

.flex-active-slide{
height: 540px !important;
align-items: center
}

.cross-product-shortcode{
	width :100%;
}
.cross-sells-products{
	display:flex !important;
	justify-content:space-around;
	
}
.product-card a{
	width:100%;
}
.cross-sells-products .product-card .quantity-add .button{
    max-height: 50px !important;
    background-color: var(--yellow-color) !important;
    color: var(--dark-color) !important;
    box-shadow: 0px 0px 0px black !important;
    border: solid 2px var(--dark-color) !important;
    padding: 8px 10px;
}
.cross-sells-products .product-card .quantity-add .button:hover{
    background-color: var(--yellow-color)!important;
    transform: scale(1.05) !important;
    transition-duration: 0.2s;
    box-shadow: 0px 0px 10px lightgrey !important;
    color: var(--dark-color) !important;
}
.cross-sells-products .product-card .cross-sell-product-img {
    height: 200px;
    width: 100%;
    align-items: center;
}
.cross-sells-products .product-card .cross-sell-product-img .attachment-woocommerce_thumbnail{
    margin: 0px !important;
}
/*mise en page bandeau ajout panier*/
.variations select{
    width: 200px !important;
    border-radius: 5px;
    border:none;
    background-color: #faf2d2 !important;
    box-shadow: 0px 0px 5px lightgrey;
    margin: 0px;
}
.variations_button {
    flex-direction: row !important;
    align-items: end;
}
.qty{
    max-height: 50px;
    margin-left: 10px;
}
.quantity input{
    margin: 0px !important;
}
.variations{
    display: block;
    background-color: #fffeef;
    border-radius: 15px;
    margin-bottom: 10px !important;
   
    padding: 5px 0px !important;
}
.variations tbody tr {
    display: flex;
    padding: 5px !important;
    justify-content: space-between;
    
}
table.variations tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th{
    background-color: transparent !important;
}
table.variations tbody tr:hover > td, table tbody tr:hover > th{
    background-color: transparent !important;
}
.single_add_to_cart_button{
    max-height: 50px !important;
    background-color: var(--yellow-color) !important;
    color: var(--dark-color) !important;
    box-shadow: 0px 0px 0px black !important;
    border: solid 2px var(--dark-color) !important;
}
.single_add_to_cart_button:hover{
    background-color: var(--yellow-color) !important;
    transform: scale(1.05) !important;
    box-shadow: 0px 0px 10px lightgrey !important;
    color: var(--dark-color) !important;
}
.woocommerce-variation-add-to-cart{
    gap: 10px;
}
.add_to_cart_button{
    padding: 5px 8px;
    border-radius: 10px;
    margin: 0px !important;
}
td.value{
    display: flex;
    align-items: center;
    flex-direction: column;
}


.arrow-mobile {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(90deg); /* vers le bas par défaut */
}

.extention-arrow-mobile.collapsed .arrow-mobile {
    transform: rotate(270deg); /* vers le haut quand fermé */
}

.cart{
	align-items:end;
}
.extention-arrow{
	z-index:10;
	cursor: pointer;
	position: absolute;
	left:0px;
	width:33px;
	height:300px;
	justify-content:center;
}
.single input{
	height:2.5rem !important;
	padding:0.5rem 0rem 0.5rem 1rem !important;
	overflow:hidden;
}
.single tr:nth-child(2n+1){
	background-color:transparent !important;
}
.added_to_cart{
    padding: 5px 0px !important;
}
.woocommerce-loop-product__buttons{
    margin-top: 5px;
    align-items: center !important;
    padding: 0px 5px;
}

.attachment-woocommerce_thumbnail{
    background-color: white;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 30px !important;
    
}
.eael-author-avatar{
    display: none !important;
    
}
.eael-posted-on{
    color: #d2d2d1;
    
}
.woocommerce-loop-product__title{
    padding: 5px !important;
    
}
.login-to-download-button {
    background-color: var(--yellow-color) !important;
    padding: 5px !important;  
    border-radius: 10px !important;
    color: black !important;
}
.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    width: 15em !important;  /* Taille carrée du conteneur */
    height: 15em !important;
    background-color: white;  /* Fond blanc */
    object-fit: contain !important;
}

.ht-product-image-wrap{border-radius: 10px 10px 0px 0px;
    background-color: white !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
}

/*agencement des form panneau*/
.reset_variations{
    display: none;
}
.variations{
    width: 100% !important;
}
.variations_button{
    display: flex;
    /*flex-direction: column;*/
}
.quantity{
	max-width: 60px;
	height:2.5rem;
}
.custom-dimensions{
    display: flex;
    margin-bottom: 0px;
    gap: 10px;
}
.custom-dimensions label{
    margin-bottom: 5px;
}
.custom_length_field_panneaux{
        max-width: 130px;
}
.custom_width_field_panneaux{
        max-width: 130px;
}
.custom_length_field_panneaux input {
    border-radius: 10px !important;
}
.custom_width_field_panneaux input {
      border-radius: 10px !important;
}
#epaisseur{
    min-width: 150px !important;
}
.menu-commande{
    border-radius: 15px 0px 0px 15px;
	overflow:hidden;
	height:fit-content;
}

/*bouton reset*/
.reset_variations{border:none;}

/*les filtres restent en place au scroll*/
.filtre-contenent {
  position: relative;
}

.filtre {
  position: sticky !important;
  top: 50px; /* L'élément reste en haut du conteneur lors du défilement */

  z-index: 10; /* S'assurer que l'élément reste visible au-dessus du reste du contenu */

}
.elementor-widget-yith_wcan_filters{
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px lightgrey;
}
.yith-wcan-filter {
    max-width: 230px;

}

.filters-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: start;
}

@media screen and (max-width: 426px) {
    .color a {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 766px) {
    .filters-container form {
        justify-content: space-around;
    }
}


.size-woocommerce_thumbnail{
	width:100% !important;
}

.cross-sells-products{
    display: grid;
    justify-items: end;
}
.cross-sell-product-name{
    font-size: 16px ;
    text-decoration: none;
    font-weight: 800;
    margin-right: 10px;
    margin-left: 10px;
}
.product-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 250px;
    background-color: #d0d5dc;
    border-radius: 10px;
    border: solid 1px #d0d5dc;
    overflow: hidden;
    
}
.cross-sell-product-img{
    width: 100%;
    background-color:white;
    display: flex;
    justify-content: center;
}
.product-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product {
    min-width: 208px;
}
.quantity-add{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0px 10px 10px 10px;
}
.quantity-add a {
    min-width: 157px;
    max-height: 36px;
    background-color: var(--yellow-color) !important;
    border-radius: 10px !important;
}
.quantity-add .wc-forward{
    display: none !important;
}
.quantity-selector .added::after{
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
}
.product-card img{
   max-height: 150px !important;
   max-width: 150px !important;
}
.quantity-input {
    max-width: 100px;
    border-radius: 10px !important;
    padding: 8px !important;
    
}

/*correction pour enlever le justify content center*/
.woocommerce-product-gallery__wrapper{
    display: block !important;
}

/* =======================
   Responsive : Mobile
   ======================= */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  
  /* Header */
  .mobile-logo {
    /*max-width: 25vw !important;*/
  }
  .mobile-menu-container {
    overflow: scroll;
  }
	/*page accueil*/
	.home .eael-post-grid, .page-id-81 .eael-post-grid{
		grid-template-columns: 1fr !important;
	}
	.hero-card{
		overflow-x:scroll;
		width:100% !important;
	}
  /* Sections */
  .mobile-section {
    padding: 10px 10vw;
  }
  .mobile-insection {
    padding: 10px calc(10vw - 10px); /* marges internes adaptées */
  }
	
	/*masquer le choix de la langue sur téléphone*/
  .gtranslate_wrapper{
		display: none !important;
	}
  /* Texte long avec bouton "lire plus" */
  .text-wrapper {
    max-height: 30dvh;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
  }

  .text-wrapper.expanded {
    max-height: fit-content;
    transition: max-height 0.5s ease;
  }

  .texte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .text-wrapper.expanded .texte {
    -webkit-line-clamp: unset;
  }

  .lire-plus {
    bottom: 0;
    right: 0;
    color: var(--dark-color);
    text-decoration: underline;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
  }

  .text-wrapper.expanded .lire-plus {
    display: block;
    color: var(--dark-color);
    text-align: right;
  }

  /* Conteneur principal et filtres */
  main,
  .purchasable {
    margin-top: 170px;
  }

  .filters-container form {
    flex-direction: column;
    gap: 10px;
  }

  .scroll {
    overflow: scroll;
    box-shadow: inset 5px 0 10px lightgray, inset -5px 0 10px lightgray;
    border-radius: 10px;
  }

  .elementor-widget-yith_wcan_filters {
    margin-bottom: 20px;
  }

  /* Cartes produits */
  .yith-wcan-filter {
    margin: 0;
  }
			.tooltip-content{
				transform: translateX(0%) !important;
				left: 0px;
			}

  .dropdown-wrapper .search-field-container {
    display: none;
  }

  .attachment-woocommerce_thumbnail {
    max-height: 330px !important;
  }

  .hook-left {
    position: absolute;
    left: 0;
    top: 243px !important;
  }

  .fixed-commande,
  #fixed-commande {
    width: 100% !important;
    max-width: 100% !important;
  }

  .menu-commande {
    border-radius: 0 !important;
    margin-left: 0 !important;
    min-width: 100% !important;
  }

  /* Cartes d’accueil */
  .eventail-card {
    width: 100%;
    min-height: 2px !important;
    max-height: 150px !important;
    border-radius: 20px;
    overflow: hidden;
  }

  .eventail-card h3 {
    font-size: 24px;
  }
}


/* =======================
   Responsive : Tablette
   ======================= */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  
  /* Header */
  .mobile-logo {
    max-width: 10vw !important;
  }

  /* Sections */
  .mobile-section {
    padding: 10px 5vw;
  }

  .mobile-insection {
    padding: 10px calc(5vw - 10px);
  }

  main,
  .purchasable {
    margin-top: 170px;
  }

  .scroll {
    overflow: scroll;
    box-shadow: inset 5px 0 10px lightgray, inset -5px 0 10px lightgray;
    border-radius: 10px;
  }

  .filtre-contenent {
    width: 250px;
  }

  .fixed-commande,
  #fixed-commande {
    width: 100% !important;
    max-width: 100% !important;
  }

  .menu-commande {
    border-radius: 0 !important;
    margin-left: 0 !important;
    min-width: 100% !important;
  }
}


@media (min-width: 2400px) {
  .site-main {
    display: flex;
    justify-content: center;
  }
  .page-content {
    max-width: 2200px;
  }
}


.custom-text-container{
			display:flex;
			align-items: start;
		
		}
		.color-angle{
   			 width: 40px;
  		 	 height: 40px;
    		clip-path: polygon(0% 0%,100% 0%,0% 100%);
			position:absolute;
			left:0px;
			top:0px;
  }
		/*icone droit*/
		.hook-right {
			position: absolute; 
			right: 5px; top: 5px;
		}
		
		.hook-right	.icon-hover-bloc {
            margin: 5px;
            min-height: 50px;
            min-width: 60px;
            position: relative;
        }
        .hook-right.custom-text-container {
            display: flex;
            justify-content: left;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
		
        .hook-right .icon-dimention {
            width: 60px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
        }
        .hook-right .icon-dimention:hover { border-radius: 10px 10px 30px 30px; height: 65px; opacity: 0.95; }
        .hook-right .icon-txt {
            font-size: 20px;
            font-weight: bold;
        }
        .hook-right .icon-hover-bloc {
            margin: 5px;
            position: relative;
        }
		
		
		/*icon recherche*/
.search-card-icon{
	top:0px;
}
		
		
		/*icone gauche*/
		
		
		
		.hook-left { 
			position: absolute; 
			left: 0; top: 205px;
		}
		
		.hook-left .icon-hover-bloc {
            margin: 5px;
            min-height: 25px;
            min-width: 30px;
            position: relative;
        }
       .hook-left .custom-text-container {
            display: flex;
            justify-content: left;
            align-items: center;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }


       .hook-left .icon-dimention {
            width: 30px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
        }
       .hook-left .icon-dimention:hover { border-radius: 10px 10px 30px 30px; height: 35px; opacity: 0.95; }
       .hook-left .icon-txt {
            font-size: 12px;
            font-weight: bold;
        }
        .hook-left .icon-hover-bloc {
            margin: 5px;
            position: relative;
        }
		
		/*tooltip*/

       .tooltip-content {
		   	font-size: 12px;
		   	overflow:hidden;
            visibility: hidden;
            opacity: 0;
            background-color: #fff;
            color: #000;
            text-align: left;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
            position: absolute;
            z-index: 999999;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
		@media screen and (max-width: 480px) {
			.tooltip-content {
				transform: translateX(0%) !important;
				left: 0px;
			}
		}
        .tooltip-content img {
            max-width: 100%;
            height: auto;
            margin-bottom: 5px;
        }

        .tooltip-content p {
            font-size: 14px;
            margin: 0;
        }

        .icon-hover-bloc:hover .tooltip-content {
            visibility: visible;
            opacity: 1;
        }

      /*  body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0px;
        }*/
/*angle de couleur*/
        .rainure-a{
            background-color: #ffda44; 
        }
        .rainure-b{
            background-color: #54e27e; 
        }
        .rainure-c{
            background-color: #77BCEA; 
        }
        .rainure-d{
            background-color: #e79b5a; 
        }
        .color-angle {
			margin:3px 0 0 3px;
			border-radius:8px 0 0 0;
            width: 20px;
            height: 20px;
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }
        
/*-------------------*/
        .expandable-card-container {
            display: flex;
            gap: 20px;
            justify-content: center;
            overflow-x: auto;
            transition: all 0.5s ease-in-out;
            flex-wrap: wrap;
        }

        .expandable-card {
			
            position: relative;
            width: calc((30% - 40px) / 3);
            max-width: calc((30% - 40px) / 3);
            
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.5s ease-in-out;
            cursor: pointer;
            flex-shrink: 0;
        }

        .expandable-card.active {
			border:solid 3px var(--dark-color);
            background-color: var(--yellow-color);
            width: 40%;
            max-width: 50%;
        }

        .expandable-card.inactive, .expandable-card.stand-by {
            width: calc((30% - 40px) / 3);
            max-width: calc((30% - 40px) / 3);
        }
.inactive:hover {
    width: 20% !important;
    max-width: 20% !important;
    z-index: 10; /* S'assurer que la carte survolée passe au-dessus des autres */
}

        .main-content {
            display: flex;
            align-items: center;
            background-color: var(--dark-color);
            padding: 20px;
            justify-content: center;
			border-radius:8px;
        }
        .main-text {
            color: black;
        }

        .icon {
			color: var(--dark-color) !important;
            background-color: var(--yellow-color);
            border-radius: 50%;
            padding: 15px;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
			font-weight:700;
        }

        .additional-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }

        .expandable-card.active .additional-content {
            max-height: 550px;
			overflow:auto;/* Just a large enough value to ensure it expands fully */
        }

        .additional-images-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 20px;
        }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	   .additional-images-grid {
            padding: 5px;
		   gap:5px;
        }
	  .additional-images-grid {
                grid-template-columns: repeat(2, 1fr);
				}
}
        .additional-image-item {
			color:white;
			border:solid 3px var(--dark-color);
            background-color:  var(--dark-color);
            border-radius: 8px;
            text-align: center;
            transition: all 0.3s ease-in-out;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 140px;
			padding:10px;
        }
.additional-image-item img{
	transition: all 0.3s ease-in-out;
	filter: invert(100%);
}
        .additional-image-item:hover {
			background: var(--yellow-color);
			color:var(--dark-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}
		.additional-image-item:hover img{
			filter: invert(0%);
		}

        .additional-image-item img {
            width: 140px;
            height: 140px;
            object-fit: contain; /* Ensures the image fits within the block */
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .additional-image-item h4 {
            margin: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .additional-image-item a {
            display: block;
            color: inherit;
            text-decoration: none;
            width: 100%;
            height: 100%;
        }
        
        .titre{padding: 0px 15px 0px 15px;}

        /* Responsive Styles */
        @media screen and (max-width: 830px) {
            .expandable-card {
                max-width: 100% !important;
                width: 100% !important;
            }

            .expandable-card.active {
                max-width: 100% !important;
                width: 100% !important;
            }

            .expandable-card.inactive {
                max-width: 100% !important;
                width: 100% !important;
            }


        }
        
        @media screen and (min-width: 420px) and (max-width: 830px) {
                .additional-images-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        @media screen and (max-width: 420px) {
              
}

.angle-jaune{
    background: linear-gradient(-45deg, #ffda4400, #ffda4400, var(--yellow-color));
    width: 75%;
    height: 75%;
    position: absolute;
	z-index:10;
}



.fond-configurateur{
	top:7em !important;
	
}

.woocommerce ul.products li.product a img{
	width:100% !important;
}
.elementor-grid .has-post-thumbnail{
	border: solid 3px var(--dark-color);
}
.product {
		/*border: solid 3px var(--dark-color);*/
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        transition: box-shadow 0.3s ease; /* Animation de transition pour l'ombre */
    }

    .elementor-grid .has-post-thumbnail:hover {
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Ombre portée au hover */
    }
.attachment-woocommerce_thumbnail{
    background-color: white;
    border-radius: 7px 7px 0 0 !important;
    margin-bottom: 30px !important;
	max-height:202px;
    
}
article{
	overflow: visible !important;
} 
.elementor-post__card{
	border-radius: 10px !important;
}
.elementor-post__thumbnail__link{
	border-radius: 12px 12px 0px 0px !important;
}

.filter-item label{
	display:inline-flex;
	align-items:center;
	gap:5px;
}

/*.tb-option{
	max-height:716px;
}*/
.table-title-tb{
	text-align:center;
}
.table-title-tb img{
	display: block;
	width: 50px;
	height:50px;
}

/* Masquer les boutons "Ajouter au panier" pour les produits des catégories TRC et TRH */
.term-trc .add_to_cart_button,
.term-trh .add_to_cart_button {
    display: none !important;
}
.postid-9449 .quantity-add{
	display:none !important;
	
}

/*produits ou le tableau n'est pas nécéssaire :*/

.postid-8784 .table-refs, .postid-7780 .table-refs, .postid-5871 .table-refs{
	display:none;}


.table-refs {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table-refs th,
.table-refs td {
    padding: 4px 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.table-refs th {
    background-color: #f7f7f7;
    font-weight: 600;
}

.table-refs tr:nth-child(even) {
    background-color: #f9f9f9;
}


.login-to-download-button custom-login-class { 
    display: block;
    color: white !important;
    padding: 5px;
    text-decoration: none !important;
background-color: var(--dark-color);
		border: solid 3px var(--dark-color);
transition:all 0.3s ease-in-out;
text-align: center;
border-radius: 10px;
}

.doc-download-link{ 
    display: block;
    color: white !important;
    padding: 5px;
    text-decoration: none !important;
background-color: var(--dark-color);
	border: solid 3px var(--dark-color);
text-align: center;
border-radius: 10px;
	transition:all 0.3s ease-in-out;
}

.doc-download-link:hover{
	color: var(--dark-color) !important;
	background:transparent;
}
.login-to-download-button custom-login-class:hover{
	color: var(--dark-color) !important;
	background:transparent;
}


.woocommerce-orders-table__header-order-total , .woocommerce-orders-table__cell-order-total, .woocommerce-orders-table__header-order-status, .woocommerce-orders-table__cell-order-status {
	display: none !important;
	background: red
}

/* =============================================
   Onglets Profilés Aluminium — Arcane France
   ============================================= */

.profil-onglets {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #343c47;
}

.profil-onglet {
    flex: 1;
    padding: 10px 16px !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555 !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s;
    text-align: center !important;
    box-shadow: none !important;
	white-space: nowrap !important;
	margin:0 !important;
}

.profil-onglet:first-child {
    border-radius: 4px 0 0 0 !important;
}

.profil-onglet:last-child {
    border-radius: 0 4px 0 0 !important;
}

.profil-onglet:hover:not(.actif) {
    background: #989FA8 !important;
    color: #FFFFFF !important;
}

.profil-onglet.actif {
    background: #343c47 !important;
    color: #ffda44 !important;
    border-color: #343c47 !important;
}

/* =============================================
   Message dégressif
   ============================================= */

.profil-message-degressif {
	margin:0 10px 0 10px;
    padding: 10px 14px;
    border-left: 4px solid #ffda44;
    background: #fff8f4;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
	display: flex;
}

/* =============================================
   Responsive — Onglets & Message dégressif
   ============================================= */

@media (max-width: 480px) {

    .profil-onglets {
        flex-direction: column !important;
        border-bottom: none !important;
        gap: 4px !important;
    }

    .profil-onglet {
        font-size: 13px !important;
        padding: 10px 12px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .profil-onglet:first-child {
        border-radius: 4px 4px 0 0 !important;
    }

    .profil-onglet:last-child {
        border-radius: 0 0 4px 4px !important;
        border-bottom: 1px solid #ddd !important;
    }

    .profil-onglet.actif {
        border-color: #343c47 !important;
    }

    .profil-message-degressif {
        font-size: 12px !important;
        margin: 0 0 8px 0 !important;
    }
	    .custom_wrapper {
        flex-wrap: wrap !important;
    }
    
    .profil-message-degressif {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-top: 8px !important;
        order: 99 !important;
    }
}