@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;
    
  }
  :root {
    --bg-color: #111010;
    --second-bg-color: #204a3a;
    --text-color: white;
    --main-color: rgba(49, 134, 116, 0.993);
  }
  html {
    font-size: 60%;
    overflow-x: hidden;
  }


  body {
   background: url('../../img/fond.jpg') no-repeat center center fixed;
   background-size: cover;
   color: var(--text-color);
   
   font-family: 'Nunito', sans-serif;
   
}

  .header { 
    position: fixed;
    width: 100%;
    top: 0%;
    left: 0%;
    padding: 4rem 15%;
      
    background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(5px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;

  }

 #menu-icon {
    font-size: 3.5rem;
    color: var(--main-color) ;
    display: none;
 }

 .logo{
    font-size: 2.8rem;
    color: var(--text-color);
    font-weight: 800;
    cursor: pointer;
    transition: 0.4s ease-in-out;
 }

 .logo:hover{
    transform: scale(1.1);

 }

 span{
    background: linear-gradient(
        270deg,
        rgb(64, 146, 139) 10%,
        rgb(46, 105, 100) 100%
        
        );
    background-clip: text;
    color: transparent;

 }

 .navbar a {
    font-size: 1.8rem;
    color: var(--text-color);
    margin-left: 5rem;
    font-weight: 500;
    transition: 0.3s ease-in-out;
    border-bottom: 3px solid transparent;
 }

 .navbar a:hover{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);

 }

 .gradient-btn{
    font-size: 1.8rem;
    padding: 1rem 2rem;
    border-radius: 4rem;
    background: linear-gradient(
        270deg,
        #169978 10%,
        #18a380 100%
        
        );
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    color: white;
    border: none;
    text-wrap: nowrap;

    
 }

 .gradient-btn :hover{
    transform: scale(1.05);
 }

section{
   min-height: 100vh;
   padding: 10rem 15%;
}

.home{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15rem;
}

.home-content{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: right;
}

.home-content h1{
   font-size: 7rem;
   font-weight: 700;
   margin-top: 1.5rem;
   line-height: 1;

}

.home-content h3{
   margin: 1rem 0;
   font-size: 3.3rem;
}


.home-content p{
   font-size: 1.7rem;
   font-weight: 500;
   line-height: 1.8;
}

.home-img img{
   width: 26vw;
   border-radius: 50%;
   box-shadow: 0 0 25px var(--main-color) ;
   transition: 0.4s ease-in-out;


}

.home-img img:hover{
   box-shadow: 0 0 25px var(--main-color) ;
   box-shadow: 0 0 50px var(--main-color) ;
              
}


.social-icons a{
   display: inline-flex;
   justify-content: center;
   align-items: center;
   font-size: 3rem;
   padding: 1rem;
   background: transparent;
   border: 2px solid var(--main-color);
   border-radius: 50%;
   color: var(--main-color);
   margin: 3rem 0.5rem;
   transition: 0.3s ease-in-out;


}

.social-icons a:hover{
   color: var(--text-color);
   background-color: var(--main-color);
   transform: scale(1.2)translateY(-5px);
   box-shadow: 0 0 25px var(--main-color);


}

.btn-group{
   display: flex;
   gap: 1.5rem;
}

.btn{
   display: inline-block;
   padding: 1rem 3rem;
   background-color: var(--main-color);
 
   border-radius: 3rem;
   font-size: 1.8rem;
   color: #e5e2e2;
   border: 2px solid transparent ;
   font-weight: 600;
   transition: 0.3s ease-in-out;


}

.btn:hover{
   transform: scale(1.05);
   box-shadow: 0 0 25px var(--main-color);
   box-shadow: 0 0 50px var(--main-color);
}

.btn-group a:nth-of-type(2){
   background-color: #080808;
   color: var(--main-color);
   border: 2px solid var(--main-color);
   box-shadow: 0 0 25px transparent;
}

.btn-group a:nth-of-type(2):hover{
   box-shadow: 0 0 25px var(--main-color);
   background-color: var(--main-color);
   color: #e5e2e2;
}















/* Amim oiseaux*/



.bird-container {
   position: absolute;
   width: 50px;
   height: 50px; 
   animation: fly linear infinite;
   opacity: 0; 
}


.bird {
   width: 100%;
   height: auto;
   transform-origin: center;
}


@keyframes flap {
   0% { transform: rotate(0deg); }
   50% { transform: rotate(10deg); }
   100% { transform: rotate(0deg); }
}


@keyframes fly {
   0% {
       transform: translateX(-100px) scale(1) rotate(0deg);
       opacity: 0; 
   }
   10% {
       opacity: 0.6; 
   }
   50% {
       transform: translateX(100vw) scale(1.2) rotate(10deg);
   }
   100% {
       transform: translateX(110vw) scale(1) rotate(0deg);
       opacity: 0;
   }
}


#bird1 {
   animation-duration: 10s;
}

#bird2 {
   animation-duration: 12s;
}

#bird3 {
   animation-duration: 15s;
}


.bird {
   animation: flap 0.5s ease-in-out infinite;
}




/* A propos */

.about{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 7rem;
   
   
    
   
   
}

.about-img img{
   width: 20vw;
   border-radius: 50%;
/*
   box-shadow: 0 0 25px var(--main-color);
   transition: 0.3s ease-in-out; 

*/

}
/*
.about-img img:hover{ /
   box-shadow: 0 0 25px var(--main-color);
   box-shadow: 0 0 50px var(--main-color);
}
   */


.about-content h2{
   font-size: 7rem;
   text-align: left;
}

.about-content p{
   font-size: 1.8rem;
}

.about-content .btn{
   margin: 2.5rem 0;
}


::-webkit-scrollbar{
   width: 20px;
}

::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

::-webkit-scrollbar-track{
   background-color: var(--bg-color);
}






/* Service */


.heading{
   text-align: center;
   font-size: 4.8rem;
   margin: 4rem 0;
}

.services{
   
   color: white ;
   
}

.services h2{
   color: var(--text-color);
}

.services-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   align-items: center;
   gap: 2.5rem;
   
}

.service-box{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--main-color);
   height: 600px;
   border-radius: 3rem;
   cursor: pointer;
   border: 5px solid transparent;
   transition: 0.5s ease-in-out;
}

.service-box:hover{
   background: var(--second-bg-color);
   color: var(--main-color);
   border: 5px solid var(--main-color);
   transform: scale(1.03);
}














.service-info{
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: center;
   align-items: center;
   padding: 5rem;
}

.service-info h4{
   font-size: 4rem;
   margin: 2rem 0;
   font-weight: 800;

}

.service-info p{
   font-size: 1.4rem;
   font-weight: 600;
   line-height: 1.7;
}


.service-info i{
   font-size: 8rem;
}





/* projets */
/*
.projects{
   
   background-color: var(--second-bg-color);
   
}
*/

.projects-box{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   place-items: center;
   gap: 3rem;
   row-gap: 5rem;
}

.project-card{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: var(--bg-color);
   border: 2px solid var(--main-color);
   border-radius: 3rem;
   gap: 2rem;
   padding: 5rem 2rem;
   overflow: hidden;
   cursor: pointer;
   box-shadow: 0 0 5px var(--main-color);
   transition: 0.3s ease;
}

.project-card:hover{
   box-shadow: 0 0 25px var(--main-color);
   box-shadow: 0 0 50px var(--main-color);
   transform: scale(1.02);
}


.project-card img{
   max-width: 300px;
   border-radius: 2em;
   object-fit: cover;
}

.project-card h3{
   font-size: 3rem;
}

.project-card p{
   font-size: 1.6rem;
}



/* Contact */ 




/* 

.contact{
   background-color: var(--bg-color);
}

*/ 

.contact h2{
   margin-bottom: 3rem;
   color: var(--text-color);
}


.contact form{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3rem;
   margin: 5rem 0;
   text-align: center;
}

.contact form .input-box input,
.contact form textarea{
   width: 100%;
   padding: 2.5rem;
   font-size: 1.8rem;
   color: var(--text-color);
   background-color: var(--bg-color);
   border-radius: 2rem;
   border: 2px solid var(--main-color);
   margin: 1.5rem 0;
   resize: none;

}







.footer{
   padding: 50px 0;
}

.footer .social-icons{
   text-align: center;
}

.footer ul{
   text-align: center;
   font-size: 1.8rem;
}


.footer ul li{
   display: inline-block;
   margin-left: 20px;

}

.footer ul li a{
   color: white;
   border-bottom: 3px solid transparent;
   transition: 0.3s ease-in-out;
}

.footer ul li a:hover{
   border-bottom: 3px solid var(--main-color);
}


.footer .copyright{
   text-align: center;
   margin-top: 40px;
   font-size: 16px;
}




@media(max-width:1285px){
   #menu-icon{
      display: block;
   }

   .home-content h1{
      font-size: 5.5rem;
     
   
   }
   .home-content h3{
      margin: 1rem 0;
      font-size: 2.6rem;
   }




   
   .navbar{
      position: absolute;
      top: 100%;
      right: 0;
      width: 50%;
      padding: 1rem 3rem;
      background: rgba(0, 0, 0, 1);
      border-bottom-left-radius: 2rem;
      border-left: 2px solid var(--main-color);
      border-bottom: 2px solid var(--main-color);
      display: none;
   }
   .navbar a{
      display: block;
      font-size: 1.8rem;
      margin: 3rem 0;
      color: white;

   }
   .navbar.active{
      display: block;

   }
   .gradient-btn{
      display: none;
   }
   .home{
      flex-direction: column-reverse;
      margin: 5rem 0;
      gap: 5rem;
   }

   .home-content{
      align-items: center;
      text-align: center;
   }
   .home-img img{
      width: 50vw;

   }

   .about{
      flex-direction: column-reverse;
      text-align: center;
   }

   .about h2{
      text-align: center;
      margin: 2rem 0;
   }

   .about img{
      width: 66vw;
   }


   
   .contact form{
      flex-direction: column;
   }

}








   /* Bouton version PC */






   #open-accessibility-menu {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 2001;
      background-color: white;
      color: #ffffff;
      border: none;
      padding: 10px;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      font-size: 1.9rem;
      display: block;
      
  }

  #open-accessibility-menu:hover {
      opacity: 1;
      transform: scale(1.1); /* Mise en avant au survol */
  }


  #accessibility-menu.show {
     display: flex;
     opacity: 1;
     
 }
















#accessibility-menu {
   position: fixed;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
   padding: 15px 20px;
   background: #292828; 
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   gap: 15px; 
   z-index: 2001;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
   
}


 /* Masquer le menu d'accessibilité par défaut sur PC */

 @media (min-width: 769px) {
   #accessibility-menu {
       display: none; 
   }

   /* Le menu est affiché lorsqu'on lui ajoute la classe "show" */
   #accessibility-menu.show {
       display: flex;
   }
}






#accessibility-menu button {
   background-color: var(--main-color); 
   color: white;
   border: none;
   padding: 12px 18px;
   border-radius: 8px;
   cursor: pointer;
   font-size: 1.4rem;
   font-weight: 600; 
   transition: all 0.3s ease; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Effet au survol des boutons */
#accessibility-menu button:hover {
   transform: translateY(-3px); 
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); 
}

/* Effet au clic */
#accessibility-menu button:active {
   transform: translateY(1px); 
   box-shadow: none; 
}










/* Animation de transition pour l'apparition du menu */
@media (max-width: 768px) {
   



   #accessibility-menu {
      top: auto; 
      bottom: 20px; 
      left: 10px; 
      right: 10px; 
      width: auto; 
      padding: 10px 15px;
      flex-direction: row; 
      gap: 10px; 
      transform: none; 
      border-radius: 10px; 
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  #accessibility-menu button {
      padding: 8px 12px; 
      
      border-radius: 6px;
  }
}

/* Pour les écrans très petits (moins de 480px) */
@media (max-width: 480px) {
  #accessibility-menu {
      flex-wrap: wrap; 
      gap: 8px;
  }

  #accessibility-menu button {
      flex: 1; 
      font-size: 1.2rem; 
  }
}











/* Classe pour appliquer la police adaptée à la dyslexie */
.dyslexia-font {
    font-family: 'Lexend', sans-serif !important;
}






/* Mode de contraste élevé pour les textes, listes et formulaires */
body.high-contrast, 
body.high-contrast span, 
body.high-contrast li, 
body.high-contrast p, 
body.high-contrast h1, 
body.high-contrast h2, 
body.high-contrast h3, 
body.high-contrast h4, 
body.high-contrast h5, 
body.high-contrast h6 {
    color: #FFFF00; /* Texte jaune vif */
   
    
}

/* Style des placeholders pour plus de contraste */
body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: #FFEB3B; /* Placeholder en jaune clair */
}

/* Liens */
body.high-contrast a {
    color: #00FFFF; /* Cyan vif */
    text-decoration: underline;
}

/* Effet sur les boutons */
#accessibility-menu button.high-contrast {
    background-color: #FFFF00;
    
}













/* Styles spécifiques à la version mobile */
@media (max-width: 768px) {


   

   #open-accessibility-menu {
       position: fixed;
       bottom: 20px;
       right: 20px;
       z-index: 2001;
       background-color: white;
       color: #ffffff;
       border: none;
       padding: 10px;
       border-radius: 50%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       cursor: pointer;
       font-size: 1.8rem;
       display: block;
       
   }

   #open-accessibility-menu:hover {
       opacity: 1;
       transform: scale(1.1); 
   }

 
   #accessibility-menu {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 130px;
       height: 220px;
       padding: 12px;
       background: #02211f;
       border-radius: 20px;
       box-shadow: 0 8px 11px rgba(255, 255, 255, 0.4);
       display: none; /* Caché par défaut */
       flex-direction: column;
       gap: 13px;
       z-index: 2003;
     
      
   }

   
   #accessibility-menu.show {
       display: flex;
       opacity: 1;
       
   }

   /* Titre du menu */
   #accessibility-menu h3 {
       
       text-align: center;
       margin-bottom: 10px;
       font-size: 1.8rem;
   }


   #close-accessibility-menu {
       background: none;
       
       border: none;
       font-size: 1.6rem;
       cursor: pointer;
       position: absolute;
       top: 10px;
       right: 10px;
       display: block; 
   }

   /* Style des boutons dans le menu */
   #accessibility-menu button {
       background-color: rgba(40, 125, 107, 0.774);
       color: #ffffff;
       border: none;
       padding: 5px 9px; 
       border-radius: 8px;
       cursor: pointer;
       font-size: 1.7rem;
       font-weight: 600;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }

  
}














/* Masquer la croix sur la version PC */
@media (min-width: 769px) {
   #close-accessibility-menu {
       display: none; 
   }

 
   #accessibility-menu h3 {
       display: none; 
   }
}




body.menu-open {
   overflow: hidden; 
}










/* Permet de déplacer le bouton plus bas, à gauche ou dans toute autre direction */
@media (max-width: 768px) {
   #open-accessibility-menu {
       position: fixed;
       bottom: 20px;  
       right: 20px;   
       z-index: 5000;
   }

 
   #open-accessibility-menu.position-top-left {
       top: 10px;
       left: 10px;
       bottom: auto; 
   }

   #open-accessibility-menu.position-bottom-left {
       bottom: 10px;
       left: 10px;
       right: auto; 
   }
}









@media (max-width: 768px) {
   
   #increase-font, #decrease-font, #reset-font {
       display: none;
   }
}











/* Projets */
.projects {

   padding: 3rem 1rem; 
}

.projects-box {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   place-items: center; 
   gap: 3rem;
   row-gap: 5rem;
   justify-items: center; 
   max-width: 1200px; 
   margin: 0 auto; 
}

@media (max-width: 768px) {
   .projects-box {
      grid-template-columns: 1fr; 
      padding: 0 1rem; 
   }

   .project-card {
      max-width: 100%; 
      padding: 3rem 1rem; 
   }

   .project-card img {
      max-width: 85%; 
   }
}





/* Enlever le soulignement et la couleur par défaut des liens */
a {
   text-decoration: none; 
   color: inherit; 
}










@font-face {
   font-family: 'OpenDyslexic';
   src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2'),
        url('fonts/OpenDyslexic-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
}