header{
 position: relative;
}

.background-color-header{
  height: 246px;
  background-color: rgb(71,84,101);
  opacity: 0.8;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}

.logo-gravurebrunel-header img{
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 130px;
}

header img{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.image-fond {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.trait-header {
  position: absolute;
  height: 6.4px;
  top: 222px;
  z-index: 15;
  background-color: #ffffffbf;
}

.trait-header-left {
  left: 0;
  right: calc(50% + 64.8px);
}

.trait-header-center {
 left: calc(50% + 64.8px);
 right: calc(100% - var(--nav-start) + var(--nav-spacing, -10px));
}

.trait-header-right {
  left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 16px));
  right: 0;
}



@media (hover: none) {
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 0px));
 }


 .trait-header-center {
    right: calc(100% - var(--nav-start) + var(--nav-spacing, 0px));
 }
}


/* RESPONSIVE */
/* RESPONSIVE */
@media (max-width: 1500px) {
  .trait-header-center {
  right: 585px;
 }
 
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 8px));
 }  
}

@media (max-width: 1400px) {
  .trait-header-center {
  right: 580px;
 }
}

@media (max-width: 1300px) {
 .logo-gravurebrunel-header img{
  left: 40%;
 }

 .trait-header-left {
  right: calc(60% + 64.8px);
 }

 .trait-header-center {
 left: calc(40% + 64.8px);
  right: 578px;
 }
}

@media (max-width: 1200px) {
 .logo-gravurebrunel-header img{
  left: 30%;
 }

 .trait-header-left {
  right: calc(70% + 64.8px);
 }

 .trait-header-center {
 left: calc(30% + 64.8px);
 }
}

@media (max-width: 1150px) {
 .background-color-header{
  height: 198px;
}
 
 .logo-gravurebrunel-header img{
   width: 107px;
   top: 22px;
 }

 .trait-header {
  height: 4.9px;
  top: 176.3px;
}
 
 .trait-header-left {
  right: calc(70% + 53.6px);
 }

 .trait-header-center {
 left: calc(30% + 53px);
 }
}
  
  
@media (max-width: 1000px) {
 .logo-gravurebrunel-header img{
  left: 20%;
 }

 .trait-header-left {
  right: calc(80% + 53.6px);
 }

 .trait-header-center {
 left: calc(20% + 53px);
 }
}

@media (max-width: 960px) {
 .background-color-header{
  height: 165px;
}
 
 .logo-gravurebrunel-header img{
   width: 85px;
   top: 26px;
 }

 .trait-header {
  height: 4.9px;
  top: 148px;
}
 
 .trait-header-left {
  right: calc(80% + 42.8px);
 }

 .trait-header-center {
 left: calc(20% + 42px);
 }
 
  .trait-header-center {
  right: 530px;
 }
 
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 2px));
 }  
}

@media (max-width: 800px) {
  .logo-gravurebrunel-header img{
   width: 70px;
   top: 11px;
 }
 
 .background-color-header{
  height: 128px;
 }
 
 .trait-header {
  height: 3.9px;
  top: 111.6px;
}
 
 .trait-header-left {
  right: calc(80% + 35px);
 }

 .trait-header-center {
 left: calc(20% + 34.9px);
 right: 430px;
 }
 
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 8px));
 } 
}

@media (max-width: 650px) {
 .logo-gravurebrunel-header img {
  left: 15%;
 }

 .trait-header-left {
    right: calc(85% + 35px);
 }

 .trait-header-center {
    left: calc(15% + 34.9px);
 }
}

@media (max-width: 620px) {
  .logo-gravurebrunel-header img{
   width: 56px;
   top: 8px;
 }
 
 .background-color-header{
  height: 100px;
 }
 
 .trait-header {
  height: 2.9px;
  top: 88.4px;
}
 
 .trait-header-left {
  right: calc(85% + 28px);
 }

 .trait-header-center {
 left: calc(15% + 27.9px);
 right: 395px;
 }
 
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 2px));
 }  
}

@media (max-width: 550px) {
 .logo-gravurebrunel-header img{
  left: 10%;
 }

 .trait-header-left {
  right: calc(90% + 28px);
 }

 .trait-header-center {
 left: calc(10% + 27.9px);
 right: 390px;
 }
}

@media (max-width: 520px) {
 .logo-gravurebrunel-header img {
   width: 47px;
   top: 9px;
 }

 .logo-gravurebrunel-header img {
    left: 8%;
 }

 .trait-header {
   height: 2.4px;
   top: 76.4px;
 }

 .trait-header-left {
   right: calc(91% + 28px);
 }

 .trait-header-center {
   left: calc(7% + 27.9px);
   right: 360px;
 }

 .background-color-header {
   height: 93px;
 }  
}

@media (max-width: 470px) {
 .trait-header-center {
   right: 330px;
 }
}

@media (max-width: 450px) {
 .logo-gravurebrunel-header img {
   width: 40px;
   top: 19.5px;
 }
 
 .trait-header {
    top: 77.1px;
 }
 
 .trait-header-left {
    right: calc(91% + 24px);
 }
 
 .trait-header-center {
    left: calc(7% + 24.1px);
 } 
}

@media (max-width: 430px) {
 .trait-header-center {
  right: 310px;
 }
}

@media (max-width: 400px) {
 .trait-header-center {
  right: 295px;
 } 
}

@media (max-width: 370px) {
 .trait-header-center {
  right: 275px;
 }
 
 .trait-header-right {
    left: calc(var(--nav-start) + var(--nav-width, 300px) + var(--nav-spacing, 5px));
 } 
}
/* RESPONSIVE */
/* RESPONSIVE */