/* Style pour toute la page */
*{
    margin: 0; /* Annule les marges par défaut des éléments */
    padding: 0; /* Annule les espacements internes par défaut des éléments */
    box-sizing: border-box; /* Inclut les bordures et les paddings dans la largeur et la hauteur totales des éléments */
    text-decoration: none; /* Enlève les décorations de texte comme le soulignement */
    border: none; /* Enlève les bordures par défaut */
    outline: none; /* Enlève l'indication de focus (contour) par défaut */
    scroll-behavior: smooth; /* Ajoute un défilement fluide lorsque l'on descend ou remonte dans la page */
    font-family: "Poppins", sans-serif; /* Définit la police de caractères globale */
}

/* Couleur principales de la page */
:root{
    --bg-color : #000000; /* Définition d'une couleur de fond principale (noir) */
    --second-bg-color : #001b19; /* Définition d'une deuxième couleur de fond (très foncée) */
    --text-color : white; /* Définition de la couleur du texte (blanc) */
    --main-color : #0bf6d7; /* Définition de la couleur principale (un cyan clair) */
}

/* Style de la scrollbar */
::-webkit-scrollbar{
    width: 15px; /* Définit la largeur de la barre de défilement */
}
::-webkit-scrollbar-thumb{
    background-color: var(--main-color); /* Définit la couleur du "pouce" de la scrollbar avec la couleur principale */
}
::-webkit-scrollbar-track{
    background-color: var(--bg-color); /* Définit la couleur du fond de la scrollbar */
    width: 50px; /* Définie la largeur de la piste de la scrollbar */
}

/* Style du html */
html{
    font-size: 60%; /* Réduit la taille de police de base du document pour qu'elle soit plus petite que la taille par défaut */
    overflow-x: hidden; /* Empêche le débordement horizontal */
}

/* Style du body */
body{
    background: var(--bg-color); /* Applique la couleur de fond noire au body */
    color: var(--text-color); /* Applique la couleur du texte blanche au body */
}

/* Header */

/* Style général du header */
.header{
    position: fixed; /* Fixe le header en haut de la page */
    top: 0; /* Place le header tout en haut */
    left: 0; /* Place le header tout à gauche */
    padding: 4rem 12% 4rem; /* Ajoute un espacement interne au header */
    background: rgba(0,0,0,0.3); /* Donne un fond semi-transparent au header */
    backdrop-filter: blur(10px); /* Applique un flou au fond derrière le header */
    display: flex; /* Utilise Flexbox pour organiser le contenu */
    justify-content: space-between; /* Sépare les éléments avec de l'espace entre eux */
    align-items: center; /* Centre verticalement les éléments */
    z-index: 100; /* Définit un indice de superposition élevé pour le header */
    width: 100%; /* Définit une largeur de 100% pour que le header prenne toute la largeur de l'écran */
}

/* Style du logo dans le header */
.logo{
    font-size: 3rem; /* Définit la taille de la police du logo */
    color: var(--text-color); /* Définit la couleur du logo en blanc */
    font-weight: 800; /* Définit une épaisseur de police très forte */
    cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
    transition: 0.3s ease; /* Ajoute une transition douce lors du survol */
}

/* Style du logo lors d'un passage dessus */
.logo:hover{
    transform: scale(1.1); /* Agrandit légèrement le logo au survol */
}

/* Style du span dans le logo */
.logo span{
    text-shadow: 0 0 25px var(--main-color); /* Applique une ombre lumineuse au texte du logo */
}

/* Style des liens dans la navbar */
.navbar a{
    font-size: 1.8rem; /* Définit la taille des liens de la navbar */
    color: var(--text-color); /* Définit la couleur des liens en blanc */
    margin-left: 4rem; /* Ajoute un espace à gauche de chaque lien */
    font-weight: 500; /* Définit une épaisseur de police modérée */
    transition: 0.3s ease; /* Ajoute une transition douce lors du survol */
    border-bottom: 3px solid transparent; /* Ajoute une bordure invisible au bas des liens */
}

/* Style des liens lors d'un passage dessus et lorsque la classe active est ajoutée */
.navbar a:hover,
.navbar a.active{
    color: var(--main-color); /* Change la couleur des liens au survol ou lorsque l'élément est actif */
    border-bottom: 3px solid var(--main-color); /* Ajoute une bordure colorée au bas du lien */
}

/* Style de l'icône menu lors de son apparition sur téléphone */
#menu-icon{
    font-size: 3.6rem; /* Définit la taille de l'icône du menu */
    color: var(--main-color); /* Définit la couleur de l'icône en cyan */
    display: none; /* Cache l'icône du menu par défaut */
}

/* Style pour toutes les sections */
section{
    min-height: 100vh; /* Définit une hauteur minimale de 100% de la hauteur de la fenêtre */
    padding: 10rem 12% 10rem; /* Ajoute des espacements internes aux sections */
}

/* Section Home */

/* Style géé=néral de la section Home */
.home{
    display: flex; /* Utilise Flexbox pour organiser le contenu */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 15rem; /* Ajoute un espace entre les éléments enfants */
    opacity: 0; /* Rend la section invisible initialement */
    transform: translateY(-30px); /* Déplace la section un peu plus haut hors de l'écran */
    animation: apparition 2s 0.5s ease-out forwards; /* Ajoute une animation d'apparition */
}

/* Style du contenu de la section Home */
.home-content{
    display: flex; /* Utilise Flexbox pour organiser le contenu */
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: flex-end; /* Aligne les éléments à droite */
    text-align: right; /* Aligne le texte à droite */
    justify-content: center; /* Centre verticalement les éléments */
}

/* Couleur du span */
span{
    color: var(--main-color); /* Change la couleur des span en cyan */
}

/* Style du texte en h3 dans la section Home */
.home-content h3{
    margin-bottom: 2rem; /* Ajoute un espacement sous le titre */
    margin-top: 1rem; /* Ajoute un espacement au-dessus du titre */
    font-size: 3.5rem; /* Définit la taille de la police du titre */
}

/* Style du texte en h1 dans la section Home */
.home-content h1{
    font-size: 7rem; /* Définit la taille de la police du titre principal */
    font-weight: 700; /* Définit l'épaisseur du texte */
    margin-top: 1.5rem; /* Ajoute un espacement au-dessus du titre */
    line-height: 1; /* Définit une hauteur de ligne compacte */
}

/* Style de l'image dans la section Home */
.home-img img{
    position: relative; /* Positionne l'image relativement */
    width: 20vw; /* Définit une largeur basée sur la vue */
    border-radius: 10%; /* Applique des bords arrondis à l'image */
    box-shadow: 0 0 25px var(--main-color); /* Applique une ombre lumineuse autour de l'image */
    cursor: pointer; /* Change le curseur en main lors du survol */
    transition: 0.4s ease-in-out; /* Ajoute une transition douce au survol */
}

/* Style au survol de l'image */
.home-img img:hover{
    box-shadow: 0 0 25px var(--main-color),
                0 0 50px var(--main-color),
                0 0 100px var(--main-color); /* Augmente l'effet d'ombre au survol */
}

/* Style du paragraphe dans la section Home */
.home-content p{
    font-size: 1.5rem; /* Définit la taille de la police du paragraphe */
    font-weight: 500; /* Définit l'épaisseur de la police */
    line-height: 1.0; /* Définit une hauteur de ligne plus serrée */
    max-width: 1000px; /* Définit une largeur maximale pour le texte */
}

/* Style des liens contenus dans social-icons dans la section Home */
.social-icons a{
    display: inline-flex; /* Affiche les éléments en ligne avec Flexbox */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    width: 4.5rem; /* Définit la largeur des icônes */
    height: 4.5rem; /* Définit la hauteur des icônes */
    background: transparent; /* Définit un fond transparent */
    border: 2px solid var(--main-color); /* Ajoute une bordure de couleur cyan */
    font-size: 2.5rem; /* Définit la taille de la police des icônes */
    border-radius: 50%; /* Définit des coins arrondis pour un cercle */
    color: var(--main-color); /* Définit la couleur du texte en cyan */
    margin: 3rem 1.5rem 3rem 0; /* Ajoute des marges autour des icônes */
    transition: 0.3s ease; /* Ajoute une transition au survol */
}

/* Style au survol des liens contenus dans social-icons dans la section Home */
.social-icons a:hover{
    color: var(--text-color); /* Change la couleur du texte en blanc au survol */
    transform: scale(1.3)translateY(-5px); /* Agrandit l'icône et la fait légèrement monter */
    box-shadow: 0 0 25px var(--main-color); /* Ajoute un effet d'ombre au survol */
    background-color: var(--main-color); /* Change le fond au survol */
}

/* Style du bouton dans la section Home */
.btn{
    display: inline-block; /* Affiche le bouton en ligne */
    padding: 1rem 2.8rem; /* Ajoute des espacements internes au bouton */
    background: var(--main-color); /* Définit un fond cyan */
    box-shadow: 0 0 25px var(--main-color); /* Ajoute une ombre lumineuse */
    border-radius: 4rem; /* Applique des bords arrondis */
    font-size: 1.6rem; /* Définit la taille de la police */
    color: black; /* Définit la couleur du texte en noir */
    border: 2px solid transparent; /* Enlève la bordure par défaut du bouton */
    letter-spacing: 0.1rem; /* Ajoute un espacement entre les lettres */
    font-weight: 600; /* Définit une épaisseur de police élevée */
    transition: 0.3s ease-in-out; /* Ajoute une transition au survol */
    cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
}

/* Style au survol du bouton dans la section Home */
.btn:hover{
    transform: scale(1.05); /* Agrandit légèrement le bouton au survol */
    box-shadow: 0 0 50px var(--main-color); /* Augmente l'effet d'ombre au survol */
}

/* Style des boutons pour feedly, tableau de compétences dans la section Home */
.btn-group{
    display: inline-flex; /* Affiche les éléments en ligne avec Flexbox */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    gap: 1.5rem; /* Ajoute un espace entre les boutons */
}

/* Style au survol des boutons pour feedly, tableau de compétences dans la section Home */
.btn-group a:nth-of-type(2):hover{
    box-shadow: 0 0 25px var(--main-color); /* Ajoute une ombre au survol */
    background-color: var(--main-color); /* Change le fond au survol */
    color: black; /* Change la couleur du texte au survol */
}

/* Style pour l'animation du texte dans la section Home */
.text-animation{
    font-size: 34px; /* Définit la taille de la police pour l'animation */
    font-weight: 600; /* Définit l'épaisseur du texte */
    min-width: 280px; /* Définit une largeur minimale */
}

/* Style du span pour l'animation du texte dans la section Home */
.text-animation span{
    position: relative; /* Positionne le texte de manière relative */
}

/* Style avant l'apparition dans le span pour l'animation du texte dans la section Home */
.text-animation span::before{
    content: "Web Developer"; /* Définit le texte qui sera animé */
    color: var(--main-color); /* Définit la couleur du texte */
    animation: words 20s infinite; /* Applique une animation infinie pour changer les mots */
}

/* Style après l'apparition dans le span pour l'animation du texte dans la section Home */
.text-animation span::after{
    content: ""; /* Vide */
    background-color: var(--bg-color); /* Applique la couleur de fond */
    position: absolute; /* Positionne de manière absolue */
    width: calc(100% +8px); /* Définit une largeur qui dépasse un peu du texte */
    height: 100%; /* Définit la hauteur à 100% */
    border-left: 3px solid var(--bg-color); /* Ajoute une bordure à gauche */
    right: -8px; /* Positionne la bordure à 8px à droite */
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite; /* Applique des animations pour imiter un curseur et la saisie du texte */
}

/* Fonctionnement de l'animation du texte */
@keyframes cursor{
    to{
        border-left: 2px solid var(--main-color); /* Anime la bordure pour simuler un curseur clignotant */
    }
}
@keyframes words{
    0%,20%{
        content : "Je suis étudiant en BTS SIO"; /* Affiche un premier texte */
    }
    21%, 40%{
        content: "Je suis en option SLAM"; /* Affiche un deuxième texte */
    }
    41%, 60%{
        content: "Je recherche une alternance"; /* Affiche un troisième texte */
    }
    61%, 80%{
        content: "J'aime le travail d'équipe"; /* Affiche un quatrième texte */
    }
    81%, 100%{
        content: "Je suis rigoureux"; /* Affiche un cinquième texte */
    }
}
@keyframes typing{
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
        width: 0; /* Effet de suppression du texte */
    }
    5%, 20%, 25%, 40%, 45%, 60%, 80%, 85%{
        width: calc(100% + 8px); /* Effet de saisie du texte */
    }
}

/* Section About */

/* Style général de la section .about */
.about{
    display: flex; /* Utilise flexbox pour disposer les éléments de manière flexible. */
    justify-content: center; /* Centre les éléments horizontalement dans la section. */
    align-items: center; /* Centre les éléments verticalement dans la section. */
    gap: 10rem; /* Crée un espacement de 10rem entre les éléments enfants. */
    background: var(--second-bg-color); /* Applique la couleur de fond définie dans :root, ici un gris foncé. */
    color: var(--text-color); /* Applique la couleur du texte définie dans :root, ici le blanc. */
}

/* Style de l'image dans la section .about */
.about-img{
    border-radius: 50%; /* Applique une bordure arrondie (cercle complet) à l'élément .about-img. */
}

/* Style de l'image à l'intérieur de .about-img */
.about-img img{
    position: relative; /* Permet de positionner l'image par rapport à son conteneur parent, utile pour les effets de style. */
    width: 20vw; /* Définie la largeur de l'image comme 24% de la largeur de la fenêtre (viewport). */
    border-radius: 10%; /* Applique des bords légèrement arrondis à l'image (10% de rayon de bordure). */
    box-shadow: 0 0 25px var(--main-color); /* Applique une ombre autour de l'image avec la couleur définie dans :root (ici #0bf6d7). */
    top: 1rem; /* Décale l'image de 1rem vers le bas. */
    cursor: pointer; /* Change le curseur en "main" lorsqu'il passe sur l'image, indiquant que l'image est interactive. */
    transition: 0.4s ease-in-out; /* Ajoute une transition fluide de 0.4 secondes pour les effets au survol. */
}

/* Effet au survol de l'image */
.about-img img:hover{
    box-shadow: 0 0 25px var(--main-color), /* Ombre standard au survol. */
                0 0 50px var(--main-color), /* Ombre supplémentaire plus grande au survol. */
                0 0 100px var(--main-color); /* Une autre ombre encore plus grande pour un effet de glow plus intense. */
}

/* Style de l'élément .heading */
.heading{
    text-align: center; /* Aligne le texte de l'élément .heading au centre de son conteneur. */
    font-size: 6rem; /* Définit la taille du texte à 6rem, ce qui est assez grand pour que le titre soit bien visible. */
    margin: 5rem 0; /* Applique une marge verticale de 5rem au-dessus et au-dessous de l'élément .heading pour espacer le titre des autres sections. */
}

/* Style du h2 dans la section .about-content */
.about-content h2{
    text-align: left; /* Aligne le texte du h2 à gauche. */
    line-height: 1.5; /* Définit la hauteur de ligne à 1.5 fois la taille de la police pour améliorer la lisibilité. */
}

/* Style du h3 dans la section .about-content */
.about-content h3{
    font-size: 2.6rem; /* Définit la taille de la police du h3 à 2.6rem, ce qui est relativement grand. */
}

/* Style du paragraphe dans la section .about-content */
.about-content p{
    font-size: 1.8rem; /* Définit la taille du texte dans les paragraphes à 1.8rem. */
    margin: 2rem 0 3rem; /* Ajoute un espacement vertical de 2rem au-dessus du paragraphe, 3rem en dessous. */
}

/* Style de l'élément .heading dans la section .about */
.about .heading{
    margin: 0; /* Supprime la marge par défaut de cet élément (probablement pour l'aligner précisément). */
}

/* Animation du texte dans la section .about-content */
.about-content .text-animation span::before{
    content: "Web Developer"; /* Définit le contenu du pseudo-élément avant comme le texte "Web Developer". */
    color: var(--main-color); /* Applique la couleur définie dans :root pour --main-color (probablement un vert clair). */
    animation: words 20s infinite; /* Lance l'animation "words" pendant 20 secondes, en boucle infinie. */
}

/* Animation du curseur dans la section .about-content */
.about-content .text-animation span::after{
    content: ""; /* Définit le contenu du pseudo-élément après comme une chaîne vide. */
    background-color: var(--second-bg-color); /* Applique une couleur de fond définie dans :root (gris foncé). */
    position: absolute; /* Permet de positionner le pseudo-élément de manière absolue. */
    width: calc(100% +8px); /* La largeur du pseudo-élément est la largeur totale de l'élément plus 8px. */
    height: 100%; /* Définit la hauteur du pseudo-élément égale à celle de son parent. */
    border-left: 3px solid var(--bg-color); /* Ajoute une bordure à gauche, avec la couleur de fond de la page. */
    right: -8px; /* Positionne le pseudo-élément légèrement en dehors de la zone de texte sur la droite, de 8px. */
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite; /* Applique deux animations : "cursor" qui crée un effet de curseur clignotant et "typing" qui simule la saisie du texte en étapes. */
}

/* Section éducation */
.education{
    padding: 100px 15px; /* Ajoute un padding de 100px en haut et en bas, et de 15px à gauche et à droite pour espacer le contenu de la section des bords. */
}

/* Style du h2 dans la section .education */
.education h2{
    margin-bottom: 5rem; /* Ajoute une marge de 5rem en dessous du h2 pour l'espacer du contenu qui suit. */
    margin-left: 2rem; /* Ajoute une marge de 2rem à gauche du h2 pour qu'il ne soit pas collé au bord gauche de l'écran. */
}

/* Conteneur des items de la timeline */
.timeline-items{
    max-width: 1200px; /* Limite la largeur maximale du conteneur des items à 1200px pour une présentation plus structurée. */
    margin: auto; /* Centre le conteneur horizontalement. */
    display: flex; /* Utilise le flexbox pour aligner les items horizontalement (ou verticalement si nécessaire). */
    flex-wrap: wrap; /* Permet aux items de se répartir sur plusieurs lignes si nécessaire. */
    position: relative; /* Nécessaire pour positionner la ligne verticale de la timeline avec `::before`. */
}

/* Ajoute une ligne verticale au centre de la timeline */
.timeline-items::before{
    content: ""; /* Crée un pseudo-élément vide pour la ligne. */
    position: absolute; /* Positionne la ligne de manière absolue par rapport au parent (.timeline-items). */
    width: 5px; /* Définit la largeur de la ligne à 5px. */
    height: 100%; /* La ligne prend la hauteur de tout le conteneur. */
    background-color: var(--main-color); /* Applique la couleur principale de la timeline (définie dans :root). */
    left: calc(50% - 1px); /* Positionne la ligne au centre horizontalement, en ajustant la largeur de la ligne de 1px pour compenser. */
}

/* Style des items de la timeline */
.timeline-item{
    margin-bottom: 40px; /* Ajoute un espacement de 40px en dessous de chaque item de la timeline. */
    width: 100%; /* Définit la largeur de chaque item à 100% du conteneur, pour qu'ils prennent toute la largeur disponible. */
    position: relative; /* Nécessaire pour positionner le point (timeline-dot) de manière absolue dans l'élément. */
}

/* Supprime la marge en bas du dernier item de la timeline */
.timeline-item:last-child{
    margin-bottom: 0; /* Enlève la marge inférieure pour l'élément final de la timeline. */
}

/* Style des items impairs de la timeline (1er, 3ème, etc.) */
.timeline-item:nth-child(odd){
    padding-right: calc(50% + 30px); /* Applique un padding à droite des items impairs pour qu'ils soient alignés à gauche, mais avec un décalage. */
    text-align: center; /* Centre le texte dans les items impairs. */
}

/* Style des items pairs de la timeline (2ème, 4ème, etc.) */
.timeline-item:nth-child(even){
    padding-left: calc(50% + 30px); /* Applique un padding à gauche des items pairs pour qu'ils soient alignés à droite, mais avec un décalage. */
}

/* Style du point (timeline-dot) dans la timeline */
.timeline-dot{
    height: 21px; /* Définit la hauteur du point à 21px. */
    width: 21px; /* Définit la largeur du point à 21px. */
    background-color: var(--main-color); /* Applique la couleur du point avec la couleur principale définie dans :root. */
    box-shadow: 0 0 25px var(--main-color) 0 0 50px var(--main-color); /* Ajoute une ombre autour du point avec des effets de diffusion. */
    position: absolute; /* Positionne le point de manière absolue par rapport à son parent (timeline-item). */
    left: calc(50% - 9px); /* Positionne le point horizontalement au centre de chaque item de la timeline. */
    border-radius: 50%; /* Donne au point une forme ronde. */
    top: 10px; /* Place le point à 10px du haut de l'élément parent. */
}

/* Style de la date dans la timeline */
.timeline-date{
    font-size: 20px; /* Définit la taille du texte de la date à 20px. */
    font-weight: 800; /* Applique une graisse de police très épaisse (800) pour la date. */
    color: white; /* Applique la couleur blanche au texte de la date. */
    margin: 6px 0 15px; /* Ajoute une marge de 6px au-dessus, 15px en dessous de la date pour espacer les éléments. */
    text-align: center; /* Centre le texte de la date horizontalement. */
}

/* Style du contenu de la timeline */
.timeline-content{
    background-color: var(--second-bg-color); /* Applique une couleur de fond de la timeline (gris foncé). */
    border: 3px solid var(--main-color); /* Ajoute une bordure de 3px avec la couleur principale de la timeline. */
    padding: 30px 50px; /* Ajoute du padding interne de 30px verticalement et 50px horizontalement. */
    border-radius: 4rem; /* Applique des bords arrondis avec un rayon de 4rem. */
    box-shadow: 0 0 10px var(--main-color); /* Ajoute une ombre autour du contenu de la timeline. */
    cursor: pointer; /* Change le curseur pour indiquer que l'élément est cliquable. */
    transition: 0.3s ease-in-out; /* Applique une transition de 0.3 secondes sur les propriétés qui changent. */
    text-align: center; /* Centre le texte à l'intérieur de la timeline. */
}

/* Effet au survol de l'élément de la timeline */
.timeline-content:hover{
    transform: scale(1.05); /* Agrandit légèrement l'élément au survol (augmentation de 5%). */
    box-shadow: 0 0 25px var(--main-color); /* Augmente l'ombre autour de l'élément au survol. */
}

/* Style du titre dans le contenu de la timeline */
.timeline-content h3{
    font-size: 20px; /* Définit la taille du texte du titre à 20px. */
    color: white; /* Applique la couleur blanche au texte du titre. */
    margin: 0 0 10px; /* Enlève la marge au-dessus, mais ajoute une marge de 10px en dessous. */
    font-weight: 500; /* Applique une graisse de police modérée au titre. */
    text-align: center; /* Centre le texte du titre dans l'élément. */
}

/* Style du paragraphe dans le contenu de la timeline */
.timeline-content p{
    color: white; /* Applique la couleur blanche au texte du paragraphe. */
    font-size: 16px; /* Définit la taille de la police du paragraphe à 16px. */
    font-weight: 300; /* Applique une graisse de police plus légère pour le texte du paragraphe. */
    line-height: 22px; /* Définit la hauteur de ligne du texte à 22px pour une meilleure lisibilité. */
}

/* Section Services */
.services{
    background : var(--second-bg-color); /* Applique la couleur de fond définie dans :root pour cette section. */
    color: black; /* Définit la couleur du texte en noir par défaut dans la section. */
}

/* Style du h2 dans la section .services */
.services h2{
    margin-bottom: 5rem; /* Ajoute une marge de 5rem en dessous du titre pour l'espacer du contenu suivant. */
    color: var(--text-color); /* Applique la couleur du texte définie dans :root pour le titre. */
}

/* Conteneur des éléments de service */
.services-container{
    display: grid; /* Utilise un layout en grille pour disposer les éléments à l'intérieur. */
    grid-template-columns: repeat(3, 1fr); /* Crée trois colonnes égales pour les éléments de service. */
    align-items: center; /* Centre les éléments verticalement dans chaque cellule de la grille. */
    gap: 2.5rem; /* Ajoute un espacement de 2.5rem entre chaque élément de la grille. */
}

/* Boîte de chaque service */
.service-box{
    display: flex; /* Utilise flexbox pour centrer les éléments dans chaque boîte. */
    align-items: center; /* Centre les éléments verticalement dans la boîte. */
    justify-content: center; /* Centre les éléments horizontalement dans la boîte. */
    background-color: var(--main-color); /* Applique la couleur principale à la boîte de service. */
    height: 600px; /* Définit une hauteur fixe pour chaque boîte de service. */
    border-radius: 3rem; /* Applique des coins arrondis à chaque boîte de service. */
    border: 5px solid transparent; /* Ajoute une bordure transparente (elle devient visible au survol). */
    cursor: pointer; /* Change le curseur en main lorsqu'on survole la boîte (indiquant qu'elle est cliquable). */
    transition: 0.2s ease-in-out; /* Applique une transition douce de 0.2s pour les changements d'état. */
}

/* Effet au survol de la boîte de service */
.service-box:hover{
    background: var(--second-bg-color); /* Change le fond au survol en utilisant la couleur secondaire définie dans :root. */
    color: var(--main-color); /* Change la couleur du texte en utilisant la couleur principale. */
    border: 5px solid var(--main-color); /* Ajoute une bordure de 5px avec la couleur principale au survol. */
    transform: scale(1.03); /* Agrandit légèrement la boîte de service (augmentation de 3%) lors du survol. */
}

/* Style de l'information du service */
.service-box .service-info{
    height: 100%; /* Utilise toute la hauteur de la boîte de service. */
    display: flex; /* Utilise flexbox pour aligner le contenu à l'intérieur. */
    flex-direction: column; /* Aligne les éléments verticalement (en colonne). */
    text-align: center; /* Centre le texte horizontalement dans l'élément. */
    justify-content: center; /* Centre le contenu verticalement dans la boîte. */
    align-items: center; /* Centre les éléments horizontalement dans la boîte. */
    padding: 5rem 5rem; /* Ajoute du padding de 5rem de chaque côté de l'information du service. */
}

/* Style du titre h4 dans l'info du service */
.service-info h4{
    font-size: 4rem; /* Définit une taille de police grande pour le titre. */
    margin: 2rem 0; /* Ajoute une marge de 2rem au-dessus et en dessous du titre pour l'espacer du contenu. */
    font-weight: 800; /* Applique une graisse de police très épaisse pour le titre. */
}

/* Style du paragraphe dans l'info du service */
.service-info p{
    font-size: 1.4rem; /* Définit la taille du texte pour la description du service à 1.4rem. */
    font-weight: 600; /* Applique une graisse de police modérée pour le paragraphe. */
    line-height: 1.7; /* Définit une hauteur de ligne de 1.7 pour une meilleure lisibilité du texte. */
}

/* Style de l'icône dans l'info du service */
.service-info i{
    font-size: 8rem; /* Définit une taille d'icône très grande (8rem). */
}

/* Section Projets */
.projects {
    background: #13d3d3; /* Définit un fond cyan pour la section des projets. */
    background-size: cover; /* Assure que l'image de fond (s'il y en a une) couvre toute la section. */
}

/* Conteneur des cartes de projet */
.projects-box {
    display: grid; /* Utilise un layout en grille pour disposer les projets. */
    grid-template-columns: repeat(3, 1fr); /* Définit 3 colonnes de largeur égale. */
    place-items: center; /* Centre les éléments horizontalement et verticalement. */
    margin: 5rem 0; /* Ajoute un espacement vertical de 5rem autour du conteneur. */
    gap: 3rem; /* Ajoute un espacement de 3rem entre les colonnes. */
    row-gap: 5rem; /* Ajoute un espacement vertical de 5rem entre les lignes. */
}

/* Carte de projet individuelle */
.project-card {
    height: 600px; /* Définit une hauteur fixe de 600px pour chaque carte. */
    max-width: 450px; /* Limite la largeur maximale à 450px. */
    background-color: rgba(0, 0, 0, 0.3); /* Ajoute un fond semi-transparent noir (30% d'opacité). */
    backdrop-filter: blur(30px); /* Applique un effet de flou pour améliorer la lisibilité du texte. */
    border: 2px solid var(--main-color); /* Applique une bordure fine avec la couleur principale. */
    border-radius: 5rem; /* Arrondit les coins de la carte à 5rem. */
    display: flex; /* Utilise flexbox pour l'alignement interne. */
    flex-direction: column; /* Organise les éléments en colonne. */
    align-items: center; /* Centre les éléments horizontalement. */
    justify-content: center; /* Centre les éléments verticalement. */
    text-align: center; /* Centre le texte à l'intérieur de la carte. */
    gap: 2rem; /* Ajoute un espace de 2rem entre les éléments internes. */
    padding: 5rem 2rem; /* Ajoute un padding interne de 5rem en haut/bas et 2rem sur les côtés. */
    overflow: hidden; /* Empêche tout dépassement de contenu. */
    cursor: pointer; /* Change le curseur en main pour indiquer que l'élément est cliquable. */
    box-shadow: 0 0 5px var(--main-color); /* Ajoute une ombre subtile autour de la carte. */
    transition: 0.4s ease; /* Applique une transition fluide sur les effets au survol. */
}

/* Effet au survol des cartes de projet */
.project-card:hover {
    box-shadow: 0 0 25px var(--main-color),
                0 0 50px var(--main-color); /* Renforce l'ombre pour créer un effet lumineux. */
    transform: scale(1.02); /* Agrandit légèrement la carte (2%) lors du survol. */
}

/* Image du projet */
.project-card img {
    max-width: 18vw; /* Définit la largeur maximale de l’image à 18% de la largeur de l'écran. */
    object-fit: cover; /* Assure que l’image conserve ses proportions sans distorsion. */
}

/* Titre du projet */
.project-card h3 {
    font-size: 3rem; /* Définit une taille de police de 3rem pour le titre du projet. */
}

/* Description du projet */
.project-card p {
    font-size: 1.6rem; /* Définit une taille de texte de 1.6rem pour la description. */
}

/* Style du bouton de la carte */
.project-card .btn a {
    color: var(--bg-color); /* Définit la couleur du texte du bouton en fonction du fond défini dans :root. */
}

/* Section Contact */
.contact {
    background-color: var(--bg-color); /* Applique la couleur de fond principale */
}

/* Titre de la section */
.contact h2 {
    margin-bottom: 3rem; /* Ajoute un espace sous le titre */
    color: var(--text-color); /* Définit la couleur du texte */
}

/* Formulaire de contact */
.contact form {
    width: 600px; /* Définit une largeur fixe pour le formulaire */
    text-align: center; /* Centre le texte */
    margin: 0 auto; /* Centre le formulaire horizontalement */
}

/* Conteneur des champs de saisie en ligne */
form .input-box {
    display: flex; /* Utilise flexbox pour aligner les champs */
    justify-content: space-between; /* Répartit l'espace entre les champs */
}

/* Champ individuel */
.input-box .input-field {
    width: 48.5%; /* Définit une largeur pour chaque champ */
}

/* Styles communs aux champs de saisie */
.field .item {
    width: 100%; /* Assure que les champs remplissent leur conteneur */
    padding: 10px; /* Ajoute un espace intérieur */
    background: transparent; /* Fond transparent */
    border: 2px solid var(--main-color); /* Bordure avec la couleur principale */
    outline: none; /* Supprime l'effet de focus par défaut */
    border-radius: 6px; /* Arrondi les coins */
    font-size: 16px; /* Taille du texte */
    color: var(--text-color); /* Couleur du texte */
    margin: 12px 0; /* Espacement entre les champs */
}

/* Champ en cas d'erreur */
.field.Erreur .item {
    border: 2px solid #d93025; /* Change la bordure en rouge */
}

/* Placeholder des champs */
.field .item::placeholder {
    color: var(--text-color); /* Définit la couleur du texte d’indication */
}

/* Message d'erreur des champs */
.field .error-txt {
    font-size: 14.5px; /* Définit la taille du texte */
    color: #d93025; /* Couleur rouge pour l'erreur */
    text-align: left; /* Alignement à gauche */
    margin: -5px 0 10px; /* Ajustement de l'espace */
    display: none; /* Caché par défaut */
}

/* Afficher le message d'erreur si la classe "Erreur" est présente */
.field.Erreur .error-txt {
    display: block;
}

/* Champ de texte (textarea) spécifique */
form .textarea-field .item {
    resize: none; /* Empêche le redimensionnement manuel */
}

/* Ajustement du message d'erreur pour le textarea */
form .textarea-field .error-txt {
    margin-top: -10px;
}

form label{
    color: var(--main-color);
    font-size: 18px;
}



/* Bouton du formulaire */
form button {
    padding: 12px 32px; /* Espacement interne */
    background: var(--main-color); /* Couleur de fond */
    border: none; /* Supprime la bordure */
    outline: none; /* Supprime le contour */
    border-radius: 6px; /* Arrondi les coins */
    box-shadow: 0 0 10px var(--main-color); /* Ajoute une lueur */
    font-size: 16px; /* Taille du texte */
    color: #333; /* Couleur du texte */
    letter-spacing: 1px; /* Espacement des lettres */
    font-weight: 600; /* Rend le texte plus épais */
    cursor: pointer; /* Change le curseur au survol */
    margin-top: 20px; /* Ajoute un espace au-dessus */
    transition: 0.5s; /* Ajoute une transition fluide */
}

/* Effet au survol du bouton */
form button:hover {
    box-shadow: none; /* Supprime l’ombre lors du survol */
}

.contact p{
    color: var(--main-color);
    font-size: 18px;
    text-align: center;
    margin-top: 2%;
}

.footer{
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 40px 0;
    background-color: var(--second-bg-color);
}
.footer .social{
    text-align: center;
    padding-bottom: 25px;
    color: var(--main-color);
}
.footer .social a{
    font-size: 25px;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    width: 42px;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 10px;
    transition: 0.3s ease;
}
.footer .social a:hover{
    transform: scale(1.2)translateY(-10px);
    background-color: var(--main-color);
    color: black;
    box-shadow: 0 0 25px;
}
.footer ul{
    margin-top: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
.footer ul li a{
    color: white;
    border-bottom: 3px solid transparent;
    transition: 0.3s ease;
}
.footer ul li a:hover{
    border-bottom: 3px solid var(--main-color);
}
.footer ul li{
    display: inline-block;
    padding: 0 15px;
}
.footer .copyright{
    margin-top: 50px;
    text-align: center;
    font-size: 16px;
    color: var(--text-color);
}

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}
.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

@keyframes apparition{
    100%{
        opacity: 1;
        transform: none;
    }
}












@media(max-width:1285px){
    html{
        font-size: 55%;
    }
    .services-container{
        padding-bottom: 7rem;
        grid-template-columns: repeat(1,1fr);
        margin: 0 5rem;
    }
    .projects-box{
        grid-template-columns: repeat(2,1fr);
    }
    .projects-box img{
        min-width: 30vw;
    }
}
@media(max-width:991px){
    header{
        padding: 2rem 3%;
    }
    section{
        padding: 10rem 3% 2rem;
    }
    .contact form{
        flex-direction: column;
        margin-left: 5px;
        width: 100%;
    }
    .footer{
        padding: 2rem 3%;
    }
}
@media(max-width:895px){

    #menu-icon{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        width: 50%;
        padding: 1rem 3%;
        background: rgba(0,0,0,0.80);
        backdrop-filter: blur(20px);
        border-bottom-left-radius: 2rem;
        border-left: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
        display: none;
    }
    .navbar.active{
        display: block;
    }
    .navbar a{
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        color: white;
    }
    .home{
        flex-direction: column-reverse;
        margin: 5rem 4rem;
        gap: 3rem;
    }
    .home-content{
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        text-align: center;
    }
    .home-content h3{
        font-size: 2.6rem;
    }
    .home-content h1{
        font-size: 8rem;
        margin-top: 3rem;
    }
    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }
    .home-img img{
        width: 56vw;
        margin: 3rem 0;
    }
    .home .social-icons{
        margin: 0 auto;
    }
    .home .btn-group{
        flex-direction: column;
        margin: 0 auto;
    }
    .home .text-animation{
        margin: 0 auto;
        margin-top : 5%;
        margin-bottom : 5%;
    }
    .about {
        flex-direction: column-reverse;
        padding: 5rem 5%;  /* Réduction du padding pour les petits écrans */
    }
    
    .about .heading {
        margin: 2rem 0;  /* Ajustement de la marge */
    }

    .about h2 {
        text-align: center;
    }

    .about .text-animation {
        text-align: center;
    }

    .about p {
        text-align: center;
    }

    .about img {
        width: 60vw;  /* Plus large sur mobile pour que l'image soit visible */
    }

    /* Centrer le bouton */
    .about .btn {
        display: block;
        margin: 2rem auto;  /* Centre le bouton */
    }

    /* Modifier l'ordre des éléments pour que l'image soit au-dessus du h2 */
    .about-img {
        order: 1;  /* Place l'image au-dessus */
    }

    .about-content {
        text-align: center;  /* Centrer le contenu */
    }

    .education{
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 95%;
    }

    .education .timeline-content h3{
        font-size: 10px;
    }

    .education .timeline-content p{
        font-size: 10px;
    }

    .services h2{
        margin-bottom: 3rem;
        text-align: center;
    }
    .services-container{
        grid-template-columns: repeat(1,1fr);
        margin: 0 auto;
        width: 90%;
    }

    .projects-box{
        grid-template-columns: repeat(1,1fr);
        margin: 0 auto;
    }

    .project-card{
        width: 85%;
    }

    .projects-box img{
        min-width: 38rem;
    }

    .contact {
        width: 95%;
        align-items: center;
    }
}