* { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; font-family: 'Montserrat', sans-serif; } .background-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .menu { position: fixed; top: 10px; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; padding: 20px; background: transparent; z-index: 2; pointer-events: none; } .menu::before { content: ""; position: fixed; top: 0; left: 0; width: 20%; height: 100%; background: linear-gradient(to right, rgb(1, 1, 1) 0%, rgba(7, 7, 7, 0.556) 70%, rgba(0, 0, 0, 0) 100%); z-index: -1; pointer-events: none; } .menu a { font-family: 'Montserrat', sans-serif; font-weight: 200; letter-spacing: 0.5px; color: white; text-decoration: none; font-size: 20px; margin: 15px 0; transition: color 0.3s, transform 0.3s; display: inline-block; transform-origin: center; pointer-events: auto; } .menu a:hover, .menu a.active { transform: scale(1.05); color: #f39c12; } .title { position: absolute; top: -55px; /* Modifie cette valeur pour ajuster verticalement ton logo */ left: 50%; transform: translateX(-50%); z-index: 2; } .logo { width: 300px; height: auto; max-width: 80%; } .galerie { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: block !important; } .galerie img { width: 100%; height: 100%; object-fit: cover; } .fleche { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 40px; cursor: pointer; user-select: none; transition: color 0.3s; z-index: 10; } .fleche:hover { color: #f39c12; } .fleche.gauche { left: calc(20% - 165px); /* Position d'origine pour PC */ } /* Ajustement spécifique pour mobile */ @media screen and (max-width: 768px) { .fleche.gauche { left: 30px !important; } } .fleche.droite { right: 30px; } /* Styles pour le formulaire de contact */ .form-container { width: 80%; max-width: 700px; margin: 100px auto; padding: 30px; background: rgba(38, 35, 31, 0.751); border-radius: 10px; color: white; font-family: 'Montserrat', sans-serif; } .form-container label { display: block; margin-top: 15px; } .form-container input[type="text"], .form-container input[type="email"], .form-container select, .form-container textarea { width: 100%; padding: 8px; border-radius: 5px; border: none; margin-top: 5px; margin-bottom: 15px; } .form-container select { cursor: pointer; } .form-container button { margin-top: 15px; background-color: #f39c12; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } .form-container button:hover { background-color: #d48806; } /* Page En construction */ .page-construction { background-color: #302e2d; /* couleur de ChatGPT */ font-family: 'Montserrat', sans-serif; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .page-construction .message { font-size: 40px; text-align: center; } .page-construction .smiley { font-size: 50px; margin-top: 20px; } /* Styles icônes sociales (menu vertical) */ .menu .social-icons { margin-top: auto; display: flex; flex-direction: column; gap: 15px; padding-bottom: 20px; margin-left: -235px; /* 👈 ajuste précisément selon tes préférences */ margin-bottom: 10px; /* Remonte les icônes de 50px */ } .menu .social-icons a { color: rgb(66, 60, 60); font-size: 24px; transition: color 0.3s, transform 0.3s; display: flex; /* 👈 modification importante ici */ justify-content: center; /* centre horizontalement */ align-items: center; /* centre verticalement */ } .menu .social-icons a:hover { transform: scale(1.2); } .menu .social-icons a:hover .fa-youtube { color: #FF0000; } .menu .social-icons a:hover .fa-linkedin-in { color: #0A66C2; } .menu .social-icons a:hover .fa-instagram { color: #E1306C; } .menu .social-icons a:hover .fa-tiktok { color: #69C9D0; } .menu .social-icons i { font-size: 25px; pointer-events: none; /* 👈 évite tout décalage */ } /* Couleur de fond spécifique uniquement pour la page contact */ body.page-contact { background-color: #302e2d; /* Remplace par la couleur désirée ! */ } /* Styles pour le menu hamburger */ .menu-toggle { display: none; position: fixed; top: 20px; right: 20px; font-size: 30px; color: white; cursor: pointer; z-index: 3; } /* Menu en version mobile */ @media screen and (max-width: 768px) { .menu { width: 100%; height: auto; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.9); flex-direction: column; align-items: center; justify-content: center; transform: translateY(-100%); transition: transform 0.3s ease-in-out; pointer-events: auto; } .menu.active { transform: translateY(0); } .menu a { font-size: 22px; padding: 10px; } .menu-toggle { display: block; } } .title { position: absolute; top: -55px; /* Position actuelle */ left: 50%; transform: translateX(-50%); z-index: 2; } /* Correction du titre sur mobile */ @media screen and (max-width: 768px) { .title { top: -23px; /* Descend le titre sur mobile */ } } .language-switch { position: absolute; top: 10px; left: 20px; font-size: 14px; color: white; z-index: 10; } .language-switch a { text-decoration: none; color: white; font-weight: bold; transition: color 0.3s; } .language-switch a.active { color: #f39c12; } .language-switch a:hover { color: #d48806; } .copyright { position: fixed; bottom: 10px; left: 20px; font-family: 'Montserrat', sans-serif; font-weight: 200; /* Même épaisseur que le menu */ letter-spacing: 0.5px; /* Même espacement que le menu */ font-size: 14px; /* Plus petit que le menu */ color: white; opacity: 0.8; /* Légère transparence pour un effet sobre */ z-index: 10; } /* Définition des variables pour la police */ :root { --main-font: 'Montserrat', sans-serif; /* Police par défaut */ } /* Réinitialisation des marges et padding */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Appliquer la couleur de fond demandée */ body.page-apropos, body.page-about { background-color: #302e2d; font-family: var(--main-font); color: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Conteneur principal */ .about-container { max-width: 900px; width: 100%; padding: 40px; text-align: center; margin-left: 22%; /* Décalage pour éviter le chevauchement avec le menu */ } /* Photo de profil */ .about-photo { margin-bottom: 20px; } .photo-profile { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Titres */ .about-content h1, .about-content h2 { color: #f39c12; margin-top: 40px; /* ✅ Plus d'espace entre les sections */ margin-bottom: 20px; /* ✅ Ajout d'espace sous chaque titre */ } /* Listes d'expérience et de compétences */ .experience-list, .skills-list { list-style: none; padding: 0; text-align: left; margin-top: 20px; } .experience-list li, .skills-list li { background: rgba(255, 255, 255, 0.1); padding: 15px; /* ✅ Augmente l'espace autour des éléments */ margin: 10px 0; /* ✅ Plus d'espace entre chaque élément */ border-radius: 5px; font-weight: bold; } /* Ne modifie pas le menu existant */ .menu { position: fixed; top: 10px; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; padding: 20px; background: transparent; z-index: 2; pointer-events: none; } .menu::before { content: ""; position: fixed; top: 0; left: 0; width: 20%; height: 100%; background: linear-gradient(to right, rgb(1, 1, 1) 0%, rgba(7, 7, 7, 0.556) 70%, rgba(0, 0, 0, 0) 100%); z-index: -1; pointer-events: none; } .menu a { font-family: var(--main-font); font-weight: 200; letter-spacing: 0.5px; color: white; text-decoration: none; font-size: 20px; margin: 15px 0; transition: color 0.3s, transform 0.3s; display: inline-block; transform-origin: center; pointer-events: auto; } .menu a:hover, .menu a.active { transform: scale(1.05); color: #f39c12; } /* Ajustement sur mobile */ @media screen and (max-width: 768px) { .about-container { margin-left: 0; /* Supprime le décalage du menu */ padding: 20px; } } .about-container { max-width: 900px; width: 100%; padding: 40px; text-align: center; margin-left: 0%; /* Décalage pour ne pas être caché par le menu */ margin-top: 930px; /* ✅ Ajout d'un espace en haut pour éviter le tronquage */ line-height: 1.8; /* ✅ Espacement entre les lignes */ } /* Pour éviter le chevauchement avec le menu sur mobile */ @media screen and (max-width: 768px) { .about-container { margin-left: 0; /* Pas de décalage latéral sur mobile */ padding: 20px; margin-top: 2350px; /* ✅ Ajuste l'espacement sur mobile */ } } @media screen and (max-width: 768px) { .menu { width: 100vw; height: 100vh; /* ✅ Assure que le menu prend toute la hauteur */ position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); /* ✅ Fond noir semi-transparent */ display: flex; flex-direction: column; align-items: center; /* ✅ Centre les éléments */ justify-content: flex-start; /* ✅ Place les liens en haut */ z-index: 30; padding-top: 60px; /* ✅ Remonte les mots de chaque section */ transform: translateY(-100%); transition: transform 0.3s ease-in-out; } .menu.active { transform: translateY(0); } /* ✅ Rendre la zone cliquable plus étroite */ .menu a { font-size: 18px; /* ✅ Réduit légèrement la taille des mots */ padding: 10px 20px; /* ✅ Réduit la zone cliquable horizontalement */ margin: 5px 0; /* ✅ Réduit l’espace vertical entre chaque section */ color: white; text-decoration: none; text-align: center; width: auto; /* ✅ Ajuste la largeur cliquable */ display: inline-block; /* ✅ Garde le bon alignement */ } .menu a:first-child { margin-top: 10px; /* ✅ Remonte "ACCUEIL" encore un peu */ } .menu a:hover { color: #f39c12; } /* ✅ Remonter les icônes sociales */ .menu .social-icons { margin-top: 10px; /* ✅ Remonte les icônes */ display: flex; flex-direction: column; /* ✅ Garde l'affichage vertical */ gap: 8px; /* ✅ Réduit l’espace entre les icônes */ justify-content: center; } .menu .social-icons a { color: white; font-size: 20px; transition: color 0.3s, transform 0.3s; text-align: center; } .menu .social-icons a:hover { transform: scale(1.2); } } /* ✅ Styles pour le carrousel de logos */ .experience-logos { width: 100%; overflow: hidden; margin-top: 20px; position: relative; } .logos-container { display: flex; justify-content: center; align-items: center; gap: 40px; /* ✅ Espace entre les logos */ animation: scrollLogos 15s linear infinite; /* ✅ Animation pour défiler automatiquement */ white-space: nowrap; } /* ✅ Animation pour faire défiler les logos horizontalement */ @keyframes scrollLogos { from { transform: translateX(100%); } to { transform: translateX(-100%); } } /* ✅ Styles des logos avec tailles indépendantes */ .logos-container img { height: 50px; /* ✅ Défaut : 50px, ajustable individuellement */ max-width: 200px; /* ✅ Largeur max */ object-fit: contain; } /* ✅ Personnalisation de la taille de chaque logo */ .logo-jc { height: 60px; /* ✅ John Cockerill */ } .logo-fn { height: 50px; /* ✅ FN Herstal */ } .logo-cern { height: 70px; /* ✅ CERN */ } .logo-framatome { height: 55px; /* ✅ Framatome */ } .bionic-info { font-size: 0.9em; color: #666; display: inline-block; cursor: help; border-bottom: 1px dotted #666; text-decoration: none; position: relative; } .bionic-info:hover::after { content: attr(data-tooltip); position: absolute; background: #f9f9f9; color: #000; padding: 10px; max-width: 300px; font-size: 0.85em; border: 1px solid #ccc; border-radius: 8px; white-space: normal; z-index: 9999; top: 120%; left: 0; } #videoInAction { width: 100vw; /* prend toute la largeur de l’écran */ height: 100vh; /* prend toute la hauteur */ object-fit: cover; /* rogne la vidéo si nécessaire */ display: none; /* masquée par défaut */ background: black; /* au cas où la vidéo n'occupe pas tout l'espace */ } #videoInAction { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; object-fit: cover; object-position: 50% 50%; /* centré parfaitement */ z-index: -1; display: none; pointer-events: none; background: black; } /* Supprimer toute UI native des navigateurs */ #videoInAction::-webkit-media-controls { display: none !important; opacity: 0 !important; } .experience-list a { color: white; /* Texte blanc */ font-weight: bold; /* Texte en gras */ text-decoration: none; /* Pas de soulignement */ } .experience-list a:hover { text-decoration: underline; /* Soulignement au survol (optionnel) */ }