body{
  cursor: crosshair;
}


a {
  color: inherit;
}


html{
  scroll-behavior: smooth;
}


sup{
  position: relative;
  top: -0.8em;
  font-size: 0.5em;
}

#logo1 img{
  width: 10%; /* Largeur maximale par rapport au conteneur */
  height: auto; /* Ajuste automatiquement la hauteur pour conserver les proportions */
  object-fit: contain; /* S’assure que l’image reste visible sans distorsion */
}


header{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
    position: fixed; /* ou sticky selon ton besoin */
    z-index: 100; /* supérieur aux z-index des images pour quil passe au dessus*/

}


header a{
    margin-top: 3px;
margin-left: 20px;
  font-size: 23px;
  color: blue;
  font-family:"allright", "Playwrite SK", cursive ;  
  letter-spacing: 0.8;                                     
  text-decoration: none;
}


header ul{
    margin-top: 10px;
  gap: 10px;
  display: flex;
  justify-content: space-between;
  margin-right: 110px;
  width: 300px;
  color: white;
  font-family:"allright", "Playwrite SK", cursive ;
  letter-spacing: 0.8;
}

#logo {
  padding-top: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo img {
  margin: auto;
    padding-top: 7vh;
  display: block;
  width: 30%;

}


#accueil{
  margin: auto;
  height: 40vh; 

  text-align: center;
}
 



#accueil p {
  font-size: 1.3rem;
  /*je regle la hauteur de ligne*/
  line-height: 1.2em;
  color: black;
  /*pour centrer le bloc paragraphe dans la page
  je lui donne une largeur et je lui applique margin auto*/
  width: 60%;
  margin: 40px auto; 
  font-family: 'Wix Madefor Display', sans-serif;
  
}


.marquee {
  color: blue;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%; /* Barre occupe toute la largeur */
  overflow: hidden; /* Cache le texte qui sort de la zone visible */
  white-space: nowrap; /* Empêche le texte de se briser en lignes */
  background-color: white; /* Couleur de fond pour bien distinguer la barre */
  border: 1px solid black; /* Optionnel : pour délimiter la barre */
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.3rem; /* Taille du texte */
}

.marquee p
 {
  display: inline-block;
  padding-left: 104%; /* Commence en dehors de la vue */
  animation: scroll 10s linear infinite; /* Animation pour le défilement */
}

/* Animation */
@keyframes scroll {
  from {
    transform: translateX(0); /* Position de départ */
  }
  to {
    transform: translateX(-100%); /* Position finale, fait défiler hors écran */
  }
}










#projets {
/*  height: 225vh;*/
  width: 95vw;
  color: white;
  font-size: 1.1em;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 100px;
    font-family: "allright", "Playwrite SK", cursive;
    letter-spacing: 0.8;
}




#projets a{
  text-decoration: none;
}

button{
background-color: white;
color: black;
  border: none;

}

button:hover{
  color: blue;
}

 


#colgauche,#colcentre, #coldroite {
  width: 28%;
}


#colgauche{
  height: calc(205vh - 40px);
}
/* Container for images */
/* Container for images */


#conteneuraccueilprojet {
  width: 100%;
}

#rubriques {
  height: 160px;
  width: 70vw; 
  margin: auto; 
  display: flex;
  justify-content: space-around;
  gap: 10px; /* Ajoute un espace entre les éléments */
}

.rubrique { 
  padding-top: 90px;
  font-family: "allright", "Playwrite SK", cursive;
  font-size: 25px;
  letter-spacing: 0.8px;
}

article {
  display: none; /* Cache tous les articles par défaut */
}

article.active {
  display: block; /* Affiche les articles actifs */
  margin: auto;
}

/* Layout Grid for Projects */
#projets {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 articles par ligne */
  grid-template-rows: repeat(5, auto); /* 5 lignes au total */
  gap: 1px; /* Espace entre les articles */
  padding-left: 20px; /* Ajuste selon l'espace désiré */
  padding-right: 20px; /* Ajuste selon l'espace désiré */
}

#projets article {
  margin-top: 60px;
  width: 27vw; /* Ajuste la largeur des articles en fonction de la grille */
  line-height: 1.2;
  letter-spacing: 1.2;
}

#projets article figure {
  overflow: hidden;
  object-fit: cover;
}

#projets article figure img {
  width: 100%;
  object-fit: cover;
}

/* Images hover effect */
.image-container {
  display: grid; /* Utilise la grille pour gérer la mise en page */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: opacity 0.4s ease;
}

.imgdessus {
  z-index: 2;
  opacity: 1;
}

.imgdessous {
  z-index: 1;
  opacity: 0;
}

.image-container:hover .imgdessus {
  opacity: 0;
}

.image-container:hover .imgdessous {
  opacity: 1;
}

/* Footer of articles */
#projets article .footerarticle {
  background-color: blue;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 12.5px;
  display: flex;
  justify-content: space-between;
}

#projets article .footerarticle h3 {
  width: 70%;
}
/*                                         _      _   
                                          (_)    | |  
  _ __   __ _  __ _  ___   _ __  _ __ ___  _  ___| |_ 
 | '_ \ / _` |/ _` |/ _ \ | '_ \| '__/ _ \| |/ _ \ __|
 | |_) | (_| | (_| |  __/ | |_) | | | (_) | |  __/ |_ 
 | .__/ \__,_|\__, |\___| | .__/|_|  \___/| |\___|\__|
 | |           __/ |      | |            _/ |         
 |_|          |___/       |_|           |__/         */


#projets2 {
  height: 85vh;
  width: 100vw;
  color: white;
  font-size: 1.1em;
  margin: auto;
  display: grid; /* Utilise grid */
  grid-template-columns: 40% 56%; /* Deux colonnes : une à gauche (40%) et une à droite (56%) */
  grid-template-rows: auto; /* Ajuste les lignes automatiquement */
  gap: 20px; /* Ajoute un espace entre les colonnes */
  padding-bottom: 100px;
  font-family: "allright", "Playwrite SK", cursive;
  letter-spacing: 0.8;
}

.boiteprojet {
  position: relative;
  top: 40px;
  overflow: hidden;
}

/* Colonne gauche (aside) */
#colgauche {
  grid-column: 1 / 2; /* Occupe la première colonne de la grille */
}

#colgauche aside {
  margin-left: 50px;
  height: 826px;
  width: 28vw;
}

aside h3 {
  padding-top: 80px;
  font-size: 2em;
  color: black;
}

aside h4 {
  font-size: 1.5em;
  color: black;
}

aside p {
  font-family: 'Wix Madefor Display', sans-serif;
  color: black;
  font-size: 0.9em;
  line-height: 1.2;
  word-break: break-word; /* Permet de couper les mots si nécessaire */
  hyphens: auto; /* Active la césure automatique selon les langues */
  line-height: 1.5; /* Améliore l'espacement des lignes pour plus de lisibilité */
   hyphens: none; /* Désactive la césure automatique */
}

/* Deux colonnes à droite (deuxième zone principale) */
#deuxcolsdroite { 
  grid-column: 2 / 3; /* Occupe la deuxième colonne de la grille */
  height: 100vh;
  width: 100%; /* Occupation complète de sa colonne */
  overflow-y: scroll;
}

/* Image pleine colonne */
.imgunecolonne {
  width: 100%;
}

.imgunecolonne figure {
  width: 100%;
  margin-bottom: 20px;
}

.imgunecolonne figure img {
  padding-top: 20px;
  width: 100%;
}

/* Deux images côte à côte dans une ligne */
.imgdeuxcolonnes {
  display: grid; /* Utilise grid pour organiser en 2 colonnes */
  grid-template-columns: 49% 49%; /* Deux colonnes avec 49% de largeur chacune */
  gap: 2%; /* Ajoute de l'espace entre les colonnes */
  align-items: flex-start;
}

/* Images dans les sous-colonnes */
.souscoldroite, .souscolgauche {
  width: 100%;
}

.souscoldroite figure, .souscolgauche figure {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

.souscoldroite figure img, .souscolgauche figure img {
  padding: 10px;
  width: 100%;
}


/*                                     _           _      
                                      | |         (_)     
  _ __   __ _  __ _  ___    __ _  __ _| | ___ _ __ _  ___ 
 | '_ \ / _` |/ _` |/ _ \  / _` |/ _` | |/ _ \ '__| |/ _ \
 | |_) | (_| | (_| |  __/ | (_| | (_| | |  __/ |  | |  __/
 | .__/ \__,_|\__, |\___|  \__, |\__,_|_|\___|_|  |_|\___|
 | |           __/ |        __/ |                         
 |_|          |___/        |___/                          */



.headergalerie{
  opacity: 80%;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
    position: fixed; /* ou sticky selon ton besoin */
    z-index: 100; /* supérieur aux z-index des images pour quil passe au dessus*/

}


.headergalerie a{
      margin-top: 10px;
margin-left: 20px;
  font-size: 23px;
  color: white;
  font-family:"allright", "Playwrite SK", cursive ;  
  letter-spacing: 0.8;                                     
  text-decoration: none;
}


.headergalerie ul{
  gap: 10px;
      margin: 10px;
  display: flex;
  justify-content: space-between;
  margin-right: 110px;
  width: 300px;
  color: white;
  font-family:"allright", "Playwrite SK", cursive ;
  letter-spacing: 0.8;
}

#troiscols{
  background-color: black;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


.coldroite,.colgauche,.colmilieu{
  width: 32%;
}


.coldroite figure,.colgauche figure, .colmilieu figure{
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}


.coldroite figure img,.colgauche figure img, .colmilieu figure img{
  width: 100%;  
}


/* __            _            
  / _|          | |           
 | |_ ___   ___ | |_ ___ _ __ 
 |  _/ _ \ / _ \| __/ _ \ '__|
 | || (_) | (_) | ||  __/ |   
 |_| \___/ \___/ \__\___|_|   
                              
                              */

.pdf-link {
    text-decoration: none; /* Enlève le soulignement par défaut */
    color: blue; /* Couleur du lien */
    font-weight: bold; /* Met le lien en gras */
    font-family: "allright", "Playwrite SK", cursive;
     font-weight: normal; /* Enlève le gras */
}

.pdf-link:hover {
    color: darkblue; /* Change la couleur au survol */
    text-decoration: underline; /* Ajoute un soulignement au survol */
   font-family: "allright", "Playwrite SK", cursive;
    font-weight: normal; /* Enlève le gras */
}

footer a{
  text-decoration: none;
}



#footeraccueil {
    display: flex;
    justify-content: space-between; /* Espace les éléments uniformément */
    align-items: center; /* Centre verticalement les éléments */
    padding: 30px;
    font-size: 19px;
    text-align: center;
letter-spacing: 0.8;
  font-family: "allright", "Playwrite SK", cursive;
}

#footeraccueil ul {
  margin-left: 10px;
  margin-right: 10px;
    display: flex;
    list-style: none;
    width: 100%; /* Prend toute la largeur */
    justify-content: space-between; /* Espace les éléments uniformément */
}

#footeraccueil li {
    margin: 10px; /* Espace entre les éléments */
    color: blue; /* Garde la couleur bleue comme dans l'image */
}
























@media (max-width: 1199px) and (min-width: 992px){


  header {
    height: 40px; /* Réduire légèrement la hauteur pour s'adapter à des écrans plus petits */
    font-size: 0.9em; /* Ajuster la taille de la police pour le header */
  }

  header ul {
     margin-top: 10px;
    font-size: 0.9em; /* Réduire légèrement la taille des liens dans le menu */
    width: 295px; /* Réduire l'espace utilisé par le menu */
  }
  
  #logo1 img {
  margin-top: 5px;
  width: 100px; /* Ajuste cette valeur selon la taille souhaitée */
  height: auto; /* Maintient les proportions */
  }

  #accueil img {
    width: 8%;
  height: 25%;
  }

  #logo {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo img {
  margin: auto;
  display: block;
  width: 35%;

}
  #accueil p {
    font-size: 1.2em; /* Ajuster la taille du texte pour une meilleure lisibilité */
    width: 60%; /* Augmenter légèrement la largeur du paragraphe */
  }
 #projets {
    grid-template-columns: repeat(3, 1fr); /* Conserve la disposition en trois colonnes */
    grid-template-rows: auto;
    gap: 20px; /* Espace entre les articles */
    padding-left: 10px;
    padding-right: 10px;
  }

  #projets article {
    margin-top: 40px;
    width: 30vw; /* Ajuste la largeur des articles pour rester dans la grille en trois colonnes */
    height: auto;
  }


.marquee {
  color: blue;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 1200px; /* Barre occupe toute la largeur */
  overflow: hidden; /* Cache le texte qui sort de la zone visible */
  white-space: nowrap; /* Empêche le texte de se briser en lignes */
  background-color: white; /* Couleur de fond pour bien distinguer la barre */
  border: 1px solid black; /* Optionnel : pour délimiter la barre */
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.3rem; /* Taille du texte */
}




  #rubriques {
    width: 90vw; /* Ajuste la largeur pour améliorer l'alignement */
    gap: 10px;
  }

  .rubrique {
    font-size: 22wpx; /* Garde une taille de texte lisible */
    padding-top: 50px;
  }

  #colgauche, #colcentre, #coldroite {
    width: 30%; /* Garde la disposition avec chaque colonne à 30% */
  }

  #deuxcolsdroite {
    width: 95%; /* Ajuste la largeur pour mieux gérer les débordements */
    overflow-y: auto;
  }

  #conteneuraccueilprojet {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Superposition d'images avec effet de hover */
  .image-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transition: opacity 0.4s ease;
  }

  .imgdessus {
    z-index: 2;
    opacity: 1;
  }

  .imgdessous {
    z-index: 1;
    opacity: 0;
  }

  .image-container:hover .imgdessus {
    opacity: 0;
  }

  .image-container:hover .imgdessous {
    opacity: 1;
  }

  /* Footer d'articles */
  #projets article .footerarticle {
    padding: 10px;
  }

  #projets article .footerarticle h3 {
    width: 100%;
  }


/*                                         _      _   
                                          (_)    | |  
  _ __   __ _  __ _  ___   _ __  _ __ ___  _  ___| |_ 
 | '_ \ / _` |/ _` |/ _ \ | '_ \| '__/ _ \| |/ _ \ __|
 | |_) | (_| | (_| |  __/ | |_) | | | (_) | |  __/ |_ 
 | .__/ \__,_|\__, |\___| | .__/|_|  \___/| |\___|\__|
 | |           __/ |      | |            _/ |         
 |_|          |___/       |_|           |__/         */




  #projets2 {
    gap: 15px; /* Légère réduction de l'espace entre les colonnes */
    padding-bottom: 80px; /* Réduction du padding en bas */
    height: 745px;
  }

  /* Ajustement du texte dans la colonne de gauche */
  #colgauche aside {
    margin-left: 20px; /* Réduction de la marge pour que tout soit plus centré */
    width: 35vw; /* Légère réduction de la largeur pour plus d'équilibre */
  }

  aside h3 {
    font-size: 1.8em; /* Réduction de la taille du titre principal */
  }

  aside h4 {
    font-size: 1.4em; /* Réduction de la taille du sous-titre */
  }

  aside p {
    font-size: 0.79em; /* Ajustement de la taille du paragraphe pour une meilleure lisibilité */
    line-height: 1.4; /* Légère augmentation de l'espacement entre les lignes */
  }

  /* Ajustement de la colonne de droite */
  #deuxcolsdroite {
    padding-right: 20px; /* Ajout d'un padding à droite pour aérer la présentation */
  }

  /* Images pleine colonne : garder la disposition mais ajuster les marges */
  .imgunecolonne figure {
    margin-bottom: 15px; /* Légère réduction de l'espace entre les images */
  }

  .imgunecolonne figure img {
    padding-top: 15px; /* Légère réduction du padding en haut des images */
  }

  /* Ajustement des deux images côte à côte */
  .imgdeuxcolonnes {
    gap: 10px; /* Réduction légère de l'espace entre les deux colonnes d'images */
  }

  .souscoldroite figure img, .souscolgauche figure img {
    padding: 8px; /* Légère réduction du padding autour des images */
  }
}



















@media (max-width: 991px) and (min-width: 768px) {
 

 

   header {
    position: fixed;
    top: 0;
    width: 101vw;
    height: 50px; /* Augmente la hauteur pour plus de confort visuel */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    z-index: 100;
  }

  header a {
    margin-bottom: 5px;
    margin-left: 20px;
    font-family: "allright", "Playwrite SK", cursive;
    letter-spacing: 1px; /* Espacement des lettres légèrement plus grand */
    text-decoration: none;
    font-size: 25px;
  }

  header ul { 
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
    width: 520px; /* Légère augmentation de la largeur */
    font-family: "allright", "Playwrite SK", cursive;
    letter-spacing: 1px; /* Espacement légèrement augmenté */
  }

  #logo1 img {
  margin-top: 5px;
  width: 100px; /* Ajuste cette valeur selon la taille souhaitée */
  height: auto; /* Maintient les proportions */
  }



    #logo {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo img {
  margin: auto;
  display: block;
  width: 48%;

}


  #accueil{
    height: 800px;
    width: 101vw;
  }

  #accueil p br {
     display: none; 
  }

  #accueil p { padding-top: 100px;
    font-size: 22px; /* Légère augmentation de la taille de la police pour plus de confort visuel */
    width: 80%; /* Augmenter la largeur pour une meilleure lisibilité sur les écrans moyens */
    margin: 0 auto; /* Centrer le paragraphe horizontalement */
    line-height: 1.6; /* Augmenter l'espacement des lignes pour plus de clarté */
    text-align: center; /* Centrer le texte pour un aspect plus esthétique */
     word-break: break-word; 

  }

  #accueil img { 
    margin-top: 170px;
    width: 10%;  
    height:25%; 
  }



.marquee {
  color: blue;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 1000px; /* Barre occupe toute la largeur */
  overflow: hidden; /* Cache le texte qui sort de la zone visible */
  white-space: nowrap; /* Empêche le texte de se briser en lignes */
  background-color: white; /* Couleur de fond pour bien distinguer la barre */
  border: 1px solid black; /* Optionnel : pour délimiter la barre */
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.3rem; /* Taille du texte */
}



  #projets {
    grid-template-columns: repeat(2, 1fr); /* Passer à deux colonnes au lieu de trois */
    grid-template-rows: auto; /* Adapter les lignes automatiquement */
    gap: 10px; /* Augmenter l'espace entre les articles */
    padding-left: 10px;
    padding-right: 10px;
    font-size: 30px;
  }

  #projets article {
    margin-top: 40px;
    width: 45vw; /* Adapter la largeur des articles pour deux colonnes */
  }

  #rubriques {
    width: 80vw; /* Réduire la largeur pour adapter la disposition */
    gap: 5px; /* Réduire l'espace entre les rubriques */
    height: 240px;
  }

  .rubrique {
    font-size: 30px; /* Réduire légèrement la taille du texte */
    padding-top: 70px; /* Réduire le padding en haut pour mieux centrer le texte */
  }

  #colgauche, #colcentre, #coldroite {
    width: 30%; /* Ajuster les colonnes pour occuper plus d'espace */
  }

  #deuxcolsdroite {
    width: 95%; /* Ajuster la largeur pour les colonnes droites */
    overflow-y: auto;
  }

  #conteneuraccueilprojet {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
  }

  /* Superposition d'images avec effet de hover */
  .image-container {
    display: grid; /* Maintien du modèle de grille pour la superposition */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transition: opacity 0.4s ease;
  }

  .imgdessus {
    z-index: 2;
    opacity: 1;
  }

  .imgdessous {
    z-index: 1;
    opacity: 0;
  }

  .image-container:hover .imgdessus {
    opacity: 0;
  }

  .image-container:hover .imgdessous {
    opacity: 1;
  }

  /* Footer d'articles */
  #projets article .footerarticle {
    padding: 10px; /* Réduire le padding pour un meilleur ajustement */
  }

  #projets article .footerarticle h3 {
    width: 100%; /* Réduire la largeur pour une meilleure lisibilité */
  }







  #projets2 { 
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne */
    gap: 0px; 
    height: 300vw;
  }

  /* Colonne gauche centrée et prenant toute la largeur */
  #colgauche { 
        padding-top: 90px;
    font-size: 30px;
    grid-column: 1 / 2; /* Première colonne de la grille */
    width: 100%; /* Elle occupe toute la largeur disponible */
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */ 
    text-align: center; /* Centre le texte */
    height: 1500px; 
  }

  #colgauche aside { 
    height: 150vw; 
    margin-left: 0; /* Supprimer la marge */
    width: 100%; /* L'aside prend toute la largeur */
    max-width: 700px; /* Limite la largeur maximale du contenu pour un bon rendu */
  }


  aside h3, aside h4, aside p {
    width: 600px; 
    margin: 0 auto; /* Centre les éléments de texte */
    text-align: center; /* Centre le texte */
     word-break: break-word; /* Permet de couper les mots si nécessaire */
  line-height: 1.5;
   hyphens: none;
  }
 aside h3 br{
  display: none; /* Cache les éléments <br> */
}

 
  /* Colonne droite prenant toute la largeur sous la colonne gauche */
  #deuxcolsdroite {  
    grid-column: 1 / 2; /* Placé sous la colonne gauche */
    width: 100%; /* Prend toute la largeur */
    height: 155vw;
  }

  /* Images pleine colonne */
  .imgunecolonne figure {
    margin-bottom: 15px;
  }

  .imgunecolonne figure img {
    padding-top: 15px;
    width: 100%;
  }

  .imgdeuxcolonnes {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .souscoldroite figure img, .souscolgauche figure img {
    padding: 8px;
    width: 100%;
  }



#footeraccueil {
    display: flex;
    justify-content: space-between; /* Espace les éléments uniformément */
    align-items: center; /* Centre verticalement les éléments */
    padding: 20px;
    font-size: 25px;
    text-align: center;
letter-spacing: 0.8;
  font-family: "allright", "Playwrite SK", cursive;
}

#footeraccueil ul {
  margin-left: 10px;
  margin-right: 10px;
    display: flex;
    list-style: none;
    width: 100%; /* Prend toute la largeur */
    justify-content: space-between; /* Espace les éléments uniformément */
}

#footeraccueil li {
    margin: 10px; /* Espace entre les éléments */
    color: blue; /* Garde la couleur bleue comme dans l'image */
}

}

#ig{
  text-decoration: none;
  color: black;
    font-size: 18px;
   font-family: "allright", "Playwrite SK", cursive;
}

#mail{
  text-decoration: none;
  color: black;
  font-size: 18px;
   font-family: "allright", "Playwrite SK", cursive;
}

#cv{
   font-size: 18px;
   font-family: "allright", "Playwrite SK", cursive;
   font-weight: normal; /* Enlève le gras */
  color: black;
}

#lien{
   font-size: 18px;
   font-family: "allright", "Playwrite SK", cursive;
   font-weight: normal; /* Enlève le gras */
  
}