:root {
    color-scheme: light; /* Désactive l'influence du thème du navigateur */
}

/* Style par défaut, au cas où le navigateur ne supporte pas prefers-color-scheme */
body {
    background-color: #f5f5f5; /* Couleur claire par défaut */
    color: #333; /* Texte sombre pour un bon contraste */
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e; /* Couleur sombre pour le fond */
        color: #f5f5f5; /* Texte clair pour un bon contraste */
    }
    .social-share a, .social-contact a, .footer-contact a,.social-links a {
    text-decoration: none;
    color: white;
    }
    .crd {
    color: white;
}
}
 
/* Mode clair */
@media (prefers-color-scheme: light) {
    body {
        background-color: #ffffff; /* Fond encore plus clair */
        color: #000; /* Texte noir */
    }
    .social-share a, .social-contact a, .footer-contact a,.social-links a {
    text-decoration: none;
    color: black;
}
    .crd {
    color: black; }
    .crd1 {
    color: white;
}
}
.crd { text-decoration: none;}
.crd1 {text-decoration: underline;color: white;}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* background: linear-gradient(to top left, black, ghostwhite),  
        radial-gradient(circle at 60% 40%, rgba(255,255,255,0.5), transparent); */
    height : 100vh;
    margin : 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* Assure que le body occupe toute la hauteur de la fenêtre */
}

body, html {
    width: 100%;
    overflow-x: hidden;  /* Empêche le débordement horizontal */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#homepage,#about,#services,#portfolio,#contacts{
    flex-direction: column;
    flex: 1;
    width: 100%;
    position: relative;
    align-items: center;
}

@media (max-width: 768px) {
    .txth1 {
        font-size: 0.8rem;
    }
    .collabAreaparagraphe4da {
     width: 75%;
}
}

@media (min-width: 768px) {
    .txth1 a {
    text-decoration: none;
    color: white;
    font-family: Arial, sans-serif;
    padding: 3px 3px;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 4vh;
    }
    #contactme, #sharethispage {
    font-size:1.6rem;
}
    .collabAreaparagraphe4da {
    width: 100%;
}
    #comm {
    width: 100%;
}
}

.contact-container {
    max-width: 80%;
    min-width: 16rem;
    margin-top: 2rem;
    margin-bottom: 5rem;
    background: #0a0e1500;
    box-shadow: 0 5px 30px rgb(104 104 104);
    padding: 20px;
    border-radius: 8px;
    /* width: 400px; */
    text-align: center;
}
.social-links {
    margin: 0.5rem;
    padding: 7px 8px;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 0.3rem;
}
.social-links a{
    margin: 0.5rem;
    padding: 7px 8px;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.social-links a:hover {
    background-color: #005bb563;
    color:white;
    transform: scale(1.3);
}

input, textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
} 
.input-container { 
    position: relative;
    margin-bottom: 20px;
}
.input-container input, .input-container textarea
{
 max-width: 90%;
 min-width: 90%;
 min-height: 1rem;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 font-size: 16px;
}

.input-container label {
    position: absolute;
    top: 10px;
    left: 4%;
    font-size: 16px;
    color: #999;
    transition: 0.3s;
} 
.input-container input:focus + label,
.input-container textarea:focus + label,
.input-container input:valid + label,
.input-container textarea:valid + label {
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    background:#ffffff;
    color:black;
    padding-bottom:0.1rem;
    padding-top:0.3rem;
    padding-left:1rem;
    padding-right:1rem;
    border-radius:1rem;
    border-top: 1px solid black;
}
.send{
    width: 96%;
}
.send:hover {
    transform: scale(1,1);
    width: 100%;
}
input[type="email"]:invalid:not(:placeholder-shown) {
    border: 2px solid red;
}
.input-container input[type="email"]:invalid:not(:placeholder-shown) + label {
    left: 50%;
    transform: translateX(-50%);
    color: red;
}


input::placeholder {
    color: transparent;
}


button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 2rem;
}

button:hover {
    background: #0056b3;
}

.social-links img {
    width: 40px;
    margin: 10px;
    cursor: pointer;
}

header {
    background-color: #000000;  /* Couleur de fond bleu marine */
    border-bottom: 1px solid gray;
    color: #fff;  /* Couleur du texte blanc */
    width: 100%;  /* Assure que l'en-tête prend toute la largeur de la page */
    min-height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;  /* Position sticky */
    top: -2px;  /* Fixe le header en haut de la page lorsqu'il devient sticky */
    z-index: 6000;  /* Mettre au-dessus des autres éléments */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.txth1 {
    font-size: 0.7rem;
    width: 78%;
    text-align: center;
}
/* Style par défaut pour les liens */
.txth1 a {
    text-decoration: none;
    color: white;
    font-family: Arial, sans-serif;
    padding: 3px 3px;
    display: inline-block;
    transition: all 0.3s ease;
}

.txth1 a.active {
    color: #ffffff; /* Couleur du texte */
    background-color: #0077cc; /* Couleur de fond */
    font-weight: bold; /* Mettre le texte en gras */
    padding: 7px 11px; /* Ajout d'espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
    animation: colorChange2 2s infinite;
}

/* Effet au survol du lien */
.txth1 a:hover {
    color: #ffffff;
    background-color: #005999e8;
    border-radius: 5px;
    transform: scale(1.2);
    line-height:1rem;
}

/* Effet au clic */
.txth1 a:active {
    transform: scale(0.95); /* Légère réduction pour l'effet de clic */
}


#logo img{
    width: 2rem;
    height: 1.7rem;
    position: relative;
    margin-right: 0.5rem;
}
#logo {
    align-content:center;
    position: relative;
}
.menu-toggle {
      cursor: pointer;  /* Curseur en forme de main pour pointer */
      display: flex;  /* Utilise flexbox pour aligner les éléments */
      align-items: center;  /* Centre les éléments verticalement */
      position: relative;  /* Position absolue pour positionner précisément */
        /* Distance de 20px par rapport à la gauche */
      z-index: 2000;  /* Assure que le menu-toggle est au-dessus de la barre latérale */
      height: 2.3rem;
      width: 2rem;
      justify-content: center;
      left: 0.4rem;
}
#menu-toggle:hover {
    background-color:#2543d7;  /* Change la couleur de fond en vert clair au survol */
    box-sizing: border-box;  /* Assure que le padding est inclus dans la largeur */
    border-radius: 20%;
} 
.menu-toggle img {
    width: 1.5rem;  /* Largeur de 20px */
    height: 1.5rem;  /* Hauteur de 20px */
    filter: invert(100%);
}
body.sidebar-active header,
body.sidebar-active .content,
body.sidebar-active footer {
  filter: blur(20px);
}

body.sidebar-active {
  overflow: hidden;
  user-select: none;
}

body.sidebar-active .dots,
body.sidebar-active .arrow left,
body.sidebar-active .arrow right,
body.sidebar-active .content {
  user-select: none;
  cursor: Default;
  pointer-events: none;
}
  
.sidebar {
    position: relative;
    z-index: 9999999; /* S'assure que la sidebar est au-dessus du contenu */
}
body.sidebar-active #map,
body.sidebar-active img {
  cursor: Default;
}

#sidebar {
    /* background-color: #000000; */  /* Barre latérale complètement transparente */
    display: none;  /* Utilise flexbox pour aligner les éléments */
    flex-direction: column;  /* Aligne les éléments en colonne */
    /* padding: 15px; */  /* Padding de 20px */
    position: fixed;  /* Position fixe pour rester en place lors du défilement */
    /* top: 1%; */  /* Distance de 0 par rapport au haut */
    width: 10px;  /* Largeur initiale de 1px */
    z-index: 1000;  /* Assure que la barre latérale est en arrière-plan */
    overflow: hidden;  /* Masque le débordement */
}
#sidebar.active {
    width: 12rem;  /* Largeur de 160px lorsqu'elle est active */
    background-color: #000000;  /* Couleur de fond noire avec opacité complète */
    z-index: 9000;  /* Utilise une valeur de z-index plus basse */
    height: 100vh;
    display: flex;
}

#sidebar ul {
    list-style: none;  /* Élimine les puces de la liste */
    margin: 0px;  /* Élimine les marges */
    padding: 0;  /* Élimine le padding */
    /* width: 100%; */  /* Largeur de 100% */
    margin-top: 2rem;  /* Marge supérieure de 90px */
    margin-left: 0;
    /* align-content: center; */
}
#sidebar ul li {
    /* position: relative; */  /* Position relative pour les éléments enfants absolus */
}
#sidebar ul li a {
    text-decoration: none;  /* Élimine la décoration de texte */
    display: flex;  /* Utilise flexbox pour aligner les éléments */
    align-items: center;  /* Centre les éléments verticalement */
    /* padding: 10px; */  /* Padding de 10px */
    line-height: 5vh;
    position: relative;  /* Position relative pour les éléments enfants */
    width: calc(100% + 20px);  /* Utilise toute la largeur du conteneur avec le décalage */
    left: 0;  /* Décalage de -20px */
    pointer-events: none;
}
#sidebar.active ul li a {
    color: white;  /* Couleur blanche */
    pointer-events: auto;
    margin-top: 2vh;
    margin-left: 0;
    align-items: center;
    width:100%;
}
#sidebar.active ul li a:hover {
    background-color: black;  /* Change la couleur de fond en vert */
    color: white;  /* Assure que la couleur du texte reste noire */
  font-weight:bold;
  filter:invert(100%)
}
#sidebar ul li a:hover img {
    filter: none;  /* Désactive les filtres */
    transform: scale(1.8);
}
#sidebar ul li a img {
    width: 1.5rem;  /* Largeur de 20px */
    height: 1.5rem;  /* Hauteur de 20px */
    filter: invert(0%);  /* Couleur noire */
    /* margin-left: 1px; */  /* Élimine la marge gauche */
    opacity: 0;  /* Opacité complète */
    pointer-events: none;
    transition: transform 0.3s ease, border 0.3s ease;
}
#sidebar ul li a img:hover {
    background-color: #f5faf8;  /* Change la couleur de fond en vert */
    border-radius: 20%;  /* Ajoute un bord arrondi (facultatif) */
    transition: none;
}
#sidebar.active ul li a img {
    filter: invert(100%);  /* Couleur blanche */
    transition: none;
    opacity: 1;
    margin-left: 8%;
}
#sidebar ul li a span.menu-text {
    display: none;  /* Masque le texte du menu */
}
#sidebar.active ul li a span.menu-text {
    display: inline;  /* Affiche le texte du menu */
    margin-left: 1rem;  /* Marge gauche de 10px */
    font-size: 1rem;
}
.menu-close {
    font-size: 2rem;  /* Taille de police de 24px */
    cursor: pointer;  /* Curseur en forme de main pour pointer */
    position: absolute;  /* Position absolue pour positionner précisément */
    right: 1px;  /* Distance de 20px par rapport à la droite */
    top: 1px;
    display: none;  /* Masque par défaut */
    z-index: 1100;  /* Assure que le bouton de fermeture est au-dessus de la barre latérale */
      /* Marge supérieure de 50px */
    color: white;
    line-height: 2rem;
    width: 2rem;
    text-align: center;
    border-radius: 20%;
    border: 1px solid;
}
#menu-close:hover {
    background-color: #ff0000;
}
#sidebar.active .menu-close {
    display: block;  /* Affiche le bouton de fermeture */
} 
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* border: 5px solid #def859; */
    align-items: center;
    /* justify-content: center; */
    margin: auto;
    position: relative;
    max-width: 97%;
}
#nom {
    display: flex;
    flex-direction: row; /* Disposer les éléments en ligne */
    box-shadow: 0 5px 30px rgb(104 104 104);
    border-radius: 10px;
    width: fit-content; /* S'assurer que le conteneur occupe toute la largeur */
    margin-top: 1vh;
    margin-bottom: 1vh;
    justify-content: center; /* Centrer les éléments horizontalement */
    /* align-content: center; */
    position:relative;
    background-color: #0a0e1500;
}

#logo1 {
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 2%;
}
.logo1 {
    height: 4rem;
    width: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-left: 0.5rem;
}
.logo1bis {
    height: 2rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /* margin-left: 0.5rem; */
} 
#texte {
    font-size: 1rem;
    /* border: 7px solid #68ffdb00; */
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}
.texte-style {
    font-size: 2vh;
}

.firstcontent{
  width: 100%;
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  margin-top: 1rem;
  /* border: 1vh solid violet; */
  /* flex: 1 1 100%; */
  flex-wrap: nowrap;
}

.resume {
    position:relative;
    /* box-shadow: 0 5px 30px rgb(104 104 104); */
    width: 100%;
    border-radius: 10px;
    display:flex;
    flex-direction:column;
    flex-wrap: wrap;
    /* flex: 1; */
    align-items: center;
    margin-top: 0vh;
    margin-bottom: -14px;
}

.resumePortfolio {
    max-width: 100%;
    display:flex;
    flex-wrap:wrap;
    flex: 1;
    gap: 1%;
} 
.resume1 {
    width: 100%;
    font-size: 4vh;
    font-weight: bold;
    text-align: center;
    height:fit-content;
    background-color: #f5deb3a1;
    padding: 0.5vh;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: black;
    margin-bottom: 1vh;
}
.resume2 {
    background-color: #2a76e18a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    flex: 24%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 10%;
}
.resume2serv {
    background-color: #2a76e18a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 10%;
    width: 25rem;
    max-width: 55rem;
}
.resume2servP {
    background-color: #2a76e18a;
    box-shadow: 0 5px 30px rgb(104 104 104);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-radius: 1rem;
    width: 24rem;
    max-width: 55rem;
    margin: 1rem;
}
.resume3serv {
    background-color: #2539778a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 10%;
    width: 25rem;
    max-width: 55rem;
}
.resume4serv {
    background-color: #81a6328a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 10%;
    width: 25rem;
    max-width: 55rem;
}
.resume5serv {
    background-color: #ee23a78a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 10%;
    width: 25rem;
    max-width: 55rem;
}
.resume5servP {
    background-color: #ee23a78a;
    box-shadow: 0 5px 30px rgb(104 104 104);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-radius: 1rem;
    width: 24rem;
    max-width: 55rem;
    margin: 1rem;
}
.resume2a,.resume2a1 {
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 2px;
}
.resume2a img, .resume4a img, .resume5a img {
    width: 4rem;
}
.resume2a1 img {
    width: 4.6rem;
}
.resume3a img {
    width: 6rem;
}
.resume2b {
    width: 100%;
    text-align: center;
    align-items: center;
}
.resumé {
    width: 98%;
    text-align: center;
    align-items: center;
    padding: 1%;
    color: white;
    background: #2a76e1;
    border-radius: 7px;
}
.resumé1 {
    width: 98%;
    text-align: center;
    align-items: center;
    padding: 1%;
    color: white;
    background: #257756b3;
    border-radius: 7px;
}
.resumé2 {
    width: 98%;
    text-align: center;
    align-items: center;
    padding: 1%;
    color: white;
    background: #81a632;
    border-radius: 7px;
}
.resumé3 {
    width: 98%;
    text-align: center;
    align-items: center;
    padding: 1%;
    color: white;
    background: #ee23a7;
}
@keyframes movingGradient {
    0% { background: linear-gradient(to right, #2c3e50a8, #4ca1afa8); }
    50% { background: linear-gradient(to right, #4ca1afa8, #2c3e50a8); }
    100% { background: linear-gradient(to right, #2c3e50a8, #4ca1afa8); }
}



.resume2b1 {
    margin: 1%;
    font-weight:bold;
    background: #2a76e1;
    padding: 3%;
    border-radius: 5px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: movingGradient 4s infinite;
}
.resume2b1a {
    margin: 1%;
    font-weight:bold;
    background: #2a76e1;
    padding: 1%;
    border-radius: 5px;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.resume2b1P {
    margin: 1%;
    font-weight:bold;
    background: #ee23a7;
    padding: 1%;
    border-radius: 5px;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.resume2b2 {
    margin:5px;
    text-align: justify;
}.resume2b3 {
    margin:5px;
}.resume2b4 {
    margin:5px;
}
}.resumé {
    margin:5px;
}
.resume3 {
    /* min-height: 16vh; */
    background-color: #2539778a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    flex: 24%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 10%;
}
.resume3a {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px;
}
.resume3b {
    width: 100%;
    text-align: center;
} 
.resume3b1 {
    margin:5px;
    font-weight:bold;
    background: #257756b3;
    padding: 3%;
    border-radius: 5px;
    color: white;
    animation: movingGradient 4s infinite;
}
.resume3b1a {
    margin:5px;
    font-weight:bold;
    background: #257756b3;
    padding: 5px;
    border-radius: 5px;
    color: white;
}
.resume3b2 {
    margin:5px;
}.resume3b3 {
    margin:5px;
}.resume3b4 {
    margin:5px;
}
 

.resume4 {
    background-color: #81a6328a;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    flex: 24%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 10%;
}
.resume4a {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 7px;
}
.resume4b {
    width: 100%;
    text-align: center;
}
.resume4b1 {
    margin:5px;
    font-weight:bold;
    background: #81a632;
    padding: 3%;
    border-radius: 5px;
    color: white;
    animation: movingGradient 4s infinite;
}
.resume4b1a {
    margin:5px;
    font-weight:bold;
    background: #81a632;
    padding: 5px;
    border-radius: 5px;
    color: white;
}
.resume4b2, .resume4b3,.resume4b4 {
    margin:5px;
}


.resume5 {
    /* min-height: 16vh; */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    background-color: #ee23a78a;
    flex: 24%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    border-top-left-radius: 10%;
    border-bottom-right-radius: 20%;
}
.resume5a {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 11px;
}
 
.resume5b {
    width: 100%;
    text-align: center;
}
.resume5b1 {
    /* margin:5px; */
    font-weight:bold;
    background: #ee23a7;
    padding: 5px;
    border-radius: 5px;
    color: white;
    animation: movingGradient 4s infinite;
}
.resume5b1a {
    /* margin:5px; */
    font-weight:bold;
    background: #ee23a7;
    padding: 5px;
    border-radius: 5px;
    color: white;
}
.resume5b1 {
    /* margin:5px; */
    font-weight:bold;
    background: #ee23a7;
    padding: 3%;
    border-radius: 5px;
    color: white;
}
.resume5b2 {
    margin:5px;
    text-align: justify;
}.resume5b3 {
    margin:5px;
}.resume5b4 {
    margin:5px;
}

/* Styles pour les grands écrans */
@media screen and (min-width: 768px) { /* Changez 768px selon votre breakpoint */
    .firstcontent {
        min-width: 90%; /* Largeur pour les écrans plus grands */
        /* border: 1vh solid black; */
        /* background: brown; */
        margin-top: 2rem;
    }
    .resume {
    position: relative;
    max-width: 100%;
    display: flex;
    margin-bottom: 0.5rem;
}
     .resumePortfolio {
    margin-top: 2rem;
    }
    .resumé,.resumé1,.resumé2,.resumé3 {
    width: 98%;
    margin-top:2rem;
    text-align: center;
    align-items: center;
    padding: 1%;
    color: white;
}
    .slides {
      /* display: flex; */
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      height: 18rem;
    }
    .slides img { 
      width: 110rem;
      height: 18rem;
      object-fit: cover;
    }
    #servAreaparagraphe, #servAreaparagrapheA {
    margin: 0.5rem;
    width: 98.4%;
}
    .apropos1,.resume3serv,.resume5serv {
  order:2;
  }
    .resume2serv,.resume3serv,.resume4serv,.resume5serv {
  height: 22rem;
  }
    .resume2servP {
  min-height: 29rem;
  align-items: center;
  justify-content: center;
  }
    .resume5servP {
  min-height: 23rem;
  align-items: center;
  justify-content: center;
  }
    .servAreaparagraphe1A1, .servAreaparagraphe2A1, .servAreaparagraphe3A1,.servAreaparagraphe4A1,.servAreaparagraphe2A,.servAreaparagraphe3A,.servAreaparagraphe4A {
     width: 97%;
    }
    .contact-container {
    margin-top: 2rem;
    background: #0a0e1500;
    box-shadow: 0 5px 30px rgb(104 104 104);
    padding: 20px;
    border-radius: 8px;
    min-width: 30rem;
    text-align: center;
}
    #conteneur1a,#conteneur2a,#conteneur3a,#conteneur4a,#conteneur5a,#conteneur6a,#conteneur7a {
  font-size: 1rem;
  text-align: justify;
  line-height: 1.3rem;
}
}

/* Styles pour les petits écrans */
@media screen and (max-width: 768px) { /* Changez 768px selon votre breakpoint */
.firstcontent {
  flex: 1 1 100%;
  justify-content: center;
  flex-direction: column;
}
.resume2serv,.resume3serv,.resume4serv,.resume5serv {
  min-height: 14rem;
  }
   .slide {
      width: 44vh;
      height: 44vh;
      object-fit: cover;
    }
  .slides {
      flex: 1;
      height: 26vh;
    }
  .slides img {
      width: 97vw;
      min-height: 100%;
      /* object-fit: cover; */
    }
    
    .gridimageservArea, .gridimageservAreaA {
      max-width: 24rem;
      height: 16rem;
      /* object-fit: cover; */
    }
    .resumePortfolio {
    max-width: 100%;
    min-width: 21rem;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 0%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    }
    .resume5, .resume4, .resume3, .resume2 {
    flex: 50%;
    }
    .servArea, .servAreaA, .collabArea,.servAreaAb,.servAreaparagrapheA,.servAreaparagraphe,.resume2b1P {
    font-size: 0.9rem;
    width: 95%;
    }
    #conteneur4, #conteneur3, #conteneur2, #conteneur1, .resume2b1,.servAreaparagraphe1aai,.servAreaparagraphe1aa,.services0,.services1a,.services2a,.services3a,.services4a {
    font-size: 0.9rem;
    }
    #contact, #partage{
    font-size: 1.4rem;
    }
    .social-contact, .social-share,.resume2b2,.resume2b1P,.resume5b2,.crd {
    font-size: 0.9rem;
    }
    #comm {
    width: 90%;
    }
    .servAreaparagraphe1A1, .servAreaparagraphe2A1,.servAreaparagraphe2A,.servAreaparagraphe3A1,.servAreaparagraphe4A1,.servAreaparagraphe3A,.servAreaparagraphe4A {
    width: 94%;
    }
    #conteneur1a,#conteneur2a,#conteneur3a,#conteneur4a,#conteneur5a,#conteneur6a,#conteneur7a {
  font-size: 0.8rem;
  text-align: justify;
  line-height: 1.5rem;
}
    .portfolioinitialz{
    font-size: 0.8rem;
    }
}

.image-cover {
    display: flex;
    box-shadow: 0 5px 30px rgb(104 104 104);
    /* flex: 1; */
    max-width: 100%;
    /* border: 1vh solid white; */
    border-radius: 50% / 20%;
}

.slides {
    overflow: hidden;
    for child elements */
    width: 100%; /* Large slide width */
     /* Large slide height */
     /* Optional background color */
    background: lightgrey;
    border-radius: 1vh;
    position: relative;
    /* justify-content: center; */
    width: 110rem;
    margin-bottom: 0;
}
.slides img {
    overflow: hidden;
    display: block;
    
     /* Positioning context for child elements */
     /* Large slide width */
     /* Large slide height */
    border-radius: 1vh;
    object-fit: cover;
    /* width: 100vw; */
    /* height: fit-content; */
    object-fit: cover;
}

.dots {
    position: relative;
    top: -1rem; /* Ajuster la position en fonction de la hauteur de l'écran */
    margin-bottom: 0;
    justify-content: center;
    display: flex;
    gap: 3%; /* Espace proportionnel entre les dots */
    width: 20rem;
    opacity: 0.8;
    z-index: 2000;
}

.dot {
    height: 0.5rem; /* Taille des dots proportionnelle à la largeur de l'écran */
    width: 0.5rem;
    border-radius: 50%; /* Forme ronde */
    border: 1px solid black;
    background-color: #e8e8e8; /* Couleur par défaut */
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Transition fluide lors des changements */
}

.dot.active {
    background-color: white; /* Couleur du dot actif */
    border: 1px solid black;
    height: 0.5rem; /* Taille légèrement plus grande pour le dot actif */
    width: 1.5rem;
    border-radius: 10px;
    transform: scale(1.2); /* Accentuation visuelle pour l'état actif */
    opacity: 1;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/* Appliquer les animations */
.slide1, .slide2, .slide3, .slide4, .slide5, .slide6 {
  animation: fadeIn 1s ease-in-out;
}

.slides .slide {
    display: none; /* Toutes les diapos sont masquées */
}

.slides .slide.active {
    display: block; /* La diapo active sera visible */
}

@keyframes rotateIntxt {
  from {
    transform: rotate(-360deg);
    opacity: 1;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
    left: 50%; /* Position finale */
  }
}

@keyframes bounceInTop {
  0% {
    transform: scale(0.2);
    top: -20%; /* Position finale */
    left: 0%;
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
    top: 10%; /* Position intermédiaire */
    left:60%;
  }
  100% {
    transform: scale(1);
    top: 3rem; /* Position initiale */
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes bounceInTop1 {
  0% {
    transform: scale(0.2);
    top: -20%; /* Position finale */
    left: 0%;
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
    top: 10%; /* Position intermédiaire */
    left:60%;
  }
  100% {
    transform: scale(1);
    top: 0%; /* Position initiale */
    left: 0%;
    transform: translateX(-50%);
    opacity: 1;
  }
}

@keyframes slidetxtInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
    top: 15%; /* Position initiale */
    left: 90%;
  }
  to {
    opacity: 1;
    top: 15%; /* Position initiale */
    left: 50%;
    transform: translateX(-50%);
  }
}

.text {
    FONT-WEIGHT: 200;
    position: absolute;
    transform: translate(-50%, -50%);
    /* color: #ffffff; */
    text-align: center;
    z-index: 1; /* S'assurer que le texte est au-dessus des images */
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Fond semi-transparent pour le contraste */
    visibility: none;
    opacity: 0;
}

.containerSLIDE {
    display: inline-block;
    position: absolute; /* Nécessaire pour le positionnement absolu du curseur */
    top: 0;
    left: 4rem;
    text-align: left;
    white-space: nowrap;
}

.texteSLIDE {
    font-size: 1rem;
    font-weight: bold;
    /* white-space: normal; */ /* Autorise les retours à la ligne */
     /* Gère le découpage des mots */
    margin-top: 2.7vh;
}
.slideLOGO {
    animation: bounceInTop1 1s ease-out;
    animation-fill-mode: forwards; /* Conserve l'état final */
    animation-delay: 1s;
    /* display: flex; */
    position: absolute;
    opacity:0;
    margin: 1vh;
    /* width: 5vh; */
    /* height: 5vh; */
}
.slideLOGO img {
    width: 3rem;
    height: 3rem;
    position: absolute;
    border: none;
}

.slide2 .text, .slide3 .text, .slide4 .text {
    animation: bounceInTop 1s ease-out;
    animation-fill-mode: forwards; /* Conserve l'état final */
    animation-delay: 0s;
    background-color: #0000004d;
    color: white;
    opacity:0;
    white-space:nowrap;
    font-weight:bold;
    padding: 0.5vh;
    border-radius: 6px;
    width: 21rem;
}

#text1-slide2, #text1-slide3, #text1-slide4 {
    position: absolute; /* Ajouté pour clarifier la position */
    animation: slidetxtInRight 1s ease-out;
    animation-fill-mode: forwards; /* Conserve l'état final */
    animation-delay: 1.1s; /* Assure un délai différent */
    background-color: #2a76e14d;
    color: white;
    margin-top: 3rem;
    align-content: center;
    align-items: center;
    text-align: center;
    opacity:0;
    white-space:nowrap;
    padding: 0.5vh;
    border-radius: 6px;
    width: 20rem;
 }
#text2-slide2, #text2-slide3, #text2-slide4 {
    position: absolute; /* Ajouté pour clarifier la position */
    animation: slidetxtInRight 1s ease-out;
    animation-fill-mode: forwards; /* Conserve l'état final */
    animation-delay: 1.4s; /* Assure un délai différent */
    background-color: #81a6324d;
    color: white;
    margin-top: 4.8rem;
    align-content:center;
    text-align: center;
    white-space:nowrap;
    opacity:0;
    padding: 0.5vh;
    border-radius: 6px;
    width: 20rem;
 }
#text3-slide2, #text3-slide3, #text3-slide4 {
    position: absolute; /* Ajouté pour clarifier la position */
    animation: slidetxtInRight 1s ease-out;
    animation-fill-mode: forwards; /* Conserve l'état final */
    animation-delay: 1.7s; /* Assure un délai différent */
    background-color: #ee23a74d;
    color: white;
    margin-top: 6.7rem;
    opacity:0;
    white-space:nowrap;
    padding: 0.5vh;
    border-radius: 6px;
    width: 20rem;
    text-align: center;
 }

#particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 97%;
    z-index: 1; /* Pour que les particules soient au-dessus */
}


#imapETtexte {
    /* border: 4px solid #050505; */
    /* background: #f18787; */
    width: 97%; /* Ajuster la largeur en fonction de vos besoins */
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
}

#imap {
    border: 2px solid #69ff6d;
    background: #aa9696;
    width: 44vh;
    height: 41vh;
    text-align: center;
    align-content: center;
    margin-top: 1vh;
}
#texteimap {
    width: 44vh;
    overflow: hidden;
    text-align: justify;
    margin-bottom: 20px;
    background-image: url('images/ph.jpg'); /* Remplacez 'votre-image.jpg' par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir toute la div */
    background-repeat: no-repeat; /* Évite la répétition de l'image */
    background-position: center; /* Centre l'image dans la div */
    }

.imapETtexte: :after {
    content: "";
    display: block;
    height: calc(100% - var(--second-child-height));
    clear:both;
}

.texteimapparagraphe1 {
    opacity: 1; /* Caché initialement */
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
    background-color: #000000;
    padding: 5px;
     /* Supprime complètement les marges */
    border-radius:5%;
    color:white;
    font-size: 2vh;
    margin-bottom: 1vh;
    margin-top: 0;
}
.texteimapparagraphe2 {
    opacity: 1; /* Caché initialement */
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
    background-color: #474646;
     /* Supprime complètement les marges */
    margin-bottom: 1vh;
    margin-top: 0;
    padding: 5px;
    border-radius:5%;
    color:white;
    font-size: 2vh;
}
.texteimapparagraphe3 {
    opacity: 1; /* Caché initialement */
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
    background-color: #616161;
    margin-top: 0; /* Supprime complètement les marges */
    margin-bottom: 1vh;
    padding: 5px;
    border-radius:5%;
    color:white;
    font-size: 2vh;
}
.texteimapparagraphe4 { 
    opacity: 1; /* Caché initialement */
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
    background-color: #757373;
    margin: 0; /* Supprime complètement les marges */
    padding: 5px;
    border-radius:5%;
    color: #f0f0f0;
    font-size: 2vh;
}

@keyframes colorChange {
    0% {
        background: black; /* Couleur initiale */
    }
    25% {
        background: #3e3c3c; /* Couleur intermédiaire */
    }
    50% {
        background: #2d2d2d; /* Autre couleur intermédiaire */
    }
    75% {
        background: red; /* Encore une autre */
    }
    100% {
        background: #17174f; /* Retour à la couleur initiale */
    }
}

@keyframes colorChange2 {
    0% {
        background: linear-gradient(to right, blue, gray);
    }
    25% {
        background: linear-gradient(to right, gray, orange);
    }
    50% {
        background: linear-gradient(to right, orange, red);
    }
    75% {
        background: linear-gradient(to right, red, #00ff00);
    }
    100% {
        background: linear-gradient(to right, #00ff00, blue);
    }
}

#abtxtb {
    display: inline-block;
    margin-right: 1vh;
    padding: 0.8vh 1.2vh;
    text-align: center;
    border: none;
    background: #b53434;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: colorChange 2s infinite; /* Applique l'animation en boucle */
}

#abtxtb:hover {
    transform: scale(1.2); /* Zoom léger au survol */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /* Accentuation de l'ombre */
    text-decoration: underline;
  animation:none;
}


.services0 {
  text-align: justify;
  /* background-color: #3a1ef8; */
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
  min-width: 18rem;
  width: 95%;
  padding: 2%;
  margin: 0.5rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  }

/* Conteneur des paragraphes */
.servAreaA,.servArea {
  text-align: justify;
  background-color: transparent;
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
  margin: 0.5rem;
  margin-top: 1rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  }
.apropos, .apropos1{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  flex: 1;
  min-width: 18rem;
  max-width: 63rem;
  }
.services1a,.services2a,.services3a,.services4a {
  text-align: justify;
  /* background-color: #3a1ef8; */
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
  min-width: 18rem;
  width: 58rem;
  flex: 1;
  margin: 0.5rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  }
.servArea1 {
  text-align: justify;
  /* background-color: #3a1ef8; */
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  display: flex;
  position: relative;
  min-width: 22rem;
  max-width: 60rem;
  flex: 1;
  order: 2;
  margin: 0.5rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  }

.servAreaAb {
  text-align: justify;
  /* background-color: #3a1ef8; */
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
  min-width: 22rem;
  max-width: 83rem;
  /* flex: 1; */
  margin: 0.5rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  }
.servAreaAb1 {
  text-align: justify;
  /* background-color: #3a1ef8; */
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
  min-width: 22rem;
  max-width: 83rem;
  /* flex: 1; */
  margin: 0.5rem;
  box-shadow: 0 5px 30px rgb(104 104 104);
  margin-bottom: 1rem;
  }

.gridimageservArea, .gridimageservAreaA {
    box-shadow: 0 5px 30px rgb(104 104 104);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2, 1fr);
    /* border: 2px solid lightgray; */
    /* background: #0000007a; */
    gap: 1%;
    border-radius: 4%;
    overflow: hidden;
    width: 22rem;
    height: 22rem;
    margin: 0.5rem;
}

.gridimageservArea1, .gridimageservArea2, .gridimageservArea3, .gridimageservArea4,
.gridimageservArea1A, .gridimageservArea2A, .gridimageservArea3A, .gridimageservArea4A {
  /* background-color:#7d5a18; */
  display:flex;
  align-items:center;
  justify-content: center;
  width: 11rem;
  border: 1px solid;
  height: 11rem;
}

.gridimageservArea1 img, .gridimageservArea2 img, .gridimageservArea3 img, .gridimageservArea4 img,
.gridimageservArea1A img, .gridimageservArea2A img, .gridimageservArea3A img, .gridimageservArea4A img {
  width: 11rem;
  height: 11rem;
  overflow:hidden;
  object-fit: cover;
  position: relative;
  border: 1px solid;
}

#imageETservArea,#imageETservAreaA,.secondcontent {
    margin-bottom: 1rem;
    margin-top: 1rem;
    /* border: 1vh solid #050505; */
    /* background: #f7f7f7; */
     /* Ajuster la largeur en fonction de vos besoins */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 100%;
}
#services1,#services2,#services3,#services4 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    /* border: 1vh solid #050505; */
    /* background: #f7f7f7; */
     /* Ajuster la largeur en fonction de vos besoins */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 100%;
}
#imageETservArea1 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    /* border: 1vh solid #050505; */
    /* background: #f7f7f7; */
     /* Ajuster la largeur en fonction de vos besoins */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 100%;
}
.aprop {
    margin: 1rem;
    flex-direction:column;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 59rem;
    min-width: 22rem;
    flex: 1;
}

#servAreaparagraphe, #servAreaparagrapheA {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    /* border: 1px solid #011f4b; */
    display: flex;
    border-radius: 0.5vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    max-width: 63rem;
    margin: 0.5rem;
    margin-bottom: 0;
    background-color: #ffffff4d;
}
#servAreaparagraphea, #servAreaparagrapheaA {
    display: flex;
    width: 68%;
    max-width: 90%;
    border-radius: 1%;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-left: 2rem;
}
    
#servAreaparagrapheb, #servAreaparagraphebA, #prtflinitialb {
    display: inline-block;
    padding: 0.5%;
    text-align: center;
    border: none;
    background: #b53434;
    font-weight: bold;
    color: white;
    border-radius: 0.5vh;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: colorChange 2s infinite; /* Applique l'animation en boucle */
}
.mily  {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    /* color: white; */
    font-size:0.9rem;
}

#servAreaparagrapheb:hover, #servAreaparagraphebA:hover , #prtflinitialb:hover {
    transform: scale(1.2); /* Zoom léger au survol */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /* Accentuation de l'ombre */
    text-decoration: underline;
  animation:none;
}

.servAreaparagraphe1,.servAreaparagraphe1A {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     
     /* Supprime complètement les marges */
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     border-radius: 0.5vh;
     align-content: center;
     text-align: justify;
     padding: 0.9%;
     margin-top: 0;
     margin-bottom: 0;
}
.servAreaparagraphe1aa {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 5px 30px rgb(104 104 104);
     /* Supprime complètement les marges */
     border-radius: 0.5vh;
     align-content: center;
     text-align: justify;
     padding: 0.9%;
     margin-top: 1.4rem;
     margin-bottom: 0;
     width: 100%;
}
.servAreaparagraphe1aai {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 5px 30px rgb(104 104 104);
     /* Supprime complètement les marges */
     border-radius: 0.5vh;
     align-content: center;
     text-align: justify;
     padding: 0.9%;
     margin-top: 0;
     margin-bottom: 0;
     width: 100%;
}
.servAreaparagraphe1AA {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     /* Supprime complètement les marges */
     border-radius: 0.5vh;
     align-content: center;
     text-align: justify;
     padding: 0.9%;
     margin-top: 0;
     margin-bottom: 0;
}
.servAreaparagraphe1A1 {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #ffffff4d;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     /* Supprime complètement les marges */
     border-radius: 0.5vh;
     align-content: center;
     text-align: center;
     padding: 1%;
     margin-top: 0;
     margin-bottom: 0;
     border: 0.1rem solid;
}

.servAreaparagraphe2, .servAreaparagraphe3, .servAreaparagraphe4, .servAreaparagraphe5 {
     /* Caché initialement *tes/
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     /* Supprime complètement les marges */
     padding: 1.8%;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     align-content: center;
     border-radius: 0.5vh;
     text-align: center;
     margin-top: 0.3rem;
     margin-bottom: 0;
}

.servAreaparagraphe2A, .servAreaparagraphe3A, .servAreaparagraphe4A {
     /* Caché initialement *tes/
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     /* Supprime complètement les marges */
     padding: 1%;
     box-shadow: 0 5px 30px rgb(104 104 104);
     align-content: center;
     border-radius: 0.5vh;
     text-align: justify;
     margin-top: 0.3rem;
     margin-bottom: 0;
}

.servAreaparagraphe2A1, .servAreaparagraphe3A1, .servAreaparagraphe4A1 {
     /* Caché initialement *tes/
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #ffffff4d;
     /* Supprime complètement les marges */
     padding: 1%;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     align-content: center;
     border-radius: 0.5vh;
     text-align: center;
     margin-top: 1rem;
     margin-bottom: -6px;
}
.imageETservArea::after {
    content: "";
    display: block;
    height: calc(100% - var(--second-child-height));
    clear: both;
}

footer {
    background-color: #000000;  /* Couleur de fond noire */
    border-top: 1px solid gray;
    color: #ffffff;
    text-align: center;
    padding: 9px 0;
      /* Position relative pour les éléments enfants */
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
    position: sticky;
    bottom: -2px;
    z-index: 6000;
    font-size: 0.7rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
footer p {
    margin: 0;  /* Élimine toutes les marges par défaut */
    padding: 0;  /* Élimine tous les paddings */
}
footer p + p {
    margin-top: 1px;  /* Ajuste la marge supérieure entre les paragraphes */
}

#back-to-top {
    position: fixed; /* Fixé en bas à droite */
    bottom: 3vh;
    right: 3vw;
    display: none; /* Caché par défaut */
    padding: 10px 11px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    font-size: 1.7rem;
    line-height: 1rem;
    opacity: 0.7;
}

#back-to-top:hover {
    background-color: red; /* Couleur au survol */
}
#back-to-top1,#back-to-top2,#back-to-top3,#back-to-top4,#back-to-top5 {
    position: fixed; /* Fixé en bas à droite */
    bottom: 3vh;
    right: 3vw;
    display: none; /* Caché par défaut */
    padding: 10px 11px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    font-size: 1.7rem;
    line-height: 1rem;
    opacity: 0.7;
}

#back-to-top1:hover,#back-to-top2:hover,#back-to-top3:hover,#back-to-top4:hover,#back-to-top5:hover {
    background-color: red; /* Couleur au survol */
}


/* Style du loader */
/* Style du loader */
/* Style du loader */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* Fond neutre clair par défaut */
    display: flex;
    flex-direction: column; /* Conteneur principal empilé verticalement */
    justify-content: center; /* Centrer verticalement */
    align-items: center; /* Centrer horizontalement */
    z-index: 9999; /* Priorité d'affichage */
}

/* Spinner animation */
.spinner {
    border: 4px solid #d9d9d9; /* Couleur neutre */
    border-top: 4px solid #3498db; /* Couleur principale */
    border-radius: 50%; /* Forme circulaire */
    width: 1.5rem; /* Taille du spinner */
    height: 1.5rem;
    animation: spin 1s linear infinite; /* Appliquer l'animation */
    margin-bottom: 1rem; /* Espacement entre le spinner et le contenu */
}

/* Effet de rotation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Couleurs pour le mode sombre */
@media (prefers-color-scheme: dark) {
    #page-loader {
        background-color: #333; /* Fond neutre sombre */
    }
    .spinner {
        border: 5px solid #555; /* Couleur neutre sombre */
        border-top: 5px solid #4a90e2; /* Couleur principale plus douce */
    }
    .mily {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
}
}

/* Conteneur pour le logo et le texte */
.loader-content {
    display: flex; /* Afficher le contenu sous forme de ligne (horizontalement) */
    flex-direction: row; /* Positionnement côte à côte */
    align-items: center; /* Alignement vertical */
    gap: 0.5rem; /* Espacement entre le logo et le texte */
    margin: 0;
}

/* Logo */
.loader-logo {
    width: 2rem; /* Taille du logo */
    height: auto; /* Respecter les proportions */
}

/* Texte */
.loader-text {
    font-size: 0.8rem;
    color: #555; /* Couleur neutre pour le texte */
    font-weight: bold;
    margin: 0;
    margin-left: -0.4rem;
}

/* Couleurs du texte pour le mode sombre */
@media (prefers-color-scheme: dark) {
    .loader-text {
        color: #ddd; /* Couleur adaptée au mode sombre */
    }
}

#contactme, #sharethispage {
    text-align: center;
    background-color: #ffffff4d;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    height: 2.5rem;
    align-items: center;
    align-content: center;
    border-radius: 2vh;
    margin: 0;
    font-weight: bold;
}

 {
    background: #ffffff29;
    min-width: 23rem;
    width: 37%;
    margin: 1%;
    border-radius: 2vh;
    box-shadow:0 5px 30px rgb(104 104 104);
}
#contact,#partage {
    background: #0a0e1500;
    min-width: 19rem;
    max-width: 41rem;
    flex: 1;
    margin: 1%;
    margin-bottom: 2rem;
    border-radius: 2vh;
    box-shadow:0 5px 30px rgb(104 104 104);
    overflow: hidden;
}

#comm{
    /* border: 1vh solid white; */
    display:flex;
    flex-wrap:wrap;
    margin:0;
    margin-top: 2rem;
    margin-bottom: 4rem;
    padding:0;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.social-contact, .social-share {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.social-share a, .social-contact a, .footer-contact a { 
    display: inline-block;
    margin: 0.5rem;
    padding: 7px 8px;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

.social-share a:hover, .social-contact a:hover, .footer-contact a:hover {
    background-color: #005bb563;
    color:white;
    transform: scale(1.3);
}
.icones {
    width: 1.5rem;
    margin: 1%;
}


.portfoli {
  /* border: 1px solid gray; */
  border-radius: 1.5vh;
  background-color: #0a0e1500;
  box-shadow: 0 5px 30px rgb(104 104 104);
  position: relative;
  align-items: center;
  height: 25.2rem;
  margin: 0.5rem;
  overflow: hidden;
}
.portfoli::after {
    content: "";
    display: block;
    height: calc(100% - var(--second-child-height));
    clear: both;
}

#prtflinitial {
    display: flex;
    /* border: 1px solid #69ff6d; */
    margin-bottom: -0.5rem;
    background: #ffffff4d;
    height: 3rem;
    min-width: 19rem;
    text-align: center;
    border-radius: 0.5vh;
    position: relative;
    justify-content: center;
    align-items: center;
  } 
.prtflitem {
  display: flex;
  flex-wrap: nowrap;
   /* Largeur fixe pour afficher un élément à la fois */
  margin: 1%;
   /* Cache les éléments hors écran */
  position: relative;
  justify-content: center;
  /* background-color: lightblue; */
}

.prtflitem > div {
  flex-shrink: 0; /* Évite que les éléments se compressent */
  width: 24rem; /* Chaque slide occupe toute la largeur */
  transition: transform 0.5s ease-in-out; /* Animation fluide pour le défilement */
}

.prtfl1, .prtfl2, .prtfl3, .prtfl4 {
  height:fit-content;
  /* border: 2px solid #69ff6d; */
  /* background: #aa9696; */
  display:flex;
  flex-direction:column;
  gap:1vh;
  margin-top:1vh;
  align-items: center;
}
.prtfl1img, .prtfl2img, .prtfl3img, .prtfl4img {
  width: 24rem;
  height: 15rem;
  /* border: 2px solid #d83b0c; */
  /* background: #fff7f7; */
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap: 0.4rem;
}
.prtfl1img1, .prtfl1img2,
.prtfl2img1, .prtfl2img2,
.prtfl3img1, .prtfl3img2,
.prtfl4img1, .prtfl4img2
{
  border: 1px solid black;
  height: 15rem;
  background-color: purple;
}

.prtfl1img1 img, .prtfl1img2 img,
.prtfl2img1 img, .prtfl2img2 img,
.prtfl3img1 img, .prtfl3img2 img,
.prtfl4img1 img, .prtfl4img2 img
{
  width: 11rem;
  height: 15rem;
  object-fit: cover;
}



#conteneur4, #conteneur3, #conteneur2, #conteneur1 {
  background-color: #ffffff29;
  border: 1px solid black;
  border-radius: 5px;
  padding: 7px;
  height: 4rem;
  margin: 2%;2%; */
  width: 22rem;
}
/* Contrôles pour les flèches */
.carousel-controls {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  align-items: center;
  bottom: -0.3rem;
  height: 1rem;
}
.carousel-controls button {
  background: black;
  color: white;
  border: none;
  pointer-events: all;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight:bold;
  position: relative;
  border-radius: 6px;
  top: 1rem;
  line-height: 0rem;
}
/* Indicateurs (dots) */
.carousel-indicators {
  position: absolute;
  bottom: 0.5rem;
  width: fit-content;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  left: 38%;
}
.carousel-indicator {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(255 255 255 / 50%);
  border: 1px solid black;
  border-radius: 50%;
  cursor: pointer;
}
.carousel-indicator.active {
  background: white;
  border: 1px solid black;
  width: 2rem;
  border-radius: 1.5vh;
}

.carousel-controls button:hover {
  transform: scale(1.4); /* Zoom léger au survol */
} 
.prev  {
  left: 28%;
} 

.next {
  right: 28%;
}


.portfolioa {
  width: 100vw;
  margin-top: 1vh;
  /* border: 1px solid white; */
  /* background-color: #d16767; */
  display:flex;
  flex-wrap: wrap;
  gap: 2vw;
  /* overflow: hidden; */
  position: relative;
  justify-content: center;
  align-items: center;
}
.portfolioa::after {
    content: "";
    display: block;
    height: calc(100% - var(--second-child-height));
    clear: both;
}

#prtflinitiala {
    /* border: 1px solid #69ff6d; */
    /* background: #8770da; */
    width: 65%;
    text-align: center;
    align-content: center;
    border-radius: 1.5vh;
    font-weight: bold;
    position: relative;
    font-size: 1.2rem;
    left: 1rem;
  }
#portfolioinitial {
    background: #ffffff4d;
    box-shadow: 0 5px 30px rgb(104 104 104);
    width: 93%;
    max-width: 98rem;
    text-align: center;
    margin-top: 1rem;
    align-content: center;
    border-radius: 0.5rem;
    font-weight: bold;
    position: relative;
    font-size: 1.2rem;
    padding: 1rem;
  }
#portfolioinitialz {
    background: #0a0e1500;
    box-shadow: 0 5px 30px rgb(104 104 104);
    width: 93%;
    max-width: 96rem;
    text-align: justify;
    margin-top: 1rem;
    align-content: center;
    border-radius: 0.5rem;
    position: relative;
    padding: 1rem;
  }
.intermap {
  width: 23rem;
  height: 23rem;
  border: 1px solid black;
  background: #aa9696;
  display:flex;
  flex-direction:column;
  gap:1vh;
  margin: 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 30px rgb(104 104 104);
}

.intermap1 {
  width: 23rem;
  height: 23rem;
  border: 1px solid black;
  background: #aa9696;
  display:flex;
  flex-direction:column;
  gap:1vh;
  justify-content: center;
  align-items: center;
  cursor: default;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 30px rgb(104 104 104);
  margin: 1rem;
}
.prtfl1a,.prtfl2a,.prtfl3a,.prtfl4a,.prtfl5a,.prtfl6a,.prtfl7a {
  width: 23rem;
  height:fit-content;
  border: 0.1rem solid;
  /* background: #aa9696; */
  display:flex;
  flex-direction:column;
  gap: 1vh;
  margin: 1rem;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 30px rgb(104 104 104);
  border-radius: 20px;
  overflow: hidden;
}

.prtfl1imga,.prtfl2imga,.prtfl3imga,.prtfl4imga,.prtfl5imga,.prtfl6imga,.prtfl7imga {
  width: 23rem;
  height: 16rem;
  /* border: 4px solid #d83b0c; */
  /* background: #fff7f7; */
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:1vh;
}
.prtfl1img1a,.prtfl1img2a,.prtfl2img1a,.prtfl2img2a,.prtfl3img1a,.prtfl3img2a,.prtfl4img1a,.prtfl4img2a,
.prtfl5img1a,.prtfl5img2a,.prtfl6img1a,.prtfl6img2a,.prtfl7img1a,.prtfl7img2a {
  border: 0.1rem solid;
  height: 16rem;
  background-color: purple;
}

.prtfl1img1a img,.prtfl1img2a img,.prtfl2img1a img,.prtfl2img2a img,.prtfl3img1a img,.prtfl3img2a img,.prtfl4img1a img,
.prtfl4img2a img,.prtfl5img1a img,.prtfl5img2a img,.prtfl6img1a img,.prtfl6img2a img,.prtfl7img1a img,.prtfl7img2a img {
  width: 11.1rem;
  height: 16rem;
  object-fit: cover;
}
#conteneur1a,#conteneur2a,#conteneur3a,#conteneur4a,#conteneur5a,#conteneur6a,#conteneur7a {
  background-color: #0a0e1500;
  border: 1px solid;
  height: 6rem;
  max-width: 23rem;
}
.txtc1a,.txtc2a,.txtc3a,.txtc4a,.txtc7a {
  padding: 0.5rem;
}
.txtc6a,.txtc5a {
  padding: 0.5rem;
  padding-top: 0.2rem;
}

#lightbox {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    z-index: 6000;
    overflow: hidden;
}

#lightbox-description {
    background: white;
    color: black;
    padding: 0.5rem;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    display: block;
    width: auto;
    max-width: 79vw; /* Correspond à max-width de l’image */
}


/* Désactive le scroll quand lightbox est ouvert */
body.lightbox-open {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

#lightbox-img {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
    cursor: zoom-in;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 6100;
    background-color: red;
    padding: 5px;
    border-radius: 50%;
    line-height: 1.4rem;
    transition: transform 0.2s;
}


.lightbox-close:hover {
    transform: scale(1.2);
}


#collab { 
    border: 2px solid #69ff6d;
    background: #aa9696;
    width: 35vh;
    height: 45.5vh;
    text-align: center;
    align-content: center;
    /* flex: 1; */
    align-self: flex-end;
}
.collabArea {
    /* border: 2px solid lightgrey; */
    display: flex;
    flex-direction: column;
    text-align: justify;
    position: relative;
    width: 60rem;
    min-width: 18rem;
    margin: 0.5rem;
    flex: 1;
    /* box-shadow: 0 5px 30px rgb(104 104 104); */
}
 
.collabAreaparagraphe1 {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #ffffff4d;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     padding: 0.5%;
     /* Supprime complètement les marges */
     border: 0.15rem solid;
     border-top-left-radius: 0.5vh;
     border-top-right-radius: 0.5vh;
     text-align: center;
     align-content: center;
     margin: 0;
     font-size: 1.5rem;
     font-weight: bold;
}
.collabAreaparagraphe2 {
     /* Caché initialement *tes/
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     /* background-color: #e273a1; */
     /* Supprime complètement les marges */
     align-content: center;
     text-align: justify;
     border: 0.15rem solid;
     border-bottom-left-radius: 0.5vh;
     border-bottom-right-radius: 0.5vh;
     box-shadow: 0 5px 30px rgb(104 104 104);
}
.collabAreaparagraphe2a, .collabAreaparagraphe2b,.collabAreaparagraphe2c,.collabAreaparagraphe2d {
     /* Caché initialement *tes/
    position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     /* Supprime complètement les marges */
     padding: 1%;
     border-radius: 0.5vh;
     align-content: center;
     text-align: center;
     margin: 0;
}
.collabAreaparagraphe3 {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #ffffff4d;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
     /* Supprime complètement les marges */
     padding: 0.5%;
     text-align: center;
     align-content: center;
     border: 0.15rem solid;
     border-top-left-radius: 0.5vh;
     border-top-right-radius: 0.5vh;
     margin-top: 1rem;
     margin-bottom: 0;
     font-size: 1.5rem;
     font-weight: bold;
} 
.collabAreaparagraphe4 {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     /* background-color: #a05283; */
     margin: 0; /* Supprime complètement les marges */
     text-align: justify;
     align-content: center;
     border: 0.15rem solid;
     border-bottom-left-radius: 0.5vh;
     border-bottom-right-radius: 0.5vh;
     box-shadow: 0 5px 30px rgb(104 104 104);
}
.collabAreaparagraphe4a,.collabAreaparagraphe4b,.collabAreaparagraphe4c {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
      /* Supprime complètement les marges */
     padding: 1%;
     text-align: center;
     align-content: center;
     border-radius: 0.5vh;
     margin: 0;
}
.collabAreaparagraphe4d {
     /* Caché initialement */
     display: flex;
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     background-color: #0a0e1500;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
      /* Supprime complètement les marges */
     text-align: center;
     align-items: center;
     border-radius: 0.5vh;
     padding: 1%;
     margin: 0;
}
.collabAreaparagraphe4da {
     /* Caché initialement */
     position: relative; /* Nécessaire pour le décalage avec 'left' ou 'right' */
     margin: 0; /* Supprime complètement les marges */
}
.collabAreaa{
    /* width:100%; */
    display: flex;
    justify-content: center;
    margin-right: 0.8vh;
    justify-content: center;
    align-items: center;
} 
#collabAreab {
    display: inline-block;
    text-align: center;
    border: none;
    background: #b53434;
    color: white;
    border-radius: 0.5vh;
    padding: 0.2rem;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: colorChange 3s infinite; /* Applique l'animation en boucle */
    position: absolute;
    right: 2%;
}

#collabAreab:hover {
    transform: scale(1.2); /* Zoom léger au survol */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /* Accentuation de l'ombre */
    text-decoration: underline;
    animation:none;
}

/* tout sut about.html */
.AboutC1texte {
    background: #9d6060;
    display: flex;
    flex: 1;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    text-align: justify;
    width: 80%;
    padding: 1.5rem;
}
.Aboutimage1 {
    background: #803434;
    width: 22rem;
    height: 22rem;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    justify-content: center;
    align-items: center;
}

.servicesC {
    /* background: #9d6060; */
    display: flex;
    flex-wrap:wrap;
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 1.5rem;
    width: 100vw;
}
/* tout sut services.html */

.servicesC1 {
    background: #9d6060;
    display: flex;
    flex-wrap:wrap;
    /* flex: 1; */
    justify-content: center;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding: 1.5rem;
}

.servicesM1, .servicesM2, .servicesM3 {
    /* background: #ffffff; */
    box-shadow: 0 5px 30px rgb(104 104 104);
    border-radius: 1rem;
    width: fit-content;
    display: flex;
    flex-direction: column;
    /* gap: 2vh; */
    padding: 1vh;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    width: 22rem;
    margin: 1.3rem;
}

.commandesM1, .commandesM2, .commandesM3 {
    /* border: 1px solid black; */
    background: #80808066;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    width: 21.5rem;
    padding-bottom: 2%;
}

.servicesmapM1, .servicesmapM2, .servicesmapM3 {
    border: 2px solid black;
    width: 21rem;
    height: 22rem;
    align-items: center;
    margin:0;
    padding:0;
    /* display: flex; */
}

#exportMapImage1, #exportMapImage2, #exportMapImage3 {
    width: 12rem;
    height: 2rem; /* Ajustez cette hauteur selon vos besoins */
    margin: 0;
    padding: 0;
    border-radius: 20px;
    border:1px solid white;
    background: grey;
    margin-top: 0.5rem;
    animation: colorChange 2s infinite;
}

#exportMapImage1:hover, #exportMapImage2:hover, #exportMapImage3:hover {
  transform: scale(1.1); 
}

#mapM1, #mapM2, #mapM3 {
    width: 100%;
    height: 100%; /* Ajustez cette hauteur selon vos besoins */
    margin: 0;
    padding: 0;
}





#mapportfolio {
            width: 100%;
            height: 100%;
        }


.servicesCClayout {
    background: #7e3939;
    width: 37vh;
    height: 33vh;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    margin-top:2vh;
}

#menu-containerM1, #menu-containerM3, #menu-containerM2 {
    /* margin: 1vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
    border-radius: 10px;
    margin-bottom: 1%;
}

#regionSelect {
    font-size: 14px;
}
.labelM1, .labelM2, .labelM3 {
    background: orangered;
    width: 20rem;
    margin: 1%;
    height: 2rem;
    text-align: center;
    align-content: center;
    border-radius: 10px;
}

#exportMapImage {
    width:22vh;
    height: 3vh;
    margin-top: 1vh;
    border: 1px solid;
    border-radius: 10px;
}