@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:500,700,800');
*{
  margin:0;
  padding:0;
  border-collapse: collapse;
  box-sizing:border-box;
}
html{
  font-size: 62.5%;
  font-family: 'Poppins', sans-serif;
  vertical-align: top;
  vertical-align: baseline;
    -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
:root {     /*background-color: var(--main-bg-color);*/
  --violet: #141023;
  --rouge-rose:#e72540;
  --jaune:#fbc91e;
  scroll-behavior: smooth;
}


/*      reset style       */
.mon-grid{
  width: 100%;
  margin: auto;
  display: grid;
}
a{
  text-decoration: none;
  color: var(--rouge-rose);
  font-weight:700;
}
li{list-style: none;}
i{
  font-size: 2.5rem;
  color: var(--rouge-rose);
  padding-right: 20rem;
}
#webslides-zoomed {display: none !important;}
.clr-date{color: var(--rouge-rose); font-weight: 700;font-size: 1.3rem;}
section.ceram, section.apropos, section.formation{
  padding: 5rem 0 5rem 0;
}



/*      header //footer      */
header#back-accueil{display: none;}
header div{
  position: fixed;
  padding: 2% 0 0 1%;
  width: 20% !important;
  height: 5rem;
  /*z-index: 99999999;*/
  grid-template-columns: 2.2rem auto;
  grid-gap: .1rem;
  place-items:start;
}
header div h1{
  font-size: 2.2rem;
  color: var(--rouge-rose);
  font-weight: 900;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
}
header div a{
    height: 4rem;
    color: var(--rouge-rose);
    text-transform: uppercase;
}
header div a img{
  height: 100%;
  margin-left: .5rem;
}


/*navigation*/
header nav{
  position: fixed;
  width: 95%;
/*  height: 100vh;*/
  top: 2%;
  right: 2%;
}
header nav label{justify-self: end;}
header nav label img{
  width: 4rem;
  height: 4rem;
}
header nav  input ~ul.mon-grid{
  display: none;
  transition: all .1s;
}
input[type=checkbox]{
  display: none;
}
header nav input[type=checkbox]+label{
  display: block;
  cursor: pointer;
}
header nav input:checked~ul li{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
    border:.5px dotted var(--rouge-rose);
}
header nav input:checked~ul li a, header nav input:checked~ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header nav input:checked~ul.mon-grid{
  display: grid;
  height: 80vh;
  width: 60%;
  margin: auto;
 /* margin-left:2%;*/
  /*z-index: 999999999;*/
  place-items: center;
  background-color:rgba(255, 255, 255,1);
  grid-template-columns: repeat(3,1fr);
  transition: all .1s;
  border:2px solid var(--rouge-rose);
}
/*header nav input:checked~ul li{height: 80%;}
header nav input:checked~ul img{
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}*/




/*      index     */
section.index{
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: 80vh 20vh;
}
section.index article.mon-accueil{
  padding: 1%;
  grid-column: 1/span 5;
  height: 70vh;
  /*grid-template-columns: repeat(2,1fr);*/
  grid-template-rows: 75% auto;
  /*grid-gap: 2%;*/
  border-bottom: 1px dotted var(--rouge-rose);
  border-left: none;
}

section.index article.mon-accueil h1{
  color: var(--rouge-rose);
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
}
section.index article.mon-accueil img{
/*  height: 100%;
  width: 100%;
  object-fit: contain;
  justify-self: left;*/
/*  grid-column: 2;*/
  /*width: initial;*/
}
section.index article{
  height: 20vh;
  width: 100%;
  padding:1%;
  border-left:  1px dotted var(--rouge-rose);
  /*overflow: hidden;*/

}
section.index article img, section.index article h2, section.index article a{
   grid-column: 1;
  grid-row: 1;
}
section.index article img{
  height: 100%;
  width: 100%;
  object-fit: contain;

}
section.index article h2{
  color: var(--rouge-rose);
  font-size: 1.3rem;
  text-align: center;
/*  padding-top: 5%;*/

}
 section.index article a{
  align-self: end;
  padding-bottom: 2%;
 }
 section.index article a img{
  height: 5vh;
 }





/*céramique*/
section.ceram figure{
  grid-template-columns: repeat(3,1fr);
  width: 70%;
  padding: 5rem 0 5rem 0;
}
section.ceram figure a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*apropos*/
section.apropos, section.formation{width: 80%;}
section.apropos aside, section.formation aside{
  grid-template-columns: 40% 60%;
  color: var(--rouge-rose);
  text-align: right;
  width: 100%;
  font-weight: 500;
  font-size: 1.2rem;
}
section.apropos aside img{margin: -3rem 0 0 -2rem;}
section.apropos aside div{align-self: end;}
section.apropos aside div h2, section.formation aside div h2{
  font-size: 1.8rem;
  font-weight: 900;
}
section.apropos article div,{padding: 1rem 0 1rem 0; }
section.apropos article:first-of-type div:last-child , section.apropos ul:first-of-type li{text-align: right;}
section.apropos article div p, section.formation article div p{
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--violet);
}
section.apropos ul li{
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.6rem;
  color: var(--rouge-rose);
  text-transform: uppercase;
}
section.apropos aside a.icon-cv{
  font-size: 1.2rem;
  height: 3rem;
}
section.apropos aside img.icon-cv{height: 2rem;}


/*page formation */
section.formation article div{
  grid-gap: 5%;
  padding-top: 2%;
}
section.formation article div h3{
  font-size: 1.8rem;
  color: var(--rouge-rose);
  text-align: center;
  margin-bottom: 2rem;
}
section.formation article div h4{
  font-size: 1.4rem;
  color: var(--rouge-rose);
  margin:1rem 0 0 1rem;
}
section.formation article div p{margin-left: 5vw;}


/*print / web*/
main.print-web section{

}
main.print-web section article{
  height: 100vh;
  padding: 5%;
  place-items: center;
    width: 90%;
}
main.print-web section article img.projet{
 height: 60vh;
 width: 100%;
 object-fit: contain;
}
main.print-web section article p{
  color: var(--rouge-rose);
  font-size: 1.4rem;
  width: 100%;
  font-weight: 500;
  justify-self: center;
  padding: 1%;
  border-bottom: .1rem solid var(--rouge-rose);
  border-left: .1rem solid var(--rouge-rose);
}

/*main.print-web section article p a {
  font-size: 1.2rem;
}*/
main.print-web section article a.see-w,main.print-web section article a.see-pdf{
  margin: 5% 5% 0% 2%; 
  position: relative;
  /*z-index: -1;*/
  font-size: 1.2rem;
  font-weight: 500;
}
main.print-web section article a.see-w img, main.print-web section article a.see-pdf img{
  width: 5vh;
  margin: 2vh .5vw 0 0;
 }
main.print-web section article a.see-w img:hover, main.print-web section article a.see-pdf img:hover{transform:scale(1.2);}


footer nav{
  display: grid;
  height: 70vh;
  position: fixed;
  width: 6%;
  bottom: 10%;
  right: 0;
  grid-auto-rows: 4vh;
  justify-items: center;
  align-content: end;
}
footer nav a img{
  width: 2vw;
}
footer nav a.top img{
width: 7vw;
}



/*      responsive mobile first        */
  @media screen and (min-width: 740px) {
    header#back-accueil div, header div{height: 7.5rem;}
    header div{grid-template-columns: 6rem auto;}
    header div a{height: 7.5rem;}
    header div h1{font-size: 5rem;}
    header nav label img{
      width: 5.5rem;
      height: 5.5rem;
    }
    header nav input:checked~ul img{
      width: 7.5rem;
      height: 7.5rem;
    }

    /*header nav label{margin-left: -40rem;}*/
        footer nav{
      width: 5%;
    }
    footer nav a img{
      width: 1vw;
    }
    footer nav a.top img{
      width: 5.5vw;
    }
    section.index article.mon-accueil h1{
      font-size: 3.5rem;
    }
    section.index article h2{
      font-size: 2.5rem;
    }
        main.print-web section article{
      width: 80%;
    }
    section.apropos>div, {
      grid-template-columns: repeat(2,1fr);
      grid-column-gap: 10rem;
    }
    section.apropos article:first-of-type div:last-child , section.apropos ul:first-of-type li{text-align: left;}
    section.apropos article:last-of-type div:first-of-type , section.apropos ul:last-of-type{text-align: right;}
    section.apropos ul li{
      font-size: 2.5rem;
      line-height: 2.3rem;
    }
    section.apropos article div p, section.formation article div p{ font-size: 1.6rem; }
    section.apropos aside,section.formation aside{ font-size: 1.8rem; }
    section.apropos aside div h2, section.formation aside div h2{font-size: 3.6rem;}
    .clr-date{font-size: 1.8rem;}
    section.formation article div{
      grid-template-columns: repeat(2,1fr);
    }
    section.formation article div h3{
      font-size: 2.2rem;
    }
    section.formation article div h4{
      font-size: 2rem;
    }
  }




  @media screen and (min-width: 1000px) {
    header#back-accueil div, header div{height: 10rem;}
    header div{ grid-template-columns: 8rem auto;}
    header div a{height: 10rem;}
    header div h1{font-size: 7rem;}
    header nav input:checked~ul img{
      width: 10rem;
      height: 10rem;
    }
    footer nav{
      width: 4%;
    }
    footer nav a img{
      width: .5vw;
    }
    footer nav a.top img{
      width: 5vw;
    }
    main.print-web section article{
      width: 70%;
    }
    section.ceram figure{grid-template-columns: repeat(4,1fr);}
    main.print-web section article img.see-w{width: 6rem;}
    main.print-web section article a.see-w,main.print-web section article a.see-pdf{margin: 2% 5% 0% 2%; font-size: 1.3rem;font-size: 1.1rem;font-weight: 500;}
main.print-web section article a.see-w img, main.print-web section article a.see-pdf img{width: 5rem; padding: 1% 1% 0 1%; transform:scale(1.3);}
main.print-web section article a.see-w img:hover, main.print-web section article a.see-pdf img:hover{transform:scale(1.5);}

}
  @media screen and (min-width: 1200px){
    section.apropo{
      height: 100vh;
      padding: 0rem 0 0rem 0;

    }
    section.apropos,section.apropos>div{
      grid-template-columns: repeat(4,1fr);
    }
    section.apropos > div{grid-gap: 5%;}
    section.apropos aside{ 
      align-self: start;
      grid-template-columns: 1fr;
      grid-column: 1/span 2;
      grid-row: 1/span 1;
      padding-top: 2%;
      z-index: -1;
    }
    section.apropos aside img{
      width: 50%;
      align-self: start;
      justify-self: end;
      grid-column: 1/span 1;
      grid-row: 1/span 1;
    }
    section.apropos aside div{
     grid-template-columns: 60% 40%;
     text-align: left;
     padding-top: 20rem;
   }
   section.apropos aside div h2, section.formation aside div h2{grid-column: span 3;}
    section.apropos div{
      grid-column: 1 /span 4;
      grid-row: 1 /span 2;
    }
    section.apropos aside a.icon-cv{
      grid-column: 2/span 1;
      height: 3rem;
      margin-top: 2rem;
      font-weight: 500 !important;
  }
    section.apropos aside img.icon-cv{
/*      height: 100%;
      width: 100%;*/
/*      object-fit:contain;*/
  }
   section.apropos ul{ 
grid-row: 2;
grid-column: 1/span 2;
align-self:center;
  }
/*   section.apropos ul:last-of-type{ 
grid-row: 1;
grid-column: 1/span 2;
   }*/
   section.apropos article:first-of-type{
    grid-row: 1/span 2;
    grid-column: 3/span 1;
    grid-template-columns: 1fr;
   }
/*   section.apropos article:first-of-type,section.apropos article:last-of-type{padding-top: 20rem;}*/
   section.apropos article, section.apropos article p,section.apropos ul li{
    padding-top: 2%;
   }
   section.apropos>div{
    align-items: end;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 50vh;
  }

   section.apropos article:first-of-type,section.apropos article:last-of-type{align-self: end;}
   section.apropos article:first-of-type div:first-of-type{ grid-row: 1/span 1;}
    section.apropos article:first-of-type div:last-of-type{ grid-row: 2/span 1; }
    section.apropos article:last-of-type{
    /*grid-row: 1/span 2;*/
    grid-column: 4/span 1;
   }
  }