/* bleu : #0F0076 / jaune : #FFA900 / blanc */


@font-face {
    font-family: 'ApfelGrotezk-Fett';
    src: url('font/ApfelGrotezk-Fett.otf') format('opentype');
  }
  @font-face {
    font-family: 'Mattone-Bold';
    src: url('font/Mattone-Bold.otf') format('opentype');
  }
    
    @font-face {
      font-family: 'PlusJakartaSans-ExtraLight';
      src: url('font/PlusJakartaSans-Regular.ttf') format('truetype');
      /* Remplacez 'le_chemin_vers_PlusJakartaSans-ExtraLight.ttf' par le chemin réel sur votre système. */
    }
    /* Pour les titres */
    h1{
      font-family: 'Mattone-Bold', sans-serif;
      font-size: 40pt;
    }
    
    h2{
      font-family: 'ApfelGrotezk-Fett', sans-serif;
      font-size: 25pt;
    }
    
    h3{
      font-family: 'ApfelGrotezk-Fett', sans-serif;
      font-size: 14pt;
    }
    /* Pour le texte */
    p {
      font-family: 'PlusJakartaSans-Regular', sans-serif;
      font-size: 12pt;
      /* Vous pouvez également ajouter d'autres styles de texte ici, par exemple, font-size, color, etc. */
    }
  
    .highlight {
      background-color: #FFD336; /* Couleur de fond jaune */
    }
  
  
    body {
      margin: 0;
      
    }
  
  
  .projects-section {
      display: flex;
      justify-content: space-between;
      padding-left: 80px;
      max-width: 1900px;
      margin: 0 auto;
  }
  .project-details,
  .toutes-competences {
      width: 100%; /* Ajustez la largeur selon vos besoins */
  }
  
  .logo-aline-container {
  justify-content: space-between;
    display: flex;
    padding: 10px;
    align-items: center;
    padding-left: 10px;
    position: fixed; /* Rend le conteneur fixe */
    top: 0; /* Le fixe en haut de la page */
    left: 0; /* Le fixe à gauche de la page */
    width: 100%; /* Prend la largeur totale de la page */
    background-color: #0F0076; /* Couleur de fond bleue */
    z-index: 1000; /* Assure que le bandeau soit au-dessus du contenu */
  }
  
  .logo-gauche{
    display: flex;
    align-items: center;
  }
  
  .return-home {
    width: 260px;
    font-size: 16pt;
    color: white; /* Texte en blanc pour contraster avec le fond bleu */
    padding-right: 50px;
  }
  
  .return-home a {
    color: white; /* Lien en blanc */
    text-decoration: none;
  }
  
  .logo {
    height: 27px;
    width: 30px;
    margin-right: 10px;
  }
  
  .aline {
    font-size: 18pt;
    color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px; /* Déplace le texte à 10px à droite du logo */
  }
  
  .return-home {
    font-size: 16pt;
    color: white;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .return-home a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .return-home a:hover {
    color: #FFA900; /* Changement de couleur au survol */
  }
  
  .project-details {
      display: flex;
      justify-content: space-between; /* Justifiez à droite et à gauche */
      margin-top:100px ;
      margin-bottom: 90px;
  }
  
  .project-description {
      align-self: flex-start; /* Alignez cette spécifique à partir du côté supérieur */
      padding-left: 0px;
  }
  
  .inseparable-title {
  
      color: #0F0076;
      margin-bottom: 0px;
  }
  .francealz {
  
      color: #0F0076;
      margin-bottom: 40px;
    }
  
  .inseparable-text {
  
      color: #0F0076;
      width:100% ;
      margin-bottom: 0px;
      line-height: 1.5;
    }
  
    .toutes-competences{
      margin-top: 150px;
      justify-content: center; 
    }
  
    .competences-container1 {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0px;
      text-align: center;
    }
    
  .competences-container2 {
      display: flex;
      flex-wrap: wrap;
      margin-top: 50px;
  }
    
  .centre{
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    width: 250px; 
  }
  .centre2{
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    width: 500px; 
  }
    .competence {
     text-align: center;
      margin-bottom: 0px; /* Ajoute de l'espace en dessous de chaque compétence */
        align-items: center; /* Centre verticalement les éléments */
        justify-content: center; /* Centre horizontalement les éléments */
    }
    
    
    .picto {
      width: 100px;
      height: 100px;
    }
    
    .comp {
  
      color: #0F0076;
      line-height: 1.5;
    }
    
    .images-section {
      max-width: 1900px; /* Définit la largeur maximale de la section */
      margin: 0 auto;
      padding-left: 80px;
    }
    
    .etape1-title {
  
      color: #0F0076;
      margin-top: 75px;
      margin-bottom: 0px;
      
  }
  
  .demi1{
    display: flex;
  
  }
  
  .fichierdemi{
    width: 600px;
  }
  .fichierdemi2{
    width: 600px;
    padding-left: 100px;
  }
  
  .fichierdemi3{
    margin-bottom: 350px;
    width: 600px;
    padding-left: 100px;
  }
  
  .fichierdemi4{
    width: 340px;
    height: 450px;
  }
  
  .fichierdemi5{
    margin-top: 150px;
    margin-left: 20px;
    height: 300px;
    width: 400px;
  }
  
  .fichierdemi6{
    width: 300px;
    margin-top: 0px;
    height: 450px;
    margin-bottom: 0px;
  }
  
  .fichierdemi7{
    width: 700px;
    height: 1644px;
  }
  .fichierdemi8{
    margin-top: 280px;
    width: 750px;
    height: 1175px;
  }
  
  .demi3{
    display: flex;
    margin-bottom: 200px;
  
  }
  
  
  
     
  
  
    .bleu {
      width: 100%;
      margin-bottom: 100px;
    }
  
    .footer {
      background-color: #0F0076;
      color: white;
      display: flex;
      justify-content: space-between;
      height: 200px;
      padding-left: 80px; /* Ajoute un peu d'espace autour du contenu */
      padding-right: 80px;
      max-width: 1900px; /* Définit la largeur maximale de la section */
      margin: 0 auto;
    }
    
    
    .cv-button {
      margin-top: 50px;
      display: inline-block;
      padding: 10px 20px;
      background-color: #0F0076;
      color: white;
      font-family: 'PlusJakartaSans-Bold', sans-serif;
      text-decoration: none;
      font-size: 12pt;
      border-radius: 25px;
      transition: background-color 0.3s ease-in-out;
      margin-bottom: 110px;
      border: 2px solid white;
    }
    
    .cv-button:hover {
    background-color: #FFA900;
    color: #fff;
    }
    
    .email {
      margin-top: 60px;
      font-family: 'PlusJakartaSans-Regular', sans-serif;
      font-size: 12pt;
    }
    .email {
      margin-top: 60px;
      font-family: 'PlusJakartaSans-Regular', sans-serif;
      font-size: 12pt;
      text-align: center;
    }
    .email-address {
      font-size: 12pt;
      color: white;
    }
    
    .portfolio-info {
      font-size: 10pt;
      color: #757272;
    }
    .social-icons {
      margin-top: 55px;
      display: flex;
      gap: 25px;
    }
    
    .social-icons img {
      width: 25px; 
      height: 25px; 
    }