/* HEADER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
header{
z-index: 1000;
position: fixed; /* Fixe le header en haut */
top: 0; /* Positionne le header en haut */
left: 0; /* Aligne le header à gauche */
width: 100%; /* Prend toute la largeur de la fenêtre */
color: white; 
background: #292929; 
box-shadow: 0px 1px 0px 1px #000000c2;
border-bottom: solid 1px rgb(59, 59, 59);
height: 54px;}








#header-phone{
display: none;}


/*---------------------------------------------------------------------------------------------------------------------------*/
.navhead img{
width: 21px; 
padding-top: 2px; 
padding-left: 3px; 
padding-right: 3px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#name-page{
display: inline-block;
font-size: 20px;
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#link-home{
margin-top: 10px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#m3dd{
border-radius: 6px;
padding: 10px 5px 14px 11px;
margin-left: 40px;
line-height: 35px;
font-size: 24px;
cursor: pointer;
z-index: 6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#home{
position: absolute;/*
left: 6px;
float: left;*/
padding: 6.3px 10px 16px 17px;
width: 26px;
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.on{
filter: invert(70%) sepia(62%) saturate(502%) hue-rotate(180deg) brightness(206%) contrast(101%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#container-on{
display: flex;
flex-direction: row-reverse; /* Aligne les divs verticalement */
align-items: flex-end; /* Aligne les divs à droite */
align-items: center;
margin-top: 8px;
padding-right: 22px;}


#container-off{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert{
height: 100%; 
border-left: 2px solid rgba(128, 128, 128, 0.137);}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert-int{
height: 100%; 
border-right: 1px solid black;}
/*---------------------------------------------------------------------------------------------------------------------------*/









/*---------------------------------------------------------------------------------------------------------------------------*/
#heart{
margin-right: 4px;
margin-left: 4px;
cursor: pointer;
padding: 17px 10px 14px 12px;
width: 24px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#panier{
margin-right: 4px;
margin-left: 4px;
cursor: pointer;
padding: 17px 12px 14px 10px;
width: 24px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#cart{
position: relative;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#cart-content{
float: right;
position: absolute;
z-index: 6;
right: 10;
top: 13;
background-color: rgb(54, 144, 196);
border-radius: 6px;
padding: 0px 4px 0px 4px;
font-size: 14px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.479);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#register{
margin-left: 16px;}

#dashboard,
#magasin{
margin-right: 6px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
/*
#planete:hover{
scale: 1.1;
padding-top: 16px;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(304deg) brightness(106%) contrast(101%);}
*/
/*---------------------------------------------------------------------------------------------------------------------------*/
#heart:hover,
#panier:hover{
scale: 1.1;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(304deg) brightness(106%) contrast(101%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
.log{
margin-top: 1px;
min-width: 140px;
margin-left: 5px;
text-align: center;
background-color: #3f3f3f; /* Couleur de fond gris */
color: white; /* Couleur du texte */
border: none; /* Pas de bordure */
border-radius: 5px; /* Coins arrondis */
padding: 9px 0px 11px 0px; /* Espacement intérieur */
font-size: 16px; /* Taille de la police */
cursor: pointer; /* Curseur en forme de main au survol */
transition: background-color 0.1s ease; /* Transition pour l'effet de survol */
box-shadow: 0 4px 4px -5px #0202029a;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(15, 15, 15, 0.062) 0px 0px 0px 2px inset;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.log:hover {
font-size: 17px;
padding: 8px 0px 10px 0px;
box-shadow: 0 4px 4px -3px #0202027c;
background-color: #6b6b6b;/* Couleur de fond au survol */}

/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{      
    /*
    .header-site{
    display:none;}
    */

    #header-phone{
    display: inline-block;}
    
    #click_m3dd{
    margin-top: 6px;}

    #m3dd{
    margin-left: 14px;
    font-size: 22px;
    line-height: 38px;}

    #home{
    padding: 7px 8px 6px 8px;
    margin: 0 -16 auto;}

    #link-home{
    margin-top: 3px;}

}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    /*
    .header-site{
    display:none;}
    */
    
    #header-phone{
    display: inline-block;}
    
    #click_m3dd{
    margin-top: 5px;}

    #m3dd{
    margin-left: 14px;
    font-size: 22px;
    line-height: 38px;}

    #home{
    padding: 7px 8px 6px 8px;
    margin: 0 -16 auto;}

    #link-home{
    margin-top: 3px;}
}