/*filter : blur(4px); --> rendre flou qq chose (à sélectionné soit sur une image ou alors sur l'attribut a)*/

/* code pour les bouton homme et femme */

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color : #fff;
}

body {
  background: #222;
  font-family: Raleway, Helvetica, sans-serif;
  cursor: url(vtt_curseur.png) 2 2, pointer;
}

/* début des containeur principaux*/

.conteneur-flex{    
    display : flex;
    flex-flow : row wrap;
    justify-content: space-around;
}

.element-flex{
    flex: 0 1 20%;
    height: auto;
    width : 50%;
    min-width : 200px;
    max-width : 350px;
    margin-left : -20%;
    margin-top : 8%;
}  
.container {
    margin: auto;
    margin-top : 10%;
    width: 20%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.conteneurtxtetautre{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 34%;
    margin-top: 30px;
    padding : 2% 5%;
    min-width: 300px;
}

.containeurimgtxt{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 7%;
}

.containeur_taille{
    display : flex;
    flex-direction : row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 20% 13%;
}

.containeur_produits{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top : 10%;
}

figure{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding : 10px;
    margin-left : 20px;
}

.containeur_vtt{
    display : flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    margin-top : 150px;
}

.containeur_banniere{
    display: flex;
    background: url("banniere.jpg") no-repeat top;
    background-size: 100% auto;
    height : 600px;
    justify-content: right;
    flex-wrap: wrap;
    margin-top : 120px;
}

.containeur_pg{
    display: flex;
    flex-direction: column;
    height : 21vw;
    width : 58vw;
    justify-content: space-around;
}

.containeur_petit{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.containeur_grand{
    display: flex;
    justify-content: center;
}

.containeur_recap{
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width : 100%;
    margin : 20px;
}

.containeurp1{
    display : flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    max-width: 650px;
}

.containeurpcont{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size  : 20px;
    margin-left : 20px;
}

.containeur_body{
    display: flex;
    flex-direction : row-reverse;
    justify-content: space-evenly;
}

.containeur_total{
    display: flex;
    flex-direction: column;
}

.containeur_qte{
    display : flex;
    align-items: top;
    width : 151px;
    height : auto;
    margin-left : auto;
    margin-right : auto;
}

.containeur_profil{
    margin-top : 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height : 100vh;
    align-items : center;
    font-size : 20px;
}

.containeur_infos,
.containeur_infos_modif{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width : 100%;
}

.containeur_radio {
    display: flex;
    align-items: center;
}

.containeur_adresse{
    display : flex;
    flex-direction : row;
}

.containeur_connecter{
    display : flex;
    flex-direction: row;
    justify-content: space-evenly;
    width : 100%;
}
  
.containeur_radio input[type="radio"] {
    display: none;
}
  
.containeur_radio label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f2f2f2;
    color: #333;
    border-radius: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
  
.containeur_radio label:hover {
    background-color: #ccc;
}
  
.containeur_radio input[type="radio"]:checked + label {
    background-color: #ff1919;
    color: #fff;
}

.containeur_tableau{
    display: flex;
    flex-direction: column;
    width : 100%;
    align-items : center;
    margin : auto;
    margin-top : 100px;
}

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

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

.containeur_photos{
    display : flex;
    flex-direction : column;
    align-items: center;
    justify-content : start;
}

.containeurimg{
    display : flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.containeurtitrep{
    display : flex;
    flex-direction : column;
    width : 80%;
    border : solid #fff 4px;
    padding : 10px 0;
    margin : 50px 0;
}

.containeur_bttnphoto{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width : 8%;
}

.containeur_btn-photo{
    width: 1vw;
    display: flex;
    flex-direction: row;
}

.btn_photo{
    border : none;
    height : 1vw;
    width: 1vw;
    min-width: 30px;
    min-height: 30px;
    font-size : 1vw;
    cursor : pointer;
    color : #222;
    background-color : #fff;
    border-radius : 50px;
    margin-top: 20px;
    text-align: center;
}

.btn_photo:hover{
    background-color : transparent;
    color : #fff;
    transition : 0.2s all;
}

/* fin des containeur principaux*/
/* début des figure et figcaption principaux*/

figcaption{
    font-size : 120%;
}

.figvtt{
    padding : 5% 0;
    font-size : 1vw;
    display: flex;
    flex-direction : row;
    justify-content: center;
}

.figprod{
    padding : 7% 0;
}

.figcasqtshirt{
    padding: 2% 0;
}

.casqtshirt{
    margin-top : 10%;
}

/* fin des figure et figcaption principaux*/
/* debut du code pour les bouton homme et femme */

.tabs-container{
    display : flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-evenly;
    margin-top: 100px;
}

.tabs {
    flex-grow: 1;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #f1f1f125;
    background: #222;
    color: #f1f1f1;
}

.tabs:hover{
    background-color : rgb(255, 25, 25, 0.3);
    transition : 0.4s all;
}

button#homme{
    margin-top : 0;
}

button#femme{
    margin-top : 0;
}

.tabs:not(:nth-child(3)) {
    border-right: 1px solid #f1f1f125;
}

.content {
    width: 100%;
    display: none;
    color: #f1f1f1;
    padding: 20px;
}

/* Anim */
.active-content {
    display: block;
    display : flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.active {
    background: linear-gradient(to right, rgb(255, 25, 25), rgb(255, 25, 25));
}

/* fin du code pour les bouton homme et femme */
/* code pour les bouton fleche pour les t-shirt */


.btn{
    border : none;
    height : 2.5vw;
    width: 2.5vw;
    min-width: 30px;
    min-height: 30px;
    font-size : 1.8vw;
    cursor : pointer;
    color : #222;
    background-color : #fff;
    border-radius : 50px;
    margin-top: 20px;
}

.btn:hover{
    background-color : transparent;
    color : #fff;
    transition : 0.2s all;
}

.lesimg{
    margin-top: 2%;
    margin-left: 200px;
    height : auto;
    width : 25%;
    min-width: 120px;
    display : flex;
    flex-direction : column;
}

.defilementimg,
.defilementimgg{
    width : 100%;
    border-radius : 25px;
    padding : 3px;
}

.containeur_btn{
    display : flex;
    flex-direction: row;
    justify-content : space-evenly;
}

/* fin du code pour les bouton fleche pour les t-shirt */
/* code pour le menu de navigation */

/* New Stacking Context with Fixed */
.side-nav {
    position: fixed;
    left: 0;
    top: 0;
    display : flex;
    z-index : 1000;
    flex-direction: row;
}
  
.wrapper {
    width: 96vw;
    display : flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
    height : 120px;
}
  
.containeur_menu{
    display: flex;
    flex-direction : row;
    height: 65px;
    margin-top: 10px;
}
  
.home_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height : 120px;
    width: 5vw;
}

.home{
    width : 50%;
}

.nav-bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height : 100%;
    width : 100%;
}
  
.nav-bloc a{
    font-size : 25px;
    text-decoration: none;
    z-index : 1000;
    cursor: pointer;
}
  
.nav-bloc:hover .sub-nav {
    transform: translateY(130px);
}
  
.sub-nav {
    padding: 0px;
    height: 140px;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}
  
.sub-nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    font-size: 20px;
}
  
.sub-nav li {
    padding: 15px 20px;
}
  
.sub-nav li:hover {
    font-weight: 900;
}
  
.sub-nav li a {
    color: #fff;
    text-decoration: none;
    font-size : 20px;
    z-index : 1000;
    cursor: pointer;
}

.blur-effect {
    filter: blur(10px);
}

.menu-bar {
    position : absolute;
    top: 120px;
    left: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform-origin: left;
  }
  
  .nav-bloc:hover .menu-bar {
    width: 100%;
  }

/* fin du code pour le menu de navigation */
/* début du code quantite*/

#plus-btn,
#minus-btn,
#plus-btnn,
#minus-btnn,
#plus-btnnn,
#minus-btnnn{
    color : black;
    width : 50px;
    height : 50px;
    font-size : 40px;
    cursor : pointer;
    text-align: center;
    border-radius: 8px;
    background-color: #d8d8d8;
}

.quantite,
.quantitee{
    width: 50px;
    height : 50px;
    font-size : 20px;
    background-color: #d8d8d8;
    border: none;
    padding: 5px;
    border-radius: 12px;
    color : #222;
    text-align: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: none;
    width: 0;
    border: none;
}
/* fin du code quantite*/
/* debut du code footer*/

footer {
    flex-shrink: 0;
    border-top: 1px dashed #fff;
    width: 100%;
    background: #222;
    color: #fff;

}
.content-footer {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 16px;
    padding: 50px 0 100px;
}
  

  
  /* contact */

.footer-contact h3,
.footer-services h3,
.footer-schedule h3,
.footer-medias h3 {
    font-size: 22px;
    padding-bottom: 20px;
}
  
.footer-contact p {
    padding: 5px 0;
}
  
  /* Services */
  
.services-list,
.schedule-list,
.media-list {
    list-style-type: none;
    width : 200px;
}

.services-list li {
    padding: 2px 0;
}

.services-list a {
    text-decoration: none;
    color: #fff;
}

.services-list a:hover{
    text-decoration: underline;
    cursor: pointer;
}

  /* Medias */
  
.media-list {
    position: relative;
    right: 10px;
}

.media-list li{
    display: flex;
    flex-direction: row;
}

.media-list svg {
    width: 30px;
    margin: 10px 10px;
}

.media-list a{
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.media-list a:hover{
    text-decoration: underline;
    cursor : pointer;
}

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

    .content-footer {
        max-width: 100%;
        flex-wrap: wrap;
    }
    .bloc {
        flex-basis: auto;
        margin: 20px 20px;
    }
  
  
  }

/* fin du code footer*/
/* debut du code pour le petit menu*/


header {
    width: 100%;
    height: 8vh;
    padding: 0 2rem;
    display : none;
}

nav.petit_menu {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle {
    display: block;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    width: 550px;
}

.menu li a {
    display : none;
    color: #fff;
    text-decoration: none;
}

/* fin du code pour le petit menu */

select#taille {
    padding: 4px;
    border-radius: 4px;
    background: #eee;
    border: none;
    display: block;
    cursor: pointer;
    font-size : 130%;
    color : black;
    list-style-type : none;
    margin-top: 4%;
}

option{
    color : black;
}

.button_panier{
    background-color : #FF1919;
    border : none;
    color : white;
    padding: 20px 130px;
    text-align : center;
    text-decoration : none;
    display : inline-block;
    font-size : 23px;
    margin : 5% 0;
    border-radius : 2rem;
    cursor : pointer;
    font-weight: bold;
}

.button_panier:hover{
    background-color : rgb(255, 25, 25, 0.6);
    transition : 0.3s all;
}

a#buttpanier_casquette{
    margin-top : 3%;
}

.button_perso, #infos, #modif{
    background-color : #FF1919;
    border : none;
    color : white;
    padding: 20px 90px;
    text-align : center;
    text-decoration : none;
    display : inline-block;
    font-size : 23px;
    margin-top: 7%;
    margin-bottom: 3%;
    border-radius : 2rem;
    cursor : pointer;
    font-weight: bold;
}

.button_perso:hover, #infos:hover{
    background-color : rgb(255, 25, 25, 0.6);
    transition : 0.3s all;
}

.zoom{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une demi seconde. */
transition: all 0.5s ease;
}

.zoom:hover{
/* L'image est grossie de 0.8% */
transform:scale(1.08);
}

img{
    z-index : 1;
    border-radius : 15px;
}

.tshirt_produits{
    width : 240px;
    height : auto;
}

.casquette{
    width: 240px;
    height : auto;
}

img#tshirt_sperso{
    left : 38%;
    top : 36%;
    height : 250px;
    width : 250px;
}

img.tshirt_taille{
    height : auto;
    width : 240px;
}

img.acceuil{
    top : 0px;
    width : 137px;
    height : 98px;
}

img#photo_mael{
    left : 0px;
}

img#photo_noham{
    left : 10%;
    
}

img#photo_antonin{
    left : 20%
}

img#photo_evan{
    left : 30%;
}

img#photo_leo{
    left : 40%;
}

img#photo_nolann{
    left : 50%;
}

img#velo1{
    left : 60%;
}

img#velo2{
    left : 71.26%;
    top : -20px;
    transform : rotate(-90deg);
    width : 103px;
    height : 135px;
}

img#velo3{
    left : 79.97%;
}

img#p124{
    left : 90%;
}

img#casquette2{
    height : auto;
    width : 190px;
}

.imgvtt{
    height : auto;
    width : 100%;
}

.imgcomp{
    width : 30%;
}

.txtblog{
    font-size : 20px;
}

.margint{
    margin-left : 1%;
}

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

.center{
    text-align: center;
    margin-top: 120px;
    margin-bottom : 50px;
}

.left{
    float : left;
    height : auto;
    width : 20%;
    margin-left : 1%;
    margin-right : 1%;
}

.right{
    float : right;
    height : auto;
    width : 15%;
    margin-left : 1%;
    margin-right : 1%;
}

.rightg{
    width : 20%;
}

.imp{
    font-size : 25px;
    color : #ff1818;
}

.deux{
    font-size : 25px;
    color : yellow;
}

.trois{
    font-size : 25px;
    color : #a87000;
}

.or{
    font-size : 25px;
    color : gold;
}

.merci{
    font-size : 23px;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

a{
    text-decoration : none;
}

font-color{
    color : grey; 
}

#homme_tshirt{
    display : block;
    font-size : 120%;
    position : relative;
    margin-top : 4%;
    margin-left : 70%;
}

#femme_tshirt{
    display : block;
    font-size : 120%;
    position : relative;
    margin-top : -1.6%;
    margin-left : 78%;
}

table#tableau_taille, th, td{
    border: 2px solid #FF1919;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
}

.commande_recap{
    border-collapse : collapse;
    margin : 10px;
}

figcaption#homme_carre{
    margin-left : 68%;
    margin-top : -1.6%;
}

figcaption#femme_carre{
    margin-left : 81%;
    margin-top : -1.6%;
}

p, figcaption{
    font-family : Arial;
    color : white;
}

p#princip{
    font-size : 180%;
    margin-top : 120px;
    margin-left : 8%;
}

p#tshirt_titre{
    font-size : 200%;
}

p.txt{
    font-size : 120%;
}

p#tshirt_taille{
    font-size : 100%;
    margin-top : 6%;
    margin-left : 65%;
}

.contfin{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction : column;
    height: 100vh;
}

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

p.guide{
    margin-top : 7%;
    margin-bottom : 5px;
    margin-left: 103px;
    font-size : 125%;
    display: inline-block;
}

.containeur_pc{
    display : none;
}

p.titre{
    font-size : 200%;
    z-index : 2;
    color : white;
    font-family : savoye;
}

.banniere{
    z-index : 2;
}

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

.petit{
    font-size : 1.5vw;
}

.grand{
    font-size : 2.5vw;
    z-index : 2;
}

.reponse{
    text-align: center;
    background-color: #fff;
    color : #333;
    animation: fadeOut 8s forwards;
}

.supprimer{
    background-color: transparent;
    border : none;
    cursor: pointer;
}

.poubelle{
    height : auto;
    width : 50%;
    border-radius : 0;
}

@keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
}
  
.rond{
    width : 25px;
    height : auto;
}

#formlogin[type="submit"],
#verifsend[type="submit"],
#formsend[type="submit"]{
    background-color: rgb(255, 25, 25, 0.8);
    font-size : 20px;
    border: none;
    border-radius: 20px;
    width : 100%;
    height : 40px;
    color: #FFF;
    margin-top: 40px;
    cursor : pointer;
}

#formlogino{
    margin-bottom : 20px;
}

#formlogino:hover{
    text-decoration: underline;
    margin-top : 0;
}

#age{
    width : 20%;
    height : 35px;
    font-size : 20px;
    background-color: #d8d8d8;
    font-style: italic;
}

#formsendo{
    border: solid 2px #ff1919;
    font-size : 22px;
    border-radius: 20px;
    padding : 5px 80px;
    margin-top : 20px;
    margin-bottom : 40px;
    color: #fff;
    cursor: pointer;
}
  
#formsendo:hover{
    color : #fff;
    background-color: rgb(255, 25, 25, 1);
    border : rgb(255, 25, 25, 1);
    border : none;
    transition : 0.4s all;
}
  
#formlogin[type="submit"]:hover,
#verifsend[type="submit"]:hover,
#formsend[type="submit"]:hover{
    color : #fff;
    background-color: rgb(255, 25, 25, 1);
    transition : 0.3s all;
    border : none;
}

#lemail, 
#lpassword, 
#email, 
#password, 
#prenom,
#cpassword,
#nomfamille,
#nom,
#adresse,
#verif,
.cperso{
    width : 250px;
    height : 40px;
    margin-top : 10px;
    border-radius: 10px;
    padding-left : 5px;
    font-style: italic;
    border : none;
    background-color: #d8d8d8;
}

.verif{
    width : 99vw;
    height : auto;
    margin : 200px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#verif{
    width : 300px;
    height : 90px;
    font-size : 20px;
}

#verifsend[type="submit"]{
    width : 400px;
}

input {
    color: #222;
}

.cperso{
    margin-left : 12%;
    width : 75%;
}
  
input::placeholder {
    color: #222;
}

.reponse_contact, .reponse_contactp {
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.reponse_contact{    
    font-size: 15px;
}

.reponse_contactp{
    font-size: 40px;
    margin-top : 150px;
}

.photos{
    height : auto;
    width : 100%;
}

.lienimg{
    width : 30%;
    height : auto;
}

.soixante{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.connecter{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.imgpanier{
    height : auto;
    width : 55%;
}

#recap{
    margin-top: 70px;
    text-align: center;
}

#prixrecap{
    text-align : right;
}

#total{
    margin-top : 10px;
}

#commander{
    background-color : #FF1919;
    border : none;
    color : white;
    padding: 15px 60px;
    text-align : center;
    text-decoration : none;
    display : inline-block;
    font-size : 18px;
    border-radius : 2rem;
    cursor : pointer;
    font-weight: bold;
}

#commander:hover{
    background-color : rgb(255, 25, 25, 0.6);
    transition : 0.3s all;
}

.containeur_recap p{
    padding : 10px 0;
}

.back{
    display: none;
}

.spe_img{
    float : left;
    height : auto;
    width : 22%;
    margin-right : 1%;
}

.txt_email{
    font-size:25px; 
    text-align : center; 
    margin-top : 75px; 
    font-weight : bold;
}

.actu_txt{
    font-family: Raleway, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    font-size : 35px;
    margin-bottom: 50px;
}

.containeur_logom {
    display: flex;
    flex-direction : row;
    justify-content: center;
  }
  
  .containeur_logom input[type="radio"] {
    display: none;
  }
  
  /* Default styles for labels */
  .txt_logomavec,
  .txt_logomsans {
    position: relative;
    font-size : 20px;
    padding: 0px 30px;
    cursor: pointer;
  }
  
  /* Specific styles for the first radio button */
  .containeur_logom .txt_logomavec::before,
  .containeur_logom .txt_logomsans::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid red;
    border-radius: 50%;
    background-color: #fff;
  }
  
  .containeur_logom input[type="radio"]:checked + .txt_logomavec::before,
  .containeur_logom input[type="radio"]:checked + .txt_logomsans::before {
    background-color: red;
  }

@media all and (max-width: 991px){

    .side-nav {
        display : none;
    }

    header{
        display : block;
        margin-top : -70px;
    }
   
    .element-flex{
        margin-top : 25%;
        margin-left : -30%;
        flex: 0 1 20%;
        min-width : 200px;
        max-width : 350px;
    }

    img#produits_page{
        margin-left : 27%;
        margin-top : 28%;        
        min-width : 50px;
        max-width : 100px;
        height : auto;
        width : 400px;
    }

    .toggle {
        display: flex;
        flex-direction: row;
        font-size: 2rem;
        cursor: pointer;
        position: fixed;
        z-index: 22;
        width : 0;
    }

    .containeur_pc{
        display: flex;
        flex-direction: row;
        justify-content: end;
        width : 90%;
        position: fixed;
        margin-top: 0;
    }

    .ouvrir{
        display : block;
    }

    .fermer{
        display : none;
    }

    .open .ouvrir {
        display: none;
    }

    .open .fermer {
        display: block;
    }

    .menu {
        display : flex;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height : 100vh;
        background: black;
        flex-direction: column;
        padding: 2rem;
        justify-content: space-around;
        transform: translateX(-100%);
        transition: transform 1s;
        z-index: 20;
    }

    .menu li a {
        font-size: 2rem;
        display : block;
    }

    .open .menu {
        transform: translateX(0);
    }

    .tabs {
        font-size: 13px;
    }

    .tabs-container{
        margin-top: 0;
        bottom : 0;
        position : fixed;
    }

    .lesimg{
        margin-left: 0px;
        width : 50%;
    }

    .btn{
        font-size : 3vw;
    }

    p#tshirt_titre{
        font-size : 140%;
        margin-top: 0;
    }

    p.txt{
        font-size : 80%;
    }
    
    p.guide{
        font-size: 90%;
    }

    select#taille{
        font-size: 90%;
        margin-left: 30px;
        margin-top: 5px;
    }

    .button_perso{
        font-size : 100%;
        padding : 10px 40px;
    }

    .button_panier{
        font-size: 100%;
        padding : 10px 69px;
        margin-top : 20px;
        margin-bottom : 20px;
    }

    .containeur_taille{
        margin : 0 5%;
    }

    p#princip{
        margin-top : 0;
        margin-left : 13%;
    }

    .containeur_vtt{
        margin-top : 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .figvtt{
        font-size : 10px;
        text-align : center;
    }

    .imgcomp{
        width : 70%;
    }

    .imgvtt{
        width : 100%;
    }

    .containeur_pg{
        height: 10vh;
    }


    .container{
        margin-top : 100px;
        min-width: 150px;
    }

    .cperso{
        margin-left : 1%;
        width : 93%;
        height : 30px;
    }

    .containeur_body{
        flex-direction : column;
    }

    .imgpanier{
        min-width : 50%;
    }

    .containeur_total{
        align-items : center;
    }

    .containeur_infos{
        flex-direction : column;
        align-items : center;
        height : 20vh;
        margin-top : 50px;
    }

    .containeur_profil{
        margin-top : 0;
        justify-content : center;
    }

    #modif, 
    #infos{
        font-size : 20px;
        padding : 15px 35px;
    }

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

    .containeur_infos_modif{
        flex-direction : column;
        align-items : end;
        margin : 25px 0 ;
        height : 20vh;
        width : 50%;
    }

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

    
    .lien_pc{
        display : flex;
        flex-direction: row;
        justify-content: end;
        height : 38px;
    }

    .comcad{
        border-radius: 0;
        margin : 0 13px;
    }

    .right{
        width : 30%;
    }

    .left{
        width : 40%;
    }

    .txtblog{
        text-align : center;
    }

    .containeur_bttnphoto{
        display: flex;
        flex-direction: column;
        align-items: center;
        width : 100%;
    }

    .containeur_btn-photo{
        width : 100%;
        display: flex;
        justify-content: center;
    }

    .btn_photo{
        font-size : 5vw;
    }

    .containeur_banniere{
        display : none;
        margin-top: 0;
    }

    .back{
        display: block;
        width : 100%;
        height : 100%;
        margin-bottom :100px;
    }

    .containeurimgtxt{
        margin-top: 0;
    }

    .titre{
        margin-top: 0;
    }

    #recap{
        margin-top: 0;
    }

    .lien_connecter{
        text-decoration: underline;
    }
}