/*BASICS*/
@font-face {
    font-family: secFont;
    src: url(../font/nunito/Nunito-Light.ttf);
}
@font-face {
    font-family: firstFont;
    src: url(../font/poppins/Poppins-Regular.otf);
}
.fontF {
    font-family: firstFont;
}
.fontS {
    font-family: secFont;

}
h1{
    color:rgb(28, 0, 52);
    font-family: firstFont;
    font-size: xx-large;
}
h2{
    color:rgb(28, 0, 52);
    font-family: firstFont;
    height: 10px;
    width: auto;
}

p, a  {
    color:rgb(17, 0, 31);
    font-family: secFont;
}
a {
    text-decoration: none;
}

::selection {
    background-color:rgb(177, 112, 238);
}

.whiteFONT {
    color:rgb(243, 238, 247);
}


body {
    background-color:rgb(249, 240, 255);   
     
}

/* Mise en page */


@media (min-width: 60em) {
    .gridShop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
}


/*Formes*/
.bloc {
    background-color:rgb(253, 250, 255);
    height: 300px;
    width: 300px;
    border-radius: 25px;
    padding-bottom: 1em;
    box-shadow: rgb(43, 0, 71, 0.25) 0px 50px 100px -20px;
}
.bloc:hover {
    background-color:rgb(238, 235, 241);
    transform: rotate(1deg);
}
/* 
.productions_parent {
        display: flex;
    justify-content: flex-start;
} */

.productions {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    padding: 0 2rem;
    background-color:rgb(249, 240, 255);
    height: 80px;
    width: 100em;
    box-shadow: rgb(43, 0, 71, 0.25) 50px 60px 50px 3px;
}


.productions_background {
    padding-bottom: 10px;
    position: relative;
    top: -80px;
    z-index:1;
    background-color:rgb(170, 94, 221);
     height: auto;
    width: 99%;
    border-radius: 25px;
}

.textProducts {
    /* position: relative;
    left: -0.5em;
    top: -1.2em; */
    padding: 0.5em;
    /* box-shadow: rgb(43, 0, 71, 0.25) 0px 50px 100px -20px; */
    color:rgb(28, 0, 52);
    font-family: firstFont;
    font-size:xx-large;
    display: flex;
    justify-content: space-around;
}



.competencies {
    display: grid;
    grid-template-columns: 2fr 1fr  ;
    gap: 1rem;
}



.leftOfCompetencies {
    background-color: aliceblue;
    height: auto;
    width: auto;

    padding-bottom: 20px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 1em;
    padding-top: 1em;
}
.leftOfCompetencies:hover {
    background-color: rgb(214, 220, 226);
    cursor: pointer;
}

.rightOfCompetencies {
    position: relative;
    left:-20px;
    background-color: rgb(143, 0, 183);
    height: auto;
    width: auto;

    padding-bottom: 60px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-left: 1em;
    padding-top: 1em;

    color: rgb(255, 236, 254);
    font-weight: bold;

    display: flex;
    justify-content: center;
    font-size:300%;

    padding-left: 0%;
    /* padding-top: 50%; */

}

.rightOfCompetencies:hover {
    background-color: rgb(74, 0, 94);
    cursor: pointer;
}

.purpleBtn {
    padding: 0.5em;
    background-color: rgb(143, 0, 183);
    height: auto;
    width: auto;
    border-radius: 25px;
    color: rgb(255, 236, 254);

    display: flex;
    justify-content: center;

    font-weight: bold;
    border: none;
}
.purpleBtn:hover {
    background-color: rgb(74, 0, 94);
    cursor: pointer;
}


.croix {
    margin-left: 45%;
    padding: 0.5em;
    background-color: rgb(252, 242, 255);
    height: 1em;
    width: 1em;
    border-radius: 25px;
    color: rgb(26, 0, 25);

    display: flex;
    justify-content: center;

    font-weight: bold;
}

.croix:hover {
    background-color: rgb(189, 181, 192);
    cursor: pointer; 
}




/*pop up*/

.popup {
    display: none; /* caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    box-shadow: 0 0 20px rgba(42, 0, 54, 0.4);
    position: relative;
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
  }


  .imageProducts {
    margin-top:1em;
    margin-left:15%;
    border-radius: 25px;
    width: 70%;
    height: 70%;
    display: flex;
    justify-content: space-around;

  }


    .presentation_box_PARENT {
        display: flex;
        justify-content: center;
    }
    .presentation_box {
      width: 90%;
      max-width: 400px;
      background-color: rgb(222, 203, 221);
      border-radius: 25px;
      padding: 1em;
      display: flex;

      flex-direction: column;
      align-items: center;
      gap: 1em;
    }

    .presentation_box_imgLINKEDIN {
      max-width: 100%;
      height: 40px;
      border-radius: 25px;
    }
    .presentation_box h2, .presentation_box p {
      margin: 0.5em 0;
      text-align: center;
    }


  .voirCV {
    padding: 0.5em;
    background-color: rgb(143, 0, 183);
    height: 90%;
    width: 90%;
    border-radius: 25px;
    color: rgb(255, 236, 254);

    display: flex;
    justify-content: center;

    font-weight: bold;
  }


  .formulaire {
    background-color: rgb(255, 246, 255);
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    border-radius: 25px;
  }

  .center {
    display: flex;
    justify-content: center;
}


.footerBox {
  background-color: rgb(20, 0, 20);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  color: white;
  border-radius: 25px;

}

.gridFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}