/* Styling */

@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
    font-family: 'dorkdiary';
    src: url('Dpdorkdiary.ttf') format('truetype');
}

/*
:root {
    --col-bckgnd: #efefef;
    --col-bckgnd2: #ffe0e0; 
    --col-bckgnd-contrast: #FFCCCC; 
    --col-bckgnd-contrast2: #ff9e9e;
    --col-text: #4e4e4e;
    --col-text2: #FF3456;
    --col-link: #be4e4e;
    --col-title1: #4e4e4e; 
    --col-title2: #FF3456;
} /*ffefef; /*#ffe0e0; /*#194316;
*/

:root {
    --col-bckgnd: #efefef;
    --col-bckgnd2: #fff5e0; 
    --col-bckgnd-contrast: #ffeecc; 
    --col-bckgnd-contrast2: #ffdf9e;
    --col-text: #4e4e4e;
    --col-text2: #db9200;
    --col-link: #e4b453;
    --col-title1: #4e4e4e; 
    --col-title2: #db9200;
}

html
{
    height: 100%;
}

body {
  font-family: "PT Mono", "Helvetica Neue", sans-serif; /* "PT Mono", "Courier New", sans-serif; */
  color: var(--col-text);
  font-size: 1em;
  line-height: 1.4em;    
  height: 100%;
  background-color: var(--col-bckgnd);    
  /* line-height: 20px; 
  font-weight: 300;
  letter-spacing: .05em; */
}




a {
  /* transition: all 500ms ease;*/
  text-decoration: none; 
  color: inherit;
  border-bottom: 2px solid var(--col-text2);
}

nav a
{
 border-bottom: 2px none var(--col-bckgnd);    
}


a:hover{
    border-bottom: 2px solid var(--col-text2);
    border-top: 2px solid var(--col-text2);
}

/*
a:hover, a:active, a:focus {
  color: #4db480;
  outline: none;
  text-decoration: none;
  border-bottom: 5px solid #4db480;
}

*/

h1
{
    font-weight: bold;
    font-size: 3em;
    color: var(--col-title1);
}

h2
{
    text-align: center;
    font-weight: bold;
    font-size: 2.5em;
    color: var(--col-title2);    
}

h3
{   
    font-size: 2em;
    color: var(--col-title2);
    
}

.title-box{
    height: 4%;
    width:inherit;
    border-top: solid;
    border-top-width: 2px;
    border-bottom: solid;
    border-bottom-width: 2px;
    border-color: var(--col-title2);
}


strong
{
    font-weight:bold;
}

h3
{
    font-size: 1.4em;
}






.art-item{
    color: var(--col-text2);
    margin: 0%;
    width:70%;
    padding:20px;
    padding-bottom: 10px;
    margin: 20px;
    border-bottom: 2px solid var(--col-text2);    
    border-top: 2px solid var(--col-text2);
    background-color: var(--col-bckgnd-contrast);
}

.art-item:hover{
   background-color: var(--col-bckgnd-contrast);
   /* color:var(--col-bckgnd); 
   border-bottom-color: var(--col-bckgnd); */
}

.art-title{
    text-align: center;
    color: inherit;
    font-size: 1.4em; 
    line-height: 1.2em;
    font-weight:bold;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 20px;
    border-bottom: 1px solid;
    border-bottom-color: inherit;    
}

.art-with{
    text-align: right;
    color: inherit;
    font-size: 0.7em; 
    font-weight:normal;
    padding-top: 10px;
}

.art-ref{
    color: inherit;
    font-size: 1em; 
    font-style:italic;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    border-bottom-color: inherit;
}

.work-ref{
    color: inherit;
    font-size: 1em; 
    font-style:italic;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0px;
}

.art-loc{ 
    color: inherit;
    font-size: 1em; 
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: 0px solid;
    border-bottom-color: inherit;
}

.art-loc-temp{ 
    color: inherit;
    font-size: 1em; 
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid;
    border-bottom-color: inherit;

}

.art-abs{ 
    color: inherit;
    font-size: 1em; 
    text-align: right;
    padding-top: 10px;
}


.art-bounce
{  margin: 0%;
   width: 20%;
}
 

#art-list
{   width: 100%;
    display:flex;
    flex-wrap:wrap;
    padding-left: 4%;
}

#work-list
{   width: 100%;
    display: flex;
    flex-wrap:wrap;
}


.collapsible {
    background-color: inherit; /* #ffeb99;  */
    color: inherit;
    cursor: pointer;
    padding: 2px;
    border: 0px;
    padding-left: 20px;
    border-left: 1px solid;
    text-align: left;
    font: inherit;
    font-size: inherit;
    outline: none;
            }

.collapsible:hover{
    text-decoration: underline;
}

.art-abstract{
    width:100%;
    display: none;
    border-top: 1px solid var(--col-text2);
    padding-top: 5px;
    margin-top: 10px;
}

.art-abstract-cont{
    font-size:0.9em;
    line-height: 1.2em;
    text-align: justify;
    text-indent:30px;
    color: var(--col-text2);    
}


.course-item{
    color: var(--col-text2);
    margin: 0%;
    width:80%;
    padding:15px;
    padding-bottom: 5px;
    margin-bottom: 30px;
    border: 0px solid var(--col-text2);
    border-radius: 0px;
}
/*.course-item:hover{
   background-color: var(--col-bckgnd-contrast);
}*/

.course-item-emph{
    color: var(--col-text2);
    margin: 0%;
    width:80%;
    padding:15px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border: 0px solid var(--col-text2);
    border-radius: 0px;
    background-color: var(--col-bckgnd-contrast);
}
/*.course-item-emph:hover{
   background-color: var(--col-bckgnd-contrast2);
}*/

.course-line{
    color: inherit;
    font-size: 1em;
    line-height: 1.1em;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--col-text2);    
}

.course-when{
    text-align: left;
}

.course-where{ 
    text-align: right;
    margin-top: -1.1em;
}

.course-what{
    text-align: left;
    color: inherit;
    line-height: 1.2em;    
    padding-top: 10px;
    border-bottom: 1px none;
    border-bottom-color: inherit;    
}

.course-title{
    font-size: 1.3em;
    font-weight:bold;
}

.course-how{
    color: inherit;
    font-size: 1em; 
    font-style:italic;
    text-align: left;
    padding-top: 0px;
}

.course-page{ 
    text-align: right;
    margin-top: -1.6em;
    font-size: 0.9em;
}

.course-bounce
{  margin: 0%;
   width: 15%;
}

#course-list
{   width: 100%;
    display: flex;
    flex-wrap:wrap;
    padding-left: 2%;
}




#students-list
{   width: 100%;
    display: flex;
    flex-wrap:wrap;
}

.student{
    color: var(--col-text2);
    margin: 0%;
    width:80%;
    padding:15px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border: 0px solid var(--col-text2);
    border-radius: 5px;
}

.student-line{
    color: inherit;
    font-size: 1em;
    line-height: 1.1em;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--col-text2);    
}

.student-who{
    text-align: left;
    font-weight: bold;
    font-size: 1.3em;
}

.student-where{ 
    text-align: right;
    margin-top: -1.1em;
}

.student-what{
    text-align: justify;
    color: inherit;
    line-height: 1.4em;    
    padding-top: 10px; 
}

.student-thesis{ 
    text-align: right;
    font-size: 1.0em;
    font-style: italic;
    margin-top: -1.1em;
}

.student-bounce
{  margin: 0%;
   width: 15%;
}

#student-list
{   width: 100%;
    display: flex;
    flex-wrap:wrap;
    padding-left: 2%;
}






header
{
    margin-left: 170px;
}

#TITLE
{
    text-align: center;
}


#MAIN
{
   margin-left: 160px; 
    /*calc(10%+ 100px);*/
}

nav
{  
    display: flex;
    flex-direction: column;

    /*float:left;*/
      justify-content: space-around;
    align-items: center;
    width: 175px;
    /*width:12%;
    min-width: 150px;*/
    height:100%;
    margin:0px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--col-bckgnd);
    z-index: 10;
    box-shadow: 10px 0px 30px 0px rgba(0,0,0,0.1);    
}


.menu-item
{   
    transition: all 1s ease;
    text-decoration: none;
    position:relative;
    text-align: center;
    align-content:center;
    height: 40px;
    padding-top:10px;
    width:100%;
}


.menu-item-sep
{
    height: 30px;
}

.menu-item-title
{
    font-family: "dorkdiary";    
    font-size: 1.8em;
    line-height: 1.1em;
    color:white;
    text-align: center;
    vertical-align: middle;
    background: var(--col-text2);
    margin-left: 25px;
    padding-top: 35px;
    width: 120px;
    height: 90px;
    border-radius: 100%;
}


section{  
    padding: 0px;
    margin: 0px;
    min-height:85vh;
    width: inherit;
}

.content{   
    background-color:var(--col-bckgnd2);
    margin:2%;
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 0%;
    padding:3%;
    padding-top: 3%;
    padding-bottom: 2%;
    min-height: inherit;
    width: inherit;
    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.1);        
}


/* Sections toggle display */
#ABOUT
{
    display:block;
}

#RSRCH
{
    display: none;
}

#TEACH
{   
    display: none;
}


#MISC{
    display: none;
}

#CNTCT{
    display: none;    
}

/*
.active-pop{
    background-color: var(--col-bckgnd2);
    height:25px;
    width: 25px;
    border-radius: 100%;
    margin-left:75px;
    margin-top:-1.5em;
}
*/

.active-pop{
    background-color: var(--col-bckgnd2); /*var(--col-bckgnd-contrast);*/
    height:55px;
    width: 55px;
    border-radius: 100%;
    margin-left:60px;
    margin-top:-2.4em;
    box-shadow: 10px 5px 10px 0px rgba(0,0,0,0.05) inset;    
    
}


#active-ABOUT{
    display:block;
}

#active-RSRCH{
    display:none;
}

#active-TEACH{
    display:none;
}

#active-MISC{
    display:none;
}

#active-CNTCT{
    display:none;
}



/* Toggle language */
body.fr span.en{
    display : none;
}

body.en span.fr{
    display : none;
}

/* Links to top */
.a-totop
{
    text-align: right;
    padding-right: 5%;
    color: var(--col-text2)
}

.img-float
{
    float: left;
    padding-right: 5%;
    margin: 2%;
    margin-left: 10%;
    margin-top: -15px;
}

.break-float{
    clear: both;
}

.desc-t
{
    color: var(--col-text2);
    text-align: justify;
    margin-left: 8%;
    width: 85%;
}

.desc-topics
{   text-indent: 30px;
    font-size: 1em;
    line-height: 1.2em;
    color: var(--col-text2);
    text-align: justify;
    margin-left: 5%;
    width: 90%;
}

.desc-keywords
{   font-size: 0.9em;
    line-height: 1.2em;
    color: var(--col-text2);
    text-align: justify;
    margin-left: 8%;
    width: 85%;
}

.desc-tt
{
    color: var(--col-text2);
    line-height: 1.5em;
    text-align: justify;
    margin-left: 8%;
    width: 85%;
}

.conf-item{
  margin-bottom: 20px;
}

.desc-list
{    
    width: 95%;
    color: var(--col-text2);
    text-align: justify;
}

.boxed-t{
    margin-left: 8%;
    margin-right: 10%;
    width: 80%;
    color: var(--col-text2);
    text-align: center;
    padding: 20px;
    border: 2px solid var(--col-text2);
}

.boxed-title{
    margin-left: 10%;
    width: 80%;
    color: var(--col-text2);
    background-color: var(--col-bckgnd-contrast);
    text-align: center;
    border: 2px solid var(--col-text2);
    margin-bottom: 20px;
    
}

.t-right
{
    font-size: 0.8em;
    color: var(--col-text2);
    text-align: right;
}

.contact-content{
    padding-left: 5%
}

.sep-med
{
    height: 20px;
}

.sep-sm
{
    height: 10px;
}

.sep-large
{
    height: 50px;
}