header {
    display: flex;
    width: 100%;
    height: var(--hauteur-header-banniere);
	padding-top: 0px;
	padding-bottom: 0px;
    background-color: var(--color-header-fond);
    color: var(--color-principal-text);
    font-size: 20px;
    font-family: Arial;
    margin: 0;
}

footer
{
position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
width: 100%;
min-height: 100px;
height: 100px;
color: var(--color-menu-text);
font-size: 18px;
margin: auto;
background-color: var(--color-barre-menu-background-fixe-footer);
z-index: 0;
}


#banniere_fixed{
position: relative;
width: 100%;
height: var(--hauteur-header-banniere);
min-height: var(--hauteur-header-banniere);
background-image: url(../design/cropped-banniere.jpg);
background-attachment: fixed;
background-position: left 0;
background-repeat: no-repeat;
background-size: auto 550px;
opacity: 1;
z-index:10;
}

#banniere{
position: relative;
width: 100%;
height: var(--hauteur-header-banniere);
background: url(../design/cropped-banniere.jpg) no-repeat center center;
background-size: cover;
opacity: 1;
z-index:10;
}

#bloc_bordure_menu {
position: absolute;
top: calc(var(--hauteur-header-banniere) - var(--hauteur-menu) - var(--hauteur-degrade-menu));  
left:0; 
width: 100%;
height: var(--hauteur-degrade-menu);
min-height: var(--hauteur-degrade-menu);
background: var(--color-menu-degrade-background);
z-index:11;
}

#titre {
display: block;
position: absolute;
bottom: 140px;
right: 60px;
color: var(--color-banniere-text);
font-family: "Roboto", Verdana, Helvetica, tahoma, Arial, sans-serif;
font-size: 50px;
font-weight: bold;
z-index:12;
animation-name: example;
animation-duration: 2s;
animation-delay: 0s;
}
#titre a {
	text-decoration: none;
	color: var(--color-banniere-text);
}
#slogan-titre {
position: absolute;
bottom: 90px;
right: 60px;
color: var(--color-banniere-text);
font-family: "Roboto", Verdana, Helvetica, tahoma, Arial, sans-serif;
font-size: 30px;
z-index:12;
animation-name: example;
animation-duration: 2s;
animation-delay: 0s;
}

@keyframes example {
  0%   {transform: scale(0.9);}
  100%   {transform: scale(1);}
}

@media screen
and (min-width: 2571px)
{
#titre {
bottom: 180px;
right: 80px;
font-size: 60px;
}
#slogan-titre {
bottom: 100px;
right: 80px;
font-size: 43px;
}
}

@media screen
and (min-width: 1501px)
and (max-width: 2570px)
{
#titre {
bottom: 140px;
right: 60px;
font-size: 50px;
}
#slogan-titre {
bottom: 90px;
right: 60px;
font-size: 36px;
}
}

@media screen
and (min-width: 1160px)
and (max-width: 1500px)
{
#titre {
bottom: 112px;
right: 50px;
font-size: 40px;
}
#slogan-titre {
bottom: 70px;
right: 50px;
font-size: 29px;
}
}

@media screen
and (min-width: 1024px)
and (max-width: 1159px)
{
#titre {
bottom: 90px;
right: 45px;
font-size: 35px;
}
#slogan-titre {
bottom: 55px;
right: 45px;
font-size: 25px;
}
}

@media screen
and (min-width: 811px)
and (max-width: 1023px)
{
#titre {
bottom: 77px;
right: 30px;
font-size: 30px;
}
#slogan-titre {
bottom: 46px;
right: 30px;
font-size: 21.5px;
}
}

@media screen
and (min-width: 601px)
and (max-width: 810px)
{
#titre {
bottom: 74px;
right: 15px;
font-size: 24px;
}
#slogan-titre {
bottom: 46px;
right: 15px;
font-size: 17px;
}
}

@media screen
and (min-width: 480px)
and (max-width: 600px)
{
#titre {
bottom: 66px;
right: 10px;
font-size: 20px;
}
#slogan-titre {
bottom: 46px;
right: 10px;
font-size: 14px;
}
}

@media screen
and (min-width: 0px)
and (max-width: 479px)
{
#titre {
bottom: 64px;
right: 6px;
font-size: 16px;
}
#slogan-titre {
bottom: 46px;
right: 6px;
font-size: 11px;
}
}