:root {
  --bgColor: #0fddaf;
  --txtColor: #ffffff;
  --borColor: rgba(0, 0, 0, 0);
  --sizeVar: 8px;
  --textPrimary: #4b4760;
  --textSecondary: #7f7989;
  --borderColor: #cccccc;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  text-decoration: none !important;
  list-style: none !important;
  scroll-behavior: smooth;
}

body {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

section {
  height: 100vh;
}

img {
  max-width: 100%;
}

/* BANNIERE - ACCUEIL */

.banniere {
  background: url(../img/nasa-Q1p7bh3SHj8-unsplash.jpg) no-repeat;
  background-size: cover;
  display: flex;
  background-position: center;
  /* justify-content: center; */
  align-items: center;
  /* height: 90vh; */
}

#accueil {
  padding-top: 5em;
}

.btn-cv {
  padding: 10px;
  border-radius: 10px;
  background: black;
  color: orange;
  font-size: 1.2em;
}
/*=================================================
                A    P R O P O S 
===================================================*/

.a-propos {
  background-color: #1b2838;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentation {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.presentation p {
  line-height: 45px;
  font-size: 1.2rem;
  font-weight: 400;
}

.separation {
  background-color: orange;
}

.a-propos-image {
  width: 30%;
}

.a-propos-image img {
  filter: drop-shadow(0.1rem 0.3rem orange);
  border-radius: 10%;
}

.a-propos-petit {
  display: none;
}
/*=================================================
                C O M P E T E N C E S 
===================================================*/

.competences {
  /* background: rgba(95, 152, 199, 0.783); */
  background-color: #d5d4d5;
}

.contenu {
  position: relative;
  width: 310px;
  margin: 100px auto 0 auto;
  perspective: 2000px;
}

.carousel {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate360 30s infinite forwards linear;
}
.carousel__face {
  position: absolute;
  width: 280px;
  height: 200px;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

.carousel__face:nth-child(1) {
  background-image: url("../img/glpi.png");
  transform: rotateY(0deg) translateZ(430px);
}
.carousel__face:nth-child(2) {
  background-image: url("../img/windows.png");
  transform: rotateY(40deg) translateZ(430px);
}
.carousel__face:nth-child(3) {
  background-image: url("../img/Veeam.jpg");
  transform: rotateY(80deg) translateZ(430px);
}
.carousel__face:nth-child(4) {
  background-image: url("../img/VMwareWS.png");
  transform: rotateY(120deg) translateZ(430px);
}
.carousel__face:nth-child(5) {
  background-image: url("../img/az900.jpg");
  transform: rotateY(160deg) translateZ(430px);
}
.carousel__face:nth-child(6) {
  background-image: url("../img/linux.webp");
  transform: rotateY(200deg) translateZ(430px);
}
.carousel__face:nth-child(7) {
  background-image: url("../img/packet tracer.png");
  transform: rotateY(240deg) translateZ(430px);
}
.carousel__face:nth-child(8) {
  background-image: url("../img/rds_classique.png");
  transform: rotateY(280deg) translateZ(430px);
}
.carousel__face:nth-child(9) {
  background-image: url("../img/truenas.png");
  transform: rotateY(320deg) translateZ(430px);
}
.carousel__face:nth-child(10) {
  background-image: url("../img/pfsense.png");
  transform: rotateY(320deg) translateZ(430px);
}
.carousel__face:nth-child(11) {
  background-image: url("../img/ActiveDirectory.png");
  transform: rotateY(320deg) translateZ(430px);
}
.carousel__face:nth-child(12) {
  background-image: url("../img/wds.jpg");
  transform: rotateY(320deg) translateZ(430px);
}

@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.petitCompetences {
  border: 2px solid red;
  display: none;
  /* visibility: hidden; */
}

@media only screen and (max-width: 768px) {
  @keyframes rotate360 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(0deg);
    }
  }

  .competences {
    display: none;
    /* border: 2px solid green; */
  }

  .petitCompetences {
    border: 2px solid red !important;
    display: contents;
    /* padding-top: 20px; */
  }

  .caroupetit {
    background-color: #0fddaf;
    border: 2px solid blue;

    /* display: flex; */
    /* height: 60vh; */
    /* align-items: center; */
  }
  /* .titre-competence-petit {
    display: flex;
  } */

  .carousel-item img {
    /* width: 100px; */
    /* margin-left: 50px; */
  }

  .separation {
    display: none;
  }
  /* *************************************** */
  /* *************************************** */
  .a-propos {
    display: none;
  }

  .a-propos-petit {
    background-color: #1b2838;
    display: flex;
  }

  .presentation p {
    line-height: 30px;
    font-size: 1rem;
    font-weight: 400;
  }

  .presentation-petit {
    display: flex;
    color: #fff;
    line-height: 40px;
    font-size: 1.2rem;
    font-weight: 400;
  }

  .presentation-petit p {
    width: 80%;
  }

  .a-propos-petit img {
    filter: drop-shadow(0.1rem 0.3rem orange);
    border-radius: 10%;
    width: 60%;
    margin-left: 30px;
  }
}

/*=================================================
              C E R T I F I C A T I O N S 
===================================================*/

@media screen and (max-width: 768px) {
  .certifications {
    height: 200vh;
  }

  .certifications .content {
    flex-direction: column; /* Afficher les certifications en colonne sur les petits écrans */
    display: flex;
    background-color: #171a21;
    gap: 50px; /* Espacement vertical entre les cubes */

    /* margin: 100px auto 0 auto; */
  }

  .cube-container {
    max-width: 200px; /* Utiliser toute la largeur de l'écran */
    height: auto; /* Ajuste la hauteur automatiquement en fonction du contenu */
    margin-bottom: 20px;
    height: auto;
  }
}
.certifications {
  overflow: hidden;
  /* border: 5px solid green; */
  font: 1em/1.5 "Open Sans", sans-serif;
  background-color: #171a21;
}

.certifications .content {
  margin: 100px auto 0 auto;
  /* border: 2px solid blue; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cube-container {
  /* border: 2px solid red; */
  max-width: 200px;
  height: 200px;

  text-align: center;
}
.back a {
  text-decoration: none;
}
h3 {
  font-size: 1.3em;
  line-height: 1.25em;
  margin-top: 0.85em;
  margin-bottom: 0.5em;
}
p {
  font-size: 0.875em;
  line-height: 1.4;
  margin: 0 0 1.5em;
}

.button {
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-transform: uppercase;
  padding: 1em;
  width: 100%;
  border-radius: 0.5em;
  background: rgba(74, 137, 202, 0.8);
  margin: auto;
}
/* Button Transitions*/
.button {
  /* transition: background 0.3s; */
}
.button:hover {
  background: rgba(74, 137, 202, 1);
}

.photo-desc {
  font-size: 0.85em;
  color: #fff;
  padding: 1.1em 1em 0;
  background: #345d88;
}

.cube-container {
  box-shadow: 0 18px 40px 5px rgba(0, 0, 0, 0.4);
  perspective: 800px;
}
.photo-cube {
  transition: transform 2s ease-in-out;
  width: 220px;
  height: 200px;
  transform-style: preserve-3d;
}

.photo-cube:hover {
  transform: rotateY(-270deg);
}

.front,
.back,
.left,
.right {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.front {
  transform: translate3d(0, 0, 110px);
}

.back {
  transform: translateZ(-110px) rotateY(270deg);
  transform-origin: center left;
}

.left {
  transform: rotateY(-270deg) translate3d(110px, 0, 0);
  transform-origin: top right;
}

.right {
  transform: translateZ(-110px) rotateY(180deg);
}
/*=================================================
                    REALISATIONS 
===================================================*/

#realisation {
  /* border: 2px solid red; */
  background: url("../img/fondBleu.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

.projects {
  padding-top: 8em;
}

/* DEBUT MENU  */

.btnDiv {
  width: fit-content;
}

.selectWrapper {
  width: 100%;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms linear 0s;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24));
  padding-top: calc(var(--sizeVar) / 2);
}
.multiSelect {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  border: 1px solid var(--borderColor);
  box-sizing: border-box;
  border-radius: calc(var(--sizeVar) / 2);
  position: absolute;
  width: auto;
  left: 0;
  right: 0;
  overflow: hidden;
  background: #ffffff;
  transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
}
.multiSelect div {
  color: var(--textPrimary);
  padding: 16px;
  width: auto;
  cursor: pointer;
}
.multiSelect div:hover {
  background-color: #f6f6f6;
}

.multiSelect {
  transform: translateX(100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.multiSelect:nth-of-type(1) {
  transform: translateX(0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.sec_btn {
  --bgColor: #869cff;
  border-radius: 10px;
}
button {
  font-family: "Roboto", sans-serif;
  font-size: calc(var(--sizeVar) * 1.75);
  font-weight: 500;
  border: none;
  outline: none;
  padding: var(--sizeVar) calc(var(--sizeVar) * 2);
  border-radius: calc(var(--sizeVar) / 2);
  cursor: pointer;
  background-color: var(--bgColor);
  color: var(--txtColor);
  box-shadow: 0 0 0 1px var(--borColor) inset;
}
button:focus {
  --borColor: rgba(0, 0, 0, 0.4);
}
button:hover {
  --bgColor: #1fcc9e;
}
.sec_btn:hover {
  --bgColor: #6279e7;
}

button:active {
  --bgColor: #1db284;
}
.sec_btn:active {
  --bgColor: #5468c7;
}

/* FIN MENU */

.carteRealisation {
  border-radius: 24px;
  background-color: #7bafc9;
}

.carteRealisation img {
  height: 220px;
}

.carteRealisation img {
  border-radius: 24px;
}

#bilan {
  /* border: 2px solid red; */
  background: url("../img/fondBleu.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  height: auto;
}