/*------------------------NAVBAR----------------------------*/

.light-mode {--navbar-color: rgb(0, 0, 0); --navbar-bg-color: #F0F0F0;}
.dark-mode {--navbar-color: #FFF; --navbar-bg-color: #000;}
:root {--font-size:1rem;}
.navbar
{
display:flex;
align-items: center;
justify-content:space-between;
padding: 0px 10px 0px 10px;
font-size:1.1rem;
color:var(--navbar-color);
font-family: 'Poppins', sans-serif;}

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

.navbar_links{display:flex; margin-right: 0.5rem;}
.navbar_link{padding:0 10px;}
.burger{display:none;}
.navbar_link > a {color:var(--navbar-color); text-decoration:none;}
.active{font-weight: bold;}

/*hover effect*/
.navbar_link > a::after {
    display:block;
    content:"";
    width:0;
    height:1px;
    background:var(--navbar-color);
    transition:width .4s;
}
.navbar_link:hover > a::after {width:100%;}

/*------------------------LANGUE----------------------------*/

.lang-dropdown {
  position: relative;
  margin-left: 0.5rem;
  cursor: pointer;
}

.lang-active {
  background: linear-gradient(to top left, #0e0d0d, #444);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 4px;
}

.lang-menu {
  display: none; /* caché par défaut */
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(to top left, #0e0d0d, #444);
  color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 60px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 100;
  font-size: 0.9rem;
}

.lang-menu li {
  padding: 0.3rem 1rem;
  cursor: pointer;
}

.lang-menu li:hover {
  background: #444;
}

/* Classe active pour montrer le menu */
.lang-dropdown.show .lang-menu {
  display: block;
}

/* -------------------    Cookie */

.cookie-popup { position: fixed; bottom: 0; left: 0; right: 0; background: #05a4afd5; color: #fff; padding: 1rem; text-align: center; z-index: 1000; }
.cookie-popup button { margin-left: 1rem; padding: 0.5rem 1rem; }
.cookie-popup.hidden { display: none; }

/*------------------------NATEL----------------------------*/

@media only screen and (max-width:768px)
{
.navbar_links 
    { 
    overflow:hidden;
    display:flex;
    flex-direction:column;
    width:0;
    height:min-content;
    position:absolute;
    top:65px;
    right:0;    
    background-color: none;
    z-index: 9999;}

.navbar_link{transform: translateX(101%);transition: all .5s ease-in-out} /*transition text*/


.navbar_link > a /*zoom text hover*/
        {
        display:block;
        padding:1rem;
        font-size:1.2rem;
        color:white;  
        transition: all .4s ease-in-out;
        width: 0;
}
.navbar_link > a:hover{padding-left:2rem; letter-spacing:5px; 
}

/*_________BAR_________*/
.burger 
        {
        display:block;
        position:relative;
        padding:0;
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        cursor:pointer;}
.bar 
        {
        display:block;    
        width:45px;
        height:3px;  
        border-radius:3px;
        background:var(--navbar-color); 
        transition: all .5s ease-in-out;}
.bar::before, .bar::after 
        {
        content:"";
        width:45px;
        height:3px;
        position:absolute; 
        left:0;  
        background:var(--navbar-color); 
        border-radius:3px;    
        transition: all .5s ease-in-out;}
.bar::before {transform:translateY(-12px)}
.bar::after {transform:translateY(12px)}

.show-nav .navbar_links{width:100%; transform: translateX(0); display: flex;} 
.show-nav .navbar_link {transform: translateX(0); background-color: black;}
.show-nav .bar {width:0;background:transparent;}
.show-nav .bar::before {transform:rotate(45deg);}
.show-nav .bar::after {transform:rotate(-45deg);}
.show-nav .index {transition: all 0.5s ease-out;} 
.show-nav .code {transition: all 0.6s ease-out;} 
.show-nav .blog {transition: all 0.7s ease-out;} 
.show-nav .images {transition: all 0.8s ease-out;} 
.show-nav .media {transition: all 0.9s ease-out;}
.show-nav .pleiades {transition: all 1.0s ease-out;}
.show-nav .contact {transition: all 1.1s ease-out;}
.show-nav .bar {width:0;background:transparent;}
.show-nav .bar::before {transform:rotate(45deg);}
.show-nav .bar::after {transform:rotate(-45deg);}

.cookie-popup {
    flex-direction: column;
    text-align: center;
  }
  .cookie-popup p {
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
      
      /* Bonus - Animations */
/*
.show-nav .index {transition: all 1.0s ease-out;} 
.show-nav .code {transition: all 1.1s ease-out;} 
.show-nav .blog {transition: all 1.2s ease-out;} 
.show-nav .images  {transition: all 1.3s ease-out;} 
.show-nav .media {transition: all 1.4s ease-out;} 
.show-nav .pleiades {transition: all 1.5s ease-out;}  
.show-nav .contact {transition: all 1.6s ease-out;}         
*/}