@charset "UTF-8";
.points {
  cursor: pointer; }

.points * {
  fill: #000; }

.block {
  opacity: 0; }

/*************************************************
PARTIE  4 :
Faire apparaitre les points en couleurs et leur bloc points par points
*************************************************/
.animation1 #Les_vins_de {
  animation: bloc_vins_de 1s linear 0.5s forwards; }
@keyframes bloc_vins_de {
  0% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.animation1 .points_saumur_blanc path {
  animation: couleur22 0.5s linear 1.5s 1; }
.animation1 .points_saumur_champigny path {
  animation: couleur23 0.5s linear 2s 1; }
.animation1 .points_coteaux_saumur path {
  animation: couleur24 0.5s linear 2.5s 1; }
.animation1 .points_saumur_rouge path {
  animation: couleur25 0.5s linear 3s 1; }
.animation1 .points_saumur_brut path {
  animation: couleur26 0.5s linear 3.5s 1; }
.animation1 .points_saumur_rose path {
  animation: couleur27 0.5s linear 4s 1; }
.animation1 .points_saumur_puy_notre_dame path {
  animation: couleur28 0.5s linear 4.5s 1; }
@keyframes couleur22 {
  0% {
    fill: #FFED99; }
  90% {
    fill: #FFED99; }
  100% {
    fill: #000; } }
@keyframes couleur23 {
  0% {
    fill: #9C193A; }
  90% {
    fill: #9C193A; }
  100% {
    fill: #000; } }
@keyframes couleur24 {
  0% {
    fill: #FFE271; }
  90% {
    fill: #FFE271; }
  100% {
    fill: #000; } }
@keyframes couleur25 {
  0% {
    fill: #CE143D; }
  90% {
    fill: #CE143D; }
  100% {
    fill: #000; } }
@keyframes couleur26 {
  0% {
    fill: #F2E8C2; }
  90% {
    fill: #F2E8C2; }
  100% {
    fill: #000; } }
@keyframes couleur27 {
  0% {
    fill: #F08590; }
  90% {
    fill: #F08590; }
  100% {
    fill: #000; } }
@keyframes couleur28 {
  0% {
    fill: #731A13; }
  90% {
    fill: #731A13; }
  100% {
    fill: #000; } }
.animation1 .block_saumur_blanc {
  animation: affiche_bloc 0.5s linear 1.5s 1; }
.animation1 .block_saumur_champigny {
  animation: affiche_bloc 0.5s linear 2s 1; }
.animation1 .block_coteaux_saumur {
  animation: affiche_bloc 0.5s linear 2.5s 1; }
.animation1 .block_saumur_rouge {
  animation: affiche_bloc 0.5s linear 3s 1; }
.animation1 .block_saumur_brut {
  animation: affiche_bloc 0.5s linear 3.5s 1; }
.animation1 .block_saumur_rose {
  animation: affiche_bloc 0.5s linear 4s 1; }
.animation1 .block_saumur_puy_notre_dame {
  animation: affiche_bloc 0.5s linear 4.5s 1; }
@keyframes affiche_bloc {
  0% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/*************************************************
PARTIE  5 :
Affficher les blocs de texte de tous les points puis les faire disparaitre
*************************************************/
.animation2 #Les_vins_de {
  opacity: 0; }
.animation2 .block {
  animation: animation_blocs_opacity2 3s linear 0.5s 1; }
@keyframes animation_blocs_opacity2 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  50% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/*************************************************
PARTIE  1 :
Opacit├® des points - points par points
Couleurs des points - points par points
Affficher les blocs de texte de tous les points puis les faire disparaitre
*************************************************/
.animation3 .points_saumur_champigny {
  animation: opacity 0.3s linear 1s 1; }
.animation3 .points_saumur_rouge {
  animation: opacity 0.3s linear 1.2s 1; }
.animation3 .points_saumur_puy_notre_dame {
  animation: opacity 0.3s linear 1.4s 1; }
.animation3 .points_saumur_blanc {
  animation: opacity 0.3s linear 1.6s 1; }
.animation3 .points_saumur_rose {
  animation: opacity 0.3s linear 1.8s 1; }
.animation3 .points_coteaux_saumur {
  animation: opacity 0.3s linear 2s 1; }
.animation3 .points_saumur_brut {
  animation: opacity 0.3s linear 2.2s 1; }
@keyframes opacity {
  0% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1; } }
.animation3 .points_saumur_champigny path {
  animation: couleur1 0.3s linear 2.4s 1; }
.animation3 .points_saumur_rouge path {
  animation: couleur2 0.3s linear 2.6s 1; }
.animation3 .points_saumur_puy_notre_dame path {
  animation: couleur3 0.3s linear 2.8s 1; }
.animation3 .points_saumur_blanc path {
  animation: couleur4 0.3s linear 3s 1; }
.animation3 .points_saumur_rose path {
  animation: couleur5 0.3s linear 3.2s 1; }
.animation3 .points_coteaux_saumur path {
  animation: couleur6 0.3s linear 3.4s 1; }
.animation3 .points_saumur_brut path {
  animation: couleur7 0.3s linear 3.6s 1; }
@keyframes couleur1 {
  0% {
    fill: #000; }
  100% {
    fill: #9C193A; } }
@keyframes couleur2 {
  0% {
    fill: #000; }
  100% {
    fill: #CE143D; } }
@keyframes couleur3 {
  0% {
    fill: #000; }
  100% {
    fill: #731A13; } }
@keyframes couleur4 {
  0% {
    fill: #000; }
  100% {
    fill: #FFED99; } }
@keyframes couleur5 {
  0% {
    fill: #000; }
  100% {
    fill: #F08590; } }
@keyframes couleur6 {
  0% {
    fill: #000; }
  100% {
    fill: #FFE271; } }
@keyframes couleur7 {
  0% {
    fill: #000; }
  100% {
    fill: #F2E8C2; } }
/*************************************************
PARTIE  2 :
Disparaitre tous les points en même temps
Faire apparaitre tous les points avec leurs couleurs en même temps puis les faire disparaitre
*************************************************/
.animation4 .points {
  animation: animation_points_opacity 2s linear 0s 1; }
@keyframes animation_points_opacity {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.animation4 .points_saumur_champigny path {
  animation: couleur8 1s linear 2s 1; }
.animation4 .points_saumur_rouge path {
  animation: couleur9 1s linear 2s 1; }
.animation4 .points_saumur_puy_notre_dame path {
  animation: couleur10 1s linear 2s 1; }
.animation4 .points_saumur_blanc path {
  animation: couleur11 1s linear 2s 1; }
.animation4 .points_saumur_rose path {
  animation: couleur12 1s linear 2s 1; }
.animation4 .points_coteaux_saumur path {
  animation: couleur13 1s linear 2s 1; }
.animation4 .points_saumur_brut path {
  animation: couleur14 1s linear 2s 1; }
@keyframes couleur8 {
  0% {
    opacity: 1;
    fill: #9C193A; }
  99% {
    fill: #9C193A;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur9 {
  0% {
    opacity: 1;
    fill: #CE143D; }
  99% {
    fill: #CE143D;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur10 {
  0% {
    opacity: 1;
    fill: #731A13; }
  99% {
    fill: #731A13;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur11 {
  0% {
    opacity: 1;
    fill: #FFED99; }
  99% {
    fill: #FFED99;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur12 {
  0% {
    opacity: 1;
    fill: #F08590; }
  99% {
    fill: #F08590;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur13 {
  0% {
    opacity: 1;
    fill: #FFE271; }
  99% {
    fill: #FFE271;
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes couleur14 {
  0% {
    opacity: 1;
    fill: #F2E8C2; }
  99% {
    fill: #F2E8C2;
    opacity: 1; }
  100% {
    opacity: 0; } }
/*************************************************
PARTIE  3 :
Faire apparaitre les points en couleurs points par points
*************************************************/
.animation5 .points path {
  fill: #fff; }
.animation5 .points_saumur_champigny path {
  animation: couleur15 1s linear 0.5s 1 forwards; }
.animation5 .points_saumur_blanc path {
  animation: couleur16 1s linear 1.5s 1 forwards; }
.animation5 .points_saumur_puy_notre_dame path {
  animation: couleur17 1s linear 2.5s 1 forwards; }
.animation5 .points_saumur_rouge path {
  animation: couleur18 1s linear 3.5s 1 forwards; }
.animation5 .points_saumur_rose path {
  animation: couleur19 1s linear 4.5s 1 forwards; }
.animation5 .points_coteaux_saumur path {
  animation: couleur20 1s linear 5.5s 1 forwards; }
.animation5 .points_saumur_brut path {
  animation: couleur21 1s linear 6.5s 1 forwards; }
@keyframes couleur15 {
  0% {
    fill: #9C193A; }
  90% {
    fill: #9C193A; }
  100% {
    fill: #000; } }
@keyframes couleur16 {
  0% {
    fill: #FFED99; }
  90% {
    fill: #FFED99; }
  100% {
    fill: #000; } }
@keyframes couleur17 {
  0% {
    fill: #731A13; }
  90% {
    fill: #731A13; }
  100% {
    fill: #000; } }
@keyframes couleur18 {
  0% {
    fill: #CE143D; }
  90% {
    fill: #CE143D; }
  100% {
    fill: #000; } }
@keyframes couleur19 {
  0% {
    fill: #F08590; }
  90% {
    fill: #F08590; }
  100% {
    fill: #000; } }
@keyframes couleur20 {
  0% {
    fill: #FFE271; }
  90% {
    fill: #FFE271; }
  100% {
    fill: #000; } }
@keyframes couleur21 {
  0% {
    fill: #F2E8C2; }
  90% {
    fill: #F2E8C2; }
  100% {
    fill: #000; } }
.animation_hover * {
  animation-play-state: paused; }

/*# sourceMappingURL=style.css.map */