/* ================================================================= */ /* IMPORT FONT (NÉCESSITE UN LIEN DANS VOTRE HTML) */ /* ================================================================= */ /* Recommandé : Ajoutez à votre */ /* ================================================================= */ /* GLOBAL & TYPOGRAPHY */ /* ================================================================= */ :root { --bg-color: #0A0A0A; /* Fond noir très sombre */ --surface-color: #1A1A1A; /* Couleurs des cartes/surfaces */ --accent-color: #48BB78; /* Vert éclatant pour l'accentuation */ --text-color: #E2E8F0; /* Texte clair */ --text-secondary: #A0AEC0; /* Texte secondaire/détails */ } body { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; scroll-behavior: smooth; } /* Sélection de texte */ ::selection { background: var(--accent-color); color: var(--bg-color); } a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease-in-out; } a:hover { color: #38A169; /* Une nuance plus foncée au survol */ } /* ================================================================= */ /* HEADER & NAVIGATION */ /* ================================================================= */ header { background: var(--surface-color); padding: 1rem 0; text-align: center; border-bottom: 1px solid rgba(72, 187, 120, 0.2); /* Ligne subtile */ } header h1 { margin: 0; font-size: 2rem; color: var(--accent-color); text-shadow: 0 0 5px rgba(72, 187, 120, 0.3); } nav { margin-top: 1rem; } nav a { color: var(--text-color); margin: 0 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 5px; } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--accent-color); transition: width 0.3s ease-in-out, left 0.3s ease-in-out; } nav a:hover::after { width: 100%; left: 0; } /* ================================================================= */ /* SECTIONS & TITRES */ /* ================================================================= */ section { padding: 4rem 2rem; /* Plus d'espace vertical */ max-width: 1000px; margin: auto; } section h1, section h2 { color: var(--text-color); font-size: 2.2rem; font-weight: 700; text-align: left; margin-bottom: 1.5rem; padding-bottom: 0.5rem; position: relative; } section h2::after { content: ''; display: block; width: 50px; height: 4px; background-color: var(--accent-color); margin-top: 10px; } .profile p { color: var(--text-secondary); } /* Styles pour les listes de premier niveau (blocs) */ .skills ul, .education ul, .experience ul { list-style: none; padding-left: 0; } .skills li, .education li, .experience li { background-color: var(--surface-color); border-radius: 8px; padding: 15px; /* CHANGEMENT ICI : Augmentation de l'espace en bas pour "sauter une ligne" */ margin-bottom: 25px; /* Équivalent à peu près à 1.5 lignes de hauteur de texte */ border-left: 5px solid var(--accent-color); } /* ================================================================= */ /* LISTES IMBRIQUÉES DANS FORMATION/EXPÉRIENCE */ /* ================================================================= */ .experience li ul, .education li ul { list-style-type: disc; /* Points noirs pour la liste interne */ padding-left: 20px; /* Indentation */ margin-top: 10px; margin-bottom: 0; } .experience li ul li, .education li ul li { /* Rénitialisation des styles pour faire de l'élément une simple ligne dans le bloc */ background-color: transparent; /* Supprime le fond de la liste principale */ border-left: none; /* Supprime la bordure verte */ border-radius: 0; padding: 5px 0; /* Espacement minimal */ margin-bottom: 5px; list-style-type: disc; /* S'assure que le point est bien visible */ color: var(--text-secondary); /* Couleur pour le détail */ } /* ================================================================= */ /* PROJECTS (MES JEUX) */ /* ================================================================= */ .projects h1 { text-align: center; color: var(--text-color); } .games-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; padding: 20px 0; } .game-card { background: var(--surface-color); border: 1px solid rgba(72, 187, 120, 0.1); border-radius: 12px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; position: relative; } .game-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(72, 187, 120, 0.15); } .game-card h2 { color: var(--accent-color); margin-top: 0; margin-bottom: 15px; font-size: 1.6rem; border-bottom: 1px solid rgba(72, 187, 120, 0.2); padding-bottom: 10px; } .game-card h2::after { content: none; /* Supprimer la ligne de h2 de section */ } .game-card p { color: var(--text-secondary); margin-bottom: 15px; font-size: 0.95rem; } .game-card iframe { width: 100%; margin-top: 10px; border: none; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .more-link { text-align: center; margin-top: 50px; font-size: 1.1rem; font-weight: 600; } /* ================================================================= */ /* FOOTER & SOCIAL MEDIA */ /* ================================================================= */ footer { background: var(--surface-color); color: var(--text-secondary); text-align: center; padding: 1.5rem 0; border-top: 1px solid rgba(72, 187, 120, 0.2); } .social-media { display: flex; gap: 20px; justify-content: center; margin-top: 1rem; } .social-icon { display: flex; justify-content: center; align-items: center; font-size: 20px; color: var(--text-color); width: 45px; height: 45px; border-radius: 50%; transition: transform 0.3s ease, background-color 0.3s ease; background-color: var(--bg-color); border: 1px solid var(--text-secondary); } .social-icon:hover { transform: scale(1.1); background-color: var(--accent-color); color: var(--bg-color); border-color: var(--accent-color); } .social-icon i { font-size: 25px; } /* Couleurs spécifiques - adaptées pour l'esthétique générale */ .twitter { background-color: #1a1a1a; } .instagram { background-color: #1a1a1a; } .linkedin { background-color: #1a1a1a; } .github { background-color: #1a1a1a; } /* ================================================================= */ /* UTILITAIRES & RESPONSIVE (Styles conservés et ajustés) */ /* ================================================================= */ code { background: #1e1e1e; color: var(--accent-color); padding: 2px 6px; border-radius: 4px; font-family: "Courier New", Courier, monospace; } /* Styles pour le menu déroulant (si utilisé) */ .menu-title { background-color: var(--surface-color) !important; color: var(--text-color) !important; } .menu-title:hover { background-color: #2a2a2a !important; } /* RESPONSIVE */ @media only screen and (max-width: 768px) { section { padding: 3rem 1rem; } .game-card { padding: 20px; } nav a { display: block; margin: 0.5rem 0; } nav a::after { content: none; } nav a:hover { color: var(--accent-color); } } /* ================================================================= */ /* MODÈLES 3D & IMAGES DE PRÉVISUALISATION */ /* ================================================================= */ /* Assure que l'élément model-viewer s'intègre parfaitement */ model-viewer { box-shadow: 0 0 10px rgba(72, 187, 120, 0.2); /* Le style height: 350px est défini dans le HTML pour une hauteur fixe */ } /* Style les images statiques à l'intérieur des cartes pour correspondre à la hauteur du visualiseur */ .image-card .model-preview-img { width: 100%; height: 350px; /* Fixe la hauteur pour correspondre au model-viewer */ object-fit: cover; /* Assure que l'image couvre l'espace sans être déformée */ border-radius: 8px; /* Correspond au bord arrondi des autres cartes */ margin-top: 10px; /* Espace après la description */ transition: none; /* Désactive les transitions inutiles sur l'image */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } /* Règle pour l'harmonisation des titres des cartes images */ .image-card h2 { color: var(--text-color); /* Titre de l'image en blanc pour le différencier de l'accentuation 3D */ border-bottom: 1px solid var(--text-secondary); } /* ================================================================= */ /* FULLSCREEN IMG */ /* ================================================================= */ .fullscreen { position: fixed; /* Assure que le conteneur reste fixe même en faisant défiler */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.98); /* Fond très sombre */ display: none; /* Caché par défaut, affiché par JavaScript */ justify-content: center; align-items: center; z-index: 99999; /* Valeur très élevée pour être sûr qu'il couvre tout */ } #fullscreen-image { max-width: 90%; max-height: 90%; object-fit: contain; /* L'image est contenue dans le conteneur sans être coupée */ box-shadow: 0 0 15px rgba(72, 187, 120, 0.3); } .close { position: absolute; top: 20px; right: 40px; font-size: 40px; color: var(--text-color); cursor: pointer; transition: color 0.3s; } .close:hover { color: var(--accent-color); }