body {
  background-attachment: fixed;
  line-height: 1.2;
}


/* Section Présentation profil Début */
section {
  position: inherit;
  width: initial;
  height: initial;
}
section > div {
  display: block;
  height: initial;
}
.mySection {
  position: inherit;
  width: 100vw;
  height: initial;
}
.my {
  padding-top: 100px;
  line-height: 36px;
  display: block;
  height: initial;
}
.name {
  font-family: "Prompt", cursive;
  text-align: center;
  font-weight: 500;
  font-size: 1.5rem;
  color: #000;
}
.age {
  font-family: "Prompt", cursive;
  text-align: center;
  font-weight: 500;
  font-size: 1.5rem;
  color: #000;
}
.fiche {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  margin: 50px auto;
}

.metier,
.coord {
  flex: 33%;
  height: auto;
  font-size: 1.2rem;
  font-weight: 300;
  display: flex;
}
.metier {
  background-color: #fff;
}
.avatar {
  text-align: center;
  width: 300px;
  margin: 0 30px;
}
.avatar > img {
  height: 300px;
  width: 300px;
}
.metier > ol,
.coord > ol {
  margin: auto;
  width: 350px;
}
.metier > ol > li,
.coord > ol > li {
  display: flex;
  align-items: center;
}
.trait {
  border-bottom: 0.5px solid #707070;
  margin: 4%;
  width: 300px;
}
.puces {
  width: 66px;
}
.coord {
  background-color: #d1f1fab8;
}
.gps {
  width: 38px;
  height: 53px;
  margin: 6%;
}
.car {
  width: 49px;
  margin: 5%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  background-color: #fff8;
  color:#505050;
  margin: 100px auto;
}
.content > p {
  flex: 33%;
  font-size: 1.2em;
  margin: 20px auto;
  padding: 30px 100px;
}
.links {
  width: 8%;
  margin: auto 20px;
  text-align: center;
}
a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  cursor: url("./../img/Hand.webp"), default;
}
a:hover {
  color: #1e9dd8;
}
/* Section Présentation profil Fin */

/* Section Expériences + Formations + Compétences Informatiques Début */
.XP {
  display: flex;
  flex-wrap: wrap;
  color:#505050;
}
.slick-dots {
bottom: -25px;
}
.slick-track {
  width: 100vw;
}

.slick-slide > div{
  width: 100%;
}

/* Section Expériences Début */
.expPro,
.formations,
.compInfo {
  flex: 33%;
  position: relative;
  padding-left: 3%;
  border-right: 0.5px solid #7070707d;
}

.expPro {
  background-color: #fff7;
  padding-bottom: 30%;
}
.formations {
  background-color: #d1f1fab8;
  padding-bottom: 50%;
}
.enseigne > img {
  width: 100px;
}
.diamond {
  border-radius: 20%;
  /* border: 1px solid #000; */
  /* transform: translate(-40%, -40%); */
  /* position: relative; */
  width: 20px;
  height: 20px;
  background-color: #000;
  margin: auto 5px;
  transform: rotate(45deg);
  /*  left: 43px;
  top: 42px; */
}
.date {
  padding-right: 2.5px;
}
.date,
.time {
  font-size: 1.1rem;
  margin: auto 0;
  font-weight: 400;
}
.enseigne {
  margin: auto 20px;
  width: 100px;
}
.desc {
  margin: auto 0;
}
.compInfo {
  background-color: #fff8;
  padding-bottom: 30%;
 
}
.CI > .exp > .diamond {
  margin: 0;
}
h3 {
  font-family: "Prompt", cursive;
  font-weight: 500;
  font-size: 1.2rem;
  color: #000;
  margin: 20px 0px;
}
.EP,
.F,
.CI {
  position: relative;
}
.barreExp {
  position: absolute;
  left: 54px;
  width: 0%;
  height: 102.604%;
  top: 0px;
}
.lineExp {
  position: relative;
  width: 0%;
  height: 96.83%;
  border: 2px solid #1157b7;
  padding: 0;
}
.barreFormations {
  position: absolute;
  left: 54px;
  width: 0%;
  height: 109.228%;
  top: 0px;
}
.lineFormations {
  position: relative;
  width: 0%;
  border: 2px solid #1157b7;
  height: 97.203%;
  padding: 0;
}
.barreCompInfo {
  position: absolute;
  left: 8px;
  width: 0%;
  height: 104.397%;
  top: -20px;
}
.lineCompInfo {
  position: relative;
  width: 0%;
  border: 2px solid #1157b7;
  height: 97.925%;
  padding: 0;
}
.square1 {
  position: relative;
  border: 2px solid #1157b7;
  padding: 0;
  top: -10px;
}
.square2 {
  position: relative;
  border: 2px solid #1157b7;
  padding: 0;
  top: -5px;
}
.square3 {
  position: relative;
  border: 2px solid #1157b7;
  padding: 0;
  bottom: -5px;
}
.square4 {
  position: relative;
  border: 2px solid #1157b7;
  padding: 0;
  bottom: -10px;
}
.exp {
  position: relative;
  display: flex;
  margin-top: 59px;
}
.exp > .desc {
  width: 52%;
}
.EP > .exp:nth-last-child(-n + 2) > .desc {
  padding-left: 20px;
}
H4 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #000;
}

.exp > .point {
  width: 8px;
  margin: auto 0;
  cursor: url("./../img/Hand.webp"), default;
  color: #000;
}
.exp > .point > a > menu > li {
  font-size: 25px;
  line-height: 15px;
}
.blocker{
  z-index: 22;
}
.modal {
  max-width: 700px;
  font-size: 1.2rem;
}
.modal > h4 {
  font-family: "Prompt", cursive;
  font-size: 1.5rem;
  text-align: center;
}
.modal > div {
  margin: 20px;
}
.modal > div > h5 {
  font-family: "Prompt", cursive;
  font-size: 1.3rem;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 5px;
}
.modal > div > fieldset {
  border-top: 1px dashed lightgrey;
  padding-bottom: 5px;
}
.modal > div > fieldset > legend {
  padding: 5px;
  /* color: #1e9dd8; */
  font-family: "Prompt", cursive;
  font-weight: 300;
}
.modal > div > fieldset > ul {
  display: none;
  margin: 0 5px;
}
.modal > p {
  text-align: right;
  font-style: italic;
}

.modal a.close-modal {
  background-image: url("../profil/img/Btn_close.svg");
  top: -20.5px;
  right: -20.5px;
}

.close-modal {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../profil/img/Btn_close.svg");
}
/* Section Expériences Fin */

/* Section Formations Début */
.F > .exp:nth-last-child(-n + 3) > .desc {
  padding-left: 20px;
}
/* Section Formations Fin */

/* Section Compétences Informatiques Début */
.CI > .exp {
  margin-top: 70px;
}
.CI > .exp > .desc {
  margin-left: 30px;
  width: 52%;
}
.logiciel > .app {
  position: relative;
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  width: 400px;
}
.logiciel > .app > :nth-child(1) {
  flex: 1;
}
.logiciel > .app > :nth-child(3) {
  font-size: 0.9rem;
}
.total {
  width: 190px;
  height: 15px;
  background-color: #b4eafa;
  position: relative;
  width: 190px;
}
.logiciel > .app > :nth-child(3) {
  margin: auto 10px;
}
.pourcentage20 {
  width: 20%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage35 {
  width: 35%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage45 {
  width: 45%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage50 {
  width: 50%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage55 {
  width: 55%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage60 {
  width: 60%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage70 {
  width: 70%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage80 {
  width: 80%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage90 {
  width: 90%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
.pourcentage95 {
  width: 95%;
  height: 15px;
  background-color: #1e9dd8;
  position: relative;
}
/* Section Compétences Informatiques Fin */
/* Section Expériences + Formations + Compétences Informatiques Fin */

/* Section Activités + Info Complémentaires Début */
/* Activités */
.activity {
  background-color: #fff8;
  margin :  50px auto;
  padding:30px 0;
}
.activity > h3 {
  padding: 0px 120px;
  margin: 0;
}
.action-benevol {
  display: flex;
  flex-wrap: wrap;
  color:#505050;
}
.benevolat {
  flex: 33%;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin: 20px auto;
  padding: 10px 62px;
}
.benevolat > ul {
  list-style: "-  ";
  padding-left: 20px;
}
/* Fin Activités */

/* Début Info Complémentaires */
.infoComp {
  display: flex;
  flex-wrap: wrap;
  margin: 80px auto;
}

.interet,
.langues,
.loisirs {
  flex: calc(33% - 10%);
  font-size: 1rem;
  font-weight: 300;
  padding:  10px  120px 20px;
}
.infoComp > div > h3 {
  margin: 20px 0 30px;
}
.infoComp > .langues > h3,
.infoComp > .loisirs > h3 {
  text-align: center;
  justify-content: center;
}
.interet {
  background-color: #fff;
}
.interet > p {
  margin: 10px auto;
}
.langues > div,
.loisirs > div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.langues > div {
  justify-content: inherit;
  margin: auto 150px;
}
.en {
  width: 80px;
}
.es {
  width: 80px;
}
.langues > div > p {
  padding-left: 30px;
}

.loisirs {
  background-color: #e8faff;
}
.loisirs > div > img {
  width: 85px;
  height: auto;
  margin: 15px;
}
/* Fin Info Complémentaires */
/* Section Activités + Info Complémentaires Fin */
/* Début Document */
.documents {
  background: #b4eafa80;
  padding: 10px 0px 40px;
}
.documents > H3 {
  text-align: center;
}
.documentProfil  {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}
.documentProfil > div {
  width: 30%; 
  margin: auto 10px;
  text-align: center;
  padding:10px;
}
.documentProfil p {
  padding-bottom: 20px;
}
.documentProfil  a {
  font-family: "Expletus Sans", cursive;
  font-size: 1.2em;
  font-weight: bold;
  background: linear-gradient(#00d6ff, #0096ff);
  border-radius: 10px;
  color: #fff;
  cursor: url("./../img/Hand.webp"), default;
  padding: 0.5em;
}
/* Fin Document */


@media all and (min-width: 200px) and (max-width: 299px) {
  .slick-track {
    width: initial;
  }
  
  .slick-slide > div{
    width: initial;
  }
}
@media all and (min-width: 300px) and (max-width: 599px) {
  .my {
    padding-top: 90px;
  }
  .name,
  .age {
    font-size: 1.3rem;
  }
  .fiche {
    margin: auto;
    height: initial;
  }
  .metier,
  .coord {
    width: auto;
    margin: auto 20px;
    font-size: 1rem;
    flex: 100%;
    padding: 1%;
  }
  .metier > ol, .coord > ol {
    width: 200px;
  }
  .metier {
    order: 2;
    margin-top:10px;
  }
  .puces {
    width: 36px;
  }
  .trait {
    width: 200px;
  }
  .avatar {
    order: 1;
    width: 150px;
    margin: auto;
    flex: 100%;
  }
  .avatar > img {
    height: 150px;
    width: 150px;
  }
  .coord {
    order: 3;
  }
  .gps {
    height: 28.42px;
    width: 20.17px;
  }
  .car {
    width: 26.24px;
  }
  .content {
    padding: 20px;
    margin: 20px auto;
  }
  .content > p {
    font-size: 16px;
    flex: 100%;
    margin: 10px auto;
    padding: 0px 20px;
  }
  .links {
    order: 3;
    margin: auto;
    width: 100%;
  }
  .links > a > svg {
    width: 37.27px;
  }
  .date, .time {
    font-size: 0.7rem;
  }
  .barreFormations , .barreExp{
    left: 40px;
  }
  .enseigne {
    width: 50px;
    margin : auto  10px;
  }
  .enseigne > img {
    width: inherit;
  }
  .CI > .exp > .desc {
    margin-left: 10px;
    width: 90%;
  }
  .logiciel > .app {
    width:260px ;
  }
  .total {
    width: 120px;
  }
  .slick-track {
    width: initial;
  }
  
  .slick-slide > div{
    width: initial;
  }
  .activity > h3 {
    padding : 0 20px;
  }
  .benevolat {
    padding : 10px 20px;
  }
  .infoComp {
    margin: auto ;
  }
  .interet, .langues, .loisirs {
    height: auto;
    flex:100%;
    padding:20px;
  }
  .langues > div, .loisirs > div {
    margin:auto 15%;
  }
  .loisirs> div > img, .en, .es  {
    width: 40px;
  }
  .documentProfil > div {
    width: 75%;
    margin:10px;
  }
}
@media all and (min-width: 600px) and (max-width: 789px) {
  .my {
    padding-top: 90px;
  }
  .name,
  .age {
    font-size: 1.3rem;
  }
  .fiche {
    margin: 10px 50px;
    height: initial;
  }
  .metier,
  .coord {
    width: 300px;
    margin: auto 100px;
    font-size: 1rem;
    flex: 100%;
    padding: 1%;
  }
  .metier > ol, .coord > ol {
    width: 250px;
  }
  .metier {
    order: 2;
  }
  .puces {
    width: 36px;
  }
  .trait {
    width: 200px;
  }
  .avatar {
    order: 1;
    width: 150px;
    margin: auto;
    flex: 100%;
  }
  .avatar > img {
    height: 150px;
    width: 150px;
  }
  .coord {
    order: 3;
  }
  .gps {
    height: 28.42px;
    width: 20.17px;
  }
  .car {
    width: 26.24px;
  }
  .content {
    padding: 20px;
    margin: 30px 50px;
  }
  .content > p {
    font-size: 16px;
    flex: 100%;
    margin: 10px auto;
    padding: 0px 20px;
  }
  .links {
    order: 3;
    margin: auto;
    width: 100%;
  }
  .links > a > svg {
    width: 37.27px;
  }
  .enseigne {
    width: 60px;
    margin : auto  10px;
  }
  .enseigne > img {
    width: inherit;
  }
  .slick-track {
    width: initial;
  }
  .slick-slide > div{
    width: initial;
  }
  .activity, .infoComp{
    height: auto;
    margin: 0;
  }
  .activity > h3 {
    padding : 0 30px;
  }
  .benevolat {
    padding : 10px 30px;
  }
  .infoComp {
    margin: auto ;
  }
  .interet, .langues, .loisirs {
    height: auto;
    flex:100%;
    padding:30px 30px;
  }
  .langues > div, .loisirs > div {
    margin:auto 35%;
  }
  .loisirs> div > img, .en, .es  {
    width: 40px;
  }
  .documentProfil > div {
    width: 45%;
    margin:10px;
  }
}
@media all and (min-width: 790px) and (max-width: 1039px) {
  .fiche {
    margin: 10px auto;
    height: initial;
    margin :auto 50px;
  }
  .metier,
  .coord {
    flex: 100%;
    margin: auto 150px;
  }
  .metier {
    order: 2;
  }
  .avatar {
    order: 1;
    width: 150px;
    margin: auto;
    flex: 100%;
  }
  .coord {
    order: 3;
  }
  .content {
    padding: 20px 150px;
    margin: 30px 50px;
  }
  .content > p {
    flex: 100%;
    margin: 10px auto;
    padding: 0px 20px;
  }
  .links {
    order: 3;
    margin: auto;
    width: 100%;
  }
  .CI .exp > .desc {
    width: 77%;
  }
  .enseigne {
    width: 70px;
    margin : auto  10px;
  }
  .enseigne > img {
    width: inherit;
  }
  .logiciel >  .app {
    width: 333px;
  }
  .slick-track {
    width: initial;
  }
  .slick-slide > div{
    width: initial;
  }
  .activity{
    padding: 20px 40px;
  }
  .activity > div {
    display: block;
  }
  .activity > h3 {
    padding: 0px 32px;
  }
  .benevolat {
    padding : 10px 32px;
  }
  .infoComp {
    height: initial;
  }
  .interet,
  .langues,
  .loisirs {
    padding: 10px 62px 20px;
    width: 50%;
  }
  .langues > div {
    margin: auto 20px;
  }

}
@media all and (min-width: 1040px) and (max-width: 1439px) {
  .fiche{
    height: initial;
  }
  .avatar{
    margin:0 auto ;
  }
  .avatar > img{
    width: 200px;
    height: 200px;
  }
  .puce {
    margin: 0 auto 40px;
  }
  .content {
    margin : 50px auto;
  }
  .content > p {
    padding: 30px;
  }
  .links {
    width: 11%;
    margin: auto;
  }
  .expPro,
  .formations,
  .compInfo {
    width: 33%;
    padding-left: 2%;
  }
  .EP > .exp:nth-last-child(-n + 2) > .desc {
    width: 280px;
  }
  .F > .exp:nth-last-child(-n + 3) > .desc {
    width: 280px;
  }
  .CI > .exp > .desc {
    margin-left: 10px;
    width: 66%;
  }
  .exp > .desc {
    width:42%;
    margin-right: 10px;
  }
  .enseigne {
    margin: auto 10px;
    width: 75px;
  }
  .enseigne > img {
    width: 75px;
  }
  .logiciel > .app {
    flex-wrap: wrap;
    width: 265px;
  }
  .logiciel > .app > .total {
    width: 115px;
  }
  .activity > h3 {
    padding: 0px 60px;
  }
  .interet,
  .langues,
  .loisirs {
    padding: 10px 40px 20px;
    width: 33%;
  }
  .langues > div {
    margin: auto 40px;
  }
  .en , .es{
    width: 75px;
  }
  .loisirs > div > img {
    width: 75px;
  }

}
@media all and (min-width: 1440px) and (max-width: 1919px) {

  .content > p {
    padding: 30px 65px;
  }
  .expPro,
  .formations,
  .compInfo {
    width: 33%;
    padding-left: 2%;
  }
  .enseigne {
    margin: auto 10px;
    width: 80px;
  }
  .enseigne > img {
    width: 80px;
  }
  .logiciel > .app {
    width: 360px;
  }
  .activity > h3 {
    padding: 0px 42px;
  }
  .benevolat {
    padding:10px 42px;
  }
  .interet,
  .langues,
  .loisirs {
    padding: 10px 42px 20px;
  }
  .langues > div {
    margin: auto 100px;
  }
}
@media all and (min-width: 1920px) and (max-width: 3000px) {
 .links {
  width: 6%;
 }
 
  .activity > div > div {
    padding: 10px 62px;
  }

}