@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* Global style */
*{
    box-sizing: border-box;
}


.txt-center,.center{
    text-align:center;
}
.txt-left{
    text-align:left;
}
.txt-right{
    text-align:right;
}
.txt-justify{
    text-align:justify;
}

.OverflowHidden{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.border-black{
    border:1px solid #000000;
}
.border-white{
    border:1px solid #ffffff;
}

.border-grey{
    border:1px solid #333333;
}
.border-lightgrey{
    border:1px solid #cccccc;
}

.border-corporate1{
    border:1px solid #4b8beb;
}

.border-corporate2{
    border:1px solid #41e6f5;
}



.border-radius3{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.border-radius5{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.spacer{
    clear:both;
    width:100;
    height:20px;
}
.clear{
    clear:both;
    width:100;
}


a {
  color:#4b8beb;
  text-decoration: none;;  
}
a:hover{
    text-decoration: underline;
}

h1 {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h4 {
    display: block;
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h5 {
    display: block;
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h6 {
    display: block;
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
hr.dashed {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

.border-shadow{
    -webkit-box-shadow: 0px 0px 15px 1px #B7B7B7; 
    box-shadow: 0px 0px 15px 1px #B7B7B7;
    border-top:none;
    border-bottom:none;
}

.bold{
    font-weight: bold;
}

.fixed{
    position:fixed !important;
}

.legend{
    font-size:12px;
}

/* Background */
.bg_content{
    background-color: #f6f6f6;
    color:#000000;
}
.bg_active{
    background-color: #2299ce;
    color:#ffffff;
}

.bg_blue	{
    background: #5ea9c5;
    color:#ffffff;
}
.bg_blue:hover	{
    background: #5492a9;
}

.bg_light_blue	{
	 background: #91E4FF;
	 color:#000;
}
.bg_light_blue:hover	{
    background: #5492a9;
}
.bg_ulight_blue{
    background:#c9d7ed;
}
.bg_white	{
	background: #ffffff;
	color:#000;
}
.bg_white-simple	{
	background: #ffffff;
}
.bg_white:hover	{
    background: #ced0d1;
}

.bg_black	{
	background: #000000;
	color:#fff;
}
.bg_black:hover	{
    background: #272727;
}

.bg_red	{
	background: #f44242;
	color:#ffffff;
}
.bg_red:hover	{
	background: #ecc9ca;
	color:#ffffff;
}


.bg_rose	{
	background: #F7DFF4;
}
.bg_rose:hover	{
    background: #ecc9ca;
}

.bg_red_clair	{
	background: #ef9ba7;
	color:#000;
}
.bg_red_clair:hover	{
	background: #ecc9ca;
	color:#000000;
}

.interdit{
	cursor:not-allowed;
}

.bg_green{
    /*background: #C9F0DA;*/
    background: #4CAF50;
	color:#cccccc;
}
.bg_green:hover	{
    background: #3f9242;
}

.bg_green_light{
    /*background: #C9F0DA;*/
    background: #97d899;
	color:#000000;
}
.bg_green_light:hover	{
    background: #3f9242;
}

.bg_yellow{
    background: #E9F2B6;
}
.bg_yellow:hover	{
    background: #c9d393;
}

.bg_orange{
    background: #FCDDB1;
}
.bg_orange:hover	{
    background: #e4bc85;
}

.bg_grey{
    background: #F2F2F2;
}
.bg_grey:hover	{
    background: #b8b0b0;
}

.bg_darkgrey{
	background: #333333;
	color:#ffffff;
}
.bg_darkgrey:hover	{
    background: #686868;
}

.bg_light_grey{
	background: #c9d0d2;
}

/* /Background */


/* / Global style */

body {
    font-family: "Raleway", serif, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    border-bottom: 1px solid #333333;
    padding: 0 10px;
    z-index: 1000;
}

.logo img {
    height: 40px;
}
/* header icon*/

.right-container {
    display: flex;
    align-items: center; /* Centrer verticalement l'icône et le burger menu */
}

.icon-container {
    display: flex;
    align-items: center; /* Centrer verticalement l'icône */
    margin-right: 10px; /* Espacement entre l'icône et le burger menu */
}

.icon {
    height: 25px; /* Ajustez la taille de l'icône selon vos besoins */
    width: auto; /* Conserver le ratio de l'icône */
}

.UserMenu{
    position:absolute;
    top:15px;
    right:90px;

}
#UserMenuContent{
    display:none;
    width:270px;
    min-height: 25px;
    position: absolute;
    top: 30px;
    right: -90px;
    padding: 10px;
    z-index: 10001;

    background-color: #ffffff;
    border: 1px solid #2299ce;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 }
 .UserMenuContent_element{
    margin-bottom:5px;
    padding-bottom:3px;
    border-bottom: 1px solid #2299ce;
 }
 .arrowTop{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    
    border-bottom: 5px solid #2299ce;

    position: absolute;
    left: 224px;
    top: -6px;
    z-index: 10002;
 }

/* / header icon */


/* Burger Menu*/
.burger {
    cursor: pointer;
}

    /* Meu Icone */
    .burger {
        position: relative; /* Nécessaire pour le positionnement des lignes */
        cursor: pointer;
        width: 30px; /* Ajustez la largeur du burger menu */
        height: 20px; /* Ajustez la hauteur du burger menu */
    }
    
    .burger .line {
        width: 100%; /* Utiliser 100% de la largeur du burger */
        height: 3px; /* Épaisseur des lignes */
        background-color: #333333;
        margin: 4px 0;
        transition: all 0.3s ease; /* Ajout d'une transition pour un effet plus fluide */
    }
    
    .burger.open .line:nth-child(1) {
        transform: rotate(45deg);
        position: absolute; /* Positionner le trait */
        top: 8px; /* Ajustez la position */
    }
    
    .burger.open .line:nth-child(2) {
        opacity: 0; /* Masquer la ligne du milieu */
    }
    
    .burger.open .line:nth-child(3) {
        transform: rotate(-45deg);
        position: absolute; /* Positionner le trait */
        top: 8px; /* Ajustez la position */
    }
     /* /Meu Icone */

    /* Meu SideBar*/
    .sidebar {
        position: fixed;
        top: 51px;
        right: -250px;
        width: 250px;
        height: calc(100% - 87px); /* 50px étant la hauteur du footer */
        background-color: #4b8beb;
        color:#ffffff;
        transition: right 0.3s ease;
        z-index: 9999;

        padding: 20px;

        -webkit-border-top-left-radius: 15px;
        -webkit-border-bottom-left-radius: 15px;
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-bottomleft: 15px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .sidebar ul {
        list-style: none;
        padding:0px;
    }

    .sidebar li {
        border-bottom: 1px solid #41e6f5;
    }

    .sidebar a {
        text-decoration: none;
        color: #ffffff;
        font-weight: 600;
        display: block;
        padding: 10px 0;
    }

    .sidebar a:hover {
        text-decoration: underline;
    }

    #AdminMenu{
        padding:3px;
    }
    #AdminMenu h3{
    }
    #AdminMenu a{
        color:#000000;
    }
   



    /* Meu SideBar*/
/* / Burger Menu*/
main {
    margin-top: 60px; /* Pour éviter que le contenu soit caché par l'en-tête */
    margin-bottom: 40px;
    padding: 10px;
    background-color: #f6f6f6;
}

.content {
    max-width: 1024px;
    margin: 0 auto;
}

.content-bg	{
	background: #ffffff;
	color:#000;
}

.content-bloc {
    max-width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.content-padding{
    padding: 1px 15px;
}

/* Colonne */

.column {
    float: left;
    padding: 0 10px;
}
.columnFullWidth {
    width: 100%;
}
.columnIn2 {
    width: 50%;
}

.columnIn3 {
    width: 33.333%;
}
.columnIn4 {
    width: 25%;
}

.ProductColList {
      width: 33.3333%;
      margin-bottom:17px;
  }


/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}
.row h3{
    margin-left:10px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the counter cards */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    text-align: left;
    background-color: #fdfdfd;
    margin-top:5px;
}
.padding15{
  padding: 15px;
}

/* /Colonne */

/* Bouton*/

.ActionButton, .btn {
    margin-top: 10px; /* Espacement au-dessus du bouton */
    padding: 10px 20px; /* Espacement interne du bouton */
    background-color: #4b8beb; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte du bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Bords arrondis du bouton */
    cursor: pointer; /* Curseur en forme de main au survol */
    font-size:16px;
    font-weight: bold;
}
 .ActionButtonV1, .btnV1{
    background-color: #4b8beb; /* Couleur de fond */
    color: white; /* Couleur du texte */
    font-family: Arial, sans-serif; /* Police */
    font-size: 14px; /* Taille de la police */
    padding: 10px 15px; /* Marge intérieure */
    border-radius: 25px; /* Bord arrondi */
    max-width: 90%; /* Ne pas dépasser 90% de la largeur de l'écran */
    width: fit-content; /* S'adapter à la largeur du contenu */
    text-align: center; /* Centrer le texte horizontalement */
    margin: 10px auto; /* Marge extérieure, centrer horizontalement */
    word-wrap: break-word; /* Permet au texte de passer à la ligne si nécessaire */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
 }

.centered {
    display: flex; /* Utiliser Flexbox pour centrer le contenu */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100%; /* Assurez-vous que la hauteur est 100% pour centrer verticalement */
}

.BlocBTN{

}

input[type=submit], input[type=button] {
    border: 1px solid #113a55;
    min-width: 150px;
    max-width:100%;
    font-size: 16px;
}


#ErrorMessage{
    text-align: center;
    border: 1px solid #4b8beb;
    margin-top: -25px;
    border-top: none;
    padding: 10px;
    margin-bottom: 20px;
    min-height: 35px;
}
.form_error_msg, .ErrorMessage{
    font-weight: bold;
    color: #c00000;
}
/* Bouton */



  /* LOGIN PAGE*/
  #autologin{
    width:15px;
    height: 15px;
}

#loginbox	{
width:500px;
max-width:90%;
clear:both;
display:block;
margin: 0 auto;
margin-top:5px;
padding:10px;


border:3px solid #4b8beb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}
.LoginFormTXT	{
    display:block;
    float:left;
    width:50%;
    height:35px;

    font-family: 'arial';
    font-size: 14px;
}
.LoginFormTXT input	{
max-width:95%;
}
.login_h2{

}

/* /LOGIN PAGE*/


/* produits*/
.ProductPageCartButton div a, .btn a, .ActionButton a, .ActionButton div a{
    color:#ffffff;
}

.ProductTitle{
    font-weight: bold;
    text-align:center;
    max-height: 25px;
}
.ProductDescription{
    height: 100px;
}

.ProductBottom{
   display: grid;
   position: relative;
}
.ProductInfos{
    display: contents;
}
.ProductInfosDetails{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ProductBorderTop{
    border-top:1px solid #ccc;
}
.BorderTop{
    border-top:1px solid #ccc;
}
.BorderLeft{
    border-left:1px solid #ccc;
}
.BorderBottom{
    border-bottom:1px solid #ccc;
}
.Border-Right{
    border-right:1px solid #ccc;
}




.ProductAction{
    display: flex; /* Utilise Flexbox pour l'alignement */
    justify-content: flex-end; /* Aligne les éléments à droite */
    gap: 3px; /* Espace de 3px entre les éléments */
    width: 100%; /* Assure que la div parent prend 100% de la largeur */
    height: 30px;
}

.ProductActionBTN,.ProductActionBTN {
    padding:2px;
    width: 30px;
    height: 30px;
    text-align:center;
}
.ProductActionBTN img{
    max-height: 25px;
}

.ProductActionBTN img:hover{
    max-height: 27px;
}


/*detail page*/

.PageDetailHeader {
    display: flex;
    width: 100%;
    min-height: 250px;
    padding:20px;
}

.PageDetailHeaderLeft,
.PageDetailHeaderRight {
    width: 50%;
    box-sizing: border-box; /* Pour inclure le padding et la bordure dans la largeur */
}
.PageDetailHeaderLeftPeriode{
    font-size:20px;
}

.PageDetailHeaderOrderBtn{
    width:120px;
}


.OffresProductList {
    display: flex;
    width: 100%;
    height: 120px;
    border: 1px solid #ccc; /* Bord de 1px */
    border-radius: 10px; /* Bords arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère */
    padding: 10px; /* Espacement interne */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur/hauteur */
}

.OffresProductListLeft,
.OffresProductListRight {
    width: 50%; /* Chaque colonne occupe 50% de la largeur */
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center; /* Centre verticalement le contenu */
}

.OffresProducttitre {
    font-weight: bold; /* Texte en gras */
    font-size: 24px; /* Taille de police 24px */
}

.OffresProductlieu,
.OffresProductheure {
    font-size: 20px; /* Taille de police 20px */
}

.OffresProductListRight {
    align-items: flex-end; /* Aligne le contenu à droite */
    justify-content: center; /* Centre verticalement le contenu */
}

.OffresProductprix {
    font-weight: bold; /* Texte en gras */
    font-size: 20px; /* Taille de police 20px */
    color: #4b8beb; /* Couleur du texte */
}

.OffresProductcommander:hover {
    background-color: #3a6fae; /* Couleur de fond au survol */
}

/* / detailpage */


.OffresProductListRight input[type=number] {
    width: 60px;
    height: 45px;
    font-size: 16px;
}
/* produits*/





/* Footer */
footer {
    background-color: #333333;
    color: white;
    font-size:11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:1000;
}

footer .social-icons a {
    color: white;
    margin-left: 10px;
    text-decoration: none;
    font-size: 14px;
}

footer .social-icons a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 800px) {
    .ProductColList{
        width: 50%;
    }
    .columnIn2,.columnIn3,.columnIn4{
        width: 100%;
    }

    .PageDetailHeader {
        flex-direction: column; /* Change la direction en colonne */
    }

    .PageDetailHeaderLeft,
    .PageDetailHeaderRight {
        width: 100%; /* Chaque colonne prend 100% de la largeur */
    }

    .PageDetailHeaderRight {
        order: -1; /* Place la colonne droite au-dessus de la colonne gauche */
    }
}