@font-face {
    font-family: sans;
    src: url('fontes/helvetica/HelveticaNeueLTStd-Md.otf');
}

@font-face {
    font-family: sans;
    src: url('fontes/helvetica/HelveticaNeueLTStd-MdIt.otf');
    font-style: italic;
}

@font-face{
    font-family: sabon;
    src: url('fontes/sabon/Sabon\ LT\ Pro\ Roman.otf');
}

@font-face{
    font-family: sabon;
    src: url('fontes/sabon/Sabon\ LT\ Pro\ Italic.otf');
    font-style: italic;
}



:root{
    --grey : #939393;
    --white : #f5f5f5;
    --black : #000000;

    --fsS : calc(var(--sanS) * .8);

    --sabS : 24px;
    --sabL : 34px;
    --sanS : 24px;
    --sanM : 40px;
    --sanL : 72px;
    --sanT : 144px;

    --marge:10px;

    --headerH : calc((2 * var(--marge)) + var(--sanS) )
}

body{
    margin : 0 auto;
    font-family: sans;
    font-size: var(--sanS);
    color: var(--white);
    background-color: var(--black);
}

header{
    box-sizing: border-box;
    width: 100%;
    z-index: 9999;
    background-color: var(--black);
    display: grid;
    padding: var(--marge) 0;
    grid-template-columns: repeat(2, 1fr);
    line-height: 1;
    position: sticky;
    top: 0;
    left: 0;

}

.leader-line{
    z-index: 10000;
}

nav a:last-of-type{
    display: block;
    bottom: var(--marge);
    margin-right: 0;
    position: absolute;
    right: var(--marge);
}

nav{
    font-size: var(--fsS);
    height: 100%;
    display: flex;
}
nav a{
    flex-direction: column;
    justify-content: flex-end;
    display: flex;
    position: relative;
    margin-right: calc(var(--marge) * 4 );
}

#toHome{
    display: flex;
    box-sizing: border-box;
    padding: 0 var(--marge);
    justify-content: space-between;
}
#positions{
    padding-right: var(--marge);
}

#revue{
    position: relative;
    transition: 0;
    padding-left: var(--marge);
    padding-right: var(--marge);
    margin-right: var(--marge);
}

footer{
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: var(--marge);
    border-top: 1px solid white;
}

.contact{
    display: grid;
    padding: var(--marge);
    grid-template-columns: repeat(2, 1fr);
}
.socials,
.newsletter{
    margin: var(--marge) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mentions{
    display: block;
    position: relative;
    text-align: center;
    margin: var(--marge);
    padding: var(--marge);
}