@charset "UTF-8";


/* MAIN */

html, body {padding: 0;margin: 0;}
body { position :relative ; box-sizing: border-box; width: 100%;display: flex;flex-direction: column;min-height: 100vh; min-height: 100%; font-weight: normal; font-family:Inter; border : solid 1em yellow }
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size: unset;}
sup {font-size: 70%; line-height: 0;}
a, a:visited { text-decoration: none; list-style-type: none; font-family: inherit; color:black; margin: 0%; padding: 0%; }
a:hover { text-decoration: none; list-style-type: none; margin: 0%; padding: 0%; font-family: inherit; color:rosybrown; }
p { margin: 0%; padding: 0%; font-size: unset; font-family: inherit;}
em { font-family: inherit; font-style: italic; color: black; font-size: unset;}
em:hover { font-family: inherit; font-style: italic; font-size: unset; color: black; opacity: 1; }
ul, li { list-style-type: none; text-decoration: none; margin: 0; padding: 0; font-size: unset; font-family: inherit; }
main {flex: 1;}
img { user-select: none; -webkit-user-drag: none;}

/*  HEADER  */

header {
	position: fixed;
	width: 100%;
	height: auto;
	min-height:150px;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	z-index: 10;
  	background-color: white;
  	border-top: solid 1em yellow;
  	border-left: solid 1em yellow;
  	border-right: solid 1em yellow;
  	box-sizing: border-box;
}


/* Menu */


/* bouton fleche */
#toggle-menu {
display: none;
}


@media (max-width: 768px) {
  #toggle-menu {
    display: block;
  }
}

#name {
	position: relative;
	float: left;
	top:0;
	margin-top:2%;
	padding-left:4%;
	line-height: 120%;
	font-family: Inter;
	font-size: 3em;
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	list-style-type: none;
	cursor: none;
	z-index: 11;
	background-color: transparent;
	color: rosybrown;
}


#menu {
position: absolute;
  width: auto;
  height: auto;
  top: 0;
  text-align: center;
  font-weight: bold;
  margin: 0;
  z-index: 11;
  padding: 0;
  left: 50%;
  top: 38%;
}


#menu  ul, #menu li {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding:  0.6% 0 0 0 ;
	color: black;
	opacity: 1;
	z-index: 11;
}


#menu ul:hover, #menu li:hover {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0.6% 0 0 0;
	color: rosybrown;
	opacity: 1;
	z-index: 11;
}

#menu a {
	font-family: inherit;
	font-size: 1.2em;
	text-align: center;
	padding: 2px 10px;
	margin: 10px;
	z-index: 11;
	background-color: transparent;
	color: black;
}

#menu a:hover {
	font-family: inherit;
	font-size: 1.2em;
	text-align: center;
	padding: 2px 10px;
	margin: 10px;
	z-index: 11;
	background-color: transparent;
	color; black;
}



/* ------- INDEX.HTML -------- */

#introduction {
	font-size: 3em;
	font-family: inherit;
	padding-top:11%;
	padding-left:3%;
	padding-right:3%;
	margin-bottom: 5%;


}

#main-image {
	display: flex;             /* active Flexbox */
    justify-content: center;
    margin-bottom: 5%;
}


/* ---------- EDUCATION PAGE -----------*/


#txt-education {
  width: 62%;
  padding-top: 12%;
  padding-left: 18%;
  padding-right: 3%;
  margin-bottom: 5%;

}

#txt-education p {
	font-size: 1.5em;
	font-family: inherit;

}

#img-education { 
width: auto;
}


/* --------- dont Masonry ---------*/

.grid-edu {
width: 100%;
margin: 0;
padding: 0;
}

.grid-item-edu {
width: 50%;
padding: 0%;
}

.grid-item-edu img {
width: 100%;
display: block;
}

/* --------- dont filtres (placés dans la nav) ---------*/

.filters {
margin-top: 1%;
margin-left: 59.5%; 
z-index: 11;

}

.filters button {
background: none;
border: none;
font-family: inherit;
font-size: 1em;
cursor: pointer;
margin-right: 1%;
}

.filters button:hover {
color: rosybrown;
}





/* ABOUT */

.main-about {
  position: static;
  width: 100%;
  background-color: white;
  height: auto;
  top: 51px;
  left: -1%;
  padding-bottom: 8%;
  padding-top: 2%;
  overflow: hidden;
  z-index: 8;
}


#extrait-about {
	position: relative;
	top: 0;
	width: 94.4%;
	line-height: 129%;
	margin-bottom: 2%;
	padding-bottom: 1%;
	padding-left: 3%;
	height: auto;
	left: 0;
	display: flex;
}

#extrait-about h5 {
	padding-bottom: 0.6em;
	padding-right: 2%;
    margin: 0px;
    font-family: inherit;
    font-size: 1.2em;
    width: 18%;
    height: auto;
    position: relative;
    left: 0%;
    top: 12px;
    line-height: 140%;
    display: inline-block;
    text-align: left;
    font-weight: bold;
    color: rosybrown;
}

#extrait-about a { font-family:inherit; color:inherit; font-size:inherit; }
#extrait-about a:hover { font-family:inherit; color:black; font-size:inherit; }

#extrait-about p {
	padding: 0px;
    margin-bottom: 2%;
    font-family: inherit;
    font-size: 1.8em;
    width: 82%;
    height: auto;
    position: relative;
    left: 0%;
    top: 0px;
    line-height: 140%;
    float: left;
    margin-left: 3%;
    margin-right: 0%;
}

#extrait-about a:hover {
  padding: 0px;
  margin: 0px;
  font-family: inherit;;
  font-size: inherit;
  display: inline-block;
  line-height: 140%;
}


#extrait-about em {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-style: italic;
  position: relative;
  line-height: 140%;
}



#extrait-about em:hover {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-style: italic;
  font-size: inherit;
  color: inherit;
  position: relative;
  line-height: 140%;
}


#img-about {
 position: relative;
  width: 101%;
  height: auto;
  display: block;
  padding-bottom: 0;
  left: -0.5%;
  margin-bottom: 6%;
  z-index:8;

}


#img-about img {
	position: relative;
	width: 45%;
	height: auto;
	top: 4em;
	margin-right: auto;
	margin-left: auto;
	vertical-align: middle;
	display: inherit}




/* LANGAGE TOGGLE */

/* Bouton */
#language-toggle {
    position: fixed;
    top: 50%;
    left: 1.7%;
    z-index: 12;
}

#language-toggle button {
    padding: 0;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    font-weight: bold;
    background: transparent;
    font-size: 1.1em;
}


/*------- CV ENGLISH ----------*/


#content-en {
  position: relative;
  display: block;
  top: 0;
  width: 94.4%;
  height: auto;
  line-height: 129%;
  left: 3%;
}


#content-en ul {
  padding-bottom: 15px;
  margin: 0px;
  position: relative;
  left: 0;
  font-size: 1.1em;
  column-gap: 3%; /* Espacement entre les colonnes */
  column-count: 3; /* Toujours 3 colonnes */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  word-break: break-word; /* Empêche les coupures intempestives */
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
}


#content-en li  {
  padding-bottom:0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 140%;
  position: relative;
  left: 0;
  break-inside: avoid; 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding: 0px;
  height: auto;
  display: block;
}


#content-en h1  {
      display: none;
    }

/* titre sections */

#content-en h2,
#content-en h2 + p {
 font-family: inherit;
  position: relative;
  font-weight: bold;
  font-size: 1.7em;
  line-height: 140%;
  height: auto;
  padding-top: 1.5%;
  margin-bottom: 1.5%;
  display: block;
  padding-bottom: 1.5%;
  width: 100%;
  border-top: 0.3em solid rosybrown;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  text-decoration: underline 0.1em;
}



/* sous-titre poste */


#content-en h6,
#content-en h6 + p {
  padding-bottom: 0;
  padding-top: 0;
  margin: 0px;
  font-family: inherit;
  font-size: inherit;
  color: rosybrown;
  position: relative;
  padding-right: 10px;
  opacity: 1;
  line-height: 140%;
  font-weight: bold;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;

}


#content-en p {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: 1.2em;
  position: relative;
  left: 0px;
  top: 10px;
  padding-bottom: 10px;
  height: auto;
  display: block;
  line-height: 140%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}


#content-en em {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-style: italic;
  position: relative;
  line-height: 140%;
}


#content-en a {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  font-style: normal;
  color: Black;
  position: relative;
  line-height: 140%;
}


#content-en a:hover {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  font-style: normal;
  color: rosybrown;
  position: relative;
  line-height: 140%;
}


#content-en strong {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  color: rosybrown;
  position: relative;
  padding-right: 10px;
  opacity: 1;
  line-height: 140%;
  font-weight: bold;
}





/* CV FR*/

#content-fr {
  position: relative;
  display: none;
  top: 0;
  width: 94.4%;
  height: auto;
  line-height: 129%;
  left: 3%;
}


#content-fr ul {
  padding-bottom: 15px;
  margin: 0px;
  position: relative;
  left: 0;
  font-size: 1.1em;
  column-gap: 3%; /* Espacement entre les colonnes */
  column-count: 3; /* Toujours 3 colonnes */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  word-break: break-word; /* Empêche les coupures intempestives */
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
}


#content-fr li  {
  padding-bottom:0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 140%;
  position: relative;
  left: 0;
  break-inside: avoid; 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding: 0px;
  height: auto;
  display: block;
}


#content-fr h1  {
      display: none;
    }

/* titre sections */

#content-fr h2,
#content-fr h2 + p {
 font-family: inherit;
  position: relative;
  font-weight: bold;
  font-size: 1.7em;
  line-height: 140%;
  height: auto;
  padding-top: 1.5%;
  margin-bottom: 1.5%;
  display: block;
  padding-bottom: 1.5%;
  width: 100%;
  border-top: 0.3em solid rosybrown;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  text-decoration: underline 0.1em;
}


#content-fr h6,
#content-fr h6 + p {
  padding-bottom: 0;
  padding-top: 0;
  margin: 0px;
  font-family: inherit;
  font-size: inherit;
  color: rosybrown;
  position: relative;
  padding-right: 10px;
  opacity: 1;
  line-height: 140%;
  font-weight: bold;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;

}


#content-fr p {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: 1.2em;
  position: relative;
  left: 0px;
  top: 10px;
  padding-bottom: 10px;
  height: auto;
  display: block;
  line-height: 140%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}


#content-fr em {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-style: italic;
  position: relative;
  line-height: 140%;
}


#content-fr a {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  font-style: normal;
  color: Black;
  position: relative;
  line-height: 140%;
}


#content-fr a:hover {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  font-style: normal;
  color: rosybrown;
  position: relative;
  line-height: 140%;
}


#content-fr strong {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
  font-size: unset;
  color: rosybrown;
  position: relative;
  padding-right: 10px;
  opacity: 1;
  line-height: 140%;
  font-weight: bold;
}




/* -----------------RESEARCH ----------------- */



#txt-research {   
	width: 62%;
  padding-top: 12%;
  padding-left: 18%;
  padding-right: 3%;
  margin-bottom: 5%; 
}

#txt-research p {
	font-size: 1.5em;
	font-family: inherit;
}


/* --------- dont filtres recherche (placés dans la nav) ---------*/

.filters-rsh {
margin-top: 5.5%;
  margin-left: 58.5%;
z-index: 11;
}


.filters-rsh button {
background: none;
border: none;
font-family: inherit;
font-size: 1em;
cursor: pointer;
margin-right: 1%;
}

.filters-rsh button:hover {
color: rosybrown;
}


/* --------- dont Masonry ---------*/

.grid-rsh {
width: 100%;
margin: 0;
padding: 0;
}

.grid-item-rsh {
width: 32.3%;
padding: 0.5%;

}

.grid-item-rsh img {
width: 100%;
display: block;
}


/* --------- dont slider ---------*/

.project-slider{
position:relative;
overflow:hidden;
}

.project-slider img{
display:none;
user-select:none;
-webkit-user-drag:none;
}

.project-slider img.active{
display:block;
user-select:none;
-webkit-user-drag:none;
}


/* Dont caption */

.caption-rsh {
  padding: 2%;
  margin-bottom: 2%;
  color: inherit;
  font-size: inherit;


}


/* ------------FOOTER------------------ */

footer {
position: relative;
font-size: 2em;
left: 0;
bottom: 0;
width: 100%;
height: 20%;
padding: 0%;
z-index: 10;
margin: 0;
background-color: white;

}


#foot p {
position: inherit;
font-family: inherit;
font-size: 1em;
text-decoration: none;
color: rosybrown;
text-align: left;
margin-top:0.8%;
padding-bottom: 2.5%;
padding-left:3%;
z-index: inherit;
font-weight: normal;
font-style: normal;
}



/* ================================================= */
/* ================= RESPONSIVE ==================== */
/* ================================================= */


/* ---------- TABLETTE ---------- */

@media screen and (max-width:1100px){

/* HEADER */

body {border: solid 0.3em yellow;}

header{
height:auto;
padding-bottom:20px;
border-top: solid 0.3em yellow;
border-left: solid 0.3em yellow;
border-right: solid 0.3em yellow;
}

#name{
float:none;
text-align:center;
margin-top:20px;
padding-left:0;
}

#menu{
position:relative;
left:auto;
top:auto;
text-align:center;
margin-top:10px;
}

#menu li{
display:inline-block;
}


/* TEXT BLOCKS */

#txt-research,
#txt-education{
width:90%;
padding-left:5%;
padding-right:5%;
padding-top:140px;
}

/* FILTRES */

.filters-rsh {text-align: center}


/* ABOUT */

#extrait-about{
flex-direction:column;
}

#extrait-about h5{
width:100%;
margin-bottom:40px;
text-align: center;

}

#extrait-about p{
width:100%;
margin-left:0;
}


/* CV ABOUT */

#content-en ul, #content-fr ul{
column-count: 2;
}




/* GRIDS */

.grid-item-rsh{
width:49%;
}

.grid-item-edu{
width:49%;
}


/* FILTERS */

.filters,
.filters-rsh{
margin-left:5%;
margin-top: 1%;
}


#language-toggle {
  position: fixed;
  top: 12.2%;
  left: 3.7%;
  z-index: 12;
}
  
#toggle-lang{
  color: rosybrown;
}


} /* ferme min-width


/* ---------- MOBILE ---------- */

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


/* HEADER */

#name{
font-size:2em;
padding-top: 2%;
}

#menu li{
display:block;
margin:5px 0;
}


/* TEXT */

#introduction{
font-size:1.8em;
margin-top:50%;
}


#txt-research p,
#txt-education p{
font-size:1em;
margin-top: 3% ;
}





/* ABOUT */

#content-en ul, #content-fr ul{ column-count:1;}

.main-about {margin-top:50%}

#extrait-about p { font-size: 1.2em};


/* FILTRES */

.filters-rsh {text-align: center}

  #language-toggle {
    position: fixed;
    top: 5.1%;
    left: 3.7%;
    z-index: 12;
  }

  /* bouton toggle visible */
  #toggle-menu {
    display: block;
    position: absolute;
    right: 3%;
    top: 32px;
    font-size: 2em;
    cursor: pointer;
    user-select: none;
    z-index: 9999;

  }

  /* menu visible par défaut en mobile */
  header #menu {
    display: block;
  }

  /* menu fermé via JS */
  header.closed #menu {
    display: none;
  }



/* IMAGES */

.grid-item-rsh{
width:100%;
}

.grid-item-edu{
width:100%;
}


/* ABOUT IMAGE */

#img-about img {
width:90%;
top:0;
}


#main-image img {
  width: 100%;

} 

/* FOOTER */

footer{
font-size:1.3em;
margin-top: 2%;
}

} /* ferme max-width