footer {
  z-index: 100;
  background-color: #1F3A93;
}

form {
  background-color: #1F3A93;
}

#bouton {
  background-color: #93b4ff;
  margin-top: -3rem;
}
section {
    padding-top: 2.5rem; 
  }  

  .contact:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
  }

  input:focus, textarea:focus {
    border: 3px solid black; /* Cadre noir */
    outline: auto; 
  }
  
  #bouton:hover {
    border: 2px solid black;
  }

 #theme-toggle {
  background-color: #93b4ff;
 }

/* Bouton Switch sous vidéo   */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-bottom: 2rem;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #1F3A93;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: white;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px white;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  #cadreV {
    border: 3px solid #1F3A93;
  }
  
  #cadreF {
    border: 3px solid white;
  }
  
  #cadre, #cadre2, #cadre3, #cadre4, #cadre5, #cadre6, #cadre7, #cadre8, #cadre9, #cadre10, #cadre11 {
    border: 3px solid #1F3A93;
    border-radius: 10px;
  }


/* Styles pour le DARK MODE*/


.dark h1, .dark h2 {
  color: white;
}
.dark h4, .dark h5, .dark a {
  color: black;
}

.dark header, .dark footer {
  background: white;
}

.dark #theme-toggle {
  background: rgb(63, 62, 62);
}

.dark form {
  background-color: white;
}

.dark input, .dark textarea {
  background-color: lightgray;
}

.dark #bouton {
  background: lightgray;
  color: black;
}

.dark #titre {
  color: black;
}

.dark .navigation li {
  margin: 0 1rem;
  height: 100%;
  text-align: center;
  line-height: 4rem;
}

.dark #cadre, .dark #cadre2, .dark #cadre3, .dark #cadre4, .dark #cadre5, .dark #cadre6, .dark #cadre7, .dark #cadre8, .dark #cadre9, .dark #cadre10, .dark #cadre11, .dark #cadreV, .dark #cadreF {
  border: 3px solid rgb(148, 147, 147);
}

.dark .slider:before {
  background-color: black;
}

.dark .lignes {
  background: black;
}

.dark #message-container {
  color:white;
}



/*  Media Screen   */
@media screen and (max-width: 780px) {
  #parcours {
    padding: 0 15px; /* Ajoute un peu de padding autour du contenu */
  }

  /* Assurez-vous que la largeur maximale du cadre s'ajuste bien à l'écran */
  #cadre3 {
    padding: 12px;
    max-width: 100%; /* Rend le cadre 100% de la largeur du parent */
  }

  /* Faire en sorte que les éléments se placent les uns sous les autres */
  #cadre3 .flex {
    flex-direction: column; /* Empile les éléments en colonne sur petit écran */
    gap: 20px; /* Ajoute un espace vertical entre chaque élément */
  }

  /* Redimensionner les images pour éviter qu'elles ne soient trop grandes */
  #cadre3 img {
    width: 50px;
    height: auto; /* Laisser l'image s'adapter proportionnellement */
  }

  #cadre3 img[alt="Formation Développeur Web"] {
    width: 100px; /* Ajuster la largeur à 100px */
    height: auto; /* Garder la proportion */
  }
  #cadre3 img[alt="Développeur Web Jr"] {
    width: 100px; /* Ajuster la largeur à 100px */
    height: auto; /* Garder la proportion */
  }

  /* Centrer les titres sur petit écran */
  #cadre3 h4, #cadre3 h5 {
    text-align: center;
  }

    /* Cibler spécifiquement le conteneur parent des deux cadres */
    .flex-cadre {
      flex-direction: column; /* Aligner les éléments verticalement */
      
    }
  
    #cadre {
      margin: 1rem auto;
      max-width: 78%;    
    }

    #cadre img {
      width: 30px;
      height: auto;
    }
  
    #cadre2 {     
      margin: 0 auto; /* Centrer les cadres horizontalement */      
      width: 100%; /* Assurer que les cadres occupent toute la largeur disponible */
    }  

    /* Réglage des images à l'intérieur des cadres */
  #cadre2 img {
    width: 30px; /* Ajuste la taille des images si nécessaire */
    height: auto; /* Maintient les proportions des images */
  }

    /* Assure que le texte est centré dans les cadres */
  #cadre h2, #cadre h3, #cadre h4, #cadre2 h2, #cadre2 h4 {
    text-align: center; /* Centre le texte */
  }

   /* Conteneur de la grille des projets */
   #portefolio .flex {
    flex-wrap: wrap; /* Permet aux projets de passer à la ligne */
    justify-content: center; /* Centre les projets sur petit écran */
  }

  /* Ajuste la largeur des projets pour avoir 2 par ligne */
  #portefolio #cadre4,
  #portefolio #cadre5,
  #portefolio #cadre6,
  #portefolio #cadre7 {
    width: calc(50% - 1rem); /* 50% de la largeur avec un petit espace entre les projets */
    margin-bottom: 20px; /* Ajoute un espace entre les lignes de projets */
  }

  /* Optionnel : réduire la taille des images pour s'adapter à la nouvelle disposition */
  #portefolio img {
    max-width: 100%; /* S'assure que les images ne dépassent pas leur conteneur */
    height: auto; /* Garde les proportions de l'image */
  }

  footer h5, footer h4 {
    font-size: 0.75rem; /* Taille plus petite pour les petits écrans */
  }

#cadreF {
  padding: 6px;
}
.dark .navigation li {
  background: lightgray;
}

}