/* MOBILE FIRST  */
body{
  font-size: var(--font-size-base);
  font-family: var(--text-font);
  line-height: 1.25;
  color: var(--black);
/*  background: rgb(250, 250, 250);*/
  background-color: var(--background);
}

img{width: 100%;}

a{text-decoration: none; color: var(--black);}
a:hover{color: var(--main-color);}
.active{
  color: var(--main-color);
}

h1, h2, h3, h4{
  font-family: var(--title-font);
  font-weight: normal;
  color: var(--darkgrey);
}

h1.logo{
  text-align: center;
  letter-spacing: 5px;
  font-size: 1.7em;
}

h1.logo span{
  color: var(--main-color);
  transition: all 0.5s ease;
  display: inline-block;
  position: relative;
  top: 3px;
}

h1.logo:hover span{
  top: -3px;
}
h1.logo a{
  color : var(--darkgrey);
}

.about-btn{
/*  color: var(--main-color);*/
/*  border: 1px solid var(--main-color);*/
/*  border-radius: 100%;*/
/*  height: 60px;*/
/*  width: 60px;*/
/*  padding-top: 5px;*/
/*  text-align: center;*/
  position: fixed;
  top: 13px;
  right: var(--normal-margin);
}

.about-btn a{
/*  color: var(--main-color);*/
}

h3{
  margin-top: var(--small-margin);
  margin-bottom: var(--small-margin);
}

p{margin-bottom: var(--normal-margin);}

figcaption{
  text-align: center; 
  color: var(--grey); 
  margin: var(--small-margin); 
  font-size: var(--font-size-small);
}

.dot{
  color: var(--main-color);
}

main{
  padding: 90px var(--normal-margin) 0px;
/*  background: url("../images/fond-test.png");
  background-repeat: no-repeat;
  background-size: cover;*/
}

main.about{
  padding-bottom: 150px;
}

.presentation{
  max-width: 1080px;
  margin:auto;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
/*  background-color: var(--main-color);*/
}

.presentation h1{
  font-size: 50px;
}

.presentation h2{
  font-size: 3em;
  margin-bottom: var(--normal-margin);
  color: var(--darkgrey);
}

.projects{
  max-width: 1080px;
  margin:auto;
}

.view-choice {
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey);
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.view-choice a{
  color: var(--grey);
}

.view-choice a.active{
/*  color: var(--main-color);*/
  color: #000;
}

.view-choice a:hover{
  color: var(--main-color);
}

table{
  border-collapse: collapse;
  margin-top: calc(var(--big-margin)*2);
  margin-bottom: calc(var(--big-margin)*8);
}

table.projects-list thead{
  text-align: left;
  vertical-align: bottom;
  border-color: var(--grey);
}

/*table.projects-list tr{
  transition: all 0.3s linear;
}

table.projects-list tr:hover{
  background-color: var(--main-color);
}*/

table.projects-list th, table.projects-list td{
  border-bottom: 1px solid var(--grey);
  padding: 5px 0;
  font-weight: normal;
}

table.projects-list th{
  color: var(--grey);
}

table.projects-list th:last-child, table.projects-list td:last-child{
  display: none;
}

/*table.projects-list td a::before{
  content: "●";
  margin-right: 5px;
  margin-left:  5px;
}*/

.filters{
/*  margin-bottom: var(--big-margin);*/
}

.filters select{
  width: 350px;
  margin-right: var(--normal-margin);
  margin-top: 7px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--grey);
}

.filters button{
  margin-top: 10px;
  cursor: pointer;
/*  margin-left: var(--normal-margin);*/
/*  border: 1px solid #000;*/
/*  border-radius: 100%;
  background-color: var(--main-color);*/
/*  height: 80px;
  width: 80px;*/
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 200% 2px;
  transition: all .25s ease-in-out,color .2s ease-out;
  border-color: #03a9f4;
  background-image: linear-gradient(to right,var(--main-color),var(--main-color) 50%,transparent 50%,transparent);
}

.filters button:hover{
  background-size: 200% 100%;
  text-decoration: none;
  color: #fff;
}

.projects-list-images .projects-list{
  margin-top: calc(var(--big-margin) * 2);
  margin-bottom: calc(var(--big-margin) * 4);
}

.projects-list-images .projects-list li{
  margin-bottom: var(--big-big-margin);
  transition: all 0.5s linear;
  padding-left: var(--big-margin);
  padding-right: var(--big-margin);
}

.projects-list-images .projects-list li:hover figure::before{
  background-color: transparent;
}

.projects-list-images .projects-list li:hover figure{
  filter: blur(0px);
}

.projects-list-images .projects-list li:hover h2{
  color: var(--main-color);
}

.projects-list-images .projects-list figure{
/*  height: 300px;*/
  overflow: hidden;
  position: relative;
  transition: all 0.5s linear;
  border-radius: 100%;
}

.home .projects-list-images .projects-list figure {
  filter: blur(5px);
}


.projects-list-images .projects-list figure::before{
  content: "";
  background-color: var(--main-color);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left:0;
  mix-blend-mode: overlay;
  transition: all 0.3s linear;
}

.projects-list-images .projects-list h2{
  text-align: center;
  margin-top: var(--normal-margin);
  transition: all 0.5s linear;
}

.project main{
  padding-top: 40px;
}

.article-content_text h1{
/*  text-align: center;*/
/*  font-family: serif;*/
/*  font-size: 3em;*/
/*  font-style: italic;*/
  border-bottom: 1px solid #000;
  padding-bottom: 3px;
  margin-bottom: var(--small-margin);
  font-size: 50px;
/*  text-transform: uppercase;*/
/*  font-weight: bold;*/
}

.article-content_text p{
  line-height: 1.35;
  letter-spacing: 0.1px;
}

.article-content_text a{
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 200% 2px;
  transition: all .25s ease-in-out,color .2s ease-out;
  border-color: #03a9f4;
  background-image: linear-gradient(to right,#03a9f4,#03a9f4 50%,transparent 50%,transparent);
}

.article-content_text a:hover{
  background-size: 200% 100%;
  text-decoration: none;
  color: #fff;
}

.article-header_cover{
  width: calc(100% + (var(--normal-margin)*2));
  margin-left: calc(-1 * var(--normal-margin));
  margin-bottom: var(--big-margin);
}

.article-header_cover figure{
  height: 30vh;
  overflow: hidden;
  position: relative;
}

.article-header_cover figure::before{
  content: "";
  background-color: var(--main-color);
  height: 50vh;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left:0;
  mix-blend-mode: overlay;
}

.article-content_wrapper{
  margin-top: calc(var(--big-margin) * 2);
}

.article-content_infos{
  margin-top: 37.5px;
}

.article-content_infos h2{
  border-bottom: 1px solid #000;
  padding-bottom: 3px;
  margin-bottom: var(--small-margin);
/*  text-transform: uppercase;*/
}

.article-content_infos > ul{
  margin-bottom: var(--big-big-margin);
}

/*.article-content_infos li:before{
  content: "●";
  margin-right: 5px;
  color: var(--main-color);
}*/

.download-pdf{
  margin: var(--normal-margin) 0;
  display: inline-block;
/*  border: 1px solid var(--main-color);*/
/*  padding: .15rem .35rem .15rem;*/
/*  padding-top: .4rem;*/
/*  padding-bottom: .16rem;*/
  /*transition: background-color .2s;
  border-bottom: 1px solid #000;*/
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 200% 2px;
  transition: all .25s ease-in-out,color .2s ease-out;
  border-color: #03a9f4;
  background-image: linear-gradient(to right,#03a9f4,#03a9f4 50%,transparent 50%,transparent);

}

.download-pdf:hover{
  background-size: 200% 100%;
  text-decoration: none;
  color: #fff;
}

.download-pdf a{
  transition: all .25s ease-in-out,color .2s ease-out;
}

.download-pdf a:hover{
  color: #fff;
}

/*.article-content_text{
  font-size: 1.2em;
}*/

.article-content_text h2{
  margin-top: var(--big-big-margin);
  border-bottom: 1px solid #000;
  padding-bottom: 3px;
  margin-bottom: var(--small-margin);
}

.footnotes{
  counter-reset: footnotes;
}

.footnotes li{
  margin-bottom: var(--small-margin);
  font-size: var(--font-size-small);
}

.footnotes .footnote-label-bottom{
  margin-right: var(--normal-margin);
  font-weight: bold;
}

[aria-describedby="footnote-label-bottom"] {
  counter-increment: footnotes; /* 1 */
}

/* Actual numbered references */
[aria-describedby="footnote-label-bottom"]::before {
  content: counter(footnotes);
}

.article-annexes{
  padding: 0;
}

.article-annexes article h2{
  border-bottom: 1px solid #000;
  padding-bottom: 3px;
  margin-top: var(--big-big-margin);
  margin-bottom: var(--small-margin);
}

/*.article-annexes article{
  margin-top: var(--big-margin);
  border-top: 1px solid var(--main-color);
  padding-top: var(--normal-margin);
}*/

/*.article-annexes article h2{
  font-size: 2em;
  font-weight: normal;
  margin-bottom: var(--normal-margin);
}*/

/*.article-annexes li:before{
  content: "●";
  margin-right: 5px;
  color: var(--main-color);
}*/

.article-related-content{
  margin-top: var(--big-big-margin);
/*  border-top: 1px solid #000;*/
  padding-top: var(--big-big-margin);
  padding-bottom: var(--big-big-margin);
  background-color: #FFF;
/*  width: calc(100% + calc(var(--normal-margin) * 2));
  margin-left: calc(var(--normal-margin) * -1);*/
}

.article-related-content_inner{
  max-width: 1080px;
  margin: auto;
}

.article-related-content h2{
/*  font-size: 2em;*/
  font-weight: normal;
  margin-bottom: var(--big-big-margin);
  font-size: 1.7em;
/*  border-bottom: 1px solid #000;*/
}

.article-related-content li{
  padding-right: var(--big-big-margin);
}

.article-related-content li figure{
/*  height: 150px;
  overflow: hidden;
  position: relative;*/
/*  height: 150px;*/
  overflow: hidden;
  position: relative;
  transition: all 0.5s linear;
  border-radius: 100%;
}

.article-related-content li figure::before{
  content: "";
  background-color: var(--main-color);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left:0;
  mix-blend-mode: overlay;
}

.article-related-content li h3{
  text-align: center;
}

.next-prev-project-wrapper{
  margin-top: calc(var(--big-big-margin) * 2);
  padding: 0;
}

.next-prev-project-wrapper .next-prev-project p{
  margin: 0;
}

.next-prev-project-wrapper .next-prev-project .next-prev-project-title{
  color: var(--grey);
  font-size: var(--font-size-small);
}

.next-prev-project-wrapper .next-prev-project .previous-title{
  margin-left: 25px;
}

.projects-header .themes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 50px;

}

.projects-header .themes li{
  margin-right: var(--small-margin);
}

.projects-header .themes li:first-child::before{
  content: "●";
  margin-right: var(--small-margin);
}

.projects-header .themes li:after{
  content: "●";
  margin-left: var(--small-margin);
}

.books-list > li figure {
  background-color:    var(--main-color);
  display:             flex;
  flex:                1 1 100%;
  height:              100%;
  overflow:            hidden;
  position:            relative;
  box-shadow: .25rem .25rem .25rem rgba(0,0,0,.2);
}

.books-list > li figure img {
  filter:              grayscale(100%) contrast(1) blur(0px);
  flex:                1 0 100%;
  height:              100%;
  max-width:           100%;
  mix-blend-mode:      multiply;
  object-fit:          cover;
  opacity:             1;
  position:            relative;
  width:               100%;
}

.books-list > li figure::before {
  background-color:    #484848;
  bottom:              0;
  content:             '';
  height:              100%;
  left:                0;
  mix-blend-mode:      lighten;
  position:            absolute;
  right:               0;
  top:                 0;
  width:               100%;
  z-index:             1;
}


footer{
  background-color: #292929;
  padding: 50px;
  font-size: 0.8em;
}

footer p, footer h2, footer a{
  color: #FFF;
}

.inner-footer{
  max-width: 1080px;
  margin: auto;
}

footer .main-nav .main-nav_first-level{
/*  column-count: 2;*/
}