[Résolu] Input avec before et after inactif au click (focus )

Bonjour à tous,

sur la homepage de ce site, en bas de page , j'ai un input pour s'inscrire à une newsletter et qui ne fonctionne pas à cause de la jolie animation au :hover que j'ai fait dessus.
J'ai fait la même chose sur les buttons ça fonctionne très bien mais là, nada ! rien, il ne se passes absolument rien.
J'ai réalisé moult tests pour trouver d'où cela pouvait venir et quand on retire momentanément la position: relative; appliquée pour faire le style au :hover , là ça fonctionne seulement je ne vois pas comment faire l'animation du input sans cela... ni comment contourner le problème.
Quelqu'un aurait-il une idée s'y ou plait ?
P.S : je sais que le code est un gros fourre-tout et que d'aucun l'ont fait remarqué un millier de fois mais je n'y peut rien : mon entreprise travaille avec un CMS , un composant CCK et un framework de templates... la soupe populaire quoi... mais bon...
Merci d'avance

Salut

Es-tu dans la possibilité d'utilisé du jquery ?

oui il est chargé et utilisé sur ce site

En faite, le clic est "absorbé" par le <p class="acysubbuttons">
du coup soit changer le HTML directement (en css tu peux rien faire en tout cas pas à ma connaissance) soit "capté" le click sur le <p> et le transférer sur l'input enfant. ce qui est facile en jquery.

THX je teste et je dis si ça fonctionne.

@jencal merciiiiiiiiiiiiiiiiiiiiiiiiiiii grand génie ! ça fonctionne impeccable.