Hello ! Je reviens vers vous après la grande aide de Noopy360 !

• Premier petit problème :

Le menu n'est pas centré. Trop haut de 2 ou 3 pixels.Voici mon code CSS :

body{
	/*background-image : url("myc.png");
	background-size: 10%;
	background-repeat: no-repeat;
	background-position: 50px 100px; */
	font-family : "Playfair Display SC ", Teko, Permanent Marker;
	padding : 0px;
	margin : 0px;
}

a{
  color:inherit; /* Permet de reprendre la couleur de sont parent (defaut:noir) */
  text-decoration:inherit; /* Permet de reprendre le soulignage de sont parent (defaut:non souligner)  */
}

nav{
  display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:space-between; /* Permet de mettre les enfants sur chaque bout du parent */
  height:50px; /* modifie la hauteur de la div à 50px */
  line-height:40px; /* Permet de centre horizontalement */
  background:#424558; /* Couleur du font de la div */
  font-size:23px; /* Taille de la police d'écriture */
}

        /* .fa-myfontawersome {
            font-size:23px !important;
           */


.imgbanniere {
	width : 46px;
	padding-right : 0px;
	position: relative;
	bottom: 0px;
}


.niv{
  display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:center; /* Avec le flex permet de coller et centre les balises enfants */
  padding:0 20% 0 0; /* Permet de decaler le menu du bord droit */
  
 }
.texte{ /* Cible uniquement le premier ".niv0" */
	color:white; /* change la couleur de la police en blanc */
	padding:6px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
    cursor:default; /* Permet de modifier le pointer de la sourie */
    font-size:30px;
}

.texte span{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}

.niv .niv0 a{
	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
	height:46px; /* Modifie la hauteur */
	padding:0px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}
.niv .niv0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center; /* Centre le texte horizontalement */
}
.niv .niv0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.niv .niv0{
	border-top:4px solid #424558; /* Permet de garder le centrage verticalement entre avec et sans le hover sur le texte */
}
.niv .niv0:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
.niv .niv0:nth-child(1):hover{
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.15); /* Couleur du font de la div */
}
.niv .niv0:nth-child(2):hover{
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.15);
}
.niv .niv0:nth-child(3):hover{
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.15);
}
.niv .niv0:nth-child(4):hover{
	border-color:rgba(244,208,63,1.0);
	background: rgba( 244, 208, 63, 0.15);
}

.niv .niv0:nth-child(5):hover{
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.15);
}

.niv .niv0:nth-child(6):hover{
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.15);
}

.niv .niv1{
	display:none; /* Cache le sous menu sans le :hover */
	color:#424558; /* Met le texte en noir */
}

.niv .niv1bis{
	display:none; /* Cache le sous menu sans le :hover */
	color:#424558; /* Met le texte en noir */
}

.niv .niv1bis2{
	display:none; /* Cache le sous menu sans le :hover */
	color:#424558; /* Met le texte en noir */
}

.niv .niv0:hover .niv1{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv0:hover .niv1bis{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}
.niv .niv0:hover .niv1bis2{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv1 a{
	background:rgba(46,204,113, 0.55);	/* Couleur du font de la div */
}

.niv .niv1bis a{
	background:rgba(244,208,63,0.55); /* Couleur du font de la div */
}

.niv .niv1bis2 a{
	background:rgba(234,97,83, 0.55); /* Couleur du font de la div */
	/*width : 120px; */
}

.niv .niv1 a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(46,204,113, 0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv1bis a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(244,208,63,0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv1bis2 a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(234,97,83, 0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

Voici mon code HTML :

<nav>
  <div class="texte"><span>A</span>mbi <span>D</span>raft <span>L</span>igue</div>
  <img class="imgbanniere" src="LogoADL.png" alt="Logo de l'ADL">
  <div class="niv">
  	<div class="niv0">
  		<a href="#"> <i class="fa fa-home faa-wrench animated-hover" aria-hidden="true"> </i> HOME</a>
  	</div>
  	<div class="niv0">
	  	<a href="Page présentation ADL0.html"> <i class="fab fa-ethereum"></i>  ADL <i class="fas fa-angle-down" style="font-size:15px;"></i> <!-- <i class="fab fa-gripfire"></i> --> </a>
	  	<div class="niv1">
	  		<a href="Page présentation ADL.html"> <i class="fas fa-cubes"></i> </i>Présentation de l'ADL</a>
	  		<a href="Page statistiques.html">  <i class="far fa-chart-bar"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Statistiques</a>
			<a href="Joueurs.html"> <i class="far fa-user"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Joueurs</a>
	  	</div>
	  </div>
	  <div class="niv0">
	  	<a href="Saison4.html"> <i class="fas fa-trophy"></i>  ADL S4 <i class="fas fa-angle-down faa-wrench animated-hover faa-fast" aria-hidden="true" " style="font-size:15px;"></i> </a>
	  	<div class="niv1bis2">
	  		<a href="ReglesS4.html"> <!-- <i class="fas fa-scroll"></i> --> <i class="fas fa-list"></i> </i>Règles</a>
	  		<a href="TierlistS4.html">  <i class="fas fa-shopping-cart"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Tierlist</a>
			<a href="StatsS4.html"> <i class="far fa-chart-bar"></i>  <!-- <i class="fas fa-square-root-alt"></i> --> Statistiques</a>
	  	</div>
	  </div>
	  <div class="niv0">
	  	<a href="Gazette.html"> <i class="fas fa-book-reader"></i> GAZETTES <i class="fas fa-angle-down" style="font-size:15px;"></i></a>
		<div class="niv1bis">
	  		<a href="Gazettedambi.html"> <i class="far fa-newspaper"></i> </i>Gazette d'Ambi</a>
	  		<a href="Fiches stratégiques.html">  <i class="fas fa-user-graduate"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Fiches stratégiques</a>
			<a href="Edition.html"> <i class="fas fa-exclamation-circle"></i> </i>Editions spéciales</a>
	  	</div>
	  </div>
	  <div class="niv0">
	  	<a href="Quizz.html"> <i class="far fa-question-circle"></i>   QUIZZ</a>
	  </div>
	  <div class="niv0">
	  	<a href="Contact.html"> <i class="fas fa-envelope"></i>  CONTACT</a>
	  </div>
  </div>
</nav>

Afin d'arranger ce problème j'ai donc modifié :

.niv .niv0 a{
	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
	height:46px; /* Modifie la hauteur */
	padding:0px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}

 en

.niv .niv0 a{
	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
	height:46px; /* Modifie la hauteur */
	padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}

Mais du coup j'ai un décalage sur mes sous menu qui ne sont plus collés à mon menu... avez vous une idée ?

• Mon deuxième problème concerne l'animation de mes icones. J'utilise Font Awesome et j'ai testé le code suivant :

<a href="Saison4.html"> <i class="fas fa-trophy"></i>  ADL S4 <i class="fas fa-angle-down faa-wrench animated-hover faa-fast" aria-hidden="true" " style="font-size:15px;"></i> </a>

Pour cela j'ai également rajouté les liens suivants dans mon <head> :

<link rel="stylesheet" href="font-awesome-animation.min.css">
        <link rel="stylesheet" href="css/font-awesome-animation.css">

Mais aucune animation à l'horizon... x) Si jamais quelqu'un s'y connait, je suis preneur ! Je fais pas mal de recherche sur le net, mais encore une fois je suis un total débutant !

Merci à vous !

Bonjour,

Pour ton problème de marge dans le menu remplace cette partie de code :

.niv .niv0 a{
    display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
    height:40px; /* Modifie la hauteur */
    padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}

Pour ton animation tu veut que t'es icons de font awesome fasse quoi ? si tu veut qu'il change de couleur au survole de la sourie comme le texte, sans rien modifier chez moi ça fonctionne

Re,

Pour l'animation j'ai réussi à m'en sortir avec mes recherches (je fais qu ça ahah), je suis partie sur une utilisation de la fonction "rotate", ça me plait pas mal comme ça !

J'ai essayé de modifier comme tu me l'as demandé et ça marche parfaitement ! merci !

Je reviendrai probablement vers vous rapidement pour des conseils !