/* le rollover de la petite maison */
#retour a:hover img { position: relative;  left: -10px; }
#retour span { display: inline-block;  width: 10px;  overflow: hidden;  margin-right: 3px; }


/* le rollover sur l'affiche */
/* #film est la div qui contient l'image et le texte : 
  une sorte de bouton clicable */
#film { width: 179px;  font-size: 24px;  font-weight: 100;  border: 1px solid black;
        text-align: center;  border-radius: 4px;
      }
/* on affiche le lien en inline-block pour pouvoir redimensionner 
   et faire en sorte que tout le paragraphe soit couvert */
#film a { display: inline-block;  width: 139px;  padding: 20px 20px 35px 20px;
          /*border: 1px solid red;*/
        }
/* dedans on a une autre div qui possède les class enveloppe et masque 
  voir plus bas le rôle de ces class */
/* au survol du lien le bord droit de l'image se décale de 139px pour révéler la 2e moitié */
#film a:hover img { position: relative;  right: 139px; }


/* Pour le détail */
/* la boite juste de la taille de la moitié de l'image du rollover */
.enveloppe { width: 139px;  border: 3px solid black; }

/* on cache la bordure dans l'exemple finit qui est en haut de la page */
#film .enveloppe { border: none; }

/* on cache ce qui depasse */
.masque { overflow: hidden; }

/* supprime le mini espace entre l'image et le cadre qui l'entoure */
.enveloppe img { vertical-align: bottom;  position: relative; }
.enveloppe img:hover { left: -139px; }