/* ======== 1. VARIABLES DE THÈME ======== */ /* On définit les couleurs pour le mode "light" (jour) par défaut */ :root { --bg-color: #f4f4f4; /* Fond clair */ --text-color: #333; /* Texte foncé */ --card-bg-color: #ffffff; /* Fond des cartes (projets) */ --primary-color: #007bff; /* Couleur d'accentuation (boutons, liens) */ --nav-bg-color: #ffffff; --shadow-color: rgba(0, 0, 0, 0.1); } /* On définit les couleurs pour le mode "dark" (nuit) */ /* Celles-ci s'appliqueront quand aura l'attribut data-theme="dark" */ [data-theme="dark"] { --bg-color: #121212; /* Fond foncé */ --text-color: #e0e0e0; /* Texte clair */ --card-bg-color: #1e1e1e; /* Fond des cartes (projets) */ --primary-color: #64b5f6; /* Couleur d'accentuation plus claire */ --nav-bg-color: #1e1e1e; --shadow-color: rgba(0, 0, 0, 0.5); } /* ======== 2. STYLES GÉNÉRAUX ======== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; /* On utilise les variables ! */ background-color: var(--bg-color); color: var(--text-color); /* Ajoute une transition douce lors du changement de thème */ transition: background-color 0.3s ease, color 0.3s ease; } html { scroll-behavior: smooth; /* Pour un défilement fluide vers les ancres */ } section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; text-align: center; } h1, h2, h3 { margin-bottom: 20px; } /* ======== 3. STYLES DES COMPOSANTS ======== */ /* --- Navbar --- */ header { background-color: var(--nav-bg-color); box-shadow: 0 2px 5px var(--shadow-color); position: sticky; top: 0; z-index: 100; transition: background-color 0.3s ease, box-shadow 0.3s ease; } nav { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto; padding: 15px 20px; } nav .logo { font-size: 1.5rem; font-weight: bold; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 20px; } nav a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s ease; } nav a:hover { color: var(--primary-color); } /* --- Bouton Thème --- */ #theme-toggle { background: none; border: 1px solid var(--text-color); color: var(--text-color); cursor: pointer; font-size: 1rem; padding: 5px 10px; border-radius: 5px; transition: all 0.3s ease; } #theme-toggle:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } /* --- Section Hero (Accueil) --- */ .hero { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero h1 { font-size: 3rem; margin-bottom: 15px; } .hero-subtitle { font-size: 1.2rem; color: var(--text-color); opacity: 0.8; margin-bottom: 10px; } .hero-goal { font-size: 1.5rem; color: var(--primary-color); font-weight: 500; margin-bottom: 30px; } .hero-goal strong { font-weight: 700; } .hero-description { font-size: 1.2rem; margin-bottom: 30px; max-width: 650px; } /* --- Bouton CTA (Call to Action) --- */ .cta-button { background-color: var(--primary-color); color: white; padding: 12px 25px; text-decoration: none; font-weight: bold; border-radius: 5px; transition: transform 0.2s ease, background-color 0.3s ease; } .cta-button:hover { transform: translateY(-2px); opacity: 0.9; } /* --- Grille des Projets --- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; } .project-card { background-color: var(--card-bg-color); border-radius: 8px; padding: 25px; text-align: left; box-shadow: 0 4px 10px var(--shadow-color); transition: all 0.3s ease; } .project-card:hover { transform: translateY(-5px); } .project-card h3 { color: var(--primary-color); } /* --- Footer --- */ footer { text-align: center; padding: 20px; margin-top: 40px; border-top: 1px solid var(--shadow-color); } /* ======== AJOUTS POUR LES NOUVELLES SECTIONS ======== */ /* --- Styles pour les liens d'icônes (GitHub/LinkedIn) dans la nav --- */ .nav-icon { font-weight: bold; padding: 5px 10px; border: 1px solid var(--text-color); border-radius: 5px; margin-left: 5px; /* Petit espace */ } .nav-icon:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: white; /* Texte devient blanc au survol */ } /* --- Style pour le sous-titre de section (optionnel) --- */ .section-subtitle { font-size: 1.1rem; color: var(--text-color); opacity: 0.8; margin-bottom: 30px; } /* --- Grille des Compétences --- */ .competences-grid { display: grid; /* Crée 4 colonnes sur grand écran, 2 sur tablette, 1 sur mobile */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; text-align: left; } .categorie-competence { background-color: var(--card-bg-color); border-radius: 8px; padding: 25px; box-shadow: 0 4px 10px var(--shadow-color); transition: all 0.3s ease; border-left: 5px solid var(--primary-color); /* Une petite bordure de couleur */ } .categorie-competence:hover { transform: translateY(-5px); } .categorie-competence h3 { font-size: 1.3rem; margin-bottom: 20px; /* L'emoji 🎮 ou 💻 fait office d'icône */ } .categorie-competence ul { list-style: none; /* Enlève les puces */ padding: 0; margin: 0; } .categorie-competence li { background-color: var(--bg-color); /* Couleur du fond de la page */ color: var(--text-color); padding: 8px 12px; border-radius: 5px; margin-bottom: 8px; font-weight: 500; transition: background-color 0.3s ease; } /* Léger effet au survol d'une compétence */ .categorie-competence li:hover { opacity: 0.8; } /* ======== 4. RESPONSIVE DESIGN (MEDIA QUERIES) ======== */ /* D'abord, on cache le bouton hamburger sur grand écran */ #menu-toggle { display: none; /* Caché par défaut sur bureau */ background: none; border: 1px solid var(--text-color); color: var(--text-color); cursor: pointer; font-size: 1.5rem; /* Un peu plus gros pour être cliquable */ padding: 3px 10px; border-radius: 5px; margin-left: 10px; } /* On utilise 768px comme point de rupture (taille tablette) */ /* Tout ce qui est ici s'appliquera aux écrans de 768px OU MOINS */ @media (max-width: 768px) { /* --- 1. Afficher le bouton hamburger --- */ #menu-toggle { display: block; /* On l'affiche sur mobile */ } /* --- 2. Cacher et styler le menu de navigation --- */ nav ul#nav-links { /* On le sort du flux normal */ position: absolute; top: 65px; /* Doit être juste sous la navbar (ajustez si besoin) */ left: 0; width: 100%; /* On le cache par défaut */ display: none; /* On change la direction (verticale) */ flex-direction: column; /* Style */ background-color: var(--nav-bg-color); box-shadow: 0 4px 10px var(--shadow-color); padding: 10px 0; } /* --- 3. Afficher le menu quand il a la classe '.active' (ajoutée par JS) --- */ nav ul#nav-links.active { display: flex; /* On le ré-affiche */ } /* --- 4. Styler les liens dans le menu mobile --- */ nav ul li { margin: 10px 0; /* Espacement vertical */ width: 100%; text-align: center; } nav ul li a { padding: 10px; display: block; /* Pour que toute la zone soit cliquable */ } nav ul li .nav-icon { display: inline-block; /* Garder le style "boîte" */ padding: 8px 15px; width: 50%; /* Occupe plus de place */ margin: 5px auto; } /* --- 5. Ajuster les autres sections --- */ .hero h1 { font-size: 2.2rem; /* Titre principal un peu plus petit */ } .hero p { font-size: 1.1rem; } section { padding: 40px 15px; /* Moins de padding sur les côtés */ } } /* Optionnel : pour les très petits écrans */ @media (max-width: 480px) { .hero h1 { font-size: 1.8rem; } }