/* Lien vers Google Fonts à inclure dans le de votre HTML */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); body { font-family: 'Roboto', sans-serif; /* Belle police élégante et lisible */ margin: 0; padding: 0; background-color: #1b1f38; /* Bleu nuit */ color: #f5f5f5; /* Blanc cassé */ line-height: 1.6; } /* Header */ header { background: #121530; /* Bleu nuit foncé */ color: #f5f5f5; /* Blanc cassé */ padding: 1em 0; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } header nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; } header nav ul li a { color: #c0c0c0; /* Gris clair */ text-decoration: none; font-size: 1.2em; transition: color 0.3s, border-bottom 0.3s; padding-bottom: 5px; } header nav ul li a:hover { color: #f5f5f5; /* Blanc cassé */ border-bottom: 2px solid #0077cc; /* Accent bleu vif */ } /* Titre principal */ #titre { text-align: center; margin: 20px 0; font-size: 2.5em; color: #f5f5f5; /* Blanc cassé */ } /* Conteneur de contenu */ div { padding: 10px; } /* Liens des projets */ .titreH { display: block; font-size: 1.5em; color: #0077cc; /* Bleu vif */ text-decoration: none; margin-bottom: 10px; transition: color 0.3s; } .titreH:hover { color: #00aaff; /* Bleu ciel */ } .textH { display: block; font-size: 1.5em; color: #0077cc; /* Bleu vif */ text-decoration: none; margin-bottom: 10px; transition: color 0.3s; } .textH:hover { color: #00aaff; /* Bleu ciel */ } /* Paragraphe */ p { font-size: 1em; margin-top: 0; color: #d3d3d3; /* Gris doux */ } /* Images */ img { border-radius: 10px; /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);*/ max-width: 100%; height: auto; } /* Flexbox pour organiser le contenu */ div[style*="display: flex;"] { align-items: center; justify-content: space-between; margin-bottom: 20px; } div[style*="display: flex;"] div { flex: 1; padding: 10px; } /* Espacement entre sections */ div + br + br { margin-bottom: 20px; } footer { text-align: center; background: #121530; /* Bleu nuit foncé */ color: #f5f5f5; /* Blanc cassé */ padding: 20px; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2); /* Ombre subtile sur le haut */ border-top: 1px solid #1b1f38; /* Ligne subtile pour démarquer le footer */ font-size: 1em; position: fixed; bottom: 0; left: 0; right: 0; max-height: 5px; transition: 1s; } footer:hover { max-height: 200px; } .no-style { box-shadow: none; padding-left: 5px; border-radius: 15px; } .hyper-liens { border-radius: 0; box-shadow: none; padding-left: 5px; } /* Style par défaut pour la liste */ ul.ligneList { display: flex; /* Active le mode flexbox */ justify-content: center; /* Centre le contenu horizontalement */ padding: 0; /* Retire les espaces par défaut sur les UL */ margin: 0; /* Ajuste les marges de la UL */ list-style: none; /* Supprime les puces */ } /* Les éléments individuels de la liste */ ul.ligneList li { margin: auto; /* Applique le centrage automatique */ text-align: center; /* Centre le texte pour chaque li */ } a { color: #0077cc; text-decoration: none; } li { margin: auto; } .img-din { width: 300px; transition: 0.7s; } .img-din:hover { transform: scale(1.15); transition: 0.7s; } .img-din-moyen { width: 200px; transition: 0.7s; } .img-din-moyen:hover { transform: scale(1.15); transition: 0.7s; } .img-din-petit { width: 100px; transition: 0.7s; } .img-din-petit:hover { transform: scale(1.15); transition: 0.7s; } .star { box-shadow: none; padding-left: 5px; border-radius: 15px; width: 40px; } .text { max-width: 800px; text-align: justify; text-align-last: center; } .gros-text { max-width: 1200px; text-align: justify; text-align-last: center; } .div-englobe-ligne { display: inline-flex; flex-direction: column; gap: 20px; } .div-englobe-ligne-a { width: 100%; display: inline-flex; flex-direction: column; background-color: #222746; padding: 10px; border-radius: 10px; align-items: center; gap: 10px; } .div-englobe-ligne-b { width: 100%; display: inline-flex; flex-direction: column; background-color: #1a1f46; padding: 10px; border-radius: 10px; align-items: center; gap: 10px; } .div-align-items { display: flex; gap: 10px; } .div-englobe-contenu { flex: 1; text-align: center; } .div-color-a { width: 100%; display: inline-flex; background-color: #222746; padding: 5px; align-items: center; gap: 10px; border-radius: 10px; } .div-color-b { width: 100%; display: inline-flex; background-color: #1a1f46; padding: 5px; align-items: center; gap: 10px; border-radius: 10px; }