/*
* ===================================================
*  Feuille de styles mobile
* ===================================================
*/

body{
    font-size: 4.7vw;
}

a{
    color:#777;
    text-decoration:none;
}

nav li{
    color:#777;
    text-decoration:none;
}

a.couleuractive{
    color:black;
    text-decoration:underline;
}

body.page-design #design{
     color:black;
    text-decoration:underline;
}
body.page-enseignement #enseignement{
     color:black;
    text-decoration:underline;
}
body.page-recherche #recherche{
     color:black;
    text-decoration:underline;
}

header {
    position: relative;
    left: auto;
    top: auto;
    width: 100vw;
    line-height: 1.1;
    height: auto;
    
    box-sizing:border-box;
    padding:4.7vw;
}

nav{
    position: relative;
    bottom: 0;
    left: auto;
    /* background-color: snow; */
    z-index: 2000;
    margin-top: 0.4vw;
    transition: all 1 ease;
    
     box-sizing:border-box;
    padding:4.7vw;
}

.projets {
    position: relative;
    top: auto;
    width: 100vw;
    height: auto;
    left: auto;
    padding-bottom: 100px;
}

.section img, .section video {
    /* position: absolute; */
    width: 90.6vw;
    height: auto;
    filter: grayscale(0);
    transition: all 0.5s ease;
    cursor: pointer;
    margin-left:4.7vw;
}

.section.page img, .section.page video {
    position: relative;
    margin-top: calc( 2 * 4.7vw);
    top: auto;
}

.section img.bordure{
    width: 90.6vw;
}

.section .mosaique img {
    width: 24vw;
    height: auto;
}

.section .mosaique img.bordure{
    width:calc(24vw - 2px);
    height: auto;
}

.section .texte-presentation {
    height: auto;
    width: auto !important;
     box-sizing:border-box;
    padding:4.7vw;
    margin-top:0 !important;
}

.section.texte p{
     padding-left:4.7vw;
     padding-right:4.7vw;
}

.section.texte p.credits{
      margin-top:4.7vw;
}

.section.texte .texte-presentation p{
    padding-left:0;
    padding-right:0;
}



body.defile .projets {
    box-sizing: border-box;
    width: auto;
}

ul#subnav {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10000;
    width: 100vw;
    margin-top: 0.4vw;
    background-color: white;
    transition: all 1 ease;
    
    box-sizing:border-box;
    padding:4.7vw;
}

ul#index{
    width: 54vw;
    position: absolute;
    top: 2.35vw;
    right: 4.7vw;
    font-size: 9vw;
    align-items: center;
    justify-content:center;
}
#index li {
    cursor: pointer;
    margin-right: calc(4.7vw / 4);
}

.pop {
    position: relative;
    top: calc( (1.1 * 1.7vw ) * 3);
    left: 4.7vw;
    padding-right: 4.7vw;
    width: auto;
    line-height: 1.1;
    font-size:4.7vw;
    padding-bottom: 100px;
}

p.credits{
    line-height: 1.1;
    font-size:3.7vw;
    box-sizing:border-box;
    padding-left:4.7vw;
    padding-right:4.7vw;
}

p.credits a{
     line-height: 1.1;
    font-size:3.7vw;
}

.section video{
    display:none !important;
}

.contenu.noirblanc img {
    filter: grayscale(0);
}
.pop .ferme {
    z-index: 20000;
}


.projet {
    margin-bottom: calc(2 * 4.7vw);
}
.projet .presentation {
    display: none;
     line-height: 1.1;
    font-size:3.7vw;
}
/*
* ---------------------------------------------------
*  Formulaire
* ---------------------------------------------------
*/

form input::selection,
form input::textarea,
{
    background-color:white;
    color:black;
}

form input{
    background-color: black;
    border: 1px solid white;
    padding: padding;
    padding: 4px;
    font-size: 4.7vw;
    display: block;
    margin-bottom: 4.7vw;
    width:90vw;
}

form #submit{
    width:20vw;
    font-size: 4.7vw;
    width:100%;
}
form textarea{
    width:90vw;
    font-size: 4.7vw;
    width:100%;
}