* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --transition: cubic-bezier(0.1, 0.7, 0, 1);
  }
  /* Supprime l'affichage du titre de la page*/
  .entry-title {
    display: none !important;
}
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
    }
}
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
    }
}

/*-----------------------------------------------------------------------------------------
----------------------- Divider mouvant  ----------------------------------------------------
-------------------------------------------------------------------------------------------*/
.test{
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  transform: rotate(180deg);
  line-height: 0;
}
.test .svg-fill{
  fill: #0F1926;
}
/*-----------------------------------------------------------------------------------------
----------------------- A propos -------------------- -------------------------------------
-------------------------------------------------------------------------------------------*/ 

.skills-container {
    width: 90%;
    /* max-width: 400px; */
    /* margin: auto; */
}

.skill {
    margin-bottom: 20px;
}

.skill-name {
    font-size: 1rem;
    /* font-weight: bold; */
    margin-bottom: 5px;
    color : #f8f8f8
}

.skill-bar {
    width: 100%;
    height: 10px;
    background: #f8f8f8;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.skill-active {
    height: 100%;
    background: linear-gradient(90deg, #445f88, #afd3ec);
    width: 0;
    border-radius: 5px;
    position: relative;
    transition: width 1.5s ease-in-out;
}
/* 
.tooltip {
    position: absolute;
    top: -25px;
    right: 0;
    background: #333;
    color: #fff;
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
} */
/*-----------------------------------------------------------------------------------------
----------------------- Images en V ------------------ -------------------------------------
-------------------------------------------------------------------------------------------*/ 
.mdw-gradient{
    --gradient-color-1: var(--e-global-color-b3363e2);
    --gradient-color-2: var(--e-global-color-824f2b7);
    --gradient-color-3: var(--e-global-color-secondary);
    --gradient-color-4: var(--e-global-color-824f2b7);
    --gradient-color-5: var(--e-global-color-b3363e2);
}
.mdw-card-portfolio{
    --image-height: 45vh;
    --image-width: 60vh;
    --maximum-move: 80vh;
    --maximum-rotate: 6deg;
}
.mdw-card-portfolio-image-left,
.mdw-card-portfolio-image-right{
    will-change: transform;
}
.mdw-card-portfolio-image-left img,
.mdw-card-portfolio-image-right img{
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
}
/* Tablet Device */
@media (max-width: 1024px){
.mdw-card-portfolio{
    --image-height: 45vh;
    --image-width: 60vh;
    --maximum-move: 65vh;
    --maximum-rotate: 6deg;
}
}
/* Mobile Device */
@media (max-width: 767px){
.mdw-card-portfolio{
    --image-height: 375px;
    --image-width: 450px;
    --maximum-move: 400px;
    --maximum-rotate: 3deg;
    }
    .mdw-card-portfolio-image-left{
        transition: all 0.6s ease-in-out;
        transform: translateX(-30px) rotate(-1deg) !important;
    }
    .mdw-card-portfolio-image-right{
        transition: all 0.6s ease-in-out;
        transform: translateX(30px) rotate(1deg) !important;
    }
    .mdw-card-portfolio.passed .mdw-card-portfolio-image-left{
        transition: all 0.8s ease-in-out;
        transform: translateX(calc(-1*var(--maximum-move))) rotate(calc(-1*var(--maximum-rotate))) !important;
    }
    .mdw-card-portfolio.passed .mdw-card-portfolio-image-right{
        transition: all 0.8s ease-in-out;
        transform: translateX(calc(1*var(--maximum-move))) rotate(calc(1*var(--maximum-rotate))) !important;
    }
}
/* CSS code for gradient background */
.mdw-gradient .elementor-widget-container{
    background: var(--gradient-color-1,#fff);
    background: linear-gradient(90deg, var(--gradient-color-1,#fff) 0%, var(--gradient-color-2,#fff) 25%, var(--gradient-color-3,#fff) 50%, var(--gradient-color-4,#fff) 75%, var(--gradient-color-5,#fff) 100%);
}
.mdw-gradient.elementor-widget-heading .elementor-widget-container{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* CSS code for improving entrance animation */
.fadeInUp {
    animation: mdwFadeInUp 1s ease-in-out forwards !important;
}
.fadeIn {
    animation: fadeIn 1.3s ease-in-out 0.5s forwards !important;
    opacity: 0;
}
@keyframes mdwFadeInUp{
0%{
    transform: translateY(50px);
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
100%{
    transform: translateY(0);
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
/*-----------------------------------------------------------------------------------------
----------------------- lune rose -------------------------------------
-------------------------------------------------------------------------------------------*/ 
.sticky-container  {
    position: sticky !important;
    top: 100px; /*  Détermine à quelle distance du haut de la page le conteneur devient "sticky" */
    z-index: 10; /* Ajustez selon votre besoin pour éviter que le sticky soit caché par d'autres éléments */
    overflow :visible;
}
.stickey_circle_wrap, body, html {
    overflow: visible !important;
}
/*-----------------------------------------------------------------------------------------
----------------------- DESIGN  ------------------------------------------------------------
-------------------------------------------------------------------------------------------*/ 

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
}
.imgs-parent {
  display: flex;
  gap: 0.4rem;
  perspective: 60rem;
  height : 40vh;
}


.wave {
  width: 8.0rem;
  height: 19rem;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 1.25s var(--transition), filter 3s var(--transition), width 0.3s var(--transition);
  position: relative;
  filter: grayscale(0) brightness(0.7);
  will-change: transform, filter;
  border-radius: 8px;
}
.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  color: white;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wave h3 {
  font-size: 14px !important;
  margin-bottom: 5px;
}
/* Button */
/* .btn {
  display: inline-block;
   font-family: "Montserrat", Sans-serif;
  padding: 4px 10px;
background-color: transparent;
    background-image: linear-gradient(140deg, #0071E3 42%, #25409E 100%);
  color: white;
  text-decoration: none;
  font-size: 12px;
      font-weight: 600;
       fill: #000000;
  border-radius: 15px;
  text-align: center;
  transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 8px;
text-decoration: none !important;
}
.wave:hover .btn,
.wave:hover .content {
  opacity: 1;
  visibility: visible;
}
.btn:hover {
  background-color: #005bb5;
} */
/*hover*/
.wave:hover {
  transform: translateZ(17.375rem);
  filter: grayscale(0) brightness(0.9);
}
.wave:hover .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 100%;
  right: -1.25rem;
}
.wave::after {
  left: -1.25rem;
}
.wave:hover + * {
  transform: translateZ(14.77rem) rotateY(35deg);
  filter: grayscale(0.2) brightness(0.9);
  z-index: -1;
}
.wave:hover + * + * {
  transform: translateZ(9.73rem) rotateY(40deg);
  filter: grayscale(0.4) brightness(0.8);
  z-index: -2;
}
.wave:hover + * + * + * {
  transform: translateZ(4.17rem) rotateY(35deg);
  filter: grayscale(0.6) brightness(0.7);
  z-index: -3;
}
.wave:hover + * + * + * + * {
  transform: translateZ(1.1rem) rotateY(25deg);
  filter: grayscale(0.8) brightness(0.6);
  z-index: -4;
}
.wave:has(+ :hover) {
  transform: translateZ(14.77rem) rotateY(-35deg);
  filter: grayscale(0.2) brightness(0.9);
}
.wave:has(+ * + :hover) {
  transform: translateZ(9.73rem) rotateY(-40deg);
  filter: grayscale(0.4) brightness(0.8);
}
.wave:has(+ * + * + :hover) {
  transform: translateZ(4.17rem) rotateY(-35deg);
  filter: grayscale(0.6) brightness(0.7);
}
.wave:has(+ * + * + * + :hover) {
  transform: translateZ(1.1rem) rotateY(-25deg);
  filter: grayscale(0.8) brightness(0.6);
}
.open {
  width: 25vw;
  transform: translateZ(17.375rem);
  filter: inherit;
  z-index: 1;
  margin: 0 0.45vw;
}
@media (max-width: 1024px) {
  .wave {
    width: 6.0rem;
    height: 14.25rem;
  }

  .wave:hover {
    transform: translateZ(17.375rem);
    filter: inherit;
  }

  .open {
    width: 20vw;
    transform: translateZ(7.375rem);
    filter: inherit;
    z-index: 1;
    margin: 0 0.45vw;
  }

  .open h3 {
    font-size: 8px;
  }

  .btn {
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 10px;
  }
}
@media (max-width: 737px) {
    .wave {
      width: 3.0rem;
      height: 5.54rem;
    }
}
/*-----------------------------------------------------------------------------------------
----------------------- LECTURE VIDEO--------------------------------------------------------
-------------------------------------------------------------------------------------------*/ 
.lecturevideo{
    cursor: pointer;
}
@media (max-width: 767px) {
    .lecturevideo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    .elementor-background-video-container,
    .elementor-background-video-hosted {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}
/*-----------------------------------------------------------------------------------------
----------------------- Formulaire de contact  ----------------------------------------------
-------------------------------------------------------------------------------------------*/
.hidden-fields-container{
	border:none;
	padding : 0;
}

.form-group {
    margin-bottom: 1rem;
}
.formEmail{
    width : 100%;
}
.input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #f8f8f8;
    background-color:#F8F8F8;
    border-radius: 5px;
    font-size: 1rem;
}
.form-group>h4, label {
    color: #f8f8f8;
    margin-bottom: 5px;
    display: block;
}
.privacy-label {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre la case à cocher et le texte */
}
.privacy-text {
    font-size: 0.8rem;
    color: #F8F8F8;
    margin: -30px 0 5px 21px;
}
.submitBtn{
    text-align:center;
}
.submitBtn input {
    background-color: #2E4D71;
    color: #F8F8F8;
    border: none;
    padding: 16px 60px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 100px;
    transition: transform 0.3s ease-in-out;
}

.submitBtn input:hover {
    background-color: #afd3ec;
    border: 1px solid #0F1926;
    color : #0F1926;
}
.honeypot-container, .wpcf7-spinner{
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
}
.wpcf7-form-control.wpcf7-textarea {
    height: 100px; /* Réduit la hauteur */
    min-height: 80px; /* Hauteur minimale */
    max-height: 200px; /* Hauteur maximale*/
    resize: vertical; /* Permet à l'utilisateur d'ajuster la hauteur */
}
.wpcf7-response-output{
    border: 1px solid #ff0000 !important; 
    color: #F8F8F8 !important;
    padding: 10px; 
    border-radius: 5px; 
}

.linkedIn-icon {
  width: 32px;
  height: 32px;
}
.linkedIn-path {
  fill: #afd3ec; 
}
/* Effet au survol */
.linkedIn-icon:hover {
  background-color: #afd3ec;
}
.linkedIn-icon:hover .linkedIn-path {
  fill: #0F1926;
}
/*-----------------------------------------------------------------------------------------
----------------------- Youtube fichier téléchargement  ----------------------------------------------
-------------------------------------------------------------------------------------------*/
body:not([class*=elementor-page-]) #content {
	padding-top: 100px !important;
	max-width: 800px !important;
}