body{font-family:arial,verdana;background-color:#eff0ed}

h1{font-size:3em;font-weight:normal;color:#dcdcd7;margin:-10px 0 10px 0;letter-spacing:0.1em}

#global{display:block;position:relative;left:50%;width:600px;padding:20px 20px 30px 20px;margin-left:-321px;margin-top:20px;text-align:center;border:1px solid #888;background-color:#fff}

.global-0{	/* === voir le .html pour lire la fonction JS evolue(id) qui sollicite les class .global-0 .global-1 === */
height:550px;
overflow:hidden;
margin-bottom:220px;
-webkit-transition: all 1s ease-out;	/* === les transitions dans les class seront effectives par JS lors de l'alternance des class === */
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out}

.global-1{
height:760px;
overflow:hidden;
margin-bottom:10px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out}

.blanc{
color:#fff;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in}

.gris{
color:#555;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in}

.lien{cursor:pointer;color:royalblue;text-decoration:none}
.lien:hover{color:#c71585}
.lien:active{color:blueviolet}

.bouton-video{display:inline-block;position:relative;width:22px;height:22px;top:2px;cursor:pointer;box-shadow:3px 3px 6px #444;background-color:#6f8cd5}
.bouton-video:hover{background-color:#6fd58c}
.bouton-video:active{top:4px;cursor:pointer;box-shadow:2px 2px 3px #eee;background-color:#ff8f8c}
