/* DÉBUT GLOBAL */
@import url('clash-display.css');

:root {
  --gap: 2em;
  --bg-color: #1D1D1D;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  background-color: var(--bg-color);
  font-family: ClashDisplay-Regular, Arial;
  display: flex;
  align-items: center;
  justify-content: center;
}

h4{
  font-family: ClashDisplay-Extralight;
  color: rgba(255, 255, 255, 70%);
}

p{
  font-size: 1.25em;
}

.wrapper {
  max-width: 80%;
  margin: 3% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.divstyle{
  width: auto;
  border-radius: 20px;
  background-color: #2B2B2B;
  padding: 2em;
  color: white;
}

.wrapper a{
  text-decoration: none;
  color: white;
}

/* FIN GLOBAL */

/* DÉBUT OVERLAY */

.overlay{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(43, 43, 43, 0%), rgba(43, 43, 43, 100%));
  border-radius: 20px;
  padding: 1em;
  justify-content: flex-end;
  opacity: 0;
  transition: 0.5s;
}
.overlay h4{
  margin: 0;
}
.overlay h2{
  margin-top: 8px;
  margin-bottom: 0;
}

/* FIN OVERLAY */

/* DÉBUT DESCRIPTION */

.desc_full{
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.desc {
  flex-grow: 1;
}

.desc_suite {
  flex-grow: 1;
}

.desc h2{
  margin-top: 0px;
}
.desc p{
  margin-bottom: 0px;
}
.desc_suite p{
  margin-top: 0px;
}

.me {
  width: 40%;
  background: center url("../images/moi.png");
  background-color: #2B2B2B;
  background-size: cover;
}

.RS{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20%;
}

.reseau{
  color: white;
}

/*.imganim{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 55%;
  top: -20px;
  transform: rotate(10deg);
  transition: 0.3s;
}
.imganim:hover{
  top: -10px;
  transform: rotate(5deg);
}*/

/* FIN DESCRIPTION */

/* DÉBUT PROJETS */

.line{
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.fig {
  position: relative;
  flex-grow: 1;
  background: center url("../images/lef.png");
  background-size: cover;
}
.fig:hover .overlay{
  opacity: 1;
}


.pbp {
  position: relative;
  flex-grow: 1;
  background: center url("../images/pbp.png");
  background-size: cover;
}
.pbp:hover .overlay{
  opacity: 1;
}


.illustratio {
  position: relative;
  flex-grow: 1;
  background: center url("../images/illustratio.png");
  background-size: cover;
}
.illustratio:hover .overlay{
  opacity: 1;
}


.apps {
  position: relative;
  flex-grow: 1;
  background: center url("../images/apps.png");
  background-size: cover;
}
.apps:hover .overlay{
  opacity: 1;
}


.gala {
  position: relative;
  flex-grow: 1;
  background: center url("../images/gala.png");
  background-size: cover;
}
.gala:hover .overlay{
  opacity: 1;
}


.ocs {
  position: relative;
  flex-grow: 1;
  background: center url("../images/ocs.png");
  background-size: cover;
}
.ocs:hover .overlay{
  opacity: 1;
}


.poster {
  position: relative;
  flex-grow: 1;
  background: center url("../images/affiches.png");
  background-size: cover;
}
.poster:hover .overlay{
  opacity: 1;
}


.video {
  position: relative;
  flex-grow: 1;
  background: center url("../images/video.png");
  background-size: cover;
}
.video:hover .overlay{
  opacity: 1;
}


.empty {
  position: relative;
  flex-grow: 1;
  background-color: var(--bg-color);
  background-size: cover;
}


/**/

/* DÉBUT MEDIA QUERY */
/* 1024PX */
@media (max-width: 1024px) {
  .me{
    display: none;
  }
  .overlay{
    opacity: 1;
    transition: 0.5s;
  }
}

/* 700PX */
@media (max-width: 700px) {
  .desc_full{
    flex-direction: column;
  }
  .line{
    height: 80vh;
    flex-direction: column;
  }
}