<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Reset des marges et paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Averia Serif Libre', serif;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.comp-image&gt;p {
    margin-top: 2vh;
}

a {
    color: inherit;
    /* Lien dans la couleur par dÃ©faut ou de votre choix */
    text-decoration: none;
    /* Retirer la dÃ©coration de lien (soulignement) */
}

#language-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    z-index: 1;
}

.langue-dropdown svg {
    margin-left: 5px; /* Ajouter un petit espace Ã&nbsp; gauche du chevron */
    vertical-align: middle; /* Aligner le chevron avec le texte */
}

/* Fix text color for language options */
.langue-dropdown {
    color: #fff; /* Match the text color with the rest of the site */
}

/* Restore and style the "Se connecter" button */
#login-button {
    position: fixed;
    top: 20px;
    right: 100px; /* Adjust position to avoid overlap with the language button */
    padding: 10px 20px;
    background-color: #1DB954; /* Spotify green */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#login-button:hover {
    background-color: #1aa34a; /* Darker green on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Adjustments for mobile screens */
@media (max-width: 768px) {
    #login-button {
        font-size: 0.9rem;
        padding: 8px 15px;
        right: 80px; /* Adjust position for smaller screens */
    }
}

/* Style de base pour la liste dÃ©roulante */
.language-selector {
    position: relative;
    display: inline-block;
}

.langue-dropdown {
    cursor: pointer;
    text-decoration: none;
    padding: 5px,10px;
    font-size: 16px;
}

/* Cacher le menu dÃ©roulant par dÃ©faut */
.dropdown-menu11 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Ensure the dropdown spans the full width */
    
    z-index: 10; /* Ensure it appears above other elements */
    padding: 10px 0; /* Add padding for spacing */
    list-style-type: none;
    margin: 0;
}

.dropdown-menu11 li {
    padding: 10px 20px; /* Add spacing between items */
    text-align: left; /* Align text to the left */
    border-bottom: 1px solid #333; /* Add a separator between items */
}

.dropdown-menu11 li:last-child {
    border-bottom: none; /* Remove the separator for the last item */
}

.dropdown-menu11 li a {
    color: #bbb9b9; /* Ensure text is visible */
    text-decoration: none;
    display: block; /* Ensure the link spans the full width of the item */
}

.dropdown-menu11 li a:hover {
    background-color: #333; /* Highlight item on hover */
}

/* Adjustments for mobile screens */
@media (max-width: 768px) {
    .language-selector .dropdown-menu11 {
        width: auto; /* Allow dropdown to adjust width on smaller screens */
        padding: 5px 0; /* Reduce padding for compact spacing */
    }

    .dropdown-menu11 li {
        padding: 8px 15px; /* Adjust padding for smaller screens */
    }
}

.screenshots-section {
    padding: 50px 0;
    text-align: center;
}

.screenshot-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* CrÃ©e un grid responsive */
    gap: 20px;
    /* Espace entre les images */
    justify-items: center;
    /* Centrer les Ã©lÃ©ments dans chaque cellule */
    text-align: center;
    /* Centrer les descriptions */
}

.screenshot-content img {
    width: 100%;
    /* Les images prennent toute la largeur de leur conteneur */
    max-width: 300px;
    /* Limite la taille maximale des images */
    height: auto;
    /* Garde les proportions des images */
    border-radius: 8px;
    /* Ajoute un arrondi aux coins des images pour un effet visuel */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* LÃ©gÃ¨re ombre portÃ©e pour les images */
    transition: transform 0.3s ease-in-out;
    /* Animation pour l'effet hover */
}

.screenshot-content img:hover {
    transform: scale(1.05);
    /* LÃ©gÃ¨re mise Ã&nbsp; l'Ã©chelle lors du survol pour un effet interactif */
}

.screenshot-content p {
    font-size: 19px;
    /* Police plus petite pour les descriptions */
    margin-top: 10px;
    /* Un peu d'espace entre l'image et la description */
    color: #333;
    /* Couleur de texte douce */
}

/* Responsive design pour les Ã©crans plus petits */
@media (max-width: 768px) {
    .screenshot-content img {
        max-width: 200px;
        /* RÃ©duit encore la taille sur les petits Ã©crans */
    }
}

.cardTechs {
    display: flex;
    flex-direction: row;
    width: fit-content;
    color: rgb(255, 255, 255);
    font-size: small;

}

.css {
    margin: 1% 2% 1% 0;
    padding: 1vh 2vw;
    background-color: rgb(8, 142, 237);
    border-radius: 30px;

}

.javadoc {
    margin: 1% 2% 1% 0;
    padding: 1vh 2vw;
    background-color: rgb(255, 218, 94);
    border-radius: 30px;
    color: #000000;

}

.html {
    margin: 1% 2% 1% 0;
    padding: 1vh 2vw;
    background-color: rgb(255, 0, 0);
    border-radius: 30px;

}

.js {
    margin: 1% 2% 1% 0;
    background-color: yellow;
    padding: 1vh 2vw;
    border-radius: 30px;
    color: #000000;

}

.php {
    margin: 1% 2% 1% 0;
    background-color: rgb(117, 6, 192);
    padding: 1vh 2vw;
    border-radius: 30px;

}

.solidworks {
    margin: 1% 2% 1% 0;
    background-color: rgb(176, 43, 43);
    padding: 1vh 2vw;
    border-radius: 30px;

}

.python {
    margin: 1% 2% 1% 0;
    background-color: rgb(7, 82, 94);
    padding: 1vh 2vw;
    border-radius: 30px;

}

.java {
    margin: 1% 2% 1% 0;
    background-color: rgb(255, 183, 0);
    padding: 1vh 2vw;
    border-radius: 30px;
    color: #000000;

}

/* Styles pour la navigation */

@media (min-width: 768px) {
    header nav ul {
        list-style-type: none;
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 0;
        margin: 0;
    }
    .language-selector:hover .dropdown-menu11 {
        display: block;
    }
    .dropdown-menu11 {
        background-color: #1e293b;
    }

    .hero h1 {
        font-size: 5vw;
        color: #6ccce9;
        margin-bottom: 20px;
        font-family: 'Averia Serif Libre', serif;
    }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Deux colonnes */
        gap: 20px;
        /* Espacement entre les cartes */
        padding: 0 20px;
        /* Optionnel : marges internes */
    }

    .hero {
        padding-top: 3rem;
    }

    header {
        background-color: #1e293b;
        color: white;
        padding: 1rem 0;
        position: fixed;
        /* Fixe la position du header */
        top: 1vh;
        /* Ajuste la position verticale */
        left: 50%;
        /* Positionne le cÃ´tÃ© gauche au milieu */
        transform: translateX(-50%);
        /* Centre l'Ã©lÃ©ment en dÃ©calant de la moitiÃ© de sa largeur */
        z-index: 1;
        width: 70%;
        border-radius: 25px;
        text-align: center;
        /* Centre le contenu Ã&nbsp; l'intÃ©rieur du header */
    }

    #menu-toggle,
    .burger-icon {
        display: none
    }
}

header nav ul li {
    display: inline-block;
    position: relative;
    /* NÃ©cessaire pour l'effet underline */
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 5px 10px;
    transition: color 0.3s ease-in-out;
    /* Animation sur la couleur */
}

header nav ul li a:hover {
    color: #6ccce9;
    /* Change de couleur au survol */
}

/* Effet Underline en Hover */
header nav ul li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #6ccce9;
    transition: width 0.3s ease-in-out;
}

header nav ul li:hover::after {
    width: 100%;
}

/* Groupement des boutons */
.button-group {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Espace entre les boutons */
}

a.chevron-down {
    border-radius: 25%;
}

/* Style des boutons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background-color: #6a11cb;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
    background-color: #1e5fc4;
    /* Couleur plus sombre au hover */
    transform: translateY(-3px);
    /* LÃ©gÃ¨re Ã©lÃ©vation au hover */
}

.btn-secondary:hover {
    background-color: #581a9e;
}

/* Style gÃ©nÃ©ral pour les boutons */
a,
.cta-button {
    display: inline-block;
    padding: 10px 20px;

    text-decoration: none;

    font-weight: bold;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover,
.cta-button:hover {
    transform: translateY(-5px);
    /* Lien "rebondit" lÃ©gÃ¨rement */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Style pour les transitions douces */
html {
    scroll-behavior: smooth;
}

/* Hero Section */
/* Section Hero (plein Ã©cran) */
.hero {

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
    /* Prend toute la hauteur de l'Ã©cran */
    background-color: #0f172a;
    /* DÃ©gradÃ© */
    color: #fff;
    position: relative;
    /* NÃ©cessaire pour positionner l'indicateur de scroll */
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/* Bouton scroll */
.scroll-down {
    bottom: 20px;
    left: 50%;
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    border-radius: 25%;
}

.scroll-down:hover {
    opacity: 1;
}

/* Transition douce */
html {
    scroll-behavior: smooth;
    /* Transition douce entre les sections */
}

/* Section Projets */
.projects-section {
    padding: 50px 0;
    background: #f9f9f9;
    text-align: center;
}

.hero .cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #fff;
    color: #2575fc;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

.hero .cta-button:hover {
    background: #2575fc;
    color: #fff;
}

/* Projects Section */
.projects-section {
    padding: 50px 0;
    background: #fff;
    text-align: center;
}

.projects-section .section-title {
    font-size: 2rem;
    margin-bottom: 20px;
    margin-top: 2rem;
}

/* Styles pour les cartes */
.project-card {
    width: 100%;
    max-width: 600px; /* Augmente la taille maximale de la carte */
    min-width: 500px; /* Augmente la taille minimale de la carte */
    height: auto; /* Ajuste la hauteur automatiquement */
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto; /* Centrer les cartes avec plus d'espace */
}

/* Limiter la taille des images dans les cartes */
.project-card img {
    max-height: 200px; /* Augmente la hauteur maximale */
    max-width: 100%; /* L'image prend toute la largeur disponible */
    object-fit: cover; /* Ajuste l'image pour qu'elle reste dans les dimensions */
    border-radius: 8px; /* Ajoute des coins arrondis */
    margin-bottom: 15px; /* Espacement avec le contenu */
}

/* Ajout d'un effet au survol */
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive design pour les cartes */
@media (max-width: 768px) {
    .project-card {
        max-width: 90%; /* Les cartes prennent presque toute la largeur sur mobile */
        min-width: unset; /* Supprime la largeur minimale */
    }
}

.project-card img {
    width: 100%;
    /* L'image prend toute la largeur disponible */
    height: auto;
    /* Conserve les proportions */
    border-radius: 8px;
    /* Ajoute des bords arrondis */
    margin-top: 10px;
    /* Espacement avec le texte */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Optionnel : ajoute une ombre */
}

.project-card h3 {
    margin-top: 0;
    color: #2575fc;
}

/* Footer */
footer {
    background-color: #1e293b;
    color: white;
    text-align: center;
    padding: 1rem;
    width: 100%;
    bottom: 0;
}

h2 {
    color: #007bff;
}

h1 {
    color: #6ccce9;
}

/* Section About */
.about-section {
    padding: 50px 20px;
    background: #f9f9f9;
    /* Couleur de fond lÃ©gÃ¨re */
    text-align: center;
}

.about-section .section-title {
    font-size: 2.5rem;
    color: #2575fc;
    margin: 2rem;
}

/* Disposition en flexbox pour l'image et le texte */
.about-content {
    display: flex;
    justify-content: center;
    /* Centre le contenu */
    align-items: center;
    /* Aligne verticalement au centre */
    gap: 30px;
    /* Espace entre l'image et le texte */
    max-width: 1200px;
    margin: 0 auto;
}

.about-image {
    flex: 1;
    /* L'image prend une largeur flexible */
    max-width: 300px;
    /* Limite la taille de l'image */
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Ajoute des bords arrondis Ã&nbsp; l'image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Ombre autour de l'image */
}

.about-text {
    flex: 2;
    /* Le texte prend une largeur plus grande que l'image */
    text-align: left;
    /* Aligne le texte Ã&nbsp; gauche */
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
    max-width: 700px;
    /* Limite la largeur du texte pour plus de lisibilitÃ© */
}

.about-text strong {
    color: #2575fc;
}

.comp-content {
    display: flex;
    justify-content: center;
    /* Centre le contenu */
    align-items: center;
    /* Aligne verticalement au centre */
    gap: 30px;
    /* Espace entre l'image et le texte */
    margin: 0 auto;
    flex-wrap: wrap;
    /* Permet de passer Ã&nbsp; une nouvelle ligne lorsque l'espace est insuffisant */
}

.comp-image {
    flex: 0 1 48%;
    /* Pas de flex-grow (0), flex-shrink (1) et largeur de base 48% */
    max-width: 300px;
    /* Limite la taille de l'image */
    width: 100%;
    /* L'image prend toute la largeur disponible par dÃ©faut */
    box-sizing: border-box;
    /* Pour que la largeur prenne en compte les padding et les marges */
}

/* Ajouter une rÃ¨gle pour les Ã©crans plus petits (mobile) */
@media (max-width: 768px) {
    .comp-image {
        width: 40%;
        /* RÃ©duit la largeur des Ã©lÃ©ments Ã&nbsp; 40% pour des "tiles" plus petites */
    }

    .comp-content {
        gap: 10px;
        /* RÃ©duit l'espace entre les Ã©lÃ©ments pour s'adapter Ã&nbsp; la taille rÃ©duite */
    }
}

.comp-image img {
    width: 70%;
    /* L'image prend toute la largeur disponible */
    height: auto;
    /* Conserve le ratio d'aspect de l'image */
    border-radius: 8px;
    /* Ajoute des bords arrondis Ã&nbsp; l'image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Ombre autour de l'image */
}

.comp-image img:hover {
    transform: scale(1.1);
    /* Agrandit l'image Ã&nbsp; 110% */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    /* Accentue l'ombre */
}

/* Mobile - RÃ©duire la disposition en une seule colonne */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        /* En mode mobile, l'image et le texte sont en colonne */
        text-align: center;
        /* Centrer le texte */
    }
    .language-selector .dropdown-menu11 {
        display: block;
    }

    .hero h1 {
        font-size: 8vw;
        color: #6ccce9;
        margin-bottom: 20px;
    }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* Deux colonnes */
        gap: 20px;
        /* Espacement entre les cartes */
        padding: 0 20px;
        /* Optionnel : marges internes */
    }

    header {
        color: white;
        padding: 2.5rem 0;
        top: 0;
        Z-INDEX: 1;
        position: fixed;
        width: 100%;
    }

    header nav ul {
        list-style-type: none;

        justify-content: center;
        gap: 20px;
        padding: 0;
        margin: 0;
    }

    .about-image {
        max-width: 200px;
        /* RÃ©duire la taille de l'image sur mobile */
    }

    .about-text {
        max-width: 100%;
        /* Le texte occupe toute la largeur disponible */
    }

    .sidenav {
        background-color: #e8e8e8;
        height: 100%;
        left: -250px;
        padding-top: 60px;
        position: fixed;
        top: 0;
        transition: left .5s ease;
        width: 250px;
        z-index: 1
    }

    .sidenav a {
        color: #bbb9b9;
        display: block;
        font-size: 25px;
        padding: 8px 32px;
        text-decoration: none;
        transition: .3s
    }

    .sidenav a:hover {
        color: #111
    }

    .burger-icon {
        cursor: pointer;
        position: fixed;
        display: flex;
        flex-direction: column;
        right: 2vw;
        top: 1.5rem;
    }

    .burger-icon span {
        background-color: #ffffff;
        display: block;
        border-radius: 2px;
        ;
        height: 4px;
        margin: 2px 0;
        transition: all .3s ease;
        width: 30px;
    }

    .scrolled .burger-icon span {
        background-color: #000000;
        /* Noir aprÃ¨s le dÃ©filement */
    }

    /* Transforme la premiÃ¨re ligne en diagonale */
    input[type="checkbox"]:checked+.burger-icon span:first-child {
        transform: rotate(45deg);
        position: fixed;
        top: 2rem;
        /* ajuste la translation pour que la ligne se dÃ©place correctement */
    }

    /* Cache la deuxiÃ¨me ligne */
    input[type="checkbox"]:checked+.burger-icon span:nth-child(2) {
        opacity: 0;
    }

    /* Transforme la derniÃ¨re ligne en diagonale inverse */
    input[type="checkbox"]:checked+.burger-icon span:last-child {
        transform: rotate(-45deg);
        position: fixed;
        top: 2rem;
        /* ajuste la translation pour que la ligne se dÃ©place correctement */
    }

    input[type="checkbox"]:checked~.sidenav {
        left: 0
    }

    #menu-toggle {
        display: none
    }
}</pre></body></html>