Les "label" recouvrent les "input" ! [resolu]

Bonjour à tous...

Pour faire une petite animation dans un formulaire de contact, j'ai suivi un tuto sur les Input en Material Design (ici : https://www.youtube.com/watch?v=hXLDI7xr4-w&feature=youtu.be) et je rencontre un problème en essayant d'intégrer le principe dans mon site.

J'ai la bonne idée d'envoyer le formulaire en method="post" vers une page 'envoi.php qui vérifie les données saisies et retourne sur la page du formulaire en cas de problème (comme sur la non validation du Re-Captcha par exemple).
Le souci est que les données saisies par l'utilisateur sont bien présentes au retour dans tous les champs du formulaire grâce à $nom=$_SESSION['nom']; mais les label viennent recouvrir ces données comme si les input étaient vides.
Il suffit pour régler le souci de cliquer sur le champ pour que le label se place en hauteur, mais ce n'est pas très esthétique et pratique ! Je pense que le problème vient de la partie javascript mais je n'ai aucune (compétence) idée de comment tourner le code pour lui faire prendre conscience qu'au retour sur la page il y a déjà qqchose dans les champs !

Plutôt que de copier des pages et des pages de codes voici le lien vers mon problème :
https://codepen.io/Etienne69/pen/WNNLPdJ

Merci d'avance pour votre aide !