#entete{
top:0;
left: 50%;
position:fixed;
text-align:center;
transform: translateX(-50%);
transition:all ease 0.5s;
width:100%;
height:auto;
display:block;
z-index:998;
background:var(--marron);
filter:drop-shadow(0px 4px 50px var(--marron));
}

.entete{
max-width:1280px;
margin:auto;
height:120px;
display:flex;
align-items:end;
/* justify-content:space-between; */
position:relative;
/* background:blue; */
}
.entete .logo{
position:absolute;
left:30px; 
height:100%;
display:flex;

align-items:center;
}
.entete .logo .img2{
/* padding:20px 8px; */
height:120px;
width:100px; 
align-content:center;
/* background:#ff00005e;  */
}
.entete .logo span{
display:none;
font-weight:500;
margin-left:10px; 
margin-bottom:10px;
width:360px;
text-align:left;
/* background:red; */
}
.entete .logo span p{
font-size:1.2em;
font-weight:800;
margin-bottom:0;    
}


.entete .logo svg{
/* height:60px; */
max-width:100%;
max-height:100%;
object-fit:fill;
}
body .liens{
position:absolute;
right:10px; 
top:20px;
}
body .liens a{
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
 
border:1px solid var(--dore);   
text-decoration:none;
padding:4px 20px;
border-radius:10em;
margin:0 8px 0 0;
display:inline-block;
color:var(--dore);
transition:all ease 0.3s;
text-transform:uppercase;
}
body .liens a:hover{
transform:translateX(-6px);
color:var(--blanc);
border:1px solid var(--blanc);
}

/* social */
body .liens > .social{
display:inline-block; 
vertical-align:middle;
}
body .liens > .social a{
display:inline-block;
width:32px;
height:32px; 
border:none;
padding:0;
margin:0 5px 0 0;
}
body .liens > .social a:hover{
transform:none;  
}
body .liens > .social a svg{    
fill:var(--dore);
display:block;
}
body .liens > .social a:hover svg{    
fill:white;
}

.entete .menu{
box-sizing:border-box;
transition:all ease 0.5s;
position:relative;
z-index:999;
width:auto;
margin-left:auto;
}
.menu ul{
list-style:none;
padding:0;
margin:0;
display:flex;
align-items:center;
}
.menu li{
padding:0 1vw;
}
.menu li a{
font-optical-sizing: auto;
font-style: normal;
text-transform:uppercase;
text-decoration:none;
white-space:nowrap;
transition:all 0.3s ease;
line-height:50px;
display:inline-block;
position:relative;
color:var(--dore);
letter-spacing: 1px;
font-size: clamp(0.5vw, .9em, 1.3vw);
}
.menu li a::after,
.menu li.open a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background-color: currentColor;
    border-radius: 5px;
    width: 0;
    transition: width 0.5s ease;
}
.menu li a:hover::after,
.menu li.open a::after {
    width: 100%;
    background-color: white;
}
 .menu li.open a,
.menu li a:hover{
color:var(--blanc);
}

@media screen and (min-width: 861px) {
  #smart-icon {
    display: none;
  }

  #smart-menu {
    display: none !important;
  }
}


/* ==========================================================
   MODE SMART — max 860px
   On passe en menu mobile.
   ========================================================== */

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

   .entete {
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 18px;
  }

  .entete .logo {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    z-index: 1002;
  }

  .entete .logo .img2 {
    width: 90px;
    height: 90px;
    padding: 8px;
  }

  .entete .liens {
    display: none;
  }

  #entete .bandeau{
    display:none
  }

  .entete .menu {
    display: none;
  }

  /* ----------------------------------------------------------
     Icône smart / burger
     ---------------------------------------------------------- */

  #smart-icon {
    display: flex;
    position: absolute;
    right: 18px;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translateY(-50%);
    z-index: 1003;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all ease 0.3s;
  }


  
  /* Burger CSS si #smart-icon est vide */
  #smart-icon::before,
  #smart-icon::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background: white;
    transition: all ease 0.3s;
  }

  #smart-icon::before {
    transform: translateY(-8px);
    box-shadow: 0 8px 0 white;
  }

  #smart-icon::after {
    transform: translateY(8px);
  }

  #smart-icon.open::before,
  #smart-icon.active::before {
    transform: rotate(45deg);
    box-shadow: none;
  }

  #smart-icon.open::after,
  #smart-icon.active::after {
    transform: rotate(-45deg);
  }

  
  /* ----------------------------------------------------------
     Menu smart
     Fonctionne avec une classe .open ou .active ajoutée en JS.
     ---------------------------------------------------------- */

  #smart-menu {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background: #1b1412f5;
    z-index: 997;
    padding: 20px 20px 20px 20px;
  }

  #smart-menu.open,
  #smart-menu.active {
    display: block;
  }

  #smart-menu ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #smart-menu li {
    display: block;
    padding: 0;
    margin: 0;
    /* border-bottom: 1px solid var(--gris2); */
  }

  #smart-menu li:last-child {
    border-bottom: none;
  }

  #smart-menu li a {
    display: block;
    padding: 13px 0;
    color: white;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.5em;
    white-space: normal;
    transition: all ease 0.3s;
text-transform:uppercase;
  }

  #smart-menu li a:hover,
  #smart-menu li.open > a,
  #smart-menu li.active > a {
    color: var(--dore);
    padding-left: 10px;
  }

  #smart-menu li a::after {
    content: none;
  }

}