:root{
    --blue: #0d6efd;
    --white: #fff;
    --black: #000;
}

/* Police par défaut */
* {
    font-family: 'Share Tech Mono', monospace;
    box-sizing: border-box;
}

/* Styles pour le logo */
.logo {
    width: 400px;
    height: auto;
}
/* Par défaut, afficher le logo light */
.logo-light {
    display: block;
}
.logo-dark {
    display: none;
}

/* En mode dark-theme, afficher le logo dark */
.dark-theme .logo-light {
    display: none;
}
.dark-theme .logo-dark {
    display: block;
}


/* Style du curseur clignotant, juste après la dernière lettre */
#typewriter-text::after {
    content: '|';
    display: inline;
    opacity: 1;
    animation: blink 0.8s infinite; /* Effet de clignotement */
    font-weight: bold; /* Pour s'assurer que le curseur a la même épaisseur que le texte */
}
/* Animation pour le curseur */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.container {
    margin-top: 20px;
    padding: 0 15px; /* Ajout de padding général */
}
/* ---------------------------------------
   Navbar
--------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color 0.3s, color 0.3s;
    border-bottom: 1px solid #e0e0e0; /* Bord inférieur gris foncé */
    z-index: 1000; /* Assurez-vous que la navbar est au-dessus des autres éléments */
}


.navbar .nav-link {
    color: inherit; /* Hérite la couleur du parent */
    margin: 0 18px; /* Ajout de marges à gauche et à droite */
    position: relative; /* Nécessaire pour le positionnement de la bordure */
    padding: 10px 20px; /* Ajoute un peu d'espace autour du texte */
    overflow: hidden; /* Empêche le débordement du pseudo-élément */
    display: inline-block; /* Permet d'utiliser le pseudo-élément */
}

/* Pseudo-élément pour l'effet hover */
.navbar .nav-link::after {
    content: '';
    position: absolute;
    top: -70px; /* Déplace le haut au-dessus de l'écran */
    left: -20px; /* Déplace le côté gauche légèrement à gauche */
    right: -20px; /* Déplace le côté droit légèrement à droite */
    bottom: -1px; /* Déplace le bas jusqu'à la bordure de la navbar */
    background-color: transparent; /* Fond transparent par défaut */
    transition: background-color 0.3s; /* Animation pour le fond */
    z-index: -1; /* Met le pseudo-élément derrière le texte */
    border-radius: 0; /* Pas d'arrondi par défaut */
}

.navbar .nav-link:hover::after {
    background-color: #f0f0f0; /* Fond gris clair au survol en thème clair */
}

.dark-theme .navbar {
    background-color: var(--black); /* Fond de la navbar noir */
    color: var(--white); /* Texte blanc */
    border-bottom: 0.2px solid #1A1A1A;
}

.dark-theme .navbar .nav-link:hover::after {
    background-color: #1A1A1A; /* Fond plus foncé au survol en mode sombre */
}

/* ---------------------------------------
   Body
--------------------------------------- */
/* Curseur en thème light */
body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="6" fill="%230d6efd" /></svg>') 12 12, auto;
}

/* Curseur en thème dark */
body.dark-theme {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="6" fill="%230d6efd" /></svg>') 12 12, auto;
}

/* Curseur sur les liens et boutons en thème light - identique au curseur du body */
a, button, input[type="submit"], input[type="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="6" fill="%230d6efd" /></svg>') 12 12, auto !important;
}

/* Curseur sur les liens et boutons en thème dark - identique au curseur du body */
body.dark-theme a, body.dark-theme button, body.dark-theme input[type="submit"], body.dark-theme input[type="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="6" fill="%230d6efd" /></svg>') 12 12, auto !important;
}
/* Désactiver le curseur personnalisé sur les écrans tactiles */
@media (max-width: 992px) {
    body,
    body.dark-theme,
    a,
    button,
    input[type="submit"],
    input[type="button"],
    body.dark-theme a,
    body.dark-theme button,
    body.dark-theme input[type="submit"],
    body.dark-theme input[type="button"] {
        cursor: auto !important; /* Désactiver le curseur personnalisé */
    }
    
}
/* Affichage uniquement en écran large */
@media (min-width: 993px) {
    #gray-circle,
    #blue-circle {
        display: block; /* Les cercles sont visibles uniquement pour les grands écrans */
    }
}
/*<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="10" fill="%231A1A1A" />*/
/* Style du cercle gris en thème light */
#gray-circle {
    position: absolute;
    width: 20px; /* Plus grand que le bleu */
    height: 20px;
    background-color: rgba(0, 0, 0, 0.1); /* Noir avec 10% d'opacité pour un effet plus foncé */
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000; /* Derrière le cercle bleu */
}

/* Style du cercle gris en thème dark */
body.dark-theme #gray-circle {
    background-color: rgba(255, 255, 255, 0.1); /* Blanc avec 20% d'opacité pour un effet plus clair */
}



body {
    display: flex; /* Utilise Flexbox pour le corps */
    flex-direction: column; /* Aligne les éléments en colonne */
    height: 100vh; /* Hauteur de la fenêtre */
    margin: 0; /* Enlève les marges par défaut */
    padding-top: 70px; /* Espace pour la navbar */
    transition: background-color 0.3s, color 0.3s;
}

/* ---------------------------------------
   Thèmes
--------------------------------------- */
.dark-theme {
    background-color: var(--black); /* Fond noir */
    color: var(--white); /* Texte blanc */
}

.light-theme {
    background-color: var(--white); /* Fond blanc */
    color: var(--black); /* Texte noir */
}

/* Icônes de thème */
.dark-theme .bi-sun {
    color: var(--white); /* Icône soleil blanche */
    display: none; /* Masquer l'icône soleil en mode sombre */
}

.dark-theme .bi-moon {
    color: var(--white); /* Icône lune blanche */
    display: inline; /* Afficher l'icône lune en mode sombre */
}

.light-theme .bi-sun {
    color: var(--black); /* Icône soleil noire */
    display: inline; /* Afficher l'icône soleil en mode clair */
}

.light-theme .bi-moon {
    color: var(--white); /* Icône lune noire */
    display: none; /* Masquer l'icône lune en mode clair */
}

/* ---------------------------------------
   Conteneurs
--------------------------------------- */
.content-wrapper {
    flex-grow: 1; /* Permet à ce conteneur de prendre l'espace restant */
    display: flex; /* Permet d'utiliser Flexbox à l'intérieur */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    padding: 0 10%; /* Ajuste la distance des bords gauche et droit */
}

.content-wrapper-skills {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Aligne les éléments en colonne */
    justify-content: flex-start; /* Commence par le haut pour éviter le chevauchement */
    align-items: center; /* Centre horizontalement */
    padding: 0 10%; /* Ajuste la distance des bords gauche et droit */
}



/* ---------------------------------------
   Titres
--------------------------------------- */
.skills-title {
    font-size: 2.5em; /* Taille du texte */
    text-align: center; /* Centre le texte */
    margin-top: 50px; /* Ajuste pour être juste en dessous de la navbar */
    margin-bottom: 20px; /* Espace sous le titre */
}

/* ---------------------------------------
   Icônes
--------------------------------------- */
.icon-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.icon-row i {
    font-size: 2rem;
    margin-right: 15px;
}

.icon-row i, .icon-row span {
    font-size: 1.5rem; /* Taille des icônes réduite */
    margin-right: 15px;
    color: #444; /* Gris foncé */
}

.dark-theme .icon-row i, .dark-theme .icon-row span {
    color: #bbb; /* Gris clair en mode sombre */
}

/* ---------------------------------------
   Cartes
--------------------------------------- */
.cards-container {
    display: flex; /* Utilisation de Flexbox */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne si nécessaire */
    justify-content: space-between; /* Espace entre les cartes */
    margin-top: 20px; /* Espace au-dessus des cartes */
}

.card-bg-img {
    background-color: #f8f9fa; /* Couleur de fond clair */
    border: 1px solid #e0e0e0; /* Bordure grise */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    padding: 15px; /* Espacement interne réduit */
    border-radius: 10px; /* Coins arrondis */
    max-width: 250px; /* Largeur maximale de la carte réduite */
    margin: 15px; /* Espacement autour de la carte réduit */
    display: flex; /* Flexbox pour aligner le contenu */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
}

.card-image {
    max-width: 80%; /* Rendre l'image légèrement plus petite */
    height: auto; /* Ajuster la hauteur automatiquement */
    border-radius: 10px; /* Coins arrondis pour l'image */
    margin-bottom: 10px; /* Espacement en dessous de l'image */
}

.card-title {
    font-size: 1.3em; /* Taille du titre réduite */
    margin: 5px 0; /* Espacement au-dessus et en dessous réduit */
}

.card-description {
    font-size: 1em; /* Taille de la description */
    text-align: center; /* Centre le texte */
    margin-bottom: 15px; /* Espacement en dessous de la description */
}

.card-button {
    background-color: var(--blue); /* Couleur du bouton */
    color: var(--white); /* Couleur du texte du bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 15px; /* Espacement interne */
    cursor: pointer; /* Change le curseur en main */
    transition: background-color 0.3s; /* Transition pour le hover */
}

.card-button:hover {
    background-color: var(--blue); /* Couleur au survol */
}
/* ---------------------------------------
   Effet de Hover sur les Cartes
--------------------------------------- */
.card-bg-img {
    transition: transform 0.2s ease; /* Transition douce pour l'effet */
}

.card-bg-img:hover {
    transform: translateY(-10px) scale(1.05); /* Légère élévation et agrandissement */
}

/* Styles pour la carte en mode sombre */
.dark-theme .card-bg-img {
    background-color: #1A1A1A; /* Fond sombre */
    border: 1px solid #555; /* Bordure gris clair */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée */
}

.dark-theme .card-title {
    color: var(--white); /* Texte blanc pour le titre */
}

.dark-theme .card-description {
    color: #ddd; /* Texte gris clair pour la description */
}

.dark-theme .card-button {
    background-color: var(--blue); /* Couleur du bouton */
    color: var(--white); /* Couleur du texte du bouton */
}

.dark-theme .card-button:hover {
    background-color: var(--blue); /* Couleur au survol en mode sombre */
}


/* ---------------------------------------
   Footer
--------------------------------------- */
footer {
    padding: 30px 0; /* Ajustez le padding selon vos besoins */
    color: var(--white); /* Couleur du texte par défaut (sombre) */
    font-size: 14px;
    width: 100%; /* S'assure que le footer prend toute la largeur */
    transition: background-color 0.3s, color 0.3s; /* Transition pour les changements de thème */
}

footer .container {
    display: flex; /* Utilise Flexbox */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
}

footer .copyright,
footer .credits {
    margin: 5px 0; /* Ajoute un espacement entre les lignes */
}

/* Styles pour le thème sombre */
.dark-theme footer {
    background: var(--black); /* Fond sombre */
    color: var(--white); /* Texte blanc */
}

/* Styles pour le thème clair */
.light-theme footer {
    background: var(--white); /* Fond gris foncé */
    color: var(--black); /* Texte blanc */
}
/* ---------------------------------------
   Cartes Projet
--------------------------------------- */
.cards-container-project {
    display: flex; /* Utilisation de Flexbox */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne si nécessaire */
    justify-content: space-between; /* Espace entre les cartes */
    margin-top: 20px; /* Espace au-dessus des cartes */
}

.card-bg-img-project {
    background-color: #f8f9fa; /* Couleur de fond clair */
    border: 1px solid #e0e0e0; /* Bordure grise */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    padding: 15px; /* Espacement interne réduit */
    border-radius: 10px; /* Coins arrondis */
    max-width: 700px; /* Largeur maximale de la carte augmentée */
    margin: 15px; /* Espacement autour de la carte */
    display: flex; /* Flexbox pour aligner le contenu */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    flex-grow: 1; /* Permet à la carte de prendre l'espace */
}

.card-image-project {
    max-width: 80%; /* Rendre l'image légèrement plus petite */
    height: auto; /* Ajuster la hauteur automatiquement */
    border-radius: 10px; /* Coins arrondis pour l'image */
    margin-bottom: 10px; /* Espacement en dessous de l'image */
}

.card-title-project {
    font-size: 1.5em; /* Taille du titre */
    margin: 5px 0; /* Espacement au-dessus et en dessous */
}

.card-description-project {
    font-size: 1.1em; /* Taille de la description */
    text-align: center; /* Centre le texte */
    margin-bottom: 15px; /* Espacement en dessous de la description */
}

.card-footer-project {
    display: flex; /* Utilise Flexbox pour aligner l'icône */
    justify-content: flex-end; /* Aligne à droite */
    margin-top: 10px; /* Pousse le footer vers le bas de la carte */
}

/* Effet de Hover sur les Cartes Projet */
.card-bg-img-project {
    transition: transform 0.2s ease; /* Transition douce pour l'effet */
}

.card-bg-img-project:hover {
    transform: translateY(-10px) scale(1.05); /* Légère élévation et agrandissement */
}

/* Styles pour la carte en mode sombre */
.dark-theme .card-bg-img-project {
    background-color: #1A1A1A; /* Fond sombre */
    border: 1px solid #555; /* Bordure gris clair */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée */
}
.dark-theme .card {
    background-color: #1A1A1A; /* Fond sombre */
    border: 1px solid #555; /* Bordure gris clair */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée */
}
.dark-theme .card {
    color: var(--white); /* Texte blanc pour le titre */
}
.dark-theme .card-title-project {
    color: var(--white); /* Texte blanc pour le titre */
}

.dark-theme .card-description-project {
    color: #ddd; /* Texte gris clair pour la description */
}

.dark-theme .card-footer-project {
    color: #bbb; /* Texte clair pour le footer */
}
/* Style général pour l'année et la catégorie */
.card-year-project, .card-category-project {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-right: 10px;
}

/* Thème clair */
.light-theme .card-year-project,
.light-theme .card-category-project {
    background-color: transparent;
    color: var(--black);
    border: 2px solid var(--black);
}

/* Thème sombre */
.dark-theme .card-year-project,
.dark-theme .card-category-project {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
/* Year and Category styling */
.card-info-project span {

    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid;
}

.light-theme .card-info-project span {
    color: var(--black);
    border-color: var(--black);
}

.dark-theme .card-info-project span {
    color: var(--white);
    border-color: var(--white);
}

/* Dev Tool Icon styling */
.card-dev-tool-project {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.dev-tool-icon-square {
    width: 40px;
    height: 40px;
    background-color: var(--white); /* Background color for light theme */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.light-theme .dev-tool-icon-square {
    background-color: var(--white);
}

.dark-theme .dev-tool-icon-square {
    background-color: var(--black);
}

.dev-tool-icon {
    max-width: 80%;
    max-height: 80%;
}
/* Styles pour l'année et la catégorie */
.card-year-project,
.card-category-project {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.card-year-project::before,
.card-category-project::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--blue); /* Couleur de remplissage */
    transition: width 0.3s ease;
    z-index: -1; /* Place l'effet de remplissage derrière le texte */
}

.card-year-project:hover::before,
.card-category-project:hover::before {
    width: 100%; /* L'effet de remplissage s'étend à 100% au survol */
}

.card-year-project:hover,
.card-category-project:hover {
    color: var(--white); /* Change la couleur du texte au survol */
}
/* Contact form styling */
.contact-form {
    max-width: 600px;
    width: 100%;
    margin: 30px auto; /* Centrer horizontalement avec marge */
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, color 0.3s;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.contact-form .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.contact-form .form-control:focus {
    border-color: var(--blue);
    outline: none;
}

.contact-form .btn-submit {
    background-color: var(--blue);
    color: var(--white);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form .btn-submit:hover {
    background-color: var(--blue);
}

/* Dark theme styling */
.dark-theme .contact-form {
    background-color: #1A1A1A;
    border: 1px solid #555;
}

.dark-theme .contact-form label,
.dark-theme .contact-form .form-control {
    color: #ddd;
}

.dark-theme .contact-form .form-control {
    background-color: #333;
    border: 1px solid #666;
}
/* Container for the timeline */
.timeline-container {
    position: relative;
    padding-left: 50px; /* To create space for the vertical line */
}

.timeline {
    position: absolute;
    left: 25px; /* Position the line in the center of the space */
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #f0f0f0; /* The color of the vertical line */
    z-index: -1; /* Make sure it stays behind the content */
}

.projects-container {
    position: relative;
}

.card-bg-img-project {
    margin-bottom: 50px;
    position: relative;
}

.card-bg-img-project::before {
    content: '';
    position: absolute;
    left: -25px; /* Align it with the vertical line */
    top: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-color: #f0f0f0; /* You can change the dot color */
    border-radius: 50%; /* Make it circular to resemble a timeline dot */
    z-index: 1;
}
.dark-theme .timeline {
    background-color: #1A1A1A; /* Fond plus foncé au survol en mode sombre */
}
.dark-theme .card-bg-img-project::before {
    background-color: #1A1A1A; /* Fond plus foncé au survol en mode sombre */
}
/*TIMELINE*/
.experience-timeline {
    position: relative;
    margin: 20px 0; /* Ajuste l'espacement si nécessaire */
}

.experience-timeline::before {
    content: "";
    position: absolute;
    left: 50%; /* Centre la ligne */
    top: 0;
    bottom: 0;
    width: 4px; /* Largeur de la ligne */
    background: #444; /* Couleur de la ligne */
    transform: translateX(-50%); /* Centre la ligne */
}

.experience-timeline .event {
    position: relative;
    width: 50%; /* Chaque événement prend la moitié de la largeur */
    padding: 10px; /* Espacement autour de l'événement */
}

.experience-timeline .event.left {
    left: 0; /* Événements sur la gauche */
}

.experience-timeline .event.right {
    left: 50%; /* Événements sur la droite */
}

.experience-timeline .event.right {
    text-align: right; /* Aligne le texte à droite */
}

.experience-timeline .event.right::after {
    content: '';
    position: absolute;
    right: calc(100% + -18px); /* Positionne l'élément après l'événement */
    top: 10px; /* Ajuste la position */
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #444; /* Flèche pour l'événement à gauche */
}

.experience-timeline .event.left::after {
    content: '';
    position: absolute;
    left: calc(100% + -18px); /* Positionne l'élément avant l'événement */
    top: 10px; /* Ajuste la position */
    border-width: 8px;
    border-style: solid;
    border-color: transparent #444 transparent transparent; /* Flèche pour l'événement à droite */
}
.dark-theme .experience-timeline .event.left::after {
    border-color: transparent #bbb transparent transparent; /* Gris clair en mode sombre */
}
.dark-theme .experience-timeline .event.right::after {
    border-color: transparent transparent transparent #bbb; /* Gris clair en mode sombre */
}
.dark-theme .experience-timeline::before  {
    background: #bbb; /* Gris clair en mode sombre */
}