/*------------------------------------------------

Author : Aguila Design

------------------------------------------------*/



/*			Size		Line-Heigth
JACQUES AVERNA : 	30px		auto
Tire projet : 		28px		auto
Lieu : 			18px		auto
Texte accueil : 	74px 		80px
Infos accueil 		22px		26px
Titre page projet : 	140px		120px
Lieu date : 		26px		auto
Institutions : 		22px		28px
Générique : 		19px		23px
Chapô : 		22px		28px	
Légende : 		18px		auto
Sous-titre : 		26px		30px	
Auteur : 		21px		26px
Légende détaillée : 	18px		22px
Catégorie lien : 	19px		23px
Titre lien : 		19px		23px
Texte courant : 	21px		26px
Crédits photos : 	19px		23px
Crédit : 		15px		21px
Texte explication	22px		26px
Footer : 		16px		22px
Infos newsletter :	18px		22px	


    --text15: 0.9375rem;  --inter15: 1.3125rem;
    --text16: 1rem;  --inter16: 1.375rem;
    --text18: 1.125rem;  --inter18: 1.375rem;
    --text19: 1.1875rem; --inter19: 1.4375rem;
    --text21: 1.3125rem; --inter21: 1.625rem;
    --text22: 1.375rem; --inter22-1: 1.625rem; --inter22-2: 1.75rem;
    --text26: 1.625rem; --inter26: 1.875rem;
    --text28: 1.75rem; --inter28: 5rem;
    --text30: 1.875rem; --inter30: 5rem;
    --text74: 4.625rem; --inter74: 5rem;
    --text140: 8.75rem; --inter140: 7.5rem;*/

/* Définition des couleurs */
:root {
    --couleur-marron: #928040;
    --couleur-gris: #B9B3BB;
    --couleur-vert: #26B060;
    --couleur-beige: #F0EAE2;
    --couleur-noir: #1A1A1A;
    --couleur-blanc: #ffffff;
    --couleur-rouge: #E67258;

    font-size: 14px;
    --text15: 0.9375rem;  --inter15: 1.3125rem;
    --text16: 1rem;  --inter16: 1.375rem;
    --text18: 1.125rem;  --inter18: 1.375rem;
    --text19: 1.1875rem; --inter19: 1.4375rem;
    --text21: 1.3125rem; --inter21: 1.625rem;
    --text22: 1.375rem; --inter22-1: 1.625rem; --inter22-2: 1.75rem;
    --text26: 1.625rem; --inter26: 1.875rem;
    --text28: 1.75rem; --inter28: 5rem;
    --text30: 1.875rem; --inter30: 5rem;
    --text74: 4.625rem; --inter74: 5rem;
    --text140: 8.75rem; --inter140: 7.5rem;
}


html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -o-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
}

body {
    font-family: 'shift';
    font-weight: 300;
    background-color: var(--couleur-beige);
    color: var(--couleur-noir);
}

#mainContainer {
    width: 100%;
    height: 100%;
    display: flex;
}


/* Partie Gauche */
.mainLContainer {
    width: 70%;
    height: 100%;
    min-height: 100vh;
    background-color: var(--couleur-noir);
}


/* Partie Droite */
.mainRContainer {
    width: 30%;
    height: 100vh;
    position: sticky;
    top: 0px;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s ease;
}

.mainRContainer:hover {
    opacity: 1;
}


/*------------------------------------------------

                    Header

------------------------------------------------*/


header {
    width: 100%;
    height: 78px;
    position: sticky;
    top: 0;
    z-index: 10;
}


#topMenu {
    width: auto;
    height: 100%;
    padding: 0rem 2rem 0rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text30);
}

.headLogo {
    text-decoration: none;
    color: var(--couleur-beige);
}

/* Animation logo Jacques Averna */
.vert {
    transition-delay: 1s;
}

.vert:hover {
    color: var(--couleur-vert);
    transition-delay: 0s;
    transition-property: color;
}

.marron {
    transition-delay: 1s;
}

.marron:hover {
    color: var(--couleur-marron);
    transition-delay: 0s;
    transition-property: color;
}

.gris {
    transition-delay: 1s;
}

.gris:hover {
    color: var(--couleur-gris);
    transition-delay: 0s;
    transition-property: color;
}


#topMenu div {
    width: calc(25% - 15px);
    display: flex;
    justify-content: space-between;
}

.headerLink {
    text-decoration: none;
    color: var(--couleur-beige);
}

.headerLink:hover {
    color: var(--couleur-blanc);
    text-decoration: underline;
}

.headerLang {
    width: 60px;
    display: flex;
    justify-content: space-between;
    color: var(--couleur-beige);
}






/*------------------------------------------------

                Grille & Articles

------------------------------------------------*/


.gridContainer {
    width: auto;
    height: auto;
    padding: 1.5rem;
}


.mainGrid {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;

}


.cardLink {
    width: calc(25% - 1rem);
    aspect-ratio: 2/3;
    background-color: var(--couleur-beige);
    margin: 0.5rem;
    text-decoration: none;
    color: var(--couleur-noir);
}


.cardLayout {
    aspect-ratio: 2/3;
    background-color: var(--couleur-beige);
    display: flex;
    flex-direction: column;
}


.cardUp {
    position: relative;
    width: 100%;
    height: 80%;
    display: flex;
}


.cardDotContainer {
    width: 100%;
    display: flex;
    position: relative;
    top: 0px;
    margin: 20px 20px 0px 20px;
    justify-content: space-between;
}


.cardDot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--couleur-noir);
    z-index: 10;
}


.cardUp img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    object-fit: cover;
}


.cardSeparator {
    width: 100%;
    height: 3px;
    background-image: url(/resources/Dot.svg);
    margin-top: -1.5px;
    z-index: 10;
}


.cardDown {
    width: 100%;
    height: calc(20% - 3px);
}


.cardArtTitle {
    display: flex;
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: var(--text28);
    justify-content: center;
    align-items: end;
}


.cardArtSubtitle {
    display: flex;
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: var(--text18);
    justify-content: center;
    align-items: start;
    line-height: 1.5;
}



/*------------------------------------------------

                    Navigation

------------------------------------------------*/


#homeNav {
    width: 100%;
    font-size: var(--text74);
    line-height: var(--inter74);
}

#homeNav a {
    text-decoration: none;
    color: var(--couleur-noir);
}

.obj:hover {
    color: var(--couleur-gris) !important;
}

.esp:hover {
    color: var(--couleur-marron) !important;
}

.expUrb:hover {
    color: var(--couleur-vert) !important;
}


.separator {
    display: block;
    width: 100%;
    border-top: solid 1px;
    margin: 1rem 0rem;
}

.separator2 {
    display: block;
    width: 100%;
    height: 2px;
    background-image: url(/resources/Dash.svg);
    margin: 1rem 0rem;
}


.contact {
    width: 100%;
    display: flex;
    flex-direction: column;
}


.contact div {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    font-size: var(--text22);
    line-height: var(--inter22-1);
}

.contact div:nth-child(2) {
    margin-left: 1rem;
}


.contElem {
    text-decoration: none;
    color: var(--couleur-noir);
}

.contElem:nth-child(3) {
    text-decoration: underline;
}



/*------------------------------------------------

                    Footer

------------------------------------------------*/


footer {
    display: flex;
    flex-direction: column;
    padding: 0rem 2rem 2rem 2rem;
    color: var(--couleur-beige);
}


.footerContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}


.footerElement {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.375rem;
}

.footerElement h3 {
    text-transform: uppercase;
}



/*------------------------------------------------

                    Footer

------------------------------------------------*/


.bgVert {background-color: var(--couleur-vert);}
.bgBeige {background-color: var(--couleur-beige);}
.bgMarron {background-color: var(--couleur-marron);}
.bgRouge {background-color: var(--couleur-rouge);}
.bgGris {background-color: var(--couleur-gris);}
.bgNoir {background-color: var(--couleur-noir);}
.bgBlanc {background-color: var(--couleur-blanc);}