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


/* duotone */

:root {
  --base:              #f7392b;
  --bg-blend:          multiply;
  --blur:              0px;
  --fg-blend:          lighten;
  --foreground:        #16006f;
  --opacity:           1;
  --spacing:           1%;
}

/*
* ---------------------------------------------------
*  Chargement des polices
* ---------------------------------------------------
*/

@font-face {
    font-family: 'GT-Walsheim-Medium';
    src: url('GT/GT-Walsheim-Medium.woff2') format('woff2'),
        url('GT/GT-Walsheim-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT-Walsheim-Medium-Oblique';
    src: url('GT/GT-Walsheim-Medium-Oblique.woff2') format('woff2'),
        url('GT/GT-Walsheim-Medium-Oblique.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*
* ---------------------------------------------------
*  Général
* ---------------------------------------------------
*/

* { 
    box-sizing: border-box;
    outline:none;
}

html{
    font-size:100%;
}

body{
    background-color:beige;
     background-color:ivory;
    color:black;
    width:100%;
    height:100%;

    font-family: 'GT-Walsheim-Medium';
    font-weight:normal;
    font-style:normal;
    font-size:1.7vw;
    line-height:1.1;
    /*letter-spacing: 0.01em;*/
    letter-spacing: -0.005em;

    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    /*text-rendering: optimizeLegibility;*/
    text-rendering: geometricPrecision;
    font-feature-settings: "pnum" 1, "kern" 1, "liga" 1;
    /*font-variant-caps: small-caps;*/
    /*font-feature-settings:"onum" 1;*/
    font-kerning: normal;
    transition: all 1 ease;
    
    overflow-x:hidden;
    
   padding:2vw;

}


/* liens */
a{
    text-decoration:none;
}

/* Tous les Liens */
a {
	text-decoration: none;
    color:black;
}

a:hover{
	text-decoration: underline;	
}

a.couleuractive,
li.couleuractive{
    text-decoration:underline;
}


em{
    font-family: 'GT-Walsheim-Medium-Oblique';
}

::selection{
    background-color:black;
    color:white;
}


h2{
    padding-bottom:1.7vw;
}

/*
* ---------------------------------------------------
*  Nav
* ---------------------------------------------------
*/

nav{
    position: absolute;
    top: 16vw;
    left: 2vw;
}

nav ul{
    margin:0;
    list-style-type:none;
    /*display:flex;
    justify-content: space-between;*/
    border-top:1px solid #000;
    border-bottom:1px solid #000;
     padding-top:0.4vw;
    padding-bottom:0.4vw;
    margin-top:0.8vw;
    font-size: 1vw;

}

nav ul li.active a{
    font-weight:bold;
}



/*
* ---------------------------------------------------
*  Header
* ---------------------------------------------------
*/

header{
     padding-left:20vw;
}

header img{
    filter: grayscale(100%) !important;
    width:28vw;
    heigth:auto;
    mix-blend-mode: multiply;
}

header h1{
    font-size:4.4vw;
}

/*
* ---------------------------------------------------
*  Corpus
* ---------------------------------------------------
*/
#resume-EN{
    margin-top:3.4vw;
}


/*
* ---------------------------------------------------
*  Corpus
* ---------------------------------------------------
*/


#corpus{
    width:70vw;
}

#corpus h1{
    
}

#corpus h2{
    border-top:4px solid #000;
    padding-top:0.4vw;
    padding-bottom:0.4vw;
    margin-top:0.8vw;
     margin-top:6vw;
}

#corpus h3{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding-top:0.4vw;
    padding-bottom:0.4vw;
    margin-top:0.8vw;
    margin-top:2vw;
    cursor:pointer;
}


/* oeuvres */
#corpus .oeuvres{
    margin-top:4vw;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-gap:2vw;
}



/* bloc oeuvre */


#corpus .oeuvre{
    /*cursor:pointer;*/
}

#corpus .oeuvre h4{
    font-size: 1.4vw;
    font-size:1vw;
    margin-top: 0.6vw
}
#corpus .oeuvre h4 span{
    display:block;
}

#corpus .oeuvre p{
   display:none;
}

#corpus .oeuvre .image{
    /*height:6vw;*/
} 
#corpus .oeuvre img{
    width:100%;
    height:auto;
    /*object-fit: cover;
    filter: grayscale(0%) !important;*/
    /*filter: grayscale(100%);*/
    /*opacity: 0.5;*/
   
}
#corpus .oeuvre a:hover img{
    opacity:0.7;
}


.embed{
    width:70vw;
    height:auto;
}



/*
* ---------------------------------------------------
*  Ecran
* ---------------------------------------------------
*/

#ecran{
    position:fixed;
    top:0;
    right:0;
    background-color:#333;
    width:40vw;
    height:30vw;
}

#ecran iframe{
    border:0;
    margin:0;
    width:100%;
    height:100%;
}


/*
* ---------------------------------------------------
*  Images
* ---------------------------------------------------
*/

#corpus .oeuvre .image {
  /*background-color:    var(--base);*/
  /*display:             flex;
  flex:                1 1 100%;
  height:              100%;
  overflow:            hidden;*/
  padding:             var(--spacing);
  position:            relative;
}

#corpus .oeuvre .image img {
  /*filter:              grayscale(100%) contrast(1) blur(var(--blur));*/
  /*flex:                1 0 100%;
  height:              100%;
  max-width:           100%;
  mix-blend-mode:      var(--bg-blend);
  object-fit:          cover;
  opacity:             var(--opacity);
  position:            relative;
  width:               100%;*/
    
  height: 14vW;
  height:8vw;
  /*opacity:             var(--opacity);
  mix-blend-mode:      var(--bg-blend);*/
  object-fit:          cover;
}

#corpus .oeuvre .image::before {
  background-color:    var(--foreground);
 /* bottom:              0;
  content:             '';
  height:              100%;
  left:                0;
  mix-blend-mode:      var(--fg-blend);
  position:            absolute;
  right:               0;
  top:                 0;
  width:               100%;
  z-index:             1;*/
  content:             '';
  mix-blend-mode:      var(--fg-blend);
}