diff --git a/css/about_css.css b/css/about_css.css
new file mode 100644
index 0000000..5338ba3
--- /dev/null
+++ b/css/about_css.css
@@ -0,0 +1,111 @@
+/* Section À propos */
+.about {
+    width: 90%;
+    max-width: 800px;
+    margin: 100px auto;
+    text-align: center;
+}
+
+.about h2 {
+    font-size: 36px;
+    color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
+    margin-bottom: 20px;
+}
+
+.about p {
+    font-size: 18px;
+    margin-top: 10px;
+    color: #e0e0e0;
+    line-height: 1.6;
+}
+
+.about-details {
+    margin-top: 30px;
+    text-align: left;
+}
+
+.about-details h3 {
+    font-size: 24px;
+    color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
+    margin-top: 20px;
+    text-align: center;
+}
+
+.about-details p {
+    font-size: 16px;
+    color: #cccccc;
+    margin-top: 5px;
+}
+
+/* Bouton pour contacter */
+.about .btn {
+    display: inline-block;
+    margin-top: 30px;
+    padding: 10px 20px;
+    background-color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
+    color: #121212;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.about .btn:hover {
+    background-color: var(--accent-color); /* Nouvelle variable pour la couleur au survol */
+}
+
+/* Responsive pour les tablettes */
+@media (max-width: 768px) {
+    .about {
+        margin: 80px auto;
+    }
+
+    .about h2 {
+        font-size: 30px;
+    }
+
+    .about p {
+        font-size: 16px;
+    }
+
+    .about-details h3 {
+        font-size: 20px;
+    }
+
+    .about-details p {
+        font-size: 14px;
+    }
+
+    .about .btn {
+        padding: 8px 16px;
+        font-size: 14px;
+    }
+}
+
+/* Responsive pour les smartphones */
+@media (max-width: 480px) {
+    .about {
+        margin: 60px auto;
+    }
+
+    .about h2 {
+        font-size: 24px;
+    }
+
+    .about p {
+        font-size: 14px;
+    }
+
+    .about-details h3 {
+        font-size: 18px;
+    }
+
+    .about-details p {
+        font-size: 12px;
+    }
+
+    .about .btn {
+        padding: 6px 12px;
+        font-size: 12px;
+    }
+}
diff --git a/css/accueil_css.css b/css/accueil_css.css
new file mode 100644
index 0000000..37cb12d
--- /dev/null
+++ b/css/accueil_css.css
@@ -0,0 +1,75 @@
+/* Section Introduction spécifique à l'accueil */
+.intro {
+    padding: 50px 20px;
+    background-color: #121212;
+    color: #e9ecef;
+}
+
+.intro h2 {
+    margin-bottom: 15px;
+    margin-top: -100px;
+    color: var(--accent-color);
+}
+
+.intro p {
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #e9ecef;
+}
+
+p {
+    color: #e9ecef;
+}
+
+.btn {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-color: var(--accent-color);
+    color: #f8f9fa;
+}
+
+.btn:hover {
+    background-color: var(--accent-color);
+}
+
+/* Responsive pour les tablettes */
+@media (max-width: 768px) {
+    .intro {
+        padding: 40px 15px;
+    }
+
+    .intro h2 {
+        margin-bottom: 10px;
+    }
+
+    .intro p {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+
+    .btn {
+        margin-top: 15px;
+    }
+}
+
+/* Responsive pour les smartphones */
+@media (max-width: 480px) {
+    .intro {
+        padding: 30px 10px;
+    }
+
+    .intro h2 {
+        margin-bottom: 8px;
+    }
+
+    .intro p {
+        font-size: 14px;
+        margin-bottom: 8px;
+    }
+
+    .btn {
+        margin-top: 10px;
+        font-size: 14px;
+    }
+}
diff --git a/css/contacts_css.css b/css/contacts_css.css
new file mode 100644
index 0000000..6d1e831
--- /dev/null
+++ b/css/contacts_css.css
@@ -0,0 +1,193 @@
+/* Section Contact */
+.contact {
+    text-align: center;
+    padding: 100px 20px;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.contact h2 {
+    margin-bottom: 20px;
+    color: var(--accent-color);
+}
+
+.contact p {
+    font-size: 18px;
+    margin-bottom: 30px;
+    color: #e0e0e0;
+}
+
+/* Formulaire de contact */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form-group {
+    text-align: left;
+    position: relative;
+}
+
+.form-label {
+    font-size: 16px;
+    color: #e0e0e0;
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.required {
+    color: #e74c3c;
+    margin-left: 4px;
+}
+
+input[type="radio"] {
+    margin-right: 5px;
+}
+
+input, textarea, select {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #444;
+    border-radius: 5px;
+    background-color: #333;
+    color: #e0e0e0;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus, select:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
+}
+
+textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+.character-count {
+    position: absolute;
+    bottom: 5px;
+    right: 10px;
+    font-size: 12px;
+    color: #888;
+}
+
+/* Style pour la checkbox */
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    color: #e0e0e0;
+    gap: 10px;
+}
+
+.checkbox-container input {
+    width: auto;
+}
+
+/* Bouton d'envoi amélioré */
+button[type="submit"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+    padding: 12px 25px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    background-color: var(--accent-color);
+    color: #121212;
+    border: none;
+    border-radius: 5px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+button[type="submit"]:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+button[type="submit"] .btn-icon {
+    font-size: 20px;
+}
+
+/* Informations de contact */
+.contact-info {
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid #444;
+    font-size: 16px;
+    color: #e0e0e0;
+}
+
+.contact-info a {
+    color: var(--accent-color);
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin: 0 5px;
+}
+
+.contact-info a:hover {
+    color: var(--accent-color);
+    transform: translateY(-2px);
+}
+
+/* Responsive pour les tablettes */
+@media (max-width: 768px) {
+    .contact {
+        padding: 80px 15px;
+    }
+
+    .contact p {
+        font-size: 16px;
+    }
+
+    input, textarea, select {
+        font-size: 14px;
+        padding: 10px;
+    }
+
+    button[type="submit"] {
+        font-size: 14px;
+        padding: 10px 20px;
+    }
+
+    .contact-info {
+        font-size: 14px;
+    }
+}
+
+/* Responsive pour les smartphones */
+@media (max-width: 480px) {
+    .contact {
+        padding: 60px 10px;
+    }
+
+    .contact h2 {
+        font-size: 24px;
+    }
+
+    .contact p {
+        font-size: 14px;
+    }
+
+    input, textarea, select {
+        font-size: 12px;
+        padding: 8px;
+    }
+
+    button[type="submit"] {
+        font-size: 12px;
+        padding: 8px 16px;
+    }
+
+    .contact-info {
+        font-size: 12px;
+    }
+}
diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000..cce15a7
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,352 @@
+/* Réinitialisation et styles de base */
+:root {
+    --accent-color: #1abc9c;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    background-color: #121212;
+    color: #e9ecef;
+    margin: 0;
+    padding: 0;
+}
+
+/* Liens globaux */
+a {
+    text-decoration: none;
+    color: var(--accent-color);
+    position: relative;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #16a085;
+}
+
+a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background-color: var(--accent-color);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+a:hover::after {
+    transform: scaleX(1);
+}
+
+/* Header et Navigation */
+header {
+    background-color: #1e1e1e;
+    padding: 20px 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    transition: transform 0.3s ease;
+}
+
+header.scroll-up {
+    transform: translateY(0);
+}
+
+header.scroll-down {
+    transform: translateY(-100%);
+}
+
+nav {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 95%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+nav h1 {
+    font-size: 24px;
+    color: #e9ecef;
+    margin-right: auto;
+    transition: transform 0.3s ease;
+}
+
+nav h1:hover {
+    transform: scale(1.05);
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+}
+
+nav ul li {
+    margin-left: 15px;
+    position: relative;
+}
+
+nav ul li a {
+    color: #e9ecef;
+    font-weight: 500;
+    padding: 5px 0;
+}
+
+nav ul li a:hover {
+    transition: all 0.3s ease;
+    color: var(--accent-color);
+    border-bottom: solid 3px var(--accent-color);
+}
+
+#settings-icon {
+    margin-left: 15px;
+    transition: transform 0.3s ease;
+}
+
+/* Titres globaux */
+h2 {
+    font-size: 36px;
+    color: var(--accent-color);
+    text-align: center;
+    margin-bottom: 20px;
+    transition: transform 0.3s ease;
+}
+
+h2:hover {
+    transform: scale(1.02);
+}
+
+h3 {
+    font-size: 24px;
+    color: var(--accent-color);
+    margin-top: 20px;
+    transition: transform 0.3s ease;
+}
+
+h3:hover {
+    transform: translateX(5px);
+}
+
+/* Boutons avec animation améliorée */
+.btn {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: var(--accent-color);
+    color: #121212 !important;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 5px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.8s ease, height 0.6s ease;
+}
+
+.btn:hover::before {
+    width: 600px;
+    height: 300px;
+}
+
+.btn:hover {
+    color: #121212 !important;
+    transform: scale(1.1) translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.btn:active {
+    transform: scale(0.95);
+}
+
+/* Sections de contenu */
+section {
+    width: 90%;
+    max-width: 800px;
+    margin: 100px auto;
+    text-align: center;
+}
+
+.skill p {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.skill:hover p {
+    opacity: 1;
+    transform: translateX(20px);
+}   
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+section p {
+    font-size: 18px;
+    color: #e9ecef;
+    line-height: 1.6;
+    margin-top: 10px;
+}
+
+/* Pied de page */
+footer {
+    background-color: #1e1e1e;
+    text-align: center;
+    padding: 20px;
+    margin-top: 100px;
+    color: #e9ecef;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    transition: transform 0.3s ease;
+}
+
+footer:hover {
+    transform: translateY(-5px);
+}
+
+footer p {
+    color: #e9ecef;
+    font-size: 14px;
+    transition: opacity 0.3s ease;
+}
+
+footer:hover p {
+    opacity: 0.8;
+}
+
+#scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #2d2d2d;
+    color: #e9ecef;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+    cursor: pointer;
+    display: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#scroll-to-top:hover {
+    background-color: #3d3d3d;
+    transform: scale(1.1) translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+/* Sélecteur de couleur avec animations */
+.color-picker {
+    position: absolute;
+    top: 60px;
+    right: 20px;
+    background-color: #2d2d2d;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    color: #e9ecef;
+    transform-origin: top right;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.color-picker.hidden {
+    transform: scale(0.95);
+    opacity: 0;
+}
+
+.color-picker span {
+    display: block;
+    color: #e9ecef;
+    margin-bottom: 10px;
+    transition: transform 0.3s ease;
+}
+
+.color-picker label {
+    display: block;
+    margin: 5px 0;
+    color: #e9ecef;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.color-picker label:hover {
+    transform: translateX(5px);
+}
+
+.color-picker input[type="radio"] {
+    margin-right: 5px;
+    transition: transform 0.3s ease;
+}
+
+.color-picker input[type="radio"]:checked {
+    transform: scale(1.2);
+}
+
+/* Icône des paramètres améliorée */
+#settings-icon {
+    background: none;
+    border: none;
+    color: #e9ecef;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 5px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#settings-icon:hover {
+    transform: rotate(90deg) scale(1.1);
+    text-shadow: 0 0 10px rgba(255,255,255,0.5);
+}
+
+/* Style pour les éléments utilisant la couleur d'accentuation */
+a:hover, 
+.project-card:hover,
+h2,
+h3 {
+    color: var(--accent-color);
+    transition: all 0.3s ease;
+}
+
+.btn, .btn:hover {
+    color: #121212 !important;
+}
+
+.strong_word {
+    color: var(--accent-color);
+    transition: transform 0.3s ease;
+}
+
+.strong_word:hover {
+    transform: scale(1.1);
+}
+
+.project-card, .skill-item {
+    border-color: #2d2d2d;
+    transition: all 0.3s ease;
+}
diff --git a/css/projet_css.css b/css/projet_css.css
new file mode 100644
index 0000000..59acf61
--- /dev/null
+++ b/css/projet_css.css
@@ -0,0 +1,116 @@
+.projects {
+    text-align: center;
+    padding: 50px 20px; /* Réduction du padding supérieur de 100px à 50px */
+}
+
+.project-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 20px; /* Réduction de la marge supérieure de 40px à 20px */
+}
+
+.project-card {
+    background-color: #1f1f1f;
+    padding: 20px;
+    border-radius: 10px;
+    width: 300px;
+    color: #e0e0e0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    text-align: left;
+    margin: 15px;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.project-card h3 {
+    font-size: 22px;
+    color: var(--accent-color);
+    margin-bottom: 10px;
+}
+
+.project-card p {
+    margin: 10px 0;
+}
+
+.project-card .btn,
+.btn {
+    display: inline-block;
+    margin-top: 15px;
+    padding: 10px 15px;
+    background-color: var(--accent-color);
+    color: #121212;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+}
+
+.project-card:hover{
+    transition: all 0.3s ease;
+    transform: scale(1.05);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 10;    
+    background-color: var(--accent-color);
+}
+.btn:hover {
+    background-color: var(--accent-color);
+    color: #121212;
+    scale: 1.05;
+}
+
+.project-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+}
+.project-card:hover .strong_word {
+    color: #121212;
+}
+
+.project-card:hover h3 {
+    color: #121212;
+}
+
+@media (max-width: 768px) {
+    .projects {
+        padding: 40px 15px; /* Réduction du padding supérieur de 80px à 40px */
+    }
+
+    .project-card {
+        width: 250px;
+    }
+
+    .project-card h3 {
+        font-size: 20px;
+    }
+
+    .project-card p,
+    .project-card .btn {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .projects {
+        padding: 30px 10px; /* Réduction du padding supérieur de 60px à 30px */
+    }
+
+    .project-card {
+        width: 100%;
+    }
+
+    .project-card h3 {
+        font-size: 18px;
+    }
+
+    .project-card p {
+        font-size: 12px;
+    }
+
+    .project-card .btn {
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+}
\ No newline at end of file
diff --git a/css/skills_css.css b/css/skills_css.css
new file mode 100644
index 0000000..1b24a75
--- /dev/null
+++ b/css/skills_css.css
@@ -0,0 +1,167 @@
+/* Section Compétences */
+.skills {
+    text-align: center;
+    padding: 100px 20px;
+}
+
+.skills-section {
+    margin-top: 40px;
+}
+
+.skills-section h3 {
+    font-size: 24px;
+    color: var(--accent-color);
+    margin-bottom: 20px;
+}
+
+/* Style des compétences techniques avec barre de progression */
+.skill {
+    margin-bottom: 20px;
+    text-align: left;
+    max-width: 600px;
+    margin: 0 auto 20px auto;
+}
+
+.skill p {
+    font-size: 18px;
+    margin-bottom: 5px;
+    color: #e0e0e0;
+}
+
+.progress-bar {
+    background-color: #333;
+    border-radius: 5px;
+    overflow: hidden;
+    height: 10px;
+}
+
+.progress {
+    background-color: var(--accent-color);
+    height: 100%;
+    transition: width 0.4s ease, background-color 0.3s ease;
+}
+
+/* Compétences générales */
+.skills-section ul {
+    list-style-type: none;
+    padding: 0;
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: left;
+}
+
+.skills-section ul li {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #e0e0e0;
+}
+
+/* Responsive pour les tablettes */
+@media (max-width: 768px) {
+    .skills {
+        padding: 80px 15px;
+    }
+
+    .skills-section h3 {
+        font-size: 22px;
+    }
+
+    .skill p {
+        font-size: 16px;
+    }
+
+    .skills-section ul li {
+        font-size: 16px;
+    }
+}
+
+/* Responsive pour les smartphones */
+@media (max-width: 480px) {
+    .skills {
+        padding: 60px 10px;
+    }
+
+    .skills-section h3 {
+        font-size: 20px;
+    }
+
+    .skill p {
+        font-size: 14px;
+    }
+
+    .skills-section ul li {
+        font-size: 14px;
+    }
+
+    .progress-bar {
+        height: 8px;
+    }
+}
+
+/* Style des cartes de compétences générales */
+.project-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.project-card {
+    background-color: #1f1f1f;
+    padding: 20px;
+    border-radius: 10px;
+    width: 300px;
+    color: #e0e0e0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    text-align: left;
+    margin: 15px;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.project-card h3 {
+    font-size: 22px;
+    color: var(--accent-color);
+    margin-bottom: 10px;
+}
+
+.project-card p {
+    margin: 10px 0;
+    line-height: 1.5;
+}
+
+.project-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+    background-color: var(--accent-color);
+}
+
+.project-card:hover h3,
+.project-card:hover p {
+    color: #121212;
+}
+
+/* Responsive pour les tablettes */
+@media (max-width: 768px) {
+    .project-card {
+        width: calc(50% - 30px);
+    }
+    
+    .project-card h3 {
+        font-size: 20px;
+    }
+}
+
+/* Responsive pour les smartphones */
+@media (max-width: 480px) {
+    .project-card {
+        width: 100%;
+        margin: 10px 0;
+    }
+    
+    .project-card h3 {
+        font-size: 18px;
+    }
+}