/* google fonts link */
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}


html {
  scroll-behavior: smooth !important;
}

/* bt puteup */

/* navbar */
.navbar-global{
position: sticky; top: 0; z-index: 10000 !important;
}
header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 10px 20px !important;
padding-bottom: 28px !important;
background-color: #343535 !important;
/* box shadow pas trop noir */
box-shadow: 0px 4px 8px 0px rgba(37, 37, 37, 0.306) !important;
}
span {
/* padding: 10px !important; */
text-align: center !important;
}

.logo {
position : relative !important;
display: flex !important;
font-size: 25px !important;
}

.logo img {
width: auto ;
height: 140px ;
cursor: pointer ;
position: absolute ;
transform : translateY(-50%) 
}

#anav {
  text-decoration: none !important;
}

.research {
display: flex !important;
align-items: center !important;
}

.research input {
padding: 10px;
width: 500px;
display: flex;
}

.search-button {
white-space: nowrap;
padding: 12px;
background-color: rgb(209, 91, 6);
display: flex;
border: none;color: #fff;
cursor: pointer;
transition: 0.2s ease;
}

.search-button:hover {
background-color: rgb(172, 72, 6);
}

.nav {
display: flex !important;
}

.menus {
display: flex !important;
gap: 6px !important;
}
.menu {
position: relative;
text-align: center !important;
font-size: 16px;
color: #fff;
padding-top: 0px;
height: 60px;
}

.menu span {
font-size: 13px;
}
.menu i {
font-size: 38px !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: -6px;
color: lightgray;

}

.menu .name-icon{
display: flex;
white-space: nowrap;
margin-top: -20px;
}

/* navigs */

.menuprincip {
  position: absolute;
  position: absolute; 
  bottom: -5px; 
  left: 155px;
  align-items: flex-start;
  display: flex;
}

.menuprincip ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menuprincip > ul {
  display: flex;
}

.menuprincip > ul > li {
  position: relative;
}

.menuprincip a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
}
.maintitle {
  color : #fff;
  font-size: 14px;
}


/* Sous-menu */
.sousmenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 0;
  background-color: #ffffff;
  /* Ajoute un box shadow pas trop noir */
  box-shadow: 0 0 10px rgba(20, 20, 20, 0.361);
  padding: 15px 0;
  width: 850px;
  overflow-y: auto;
  max-height: 83vh;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.drop-down:hover > .sousmenu {
  display: flex;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);

}

/* Colonnes du sous-menu */
.menucolumn {
  display: flex;
  flex-direction: column; 
}

.menutitle {
  font-weight: 560;
  color: #333;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 8px !important;
}

/* Sous-liens */
.sousmenulist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 13px;
  text-align: start !important;
}

.sousmenulist li {
  margin-bottom: 5px;
  text-align: start !important;
}

.sousmenulist li a {
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  display: block;
  text-align: start;
  width: 100%;
}

/* Effet au survol */
.menuprincip a:hover {
  color: #ff6600;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
}


.tickstitle {
  font-size: 17px;
  text-align: center;
}

/* Sidebar */
.container {
  display: flex !important;
  align-items: start;
  height: 500px;
  width: 100%;
}

@media screen and (max-width:830px) {
  .container{
    height: 400px !important;
  }
}
@media screen and (max-width:700px) {
  .container{
    height: 350px !important;
  }
}
@media screen and (max-width:560px) {
  .container{
    height: 300px !important;
  }
}
@media screen and (max-width:460px) {
  .container{
    height: 210px !important;
  }
}
@media screen and (max-width:350px) {
  .container{
    height: 200px !important;
  }
}

.tickstitle {
  font-size: 20px;
  text-align: center;
  margin-bottom: 15px;
}

/* Sidebar */
.sidebar {
  width: 280px !important;
  border: 1px solid lightgray !important;
  padding: 20px !important;
  height: 80vh !important;
  overflow-y: auto !important;
}

/* Ticket container */
.ticket {
  display: flex !important; 
  background: #f9f9f9 !important; 
  padding: 10px !important; 
  border-radius: 8px !important; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; 
  margin-bottom: 12px !important; 
  border-left: 5px solid #27ae60 !important; 
  align-items: center !important; 
  gap: 10px !important; 
}

.ticket-img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  object-fit: cover;
}

.ticket-details {
  display: flex;
  flex-direction: column;
}

.ticket-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.ticket-info {
  font-size: 12px;
  color: #666;
}

.ticket-price {
  font-size: 13px;
  font-weight: bold;
  color: #d35400;
}

.ticket-status {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
}

/* Différentes couleurs pour le statut */
.disponible {
  background: #2ecc71;
  color: white;
}

.vendu {
  background: #e74c3c;
  color: white;
}


/* Titre du menu */


/* Élément du menu principal */


.toggle-icon {
  font-size: 18px;
  transition: transform 0.2s ease;
}



/* Section principale */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 50px; */
}

/* Bannière */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  background: white;
  padding: 30px;
  border-radius: 10px;
}

.banner .text {
  max-width: 50%;
}

.banner h3 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
}

.subs {
  color: #585858;
  font-size: 18px;
  margin-bottom: 20px;
}

.desctxt {
  color: #585858;
  font-size: 14px;
  margin-bottom: 20px ;
}

/* Bouton */

.shopnow {
  padding: 12px 20px;
  width: 50%;
  background-color: transparent;
  color: #222;
  border: 1px solid #222;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease-in-out;
}

.shopnow:hover {
  background-color: rgb(209, 91, 6);
  border: none;
  color: #fff;
}

/* Image */
.banner img {
  max-width: 320px;
  margin-bottom: 20px;
}


/* produits dispo */

.dispoprod {
display: flex;
/* justify-content: center; */
align-items: center;
gap: 10px;
}
#carousel-categorie {
  scrollbar-width: none; /* Masquer la barre de défilement sur Firefox */
  -ms-overflow-style: none; /* Masquer la barre sur Internet Explorer et Edge */
}

#carousel-categorie::-webkit-scrollbar {
  display: none; /* Masquer la barre sur Chrome, Safari et Opera */
}


.dispoprod .items { display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  background: rgb(237, 237, 237); 
  padding: 20px; 
  border-radius: 10px; 
  /*box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); */ 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  -ms-border-radius: 10px; 
  -o-border-radius: 10px;
}

/* Image centrée */
.items img {
width: 150px; /* Largeur fixée */
height: 130px;
display: block;
object-fit: cover;
margin-bottom: 10px;
transition: 0.3s ease;
cursor: pointer;
}

.items img:hover {
transform: scale(1.1);
transition: 0.3s ease;
cursor: pointer;
}

/* Texte sous l'image */
.textdes {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}

/* Nombre de produits */
.items span {
font-size: 14px;
color: #666;
}



/* Produits */

h2 {
padding: 15px;
font-weight: 450;
font-size: 20px;
}

.product {
/* display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
align-items: stretch; */


/* display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 10px;
padding: 20px;
padding-left: 0;
padding-right: 0;
background-color: #f9f9f9; */

display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /*Colonnes flexibles*/
grid-auto-rows: min-content; /*Chaque ligne s’adapte au contenu*/
grid-auto-flow: dense; /*Combler les espaces vides*/
gap: 10px;
padding: 20px 2px;
align-items: start;


/* height: 1300px !important; */
}

@media screen and (max-width:714px) {
  .product{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; /*Colonnes flexibles*/
    grid-auto-rows: min-content; /*Chaque ligne s’adapte au contenu*/
    grid-auto-flow: dense; /*Combler les espaces vides*/
    gap: 10px;
    padding: 20px 2px;
    align-items: start;
  }
}

@media screen and (max-width:450px) {
  .product{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; /*Colonnes flexibles*/
    grid-auto-rows: min-content; /*Chaque ligne s’adapte au contenu*/
    grid-auto-flow: dense; /*Combler les espaces vides*/
    gap: 10px;
    padding: 20px 2px;
    align-items: start;
  }
}
@media screen and (max-width:400px) {
  .product{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; /*Colonnes flexibles*/
    grid-auto-rows: min-content; /*Chaque ligne s’adapte au contenu*/
    grid-auto-flow: dense; /*Combler les espaces vides*/
    gap: 10px;
    padding: 20px 2px;
    align-items: start;
  }
}
.product-card {
/* flex: 1 1 calc(20% - 10px); 
max-width: 230px; 
padding: 15px;
position: relative;
transition: box-shadow 0.3s ease-in-out;
box-sizing: border-box; */

min-height: 420px !important;


padding: 7px;
position: relative;
display: block;
height: auto; /*S’adapte automatiquement*/
color: #000000;
box-shadow: 0px 0px 3px 3px rgba(181, 180, 180, 0.2);
}

.product-card:hover {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

/* responsive */


.promo {
position: absolute;
top: 10px;
left: 10px;
background: rgb(198, 47, 47);
color: white;
padding: 5px 12px;
border-radius: 0;
font-size: 10px;
font-weight: 550;
}

.heart {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: gray;
cursor: pointer;
background: #ddd;
padding: 5px;
border-radius: 50%;
}
.product-card img {
width: 100%;
height: 230px;
object-fit: cover;
} 

.categorie {
color: gray;
font-size: 12px;
margin-top: 5px;
}

h3 {
font-size: 14px;
margin: 5px 0;
}

.location {
font-size: 14px;
}

.rating {
font-size: 13px;
}

.prix {
margin: 5px 0;
}

.newprice {
color: #ff6600;
font-size: 15px;
font-weight: bold;
}

.oldprice {
text-decoration: line-through;
color: gray;
margin-left: 0px;
}

.cart {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
background: #ddd;
padding: 5px;
border-radius: 50%;
transition: background 0.3s;
}

.linkcertif {
color: gray;
}

.cart-icon:hover {
background: #bbb;
}


.descrip {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
border: none;
width: 100%;
padding: 8px 12px;
opacity: 0;
background-color: #ff6600;
color: #fff;
transition: opacity 0.2s ease-in-out;
font-family: 'Inter', sans-serif;
z-index: 100;
}

.product-card:hover .descrip {
opacity: 1;
transform: translateX(-50%);
cursor: pointer;
z-index: 100;

}

.product-card:hover .heart {
background-color: #ff6600;
color: #fff;
}
/* EN VOGUE */

.certif {
  font-weight: 500;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  background-color: #111;
  color: whitesmoke;
  width: 15%;
  margin: auto;
  border-radius: 5px;
}


.en-vogue {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
/* home */
.title-paragraph-product {
padding: 10px;
border-bottom: 2px solid lightgray;
width: 100%;
max-width: 300px;
display: flex;
font-size: 17px;
color: #222222;
font-weight: 570;
}

.for-home {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}

/* button voirtout */
.btnvoirtout {
position: relative;
overflow: hidden;
margin: auto;
background-color: #ff6600;
padding: 10px 20px;
text-align: center;
width: 200px;
font-size: 14px;
color: white;
text-decoration: none;
border: 1px solid #ff6600;
border-radius: 3px;
transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
cursor: pointer;
}

.btnvoirtout span {
position: relative;
z-index: 2;
color: #fff;
}

.btnvoirtout::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff6600;
transition: transform 0.3s ease-in-out;
transform: translateX(0%);
}

.btnvoirtout:hover::before {
transform: translateX(100%);
}

.btnvoirtout:hover {
color: #ff6600;
background-color: transparent;
}

.btnvoirtout:hover span {
color: #ff6600;
}


.card {
margin-top: 13px;
padding: 12px;
background-color: transparent;
border: 1px solid #ff6600;
transition: transform 0.3s ease;
border-radius: 3px;
}

.card:hover {
background-color: #C3531C;
transform: rotate(3deg);
transition: ease 0.2s;
color: #fff;
cursor: pointer;
}

.line {
text-align: center;
}

.line hr {
margin: auto;
color: #d9d9d9;
}

/* basics */

.essentiels {
display: flex;
justify-content: center;
align-items: center;
}

.basics {
display: flex;
justify-content: space-around;
text-align: center;
width: 80%;
max-width: 1200px;
gap: 50px;
}

.basic {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.info {
font-size: 28px;
font-weight: bold;
color: #444;
margin-top: 30px;
text-align: center;
}

.txt {
  text-transform: uppercase;
}

.txt, .justify {
   color: #222;
}

.justify {
font-size: 14px;
margin-top: 10px;
}

.basic img {
width: 70px; /* Ajuste selon tes besoins */
height: auto;
margin-bottom: 10px;
}


/* nous */

.nous {
margin: auto;
background-color: rgba(237, 237, 237, 0.365);
}

.titleus {
 font-size: 30px;
 text-align: center;
 color: #444;
 font-weight: bold;
}

.textabout {
padding: 30px;
font-size: 18px;
text-align: justify;
line-height: 1.8;
color: #444;
width: 90%;
margin: auto;
}

/*  newsletter */
.premium-newsletter-container {
      max-width: 96%;
      width:99%;
      margin: 50px auto;
      padding: 0 20px;
  }
   
  .premium-newsletter {
      position: relative;
      background: linear-gradient(135deg, #f9f9e8 0%, #f0f0d8 100%);
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(52, 53, 53, 0.1), 
                  0 10px 25px rgba(52, 53, 53, 0.05),
                  inset 0 0 0 1px rgba(255, 255, 255, 0.6);
      overflow: hidden;
  }
   
  /* Éléments décoratifs */
  .newsletter-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
  }
   
  .decoration-circle {
      position: absolute;
      border-radius: 50%;
      opacity: 0.1;
  }
   
  .circle-1 {
      width: 300px;
      height: 300px;
      background: #343535;
      top: -150px;
      right: -100px;
  }
   
  .circle-2 {
      width: 200px;
      height: 200px;
      background: #343535;
      bottom: -100px;
      left: -50px;
  }
   
  .decoration-line {
      position: absolute;
      background: #343535;
      opacity: 0.05;
  }
   
  .line-1 {
      width: 150px;
      height: 3px;
      transform: rotate(-45deg);
      top: 50px;
      left: 30%;
  }
   
  .line-2 {
      width: 100px;
      height: 3px;
      transform: rotate(30deg);
      bottom: 70px;
      right: 25%;
  }
   
  .decoration-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #343535;
      opacity: 0.2;
  }
   
  .dot-1 {
      top: 30%;
      left: 20%;
  }
   
  .dot-2 {
      top: 60%;
      right: 15%;
  }
   
  .dot-3 {
      bottom: 20%;
      left: 40%;
  }
   
  /* Contenu */
  .newsletter-content {
      position: relative;
      z-index: 1;
  }
   
  .newsletter-header {
      text-align: center;
      margin-bottom: 30px;
  }
   
  .newsletter-badge {
      display: inline-block;
      background: #343535;
      color: #f9f9e8;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 30px;
      letter-spacing: 1px;
      margin-bottom: 15px;
      box-shadow: 0 4px 10px rgba(52, 53, 53, 0.2);
  }
   
  .newsletter-title {
      font-size: 36px;
      font-weight: 800;
      color: #343535;
      margin: 0 0 15px;
      position: relative;
      display: inline-block;
  }
   
  .plus-badge {
      position: relative;
      top: -10px;
      margin-left: 5px;
      background: linear-gradient(135deg, #343535 0%, #4a4a4a 100%);
      color: #f9f9e8;
      font-size: 18px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(52, 53, 53, 0.3);
  }
   
  .newsletter-subtitle {
      font-size: 18px;
      color: rgba(52, 53, 53, 0.8);
      margin: 0;
      font-weight: 500;
  }
   
  .newsletter-form-group {
      display: flex;
      gap: 15px;
      margin-bottom: 25px;
  }
   
  .input-wrapper {
      flex: 1;
      position: relative;
  }
   
  .input-icon {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(52, 53, 53, 0.5);
      font-size: 18px;
  }
   
  .newsletter-input {
      width: 100%;
      height: 60px;
      background: white;
      border: none;
      border-radius: 15px;
      padding: 0 20px 0 50px;
      font-size: 16px;
      color: #343535;
      box-shadow: 0 5px 15px rgba(52, 53, 53, 0.05),
                  inset 0 0 0 1px rgba(52, 53, 53, 0.1);
      transition: all 0.3s ease;
  }
   
  .newsletter-input:focus {
      outline: none;
      box-shadow: 0 5px 20px rgba(52, 53, 53, 0.1),
                  inset 0 0 0 2px #343535;
  }
   
  .newsletter-input::placeholder {
      color: rgba(52, 53, 53, 0.4);
  }
   
  .newsletter-submit {
      background: linear-gradient(135deg, #343535 0%, #4a4a4a 100%);
      color: #f9f9e8;
      border: none;
      border-radius: 15px;
      height: 60px;
      padding: 0 30px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(52, 53, 53, 0.2);
  }
   
  .newsletter-submit:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 25px rgba(52, 53, 53, 0.25);
  }
   
  .newsletter-submit:active {
      transform: translateY(0);
  }
   
  .arrow-icon {
      transition: transform 0.3s ease;
  }
   
  .newsletter-submit:hover .arrow-icon {
      transform: translateX(5px);
  }
   
  .newsletter-features {
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
  }
   
  .feature {
      display: flex;
      align-items: center;
      gap: 8px;
  }
   
  .feature-icon {
      color: #343535;
      font-size: 16px;
  }
   
  .feature span {
      font-size: 14px;
      color: rgba(52, 53, 53, 0.8);
  }
   
  @media (max-width: 768px) {
      .premium-newsletter {
          padding: 30px 20px;
      }

      .premium-newsletter-container {
          width:98%;
          margin: 50px auto;
          padding: 0 0px !important;
      }
      
      .newsletter-title {
          font-size: 28px;
      }
      
      .newsletter-form-group {
          flex-direction: column;
      }
      
      .newsletter-submit {
          width: 100%;
          justify-content: center;
      }
      
      .newsletter-features {
          flex-direction: column;
          align-items: center;
          gap: 15px;
      }
  }




/* Footer */ 

footer {
background-color: #fffcf5;
}

.liensi {
  color: #db833a;
  font-size: 14px;
}

#notresite
 {
   /* font-size: 14px; */
   color: #ffffff;
 }

.links {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0 20px;
flex-wrap: wrap;
max-width: 1100px;
}

.link {
flex-direction: column;
padding: 20px;
display: flex;
}

.headerr {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}

.infor {
color: #525252;
font-size: 14px;
text-align: center;
}

.infor:hover {
text-decoration: underline;
}

.liens {
color: #525252;
font-size: 14px;
text-align: center;
}

.liens:hover {
text-decoration: underline;
}

a {
text-decoration: none;
margin-top: 5px;
}

.hrsocial {
 background-color: #ffffffcc;
}

.socials {
display: flex;
justify-content: space-around;
margin-top: 30px;
}

.headtext {
font-size: 20px;
}

.sicons {
font-size: 30px;
}
i {
color: #525252;
}

.copyright {
margin-top: 30px;
text-align: center;
color: #525252;
}

.politics {
text-align: center;
color: #525252;
}

.politic {
  color: #525252;
  font-size: 14px;
}

.politic:hover {
color: #9c2900;
} 

/* social link */

.socialink {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  right: 0;
  bottom: 145px; 
  margin: 20px; 
  gap: 5px;
}

.socialink i {
  margin-bottom: 10px; /* Espacement entre les icônes */
  font-size: 19px; /* Taille des icônes */
  color: #222; /* Couleur des icônes, modifiable */
  transition: transform 0.3s ease-in-out;
}

.socialink i:hover {
  transform: scale(1.1);
}

.gotoup {
  text-align: center;
  padding: 10px;
  position: fixed;
  left: 0;
  bottom: 5;
  margin: 5px;
  display: flex;
  flex-direction: column;
}



/* text truncate du nom de l'article */
.libelle-article{
  white-space: nowrap !important; 
  overflow: hidden !important; 
  text-overflow: ellipsis !important; 
  width: 100% !important; 
  display: block !important;
  margin: 8px 0 !important;
}
.categorie{
  white-space: nowrap !important; 
  overflow: hidden !important; 
  text-overflow: ellipsis !important; 
  width: 100% !important; 
  display: block !important;
}