/* ********** FICHE PRODUIT ********** */
/* ****** Photos produit ****** */
.fiche {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.photos {
    position: relative;
    width: 35%;
    min-width: 390px;
    padding: 40px;
}

.mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 30px;
    margin-top: -50px;
    color: #333;
    text-decoration: none;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.next {
    right: 40px;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffd20c;
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 25%;
}

.demo {
    opacity: 0.6;
}

.active, .demo:hover {
    opacity: 1;
}

/* ***** Description produit ***** */
.description {
    width: 35%;
    min-width: 390px;
    padding: 40px;
}

.details {
    font-size: 1.2em;
    font-weight: 300;
    color: #333;
    text-align: justify;
}

.achat {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.btn_taille {
    background-color: white;
    color: #333;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #333;
    cursor: pointer;
}

.taille {
    position: relative;
    display: inline-block;
}

.choisir_taille {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}


.choisir_taille p {
    color: #333;
    padding: 7px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}


.choisir_taille p:hover {
    background-color: #f1f1f1
}

.taille:hover .choisir_taille {
    display: block;
}

.taille:hover .btn_taille {
    background-color: #ffd20c;
}

.tarif {
    font-size: 2em;
    font-weight: 500;
    color: #333;
    text-align: right;
}

.ajouter {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #333;
    color: white;
    background-color: #333;
    padding: 5px 3px;
    font-size: 1.4em;
    font-weight: 300;
    text-transform: uppercase;
    transition-property: background-color, color, box-shadow;
    transition-duration: 0.8s;
}

.ajouter:hover {
    background-color: #ffd20c;
    color: #333;
    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2);
}


/* ***** LISTE PRODUITS ***** */

.titre-liste {
    text-align: center;
    margin-top: 30px;
}

.gamme {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.gamme a {
    text-decoration: none;
}

.gamme .categories {
    display: flex;
    flex-direction: column;
    max-width: 30%;
    margin: 20px 10px;
}

.gamme .categories .vetement {
    width: 200px;
    text-align: center;
    background-color: #333;
    border: 1px solid #333;
    color: white;
    height: 50px;
    padding: 10px;
    margin: 10px auto;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    transition-property: background-color, color, box-shadow;
    transition-duration: 0.8s;
}

.gamme .categories .vetement:hover {
    background-color: #ffd20c;
    color: #333;
    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2);
}

.gamme .liste {
    width: 65%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.gamme .liste .item {
    border: 1px solid #333;
    box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.2);
    height: 520px;
    width: 320px;
    padding: 10px;
    margin: 30px 10px;
    box-sizing: border-box;
    background-color: rgb(245, 245, 245);
    opacity: 0.9;
    color: #333;
}

.gamme .liste .item:hover {
    opacity: 1;
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
}

.gamme .liste .item .photo_item {
    width: 300px;
    height: 420px;
    overflow: hidden;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.gamme .liste .item .photo_item img {
    width: 100%;
}

a.retour {
    display: block;
    margin: 30px auto;
    border: 1px solid #333;
    background-color: white;
    color: #333;
    padding: 10px 10px;
    max-width: 360px;
    width: 100%;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    transition-property: background-color, color;
    transition-duration: 0.8s;
}

a.retour:hover {
    background-color: #333;
    color: white;
}

/* ********** Boutiques homme /femme ********** */
.rayons {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    margin: 40px auto;
    flex-wrap: wrap;
}

.rayons a {
    text-decoration: none;
    color: #333;
}

.rayons a:hover {
    color: #333;
}

.rayons .division {
    border: 1px solid #333;
    height: 480px;
    width: 20%;
    min-width: 300px;
    margin: 10px;
    background-color: rgb(240, 240, 240);
    transition-property: background-color, box-shadow;
    transition-duration: 0.8s;
}

.rayons .division:hover {
    background-color: #ffd20c;
    box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.2);
}

.rayons .division .division-photo {
    height: 85%;
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    border-bottom: 1px solid #333;
}

.rayons .division .division-photo img {
    width: 100%;
}

.baskets-homme {
    border: 1px solid #333;
    height: 240px;
    width: 88.5%;
    margin: 0 auto 40px auto;
    text-align: left;
    padding: 3%;
    background-image: url('../visuels/img/produits/homme/baskets/baskets6_1.webp');
    background-position: 50% 52%;
    background-repeat: no-repeat;
    background-size: 110%;
    transition-property: box-shadow, background-size, opacity;
    transition-duration: 0.8s;
    opacity: 0.95;
}

.baskets-femme {
    border: 1px solid #333;
    height: 240px;
    width: 88.5%;
    margin: 0 auto 40px auto;
    text-align: left;
    padding: 3%;
    background-image: url('../visuels/img/produits/femme/baskets/baskets2_1.webp');
    background-position: 50% 59%;
    background-repeat: no-repeat;
    background-size: 110%;
    transition-property: box-shadow, background-size, opacity;
    transition-duration: 0.8s;
    opacity: 0.95;
}

.baskets-homme:hover, .baskets-femme:hover {
    box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.2);
    background-size: 100%;
    opacity: 1;
}

.baskets-homme h3, .baskets-femme h3 {
    font-size: 2em;
    color: #333;
    transition-property: font-size;
    transition-duration: 0.8s;
}

.baskets-homme h3:hover, .baskets-femme h3:hover {
    font-size: 2.4em;
}

.lien-baskets {
    text-decoration: none;
}

/* ********** RESPONSIVE ********** */
@media screen and (max-width: 580px) {
    .gamme .categories {
      display: none;
    }
    .photos, .description {
        padding: 15px;
    }
}

@media screen and (max-width: 580px) {
    .rayons .division {
      width: 100%;;
    }
}