* {
    box-sizing:border-box;
    margin:0;
    padding:0;

    font-family: 'ElaineSansRegular';
}

html {
    font-size:16px;
    scroll-behavior: smooth;
    clear:both;
}

html body {
    margin:0;
    padding:0;
}

body.archives p,h1,h2,h3,table {
    color:white;
}
body.faq,h1,h2,h3,table {
    color:white;
}
body.rub {
    background-image:url("img/mur2briques.jpg");
    background-size:cover;
}
body.liens,div.content,h1,h2,h3,table {
    color:white;
}

h1,h2,h3 {  
    font-family:'GidolinyaRegular';
    text-transform:capitalize;
}

html a {
    text-decoration:none;
    color:pink;
}

a:visited {
    color:pink;
}

@media only screen and (min-width:500px) {
    html {
    font-size:19px;
}
}

/************* CLASSES GENERALES *****/

.center {
    text-align:center;
}

img.center {
    display:block;
    margin:3rem auto;
    border-radius:3px;
}

img.responsive {
    max-width:100%;
    height:auto;
}

.justify {
    text-align:justify;
}

.center-img {
    display:block;
    margin:1rem auto;
}
.fixed {
    position:fixed;
}

.bold {font-weight:bold;}
.cap {text-transform:capitalize;}
.upp {text-transform:uppercase;}
.lowercase {text-transform:lowercase;}

.black {
    background-color:black;
}

@media only screen and (max-width:500px) {
.hidden-mobile{
    visibility:hidden;
    }
.disnone-mobile{
    display:none;
}
}

@media only screen and (min-width:500px) {
.hidden-desktop {
    visibility:hidden;
    }
.disnone-desktop{
    display:none;
}
}

@media only screen and (max-height:750px) {
 .hidden-mobile{
    visibility:hidden;   
    }
.hidden-desktop {
    visibility:visible;
    }
}

/*******/

.pagesHeader-logo {
    width:3.5rem;
    height:3.5rem;
    margin:0.8rem 0.5rem;
}

.pagesHeader-logo-blog {
    width:100px;
    height:100px;
    border-radius:8px;
}


.legende {
    color:grey;
    font-style:italic;
    font-size:0.8rem;
    margin-top:0.5rem;
    margin-bottom:4rem;
}


@media only screen and (min-width:700px) {
.content {
    max-width:1350px;
    margin:auto;
}
}


/************** MENU *******/

.menu {
    display:none;
}

@media only screen and (min-width:500px) {

    button.index {
        display:none;
    }

    .menu {
        display:inline-block;
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#aa0000;
        position:fixed;
        top:0;
        width:100%;
    }

    .menu-logo {
        width:50px;
        height:auto;
        float:left;
    }
    
    .menu li {
        float:right;
    }

    .menu li a {
        display:block;
        padding:8px;
        color:white;
        text-transform:uppercase;
    }

    .menu a.langue {
        text-transform:lowercase;
        padding-right:1rem;
    }
   
   .menu-link {
        margin:0 4vw 0 4vw;
} 

    .mlf {
        margin-right:15vw;
}

 }

/********** INDEX ************/

.index-intro {
    position:static;
    width:100%;
    background-color:black;
    height:100vh;
    overflow:auto;
    padding-bottom:2rem;
}

.index-intro p,h2 {
    color:#bfbfbf;
    padding:2rem;
}

.index-intro h2 {
    padding-top:10vh;
}

.index-grid {
    display:flex;
    flex-direction:column;
    width:100%;
    margin-top:0;
    background-color:black;
}

.index-grid-item {
}

.item-archives {
   border:1px solid #bfbfbf;
}

@media only screen and (min-width:500px) {

.index-intro {
    width:35%;
    height:100vh;
    background-color:black;
    position:fixed;
    left:0;
    top:50px;
    
}

.index-intro h2 {
    padding-top:1rem;
    margin-top:2rem;
}
    
.index-grid {
    width:65%;
    display:flex;
    float:right;
    flex-flow:row wrap;
    margin-top:50px;
}

.index-grid-item {
   flex:0 0 50%; 
}
}

/*******index-grid-items******/

.index-grid-img {
    display:block;
    max-width:100%;
    height:100%;
}

.item-esnatu {
    flex-basis:100%;
    background-image:url(img/esnatu_couv_lg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
}

.item-b2l {
    }

.item-events {
    flex-basis:100%;
}

.item-rubriques{
    flex-basis:100%;
}



@media only screen and (min-width:500px) {

.item-archives {
   border:none;
}
}


/*********** RS *************/

.rs-grid-container {
    display:grid;
    grid-template-columns:auto auto auto auto;
    margin:0 auto;
    background-color:black;
    justify-content:space-between;
    margin-top:1rem;
    margin-bottom:1rem;
}

.rs-item {
    width:2.25rem;
    height:2.25rem;
    margin:1rem;
}


@media only screen and (min-width:500px) {
    .rs-grid-container {
    grid-template-columns:auto auto auto auto;
    position:absolute;
    bottom:60px;
    width:360px;
    margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
    }
}

@media only screen and (max-height:750px) {
    .rs-grid-container.hidden-desktop {
        position:static;
        width:100%;
    }
}


/********** Footer ***********/

footer {
    clear:right;
    bottom:0;
    margin:6rem 0 0;
    border-top: 1px dotted grey;
    text-align:center;
    font-decoration:italic;
    color: grey;
    width:100%;
}

footer.index {
    position:static;
    margin:0;
    background-color:black;
}

footer.rub p,footer.rub a {
    color:white;
}

footer p {
    font-size:13px;
}

.cclink {
    color:grey;
}

@media only screen and (min-width:500px) {

footer.index {
    width:65%;
    float:right;
    margin:0;
}

footer p {
    font-size:16px;
}
}

/****************** RUB *****************/

.content-rub {
    display:flex;
    flex-direction:column;
}

.content-rub > div {
    border:2px solid white;
    text-align:center;
    background-image:url("img/construction_tape.png");
    background-size:cover;
}

.content-rub > div.on {
    background-image:none;
    background-color:rgba(255,255,255,0.33);
}

.content-rub > div.on :hover {
    background-color:black;
}    

.content-rub > div > h2 {
    color:white;
    padding:3rem;
    text-shadow:-1px 0 black,0 1px black,1px 0 black,0 -1px black;
}


@media only screen and (min-width:500px) {
.content-rub {
    max-width:1200px;
    margin:auto;
    padding:0 1.5rem;
    flex-flow:row wrap;
    justify-content:space-around;
}

.content-rub > div {
    flex-basis:400px; 
    margin:1rem;
    color:white;
}
}

@media only screen and (max-width:500px) {
.content-rub > div:nth-child(1n+0) {
    border-bottom:none;
}

.content-rub > div:last-child {
    border-bottom:2px solid white;
}
}

/************* AUTRES PAGES ***************/

.banner h1 {
    font-size:2.5rem;
    text-align:center;
    text-transform:uppercase;
    margin-bottom:3rem;
}



@media only screen and (min-width:700px) {
.banner h1 {
    font-size:3rem;
    margin:3rem;
}
}
    
/********** F.A.Q & Contact ***************/

.faq-content {
    width:100%;    
    margin:auto;
    padding:0.5rem;
}

.faq-content h3 {
    margin:5rem auto 1rem;
    color:#46634e;
    letter-spacing:2px;
    text-shadow:-1px 0 white,0 1px white,1px 0 white,0 -1px white;
}

.faq-content p {
    text-align:justify;
}

@media only screen and (min-width:700px) {
    .faq-content {width:70%}   
}

footer.contact {
    background-color:black;
}

/*************** Archives ******************/

table {
    width:100%;
}

td {
    text-align:center;
    padding:0.5rem;
}

table a:visited {
    color:pink;
}

@media only screen and (min-width:700px) {

.archives-table {
    width:80%;
    margin:5rem auto;
}

}