/* Base styling */

    /* Valeurs des couleurs (modifiable) */
:root {
  --text-color: #333;
  --primary-color: #59ac34; /* Vert */
  --primary-color-light: #78D150;
  --primary-color-dark: #3B7720;
  --secondary-color: #C98A00; /* Couleur secondaire (ex: orange) */
  --tertiary-color: #0288D1; /* Bleu */
  --tertiary-color-light: #38ABDF;
  --tertiary-color-dark: #0277BD;
  --quatry-color:#1a3850;
  --button-hover: #787878;    /* Couleur du survol */
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html, body {
    overflow-y: scroll;  /* Permet le défilement vertical */
    -ms-overflow-style: none;  /* Pour Internet Explorer */
    scrollbar-width: none;  /* Pour Firefox */
}

html::-webkit-scrollbar {
    display: none;  /* Masquer la barre de défilement dans Webkit (Chrome, Safari) */
}


html {
  scroll-behavior: smooth;
      overflow-x: hidden;  /* Empêche le défilement horizontal */
}

a {
  color: var(--text-color);
	font-weight:700 !important;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 60px; /* Compense la hauteur du header fixe */
    background:#fafafa;
background-image: url("quadries/printemps.jpg");
background-size: cover;
    width:100vw;
      overflow-x: hidden;  /* Empêche le défilement horizontal */
}


/* Header fixe */
header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 60px; /* Hauteur du header */
    width:100vw;
    max-width:100vw;
}

.infos {
  background-color: #e84c00;
  color: white;
  padding: 20px;
  font-weight: bold;
}

.close-info {
  float: right;
  padding-left: 30px;
  font-size: 18px;
  background: no-repeat;
  border: none;
  color: white;
  cursor: pointer;
}

.mask{
display:none;
}


.standard{
width: 100%;
  margin-bottom: -10px;
  padding-top: 20px;
  z-index: 1;
  position: relative;
}

section {
    width:100%;
max-width:1600px;
    margin-left:auto;
    margin-right:auto;
    background:#f2f2f2;
}

.form-container button {
    z-index: 9999;  /* Un grand nombre pour s'assurer qu'il est au-dessus des autres éléments */
    position: relative;  /* Nécessaire pour que le z-index fonctionne */
}

.formulaire {
  background-color: var(--text-color);
  color: white;
  display: flex;
  justify-content: center;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* Transition de la hauteur */
}

.formulaire.open {
  max-height: 700px; /* Ajustez cette valeur en fonction de la hauteur souhaitée */
  transition: max-height 0.5s ease-in-out; /* Transition de la hauteur */
}



.formulaire H2{
color:var(--primary-color);
    font-size:1.3em;
}


        .form-container {
            padding: 20px;
            border-radius: 8px;
            width: 300px;
}

        .form-container label {
            display: block;
            margin: 10px 0 5px;
            font-size: 14px;
        }
        .form-container input[type="text"], 
        .form-container input[type="email"], 
        .form-container textarea {
     width: 100%;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background: transparent;
  color: white;
        }

        .form-container textarea {
            resize: vertical;
            height: 100px;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .form-container button:hover {
            background-color: #0056b3;
        }


#form-message {
  margin-top: 1em;
  font-weight: 600;
    font-size: 1.3em;
    padding-bottom:20px;
}

#form-message.ok { color: var(--primary-color); }
#form-message.error { color: #F13832; }






/* Style des boîtes */
.grid-container {
  display: grid;
  gap: 1em;
  padding: 20px;
  grid-auto-flow: dense; /* Permet un placement optimisé */
  align-items: stretch; /* Assure que tous les éléments sont alignés */
  grid-template-columns: repeat(5, 1fr); /* Par défaut 5 colonnes */
  grid-template-rows: auto; /* Les lignes s'ajustent en fonction des éléments */
    width:100%;
}

.box {
  position: relative;
  width: 100%;
  aspect-ratio: 1; /* Boîte carrée par défaut */
  overflow: hidden;
  box-shadow: gray 3px 3px 3px;
}

.box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajuste l'image sans la déformer */
}

/* Boîte horizontale */
.box-wide {
  aspect-ratio: 2 / 1; /* Ratio 2:1 pour les images horizontales */
  grid-column: span 2; /* Étend la boîte horizontale sur 2 colonnes */
}

/* Boîte verticale */
.box-height {
  aspect-ratio: 1 / 2; /* Ratio 1:2 pour les images verticales */
  grid-row: span 2; /* Étend la boîte verticale sur 2 lignes */
}

/* Boîtes avec des couleurs de remplissage */
.box-orange {
  background-color: #CD8500 !important;
}

.box-vert {
  background-color: #236F23 !important;
}

.box-bleu {
  background-color: #03A1C9 !important;
}



/* Titre (H1) */
h1 {
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
    font-weight:700;
  font-style: normal;
    font-size: 1.5rem;
    color: #333;
    padding-left:20px;
}

.product-page-container h1,.product-page-container h2,.product-page-container h3 {
padding-left:0px;
}



/* Sous-titre (H2) */
h2 {
    
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
    color: #444;
    font-size: 2rem;
    padding-left:0px;
}

.small{
font-weight: 900;
  font-size: 2rem;
}

.green{
color:var(--primary-color);
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
    font-size: 2rem;
}

h3 {
    
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
    color: #444;
    font-size: 1.2rem;
    padding-left:0px;
}



/* Style de base */


.filters h3 {
 font-size: 1.3rem;
    padding-left:0px;
    color:var(--primary-color-dark);
}


/* Style de base */
#filters {
    position: relative;
    min-width:130px;
}

.filters-inner {
    max-height: 0; /* Initialement caché */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* Animation sur le transform */
        min-width:130px;
        display: grid;
    gap: 15px;

}

/* Lorsqu'on ajoute la classe 'open' à filters-inner */
.filters-inner.open {
    max-height: 1000px; /* Valeur suffisamment grande pour contenir tout le contenu */
    transition: max-height 0.5s ease-in-out; /* Animation sur le transform */
        min-width:130px;

}


/* Effet de filet sous le titre dans .item */
.item {
    border-left: thin solid #ccc; /* Bordure à gauche */
    position: relative; /* Change à relative pour ne pas interférer avec l'absolute */
    padding-left: 10px; /* Espacement entre le titre et la bordure */
    margin-top: 10px;
}

.item:before {
    content: "";
    position: absolute;
    top: 50%; /* Centre verticalement la bordure */
    left: 0;
    width: 5px;
    height: 50%;
    background-color: #ccc; /* Bordure */
    z-index: -1; /* Met la bordure derrière le contenu */
}

/* =========================
   BASE (mobile)
   ========================= */
.filters-inner,
.produits-container {
    display: grid;
    gap: 20px;
}

/* 1 colonne par défaut */
.filters-inner {
    grid-template-columns: 1fr;
}

.filters-inner label {
   display:block;
}

.produits-container {
    grid-template-columns: 1fr;
}

/* =========================
   FILTERS-INNER
   ========================= */

/* ≥ 301px → 2 colonnes */
@media (min-width: 301px) {
    .filters-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≥ 501px → 3 colonnes */
@media (min-width: 501px) {
    .filters-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* =========================
   PRODUITS-CONTAINER
   ========================= */
.content-area{
width:100%;
}
/* ≥ 346px → 2 colonnes */
@media (min-width: 346px) {
    .produits-container {
        grid-template-columns: repeat(2, 1fr);
        width:100%;
    }
}

/* ≥ 551px → 3 colonnes */
@media (min-width: 551px) {
    .produits-container {
        grid-template-columns: repeat(3, 1fr);
        width:100%;
    }
}

@media (min-width: 768px) {
     .filters-inner {
        grid-template-columns: 1fr;
         width:100%;
    }
}

/* ≥ 1001px → 4 colonnes */
@media (min-width: 1001px) {
    .produits-container {
        grid-template-columns: repeat(4, 1fr);
        width:100%;
    }
}

/* ≥ 1401px → 5 colonnes */
@media (min-width: 1401px) {
    .produits-container {
        grid-template-columns: repeat(5, 1fr);
        width:100%;
    }
}



.product-card h3 {
 font-size: 1.3rem;
    padding-left:0px;
    color:var(--text-color);
}

#services h2, #services h3 {
      text-align:center;
}



/* Texte de contenu */
p, li {
    font-family: 'Inter', sans-serif; /* Ou Lato */
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
	margin-right:5px;
}

span {
font-family: 'Inter', sans-serif; /* Ou Lato */
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
	margin-right:5px;
	white-space: nowrap;
}

.magasin {
    display:flex;
    gap: 10px;
  padding: 10px;
}

.imageMag {
width:100%;
    display: flex;
  flex-direction: column;
    gap:10px;
}

.magasin img {
    width:100%;
}

        .offre {
            background: #F09330;
            color: white;
            display: flex;
            font-weight: bold;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            padding: 20px;
            flex-direction: column;
            gap: 50px;
            width:40%;
        }

  .offre a {
      width:80%;
}   

        /* Style pour l'image miniature */
        .offre img {
            width: 100%;
            transform: rotate(10deg);
            transition: transform 0.3s ease-in-out;
        }



        /* Effet de zoom au survol de l'image */
        .offre img:hover {
            transform: scale(1.1) rotate(10deg);
        }

        /* Style du conteneur pour le PDF */
        #pdf-container {
            text-align: center;
            margin: 20px;
        }

        /* Style du canvas (où on affiche la première page du PDF) */
        #pdfCanvas, #pdfCanvas2 {
          width: 100%;
    transform: rotate(10deg);  /* Appliquer la même rotation */
    transition: transform 0.3s ease-in-out;
        }

#pdfCanvas:hover, #pdfCanvas2:hover {
          width: 100%;
    transform: rotate(15deg);  /* Appliquer la même rotation */
    transition: transform 0.3s ease-in-out;
        }


.coord {
background: var(--quatry-color);
  padding: 20px;
  box-sizing: border-box;
  color: white;
    width:40%;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
}

.horaires{
 font-size:1rem;
     text-align:center;
    padding-top:20px;
}

.adresse{
 text-align:center;
    font-weight:700;
    padding-top:20px;
}

.tel {
padding:10px;
    padding-left:20px;
    padding-right:20px;
font-weight:bold;
font-size:26px;
border-radius: 30px;
border:solid 1px white;
background-color:var(--primary-color);
color:white;
cursor:pointer;
text-decoration:none;
    width:max-content;
}

.tel a {
text-decoration:none;
color:white;
}


@media screen and (max-width: 980px) {
    
.magasin {
    display:flex;
    flex-direction:column;
}
    
    .coord {
    width:100%;
    }
    
.coord img{
    display:none;
    }
    
    
    
  .offre {
background:#F09330;
color:white;
display:flex;
    flex-direction:row;
gap:20px;
    font-weight:bold;
    justify-content: center;
    align-items: center;
    font-size:1.5rem;
    padding-left:20px;
      width:100%;
}  
    
  .offre img {
      width:150px;
}  
    
     .offre a {
      width:200px;
}   
    
    
  #pdfCanvas {
          width: 150px;
    transform: rotate(10deg);  /* Appliquer la même rotation */
    transition: transform 0.3s ease-in-out;
        }

#pdfCanvas:hover {
          width: 150px;
    transform: rotate(15deg);  /* Appliquer la même rotation */
    transition: transform 0.3s ease-in-out;
        }   
    
    
    
    
    
    
}


    
    @media screen and (max-width: 768px) {
    


.imageMag {
width:100%;
    display: flex;
  flex-direction: column;
}




.magasin img {
    width:100%;
}

.offre img {
width: 80px;
  transform: rotate(10deg);
    margin-right:10px;
}



    
}



.duree {
	border: thin solid;
  padding: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

.d-block {
	white-space: nowrap;
	margin-left:5px;
}

.warranty {
padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  color: white;
  background: var(--tertiary-color);
  margin-right: 0;
	width:max-content;
}

.energy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
	font-size:0.8em;
}

/* Couleurs selon le type d’énergie */
.energy.Electrique {
  background-color: #00bfff; /* bleu électrique */
}

.energy.Thermique {
  background-color: #ff7b00; /* orange moteur thermique */
}

.energy.Batterie {
  background-color: #3cb371; /* vert batterie */
}

#stock {
    font-weight:bold;
}

/* Couleurs selon le type d’énergie */
#stock.En_stock {
  color: #59ac34; /* bleu électrique */
}

#stock.Sur_commande {
  color: #ff7b00; /* orange moteur thermique */
}

#stock.Epuise {
  color: #DB0000; /* vert batterie */
}

.detail {
padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  color: white;
  background: var(--tertiary-color);
  margin-right: 0;
	font-weight:700;
	border:none;
    cursor:pointer;
    border-radius:6px;
    transition: background-color 0.3s ease, filter 0.3s ease;

}

.detail:hover {
padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  color: white;
  background: var(--quatry-color);
  margin-right: 0;
	font-weight:700;
	border:none;
    cursor:pointer;
    border-radius:6px;
}

.duree {
  color: var(--tertiary-color);
}



header .logo a {
    color: white;
    text-decoration: none;
    font-size: 24px;
}

header .logo img {
       padding-top:5px;
}

nav.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav.main-nav ul li {
    margin: 0 15px;
}

nav.main-nav ul li a {
    color: white;
    text-decoration: none;
}

menu {
padding-left:5%;
    padding-right:5%;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    height: 21px;
    width: 30px;
}

.menu-toggle .bar {
    height: 3px;
    background-color: white;
    width: 100%;
}

/* Affichage des icônes avant le texte */
.email::before {
    content: "\f0e0";  /* Code de l'icône Font Awesome pour l'email (code Unicode) */
    font-family: "Font Awesome 6 Free";  /* Font Awesome */
    font-weight: 900;  /* Utilise la version "solid" de Font Awesome */
    margin-right: 8px;  /* Espacement entre l'icône et le texte */
}

.phone::before {
    content: "\f095";  /* Code de l'icône Font Awesome pour le téléphone (code Unicode) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

/*PRODUITS */

/* Style général */

.offre_wide img{
width:100%;
}



#categories-buttons {
display: flex;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap;
}

.category-btn {
  flex: 1;  /* Permet de redimensionner automatiquement en fonction de l'espace */
  min-width: 120px;  /* Largeur minimale des boutons */
  padding: 10px 20px;
  box-sizing: border-box;
  color: #333;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  border-radius: 30px;
  transition: background-color 0.3s ease, filter 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: normal;  /* Permet au texte de s'ajuster et aller à la ligne si nécessaire */
  overflow: hidden;
  text-overflow: ellipsis;  /* Tronque le texte si nécessaire */
    background-color:transparent;
}

/* Cibler précisément les spans à l’intérieur de .btn-text */
.category-btn .btn-text {
  font-size: 16px;
  font-weight: 700;
        margin-right:0;
}

/* Optionnel si tu veux contrôler également le texte dans le bouton */
.category-btn .btn-text span {
  font-size: 16px;
  font-weight: 700;
    margin-right:0;
}

.category-btn.long span {
  transform: scaleX(0.75);
}

.category-btn img {
  max-width: 50px;  /* Limite la taille des images à une largeur raisonnable */
  height: auto;  /* La hauteur de l'image s'ajuste automatiquement en fonction de la largeur */
  margin-bottom: 5px;  /* Un petit espace entre l'image et le texte */
    filter: brightness(0) saturate(100%) invert(18%) sepia(25%) saturate(1258%) hue-rotate(164deg) brightness(93%) contrast(92%);
}

/* Survol des boutons de catégorie */
.category-btn:hover {
  filter: brightness(120%);
    color:var(--primary-color-dark);
}

/* Bouton sélectionné */
.category-btn.selected {
  border: solid 2px var(--primary-color-dark);
  filter: brightness(100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color:var(--primary-color-dark);
}

/* Style des sous-catégories */
.sous-categories-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 2px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, top 0.3s ease;
  flex-wrap: wrap;
  /*background-color: var(--tertiary-color-light);*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);*/
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
 margin: 0 auto;
    margin-top:10px;
        max-width:860px;
}

/* Affichage des sous-catégories */
.sous-categories-buttons.show {
  opacity: 1;
  visibility: visible;
    display:flex;
    max-height:max-content;
}



/* Style des boutons de sous-catégories */
.sous-categories-btn {
  padding: 10px 20px;
  background-color: var(--tertiary-color);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  border-radius: 8px;
  transition: background-color 0.3s ease, filter 0.3s ease;
  min-width: 120px;
  text-align: center;
}

/* Survol des sous-catégories */
.sous-categories-btn:hover {
  background-color: var(--quatry-color);
  filter: brightness(120%);
}

/* Sous-catégorie sélectionnée */
.sous-categories-btn.selected {
  background-color: #E9E9ED;
  filter: brightness(100%);
  border: solid 2px var(--tertiary-color-dark);
  color: var(--tertiary-color-dark);
  font-weight: bold;
}


/* Réinitialiser l'alignement */
.sous-categories-buttons.show .sous-categories-btn {
  margin: 5px;
}






/* Main container */
main {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    width:150px;
    gap:20px;
}


.filter-title {
width:max-content;
    border:thin solid var(--quatry-color);
    border-radius:5px;
    cursor:pointer;
    padding:10px;
    flex:0 0 100%;
    max-height: 42px;
    text-align:center;
}

.actif {
border-color:var(--primary-color) !important;
}

.filters input[type=checkbox] {
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filters button:hover {
    background-color: #ddd;
}

.visible {
visibility:visible;
}

/* Conteneur des produits */
.main {
display:flex;
    display:none;
    gap:20px;
}

.show {
display:flex;
    padding:20px;
    transition:all;
    transition-duration:.5s;
}
/* Appliquer box-sizing à tous les éléments */




/* Si moins de 2 produits sont présents, maintenir 2 colonnes */
.produits-container:empty {
    grid-template-columns: repeat(2, 1fr);
}

.produits-container-empty {
	display: block !important;
    grid-template-columns: repeat(1, 1fr) !important;
}

h3 {
color:var(--primary-color-dark);
}


.services {
    padding: 12px 18px;
    }
    
    .liste_serv {
            display:flex;
       gap:20px;
        padding:20px;
        align-items: stretch;
        	justify-content: space-evenly;
    }
    
    .serv {
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        flex:1;
        flex-direction:column;
    }
    
    .serv img {
        width:100%;
        flex:1;
    }


    
.serv h2 {
  font-family: "chivo", sans-serif; /* Police chivo, avec fallback sans-serif */
  font-optical-sizing: auto; /* Ajuste la taille de la police pour une meilleure lisibilité */
  font-weight: 900; /* Police très grasse (poids 900) */
  font-style: italic; /* Texte en italique */
  mix-blend-mode: overlay; /* Mode de fusion overlay pour un effet lumineux */
  color: #000; /* Jaune foncé pour le texte */
    font-size:1.8rem;
     flex: 1;
    padding: 0 5px 0 5px;
  margin: 0;
}


.serv p {
  flex: 1;
 padding-left: 20px;
  padding-right: 20px;
}

 .vente {
     background:#E8BC3B;
    }

    
    .location {
     background:#59AC34;
    }


    
    .entretien {
    background: #51A7DB;
    }




@media screen and (max-width: 768px) {

.liste_serv {
    flex-direction:column;
}
}






    .show {
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
        transition:all;
        transition-duration:.5s;
} 


/* Responsiveness */
@media screen and (max-width: 768px) {
    main {
        flex-direction: column; /* Sur les petits écrans, empile les filtres et produits */
    }
    
    	h3 {
	
		display:inline-block;

	}
	
        .button_filter{
    padding: 10px;
  border: thin solid var(--quatry-color);
  border-radius: 5px;
        width:max-content;
        cursor:pointer;
    }
    
    .button_filter_show{
        width:97%;
    }
    
/* Ajout de texte dynamique avec ::after */
.button_filter_show::after {
    content: " Supprimer les filtres X";
    margin-left: 10px;
}
    
  .filterInLine {
   text-align: left;
    width: max-content;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
      flex:1;
  }
    
    .filterInLine h3 {
   padding-top:15px;
  }
    
      .filterInLine label {
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;

  }
	


.Red {
color: #A4A4A4;
  font-size: 1.2em;
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-style: italic;
}

	.produits-container:empty {
    grid-template-columns: repeat(2, 1fr);
	}
	
   
    
    
	
	/* Styles des filtres */

#filters label {
margin-bottom:0px;
}



.category-btn {
	font-size:1rem;
}
    
    #filter-marques{
    display:flex;
        gap:20px;
    }

}

.Red {
color: #A4A4A4;
  font-size: 1.2em;
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-style: italic;
}

@media screen and (max-width: 420px) {


	
	h3 {
		display:block;
		width:100%;
	}


}


@media screen and (max-width: 768px) {
      
    .main{
    flex-direction:column;
    }  
    

}
        
        
        
        
        
        
    
        
        @media screen and (min-width: 768px) {
    main {
        flex-direction: row; /* Sur les petits écrans, empile les filtres et produits */
        transition:all;
        transition-duration: .5s;
    }
	

	
	h3 {
		display:block;
	}


	


    .produits-container {
	display:grid;
        grid-template-columns: repeat(2, 1fr); /* 3 produits par ligne */
		width:100%; 
	grid-gap:20px;
	}
	

}

/* Chaque carte de produit */
.product-card {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Assure que le produit occupe toute la largeur de sa cellule */
    height:max-content;
    position:relative;
    border-radius:10px;
}

.product-card h3 {
    margin-top:0px;
    font-size:1.1rem;
}

/* Image du produit */
.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}


.stock_card{
width: max-content;
  padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border:thin solid;
  border-radius: 5px;
  font-size: 0.8rem;
  position: absolute;
  top: 5px;
left: 15px;
  background-color: white;
}

.stick_card{
width: max-content;
  padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border:thin solid;
  border-radius: 5px;
  font-size: 0.8rem;
  position: absolute;
  top: 5px;
right: 15px;
  background-color: white;
}

/* Boutons Admin */
.admin-buttons {
    margin-top: 10px;
}

.offreP{
font-weight: bold;
  color: red;
  border: thin solid green;
  width: max-content;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

.admin-buttons button {
    background-color: #0a4f7d;
    color: white;
    border: none;
    padding: 5px 10px;
    margin: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

.admin-buttons button:hover {
    background-color: #2980b9;
}


/* Moteur de recherche */
.search-bar {
    display: flex;
    justify-content: center;
    background: var(--primary-color);
  max-width: 100vw;
    align-items: center;
    gap:20px;
}

@media (max-width:768px){
.logo_search {
display:none;
}
    .search-bar {
  padding: 10px;
}
}

@media (min-width:769px){
.logo_header {
display:none;
}
}

.material-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer; /* Pour rendre l'icône cliquable */
  transition: transform 0.3s ease; /* Animation pour transformer la loupe en croix */
}

.search-icon i {
  font-size: 18px;
  pointer-events: none;
}

/* Quand la classe "cross" est ajoutée, rotation de la loupe en croix */






/* Sur les tablettes (min-width: 768px) : 3 produits par ligne */
@media screen and (min-width: 768px) {
    .produits-container {
		display:grid;
        grid-template-columns: repeat(3, 1fr); /* 3 produits par ligne */
		width:100%;
		grid-gap:20px;
    }
	
	 
	

}

#reset-search{
display:none;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
    position: absolute;
  right: 80px;
  top: 8px;
    background:white;
    z-index:2;
}

.search_visible{
display:flex !important;
}

#reset-search i{
    font-size:18px;
}

/* Sur les écrans de bureau (min-width: 1024px) : 5 produits par ligne */
@media screen and (min-width: 1024px) {
    .produits-container {
		display:grid;
        grid-template-columns: repeat(4, 1fr); /* 5 produits par ligne */
				width:100%;
			grid-gap:20px;
    }
}
    
@media screen and (min-width: 1400px) {
    .produits-container {
		display:grid;
        grid-template-columns: repeat(5, 1fr); /* 5 produits par ligne */
				width:100%;
			grid-gap:20px;
    }    
	
	
	

	
}




/* Responsive : Onglets et Menu mobile */
@media screen and (max-width: 768px) {
    nav.main-nav ul {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: center;
        background-color: #333;
    }

    nav.main-nav ul li {
        margin: 10px 0;
    }

    .menu-toggle {
        display: flex;
    }

     nav.main-nav ul.show {
    display: flex;
    top: 63px;
    position: absolute;
    right: 0px;
    width: max-content;
    padding: 20px;
  }

    /* Onglets sur mobile */
    .category-tabs .tabs {
        flex-direction: column;
    }

    .category-tabs .tab {
        padding: 12px 18px;
    }
}

/* Bandeau promo */
.promo-banner {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 10px 20px;
}



.icons {
font-family: 'Inter', sans-serif;
  margin-right: 5px;
  white-space: nowrap;
  right: 20px;
  font-size: 40px;
  height: max-content;
  padding: 0;
  margin: 0;
  line-height: 48px;
  position: absolute;
}

.search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding-right:68px;
}

#searchInput {
    width: 100%;
    padding: 10px 20px 10px 20px; /* Padding pour laisser de la place pour l'icône */
    font-size: 16px;
    border-radius: 25px; /* Coins arrondis */
    outline: none;
    border:none;
}

#searchIcon {
    position: absolute;
    top: 50%;
    right: 4px; /* Positionne l'icône à droite dans l'input */
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    background: white;
  border: none;
}

#searchInput:focus {
    border-color: #007BFF; /* Change la couleur du bord quand l'input est focus */
}

/* Filtrage des produits */
.product-filters {
    padding: 20px;
}

.material-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.search-icon i {
  font-size: 18px;
  pointer-events: none;
}




/* Conteneur principal de la page produit */
.product-page-container {
    display: block;
    padding: 20px;
    gap: 20px;
	max-width:1400px;
}

/*div pour flex */
.imgTitle {
display:flex;
flex-wrap: wrap;
       gap: 20px;
}



.desc {
  white-space: pre-line;
}


@media (max-width: 768px) {
  .imgTitle {
flex-direction:column;  
}
    
    
}
.DescCar {
display:flex;
flex-wrap: wrap;
       gap: 20px;
    margin-top:20px;
}

.option {
display:block;
    margin-top:20px;
}

/* Image du produit */
.product-image {
flex: 1;
  max-width: 100%;
  display: flex;
    flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  height: max-content;
}
.product-image img {
    max-width: 100% !important;
    object-fit: cover !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;

}
    
@media (max-width: 768px) {
  .product-image {
max-width: 100%;  
}

.product-image img {
    max-width: 100% !important;
    object-fit: cover !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;

}
}
.product-logo {
    position: absolute;
    top: 10px; /* Ajuste la distance par rapport au haut */
    right: 10px; /* Ajuste la distance par rapport à la droite */
    width: 60px; /* Ajuste la taille du logo */
    height: auto;
    z-index: 10; /* S'assure que le logo se superpose à l'image */
}

.product-logo img {
	border-radius: 0px !important;
}

/* Détails du produit */
.product-details {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
    
@media (max-width: 768px) {
.product-details {
max-width: 100%;  
}
}

/* Titre du produit */
.product-details h1 {
    font-size: 2rem;
  margin: 0;
  text-transform: uppercase;
  color: var(--primary-color-dark);
}

/* Prix du produit */
.product-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color-dark);
    margin: 10px 0;
}

/* Sous-catégorie */
.product-brand {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* Section d'aide avec les coordonnées */
.help-section {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #ddd;
	width:max-content;
	max-width:100%
}

.help-section p {
    margin: 0 0 10px;
    font-size: 1rem;
}

.help-section .d-flex {
    gap: 15px;
}

/* Description du produit */
.product-description {
    margin-top: 20px;
  max-width: 65ch;
  word-break: normal;
  overflow-wrap: normal;
    margin-right:40px;
}

.product-description h3 {
    font-size: 1.25rem;
}

.product-description p {
    font-size: 1rem;
    color: #333;
}

/* Caractéristiques du produit */
.product-characteristics {
    margin-top: 20px;
}

.product-characteristics h3 {
    font-size: 1.25rem;
}

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

.product-characteristics ul li {
    font-size: 1rem;
    margin-bottom: 5px;
}

.product-characteristics ul li strong {
    color: var(--primary-color-dark);
}
.product-options ul li strong {
    color: var(--primary-color-dark);
}

.product-characteristics ul li span.value {
    font-weight: normal;
    color: #555;
}

.bloc_prix {
   display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
    height:58px;
}

@media (max-width: 500px) {
.bloc_prix {
   display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
    height:max-content;
    flex-direction:column;
}
}


.prix {
    font-weight: bold;
    color: var(--primary-color-dark);
    font-size:1.3rem;
}

.prix_barre {
  position: relative;
  display: inline-block;
  color: #888;
}

.prix_barre::before {
  content: "";
  position: absolute;
  /* On centre la ligne verticalement au milieu du texte */
  top: 50%;
  left: -5%; /* Fait dépasser la ligne un peu à gauche */
  width: 110%; /* Fait dépasser la ligne un peu à droite */
  height: 2px; /* L'épaisseur de ta barre */
  background-color: #e74c3c; /* Rouge */
  
  /* L'effet de rotation magique */
  transform: translateY(-50%) rotate(-15deg);
  
  /* Optionnel : adoucit les bords de la ligne lors de la rotation */
  background-clip: padding-box; 
}


/* Responsive: Lorsque l'écran est plus petit, les sections se réorganisent */
@media (max-width: 768px) {
    .product-page-container {
        flex-direction: column;
    }

    .product-image,
    .product-details {
       width: 100%;
    }
}


 .sticky-element {
            background-color: var(--quatry-color);
            color: white;
            padding: 10px;
            cursor: pointer;
            position: absolute;
       position: fixed;
            top: 59px;
       left: 0;
            width: 100%; /* Assurez-vous que l'élément couvre toute la largeur */
            transition: opacity 0.3s ease, transform 0.3s ease; /* Transition de fondu et déplacement */
            opacity: 0; /* Commence invisible */
            transform: translateY(-100%); /* Commence décalé */
     height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.2em;


  border-top: solid #fff 3px;
  border-bottom: solid #fff 3px;
        }

        .sticky-fixed {
            position: fixed;
            top: 59px;
            opacity: 1; /* Rend l'élément visible */
            transform: translateY(0); /* Déplace l'élément à sa place */
            z-index: 1000;
                 font-weight:bold;
            text-align:center;
        }



/* Footer */
footer {
    background-color: #333;
    color: white;
    padding: 30px 20px;
    text-align: left;
    margin-top: auto; /* Permet de "pousser" le footer en bas */
}

.footer-content {
    display:flex;
    gap:20px;
    justify-content: space-around;
    flex-wrap:wrap;
}


footer i {
  margin-right: 10px;
  color: var(--primary-color);
  font-size: 20px;
}

footer span {
margin-left: 29px;
}

footer a {
color:white;
    text-decoration:none;
}
footer a:hover {
color: #007bff;
    text-decoration:underline;
}




/* slider */

/* Style du conteneur principal */

#offre_wide {
    width: 100%; /* Le conteneur prend toute la largeur de son parent */
    overflow: hidden; /* Masque les images qui sortent du conteneur */
    position: relative; /* Utile pour le positionnement des images à l'intérieur */
}

.slider {
    display: flex; /* Affiche les images côte à côte */
    transition: transform 1s ease-in-out; /* Transition fluide lors du changement d'image */
    width: 100%; /* Le conteneur prend toute la largeur du parent */
}

.slider img {
    width: 100%; /* Chaque image prend toute la largeur du conteneur visible */
    height: auto; /* Ajuste la hauteur pour garder les proportions des images */
}


#related-products-list{
display: flex;
  gap: 20px;
flex-wrap: wrap;
}

#related-products-list h2{
display: flex;
    width:100%;
  gap: 20px;
flex-wrap: wrap;
   color:var(--tertiary-color-dark);
    font-style: italic;
    font-size:1.5rem;
    border-bottom:thin solid var(--tertiary-color-dark);
}

.product-item{
width:200px;
}

#related-products-list img{
object-fit: cover !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  width: 100%;
}