body{
    font-family: "Roboto", sans-serif; /* Pour la police d'écriture */
}
.header{
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    justify-content: space-between; /* Pousse le panier tout à droite */
}


.blockleft{
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    gap: 20px; /* Espace entre le logo et le début du menu */
}

.menu{
    display: flex;
    gap: 20px; /* Ajout d'espace */
}

.panierlogin{
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    gap: 2.5rem; /* Espace entre le logo et le début du menu */
}

.menu ul{
    display: flex;
    list-style: none; /* Retire les soulignement des liens */
    gap: 15px; /* Espace entre HOME, SHOP, etc. */
    display: none;
}

.menu a{
    text-decoration: none; /* Retire les soulignement des liens */
    color: black; 
   
}

.panierlogin a{
    text-decoration: none;
    color: black;
    display: none;
}

.panier{
    cursor: pointer;
    height: 30px; /* Ajuste la taille selon ton image */
}

.navlog{
    cursor: pointer;
    height: 40px; /* Ajuste la taille selon ton image */
}

.blocksearch{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.search{
    width: 100%;
    display: flex;
    gap: 10px;
}
.search img{
    width: 35px;
}

.researchmob{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.search input{
    border-top: none;
    border-left: none;
    border-right: none;
    width: 90%;
    font-size: 25px;
}

.select{ 
    background-color: white;
    width: 90%;
    margin-top: 2rem;
    display: flex;
}
#select{
    border-bottom: 2px solid #c0c0c0;
    width: 100%;
    background-color: white;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 30px;
}

.filter{
    background-color: white;
    width: 90%;
    margin-top: 2rem;
    display: flex;
}

#filter{
    border-bottom: 2px solid #c0c0c0;
    width: 100%;
    background-color: white;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 30px;
}

.containerResearch{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    margin-right: 2.4rem;
    position: absolute;
    right: 0px; /* Pour placer le texte à droite*/
    font-size: 10px;
}
.inputImg .container{
   display: none;
}


.grid {
    display: block;
    padding: 20px;
    margin-bottom: 10px;
  }

.windows{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 colonne pour mobile */
    gap: 15px;
}

.filtrewindow{
    display: none;
}

.window img{
    height: 100%; /* Garder les proportions */
    width: 100%;
}

.image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.infos{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 10px;
  gap: 8px;
}

.infos h3{
  font-size: 15px;
  font-weight: 500;
}

.infos p{
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.down{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 12px 10px;
}

.left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.left p{
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
}

.stars{
  display: flex;
  gap: 2px;
}

#lap{
    display: none;
}

.box-page {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* Fond blanc pour masquer les produits dessous */
    padding: 15px 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

/* On cache les radios */
input[type="radio"] {
    display: none;
}

.btn-page ul {
    display: flex;
    list-style: none;
    gap: 15px; /* Espace entre les numéros */
    padding: 0;
    margin: 0;
}

.btn-page ul li label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-weight: bold;
    color: #4a4a4a;
    transition: all 0.2s;
}

/* --- L'effet de sélection (Case Noire) --- */
#page1:checked ~ .btn-page label[for="page1"],
#page2:checked ~ .btn-page label[for="page2"],
#page3:checked ~ .btn-page label[for="page3"],
#page4:checked ~ .btn-page label[for="page4"],
#page11:checked ~ .btn-page label[for="page11"] {
    background-color: #1a1d23; /* Couleur sombre de mon image */
    color: #ffffff;
}

@media screen and (min-width: 768px) and (min-width: 1024px){
    .menu ul{
        display: flex;
    }

    .navlog{
        display: none;
    }

    .panierlogin a{
    display: flex;
    }

    .blocksearch{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .search{
        display: flex;
        flex: 1;
    }

    .search input{
        width: 100%;
        border: none;
        outline: none;
        font-size: 2.5rem;
    }

    .search img{
        margin-right: 10px;
        width: 3.5rem;
    }

    .researchmob{
        display: none;
    }
    .inputImg{
        display: flex;
        border-bottom: 2px solid black;
        width: 90%;
        justify-content: space-between;
    }
    .inputImg .container{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .container img{
        width: 1rem;
        height: 1rem;
    }

    .grid{
        margin-bottom: 20%;
    }

    .windows{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 1 colonne pour mobile */
    gap: 15px;
    }

    .select{
    border-bottom: solid #c0c0c0;
    width: 30%;
    margin-bottom: 17px;
    background-color: white;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 35px;
    display: flex;
    }

    #select{
        border-bottom: none;
    }

    #filter{
        display: none;
    }

    .filter{
        display: none;
    }

    .filtrewindow{
    display:block;
    background-color: rgb(255, 255, 255);
    }

    #color{
    color: rgb(167, 177, 187);
    }

    .selector{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(252, 252, 252);
    }

    select{
    background-color: #fff;
    border: none;
    }

    hr{
    color: aliceblue;
    }

    .range-slider {
    height: 2px;
    position: relative;
    background-color: #e1e9f6;
    border-radius: 2px;
    }

    .range-selected {
    height: 100%;
    left: 0%;
    right: 0%;
    position: absolute;
    border-radius: 5px;
    background-color: #c2c4c9;
    }

    .range-input {
    position: relative;
    }

    .range-input input {
    position: absolute;
    width: 100%;
    height: 2px;
    top: -7px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    }

    .range-input input::-moz-range-thumb {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 2px solid #000000;
    background-color: #fff;
    pointer-events: auto;
    -moz-appearance: none;
    }

    /* Inputs radio cachés (gardent l'état, pas visibles) */
    input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    }

    .ulfooter, .lifooter {
        box-sizing: border-box;
    }

    #lap{
    display: flex;
    }

    .box-page {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* S'étend sur toute la ligne */
    background-color: #fff;
    padding: 20px 0;
    display: flex;
    justify-content: left; /* pousse les numéros à gauche de la largeur totale */
    align-items: center;
    z-index: 1000;
    border-top: 1px solid #eee; /* ligne de séparation */
    }

    .btn-page ul {
        display: flex;
        gap: 20px; /* Espace entre les chiffres */
        list-style: none;
        padding: 0;
        margin: 0;
        pointer-events: auto; /* Permet le clic sur les labels */
    }

    /* Style des labels */
    .btn-page ul li label {
        display: flex;
        align-items: center;
        min-width: 35px;
        height: 35px;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.2s ease;
    }

    .btn-page ul li {
        list-style: none;
    }

    .btn-page ul li label:hover {
        background: #000;
        color: #fff;
        /* hover : fond noir, texte blanc */
    }

    /* Style du label actif */
    #page1:checked~.btn-page label[for="page1"],
    #page2:checked~.btn-page label[for="page2"],
    #page3:checked~.btn-page label[for="page3"],
    #page4:checked~.btn-page label[for="page4"],
    #page5:checked~.btn-page label[for="page5"],
    #page6:checked~.btn-page label[for="page6"],
    #page7:checked~.btn-page label[for="page7"],
    #page8:checked~.btn-page label[for="page8"],
    #page9:checked~.btn-page label[for="page9"],
    #page10:checked~.btn-page label[for="page10"],
    #page11:checked~.btn-page label[for="page11"] {
        background: #000;
        color: #fff;
    }
}