:root {
    --lightWhite : #FBFBFB;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.nav-link::after {
    content: '';
    width: 0px;
    height: 1px;
    margin-left: 50%; /* in order to extend left and right from center */
    display: block;
    background: yellow;
    transition: 300ms;
}

.nav-link:hover::after {
    width:100%;
    margin-left: 0%;
}

.nav-link:hover, .nav-link.active {
    color: red;
}

body {
    /* background-color: #F1F1F1; */
    background-color:var(--lightWhite);
    
    font-family:  Calibri, sans-serif;
    /* font-family: "Roboto", sans-serif; */
    font-size: 18px;
    margin: 0;
    line-height: 1.3;

    color: rgba(0, 0, 0, 0.8);

    margin: 0;
    min-height: 78vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.promotionPrice {
    text-decoration: line-through;
    color: red;
}

.copyright {
    background-color:var(--logo_blue);
    padding: 10px 10px;
    text-align:center;
    font-size: 15px;
    color:var(--logo_yellow);
}

.breadcrumb {
    font-size: 20px;
}

.product_title{
    font-size: 40px;
    /* font-weight: 700; */
    margin-top: 0.5em;
}

.product_price {
    font-size: 35px;
}

.product_alert_threshold {
    font-weight: 700;
    text-decoration: underline;
    margin-top: .5em;
}

.product_add_cart {
    margin: .5em;
}

.product_attributes td {
    font-size: 18px;
}


.Cart_item {
    margin-top: 1em;
}

.cart_item_title {
    text-align: left;
    font-size: 20px;
    font-weight: 700;
}

.cart_item_button{
    margin: 1em;
}

.cart_item_amount {
    font-size: 20px;
    font-weight: 700;
}

.cart_paiement {
margin: 1em;    
}


/* Panneau latéral */
/* https://nosmoking.developpez.com/demos/css/panneau-lateral.html */
#lateral-panel {
    z-index: 9999;                  /* pour être au dessus des autres éléments */
    position: fixed;                /* ne suit pas le scroll de la page et sert de réfèrent */
    top: 100;                         /* position en haut */
    left: 0;                        /* à gauche */
    left: 100%;                        /* à gauche */
    width: 15em;                    /* valeur de largeur pour tout le contenu */
    min-height: 100vh;              /* occupe toute la hauteur du viewport */
    /*    transform: translateX(-100%);    on déplace à gauche pour ne pas interférer avec le document */
    transform: translateX(0%);      /* on déplace à droite pour ne pas interférer avec le document */
}


#lateral-panel-input {
    position: absolute;           /* pour sortir l'élément du flux */
    left: -999em;                 /* position hors de la fenêtre */
}

#lateral-panel-bloc {
    /*-- positions et dimensions --*/
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /*-- visuel --*/
    border-right: 1px solid #CCC;
    background: #FFF;
    transition: transform .5s;    /* pour animation du panneau */
}

#lateral-panel-label {
    /*-- positions et dimensions --*/
    z-index: 1;                   /* on le met au dessus */
    position: absolute;           /* pour sortir l'élément du flux, il va bouger */
    top: .5em;                    /* on décolle légèrement du haut */
    /*left: 100%;                    alignement sur le bord droit du parent */
    left: -20%;                   /* alignement sur le bord gauche du parent */
    width: 3em;                   /* dimensions respectables */
    height: 5em;
    /*-- visuel --*/
    border: 1px solid #CCC;
    border-width: 1px 1px 1px 0;
    border-radius: 0 .5em .5em 0;
    border-radius: .5em 0 0em .5em;
    font-size: inherit;
    background: #FFF;
    transition: all .5s;          /* pour animation éventuelle */
    cursor: pointer;
}

#lateral-panel-content {
    padding: .5em;                /* on décolle le contenu du bord */
    overflow: auto;               /* rien ne doit déborder */
    max-height: 100%;             /* pas plus haut que son parent */
    box-sizing: border-box;       /* modèle de boîte, plus simple à gérer */
    font-size: 18px;
    background-color: lightgrey;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#lateral-panel-input:checked ~ #lateral-panel-bloc {
  /*  transform: translateX(100%);   translation vers la droite de 100% */
  transform: translateX(-100%);  /* translation vers la gauche de 100% */
}

#lateral-panel-label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    border: .5em solid currentColor;
    border-width: .5em .5em 0 0;
    color: #888;
    transition: all .5s;
   /* transform: translate(-50%, -50%) rotate(45deg); retourbement de la fleche vers la gauche */
   transform: translate(-50%, -50%) rotate(-135deg); /* retourbement de la fleche vers la droite */
}

#lateral-panel-input:checked ~ #lateral-panel-bloc #lateral-panel-label:before {
  /*  transform: translate(-50%, -50%) rotate(-135deg);  retourbement de la fleche vers la gauche */
    transform: translate(-50%, -50%) rotate(45deg); /* retourbement de la fleche vers la droite */
}



/**************/
/* SlideShow */
/************/
* {
    box-sizing: border-box;
  }
  
  /* Position the image container (needed to position the left and right arrows) */
  .myContainer {
    position: relative;
  }

/* Hide the images by default */
.mySlides {
    display: none;
  }
  
  /* Add a pointer when hovering over the thumbnail images */
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Container for image text */
  .caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Six columns side by side */
  .column {
    float: left;
    width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }












/* ********************* */
/* Gestion du responsive */
/* ********************* */

@media screen and (min-width:540px) {  /*  Bootstrap sm */
    .nav-link {
        font-size: 20px !important;
    }
}

@media screen and (min-width:720px) {  /*  Bootstrap md */
    .nav-link {
        font-size: 20px !important;
    }

    .product_title{
        font-size: 60px;
        font-weight: 700;
        margin-top: 0em;
    }

    .breadcrumb {
        font-size: 25px;
    }

    .product_variation {
        font-size: 25px;
    }

    .product_attributes td {
        font-size: 20px;
    }
}

@media screen and (min-width:960px) {  /*  Bootstrap lg */
    .nav-link {
        font-size: 20px !important;
    }
}

@media screen and (min-width:1140px) {  /*  Bootstrap xl */
    .nav-link {
        font-size: 25px !important;
    }
}

@media screen and (min-width:1320px) {  /*  Bootstrap xxl */
    .nav-link {
        font-size: 30px !important;
    }
}