html
{
  scroll-behavior: smooth;
}
.fancybox-overlay
{
  position:absolute;
  top:0;
  left:0;
  z-index:1000 !important;
}

.zonePage2019,
#zonePageDecorAvant
{
  min-height:750px;
  background-repeat:no-repeat;
  background-position:bottom;
  background-attachment:scroll;
  background-color:transparent;
}
.zonePage2019
{
  position:relative;
  background-image:url(images/fond_nature2019_arriere.png);
  background-size:100% auto; 
}
#zonePageDecorAvant
{
  display:block;
  width:100%;
  height:100%;
  background-color:transparent;
  background-image:url(images/fond_nature2019_avant.png);
  background-size:100% auto;
  position:absolute;
  top:0;
  left:0;
  z-index:600;
}

.zonePageDetail
{
  background-color:white;
  color:black;
}
.zonePageDetail .contenuZone
{
  color:black;
  font-size:110%;
}

.clearLeft
{
  display:block;
  clear:left;
}
.clearRight
{
  display:block;
  clear:right;
}

/* Contenus */

.contenuZone
{
  padding-top:1em;
}
div.colunique
{
  text-align:left;  
}
h1.titre
{
  width:100%;
  margin:0 auto 1.5em auto;
  font-size:300%;
  color:#d70b52;
}
h2.soustitre
{
  color:#e84e1c;
  font-weight:bold;
  margin-top:1em;
  font-size:105%;
  font-family:Frutiger;
}
h2.soustitre
{
  color:#4695d4 !important;
}

h3.titreZone
{
  font-weight:bold;
  text-align:left;
  margin-bottom:0.5em;
}

h1.titreAction,
label.titreSoutien,
form#soutien_depot p.entete input
{
  font-weight: bold;
  font-family: 'Nexa';
}
h1.titreAction,
label.titreSoutien
{
  display:block;
  width:100%;
  margin:0 auto;
  text-align:center;
  font-size:220%;
}
label.titreSoutien
{
  font-size:280%;
}
h1.titreAction span
{
  position:fixed;
  bottom:0;
  left:0;
  width:200px;
  height:200px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:bottom left;
}

/* Boite message d'erreur */
div#boiteMessage
{
  display:block;
  background-color:white;
  border:2px solid red;
  border-radius:0.5em;
  padding:15px 25px;
  z-index:55;
}
div#boiteMessage div h6
{
  font-size:18px;
  font-weight:bold;
  text-align:center;
  color:red;
  font-size:120%;
  margin:0 0 0.5em 0;
}
div#boiteMessage div p
{
  font-size:90%;
  font-weight:normal;
  color:red;
  margin:0 0 0.5em 0;
}
div#boiteMessage div span.url
{
  display:block;
  font-size:90%;
  font-style:italic;
  color:grey;
  max-height:150px;
  overflow:auto;
  text-align:left;
}

/* Bulle coin haut gauche */

#bulleDate6PST
{
  position:relative;
  width:250px;
  height:250px;
  background-color:#28b5bc;
  border-radius:250px;
  z-index:700;
  margin:-2em auto 2em auto;  
}
#bulleDate6PST p
{
  padding:3em 0 1em 1.5em;
  font-size:130%;
  color:white;
  font-family:Nexa;
  font-weight:bold;
  text-align:left;
  line-height:1.2em;
}
#bulleDate6PST p span
{
  color:#fcea0e;
  font-size:90%;
}
#bulleDate6PST a
{
  display:block;
  width:40%;
  background-color:#fcea0e;
  color:black;
  font-size:100%;
  text-decoration:none;
  padding:0 0.5em;
  border-radius:1em;
  margin:0 auto;

  animation-name: shake-rotate;
  animation-duration:5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state: paused;
}
#bulleDate6PST a:hover
{
  animation-play-state: running;
}

#bulleAgir
{
  position:absolute;
  top:22em;
  right:5%;
  width:200px;
  margin:0 auto 2em auto;  
}
#bulleAgir a
{
  position:relative;
  display:block;
  z-index:700;  
  line-height:1.5em;
  background-color:#f29200;
  color:white;
  border-radius:1em;
  font-family:Nexa;
  font-size:200%;
  font-weight:bold;
  text-decoration:none;
}
#bulleAgir a:hover span
{
  display:block;
}
#bulleAgir a span
{
  display:none;
  position:absolute;
  top:4em;
  width:200px;
  height:200px;
  background:transparent url(images/icone_flechebas_cc-by-3-hardtask_200px.png) no-repeat center center;
  
  animation-name: shake-vertical;
  animation-duration:10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state: running;
}

/* Militante - Panneau objectif */

#illus-panneauObjectif
{
  position:relative;
  width:323px;
  height:350px;
}
#illus-panneauObjectif img
{
  position:absolute;
  top:0;
  left:0;
}
#illus-panneauObjectif span
{
  display:block;
  color:white;
  position:absolute;
  top:70px;
  left:43px;
  width:145px;
  height:100px;
  transform: rotate(-9.5deg);
  font-size:130%;
}
#illus-panneauObjectif span strong
{
  display:block;
  font-size:180%;
  font-weight:bold;
}
#illus-panneauObjectif span em
{
  display:block;
  font-size:75%;
}

/* Animation du tandem */

div#animationVelo
{
  display:none;
  width:100%;
  height:100%;
}
div#animationVelo div#barreTandem
{
  position:absolute;
  bottom:10%; left:8%;  
  transform: rotate(-9.5deg);
  
  animation-name: shake-slow;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:1;
  animation-play-state: running;
}

/* Compteur de soutiens */

div#compteurSoutiens
{
  position:absolute;
  bottom:0;
  width:100%;
  z-index:700;
  color:white;
  font-size:190%;
  background-color:#009f9a;
  padding:0.5em 0;  
}
div#compteurSoutiens strong
{
  background-color:white;
  color:#009f9a;
  padding:0 0.2em;
  font-size:180%;   
}
div#compteurSoutiens div.fleche
{
  display:none;
}

.bulleSoutien
{
  position:absolute;
  bottom:0em;
  display:inline-block;
  width:auto;
  line-height:2em;
  background-color:#009f9a;
  color:white;
  font-weight:bold;
  padding:0 0.5em;
  border-radius:1em;
  
  transform: translateY(-70em);
  animation: chuteBulleInfo 15s 1 linear;
  z-index:500; 
}

.zonePageDetail .contenuZone
{}
.zonePageDetail .contenuZone h3
{
  clear:left;
  font-size:140%;
  text-align:left;
  margin-bottom:1em;
}
.zonePageDetail .contenuZone p
{
  text-align:justify;
  margin-bottom:1em;
  font-size:110%;
}

ul#listeActions
{
  list-style-type:none;
  margin:4.5em 0 0 0; 
}
ul#listeActions li
{
  margin-bottom:3em;
}
ul#listeActions li a
{
  position:relative;
  display:block;
  min-height:4.8em;
  border:2px solid blue;
  padding:0.5em 1em 0.5em 150px;
  border-radius:1em;
  text-decoration:none;
  margin:0 0.5em 1em 0.5em; 
}
ul#listeActions li a span
{
  display:block;
  width:150px;
  height:150px;
  position:absolute;
  left:0;
  bottom:0;  
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:0.2em bottom;
}
ul#listeActions li a:hover
{
  border-width:3px;
  margin-top:-2px; 
}

.ligne3
{
  margin-bottom:10em !important;
}

/* Formulaires */
h3#question
{
  margin-top:1em;
}
form#soutien_depot
{

}
form#soutien_depot p
{
  margin:0 0 0 0;
}
form#soutien_depot p input,
form#soutien_depot p textarea,
form#soutien_depot p select
{ 
  border:1px solid #CCCCCC;
  padding:6px 8px 5px 6px;
  margin-right:5px;
  margin-bottom:15px;
  color:#222222;
  font-size:14px;
  line-height:18px;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
  white-space: pre-wrap;
  word-wrap: break-word; 
}
form#soutien_depot p input:focus,
form#soutien_depot p textarea:focus
{
  border-color:#56B4EF;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
form#soutien_depot p textarea
{
  display:block;
  width:100%;
  height:80px;
  font-family: Frutiger,sans-serif;
  margin-bottom:10px !important;
  overflow-x:hidden;
  overflow-y:auto;
  resize:vertical;
}
form#soutien_depot p select
{
	padding:0 0 0 6px;	
}
form#soutien_depot p select option
{
	padding:5px 10px;	
}

form#soutien_depot p.entete
{
  text-align:center;
}
form#soutien_depot p.entete select,
form#soutien_depot p.entete input
{
  font-size:120%;
}
form#soutien_depot p.entete input
{
  width:60%;
}
form#soutien_depot input#soutien_courriel
{
  width:100%;
}
form#soutien_depot input#soutien_enregistrer
{
  display:block;
  width:80%;
  margin:1em auto;
  font-weight: bold;
  font-family: 'Nexa';
  font-size:120%;
  border:2px solid black;
}

/* Bouton */
a.bouton
{
  display:block;
  width:40%;
  margin:1em auto;
  padding:0.4em 0.5em;
  font-weight: bold;
  font-family: 'Nexa';
  font-size:120%;
  color:white;
  border-radius:1em;
  border:2px solid black;
  text-align:center;
  text-decoration:none;
}
a.bouton span
{
  display:inline-block;
  animation-name:fleche-droite;
  animation-duration:2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state: paused;  
}
a.bouton:hover span
{
  animation-play-state: running;  
}

ul#optionsPartage
{
  list-style-type:square;
  text-align:left;
}
ul#optionsPartage li
{
  margin-bottom:0.5em;
}
ul#optionsPartage li textarea
{
  display:block;
  width:100%;
  height:5em;
  font-family: Frutiger,sans-serif;
  margin-bottom:10px !important;
  padding:0.5em;
  border-radius:1em;
  border:1px solid black;
  overflow-x:hidden;
  overflow-y:auto;
  resize:vertical;
  color:grey;
  font-size:105%;
}
ul#optionsPartage li textarea:focus
{
  border-color:#56B4EF;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

/* Tableau des soutiens */
h3#liste
{
  margin-bottom:0.5em !important;
}
div#zoneSoutiens
{
  height:27em;
  overflow-y:scroll;
  border-bottom:1px solid #e5e5e5;    
}
table#soutiens
{
  width:100%;
  border-collapse:collapse;
}
table#soutiens tr td
{
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;  
}
table#soutiens tr td.action
{
  padding:1em 0;
  font-weight:bold;
  padding-left:1em;
}
table#soutiens tr td.action p.message
{
  font-style:italic;
  font-weight:normal;
  font-size:95%;
  color:grey;
  padding:0.2em 1em 0 0;
  margin:0 !important;
}
table#soutiens tr td.date
{
  color:grey;
  text-align:right;
  font-size:80%;
  padding-right:1em;
}

/* Nous écrire */
form#messageSheds
{
}
form#messageSheds .label
{
    width:50%;
    float:left;
    text-align:right;
    margin-right:5px;
    line-height:26px;
}
form#messageSheds input,
form#messageSheds textarea
{
    display: block;
    width:40%;
    border:2px solid #d6d3ce;
    border-radius: 3px;
    padding:5px;
    vertical-align: middle;
    margin-bottom:10px;
    font-family:Frutiger;
    color:#009f9a;
}
form#messageSheds textarea
{
    width:100% !important;
    min-width:55%;
    height:120px;
}
form#messageSheds input:focus,
form#messageSheds textarea:focus 
{
    border-color:#009f9a;
}

form#messageSheds input#messageEnvoyer
{
  width:35%;
  min-width:120px;
  margin-left:41%;
  font-family: "Nexa";
  font-weight: normal;
  font-size: 110%;
}
form#messageSheds input#messageEnvoyer:hover
{
  background-color:#009f9a;
  color:white;
}

div.messageConfirmation
{
  text-align:center;  
}
div.messageConfirmation .icone
{
  display:block;
  width:60px;
  height:60px;
  margin:0 auto 0 auto;
  background:transparent url(../images/icone-ok.png) no-repeat left center; 
}
div.messageConfirmation h5
{
  font-family:Nexa;
  font-size:140%;
  font-weight:normal;
  margin:0.8em 0 0.5em 0;
}
div.messageConfirmation p
{
  font-size:105%;
}

p.messageErreur
{
  color:#e5322b;
  margin-bottom:0.8em;
}


/* Liste des commentaires */
ul#listeCommentaires
{
  list-style-type:none;
  margin:2em 0 0 0; 
}
ul#listeCommentaires li
{
  margin-bottom:1em;
  border-bottom:1px solid #e5e5e5;
}
ul#listeCommentaires li p.message
{
  font-style:italic;
  font-weight:normal;
  font-size:100%;
  padding:0 0 0.2em 0 0;
  margin:0 !important;
}
ul#listeCommentaires li p.auteur
{
  font-weight:normal;
  text-align:left;
  font-size:90%;
  color:grey;
  padding:0 0 0.5em 0;
  margin:0 !important;
}

/* Crédits */

.ligne5 p.mentionsLegales
{
  text-align:center !important;
  font-size:70% !important;
}

/* Responsive */

@media only screen and (min-width: 600px) {
  /* For tablets: */
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  h1.titre
  {
    width:60%;
    font-size:400%;
  }
  .contenuZone
  {
    padding-bottom:6em;
  }
  #bulleDate6PST
  {
    position:absolute;
    top:-3em;
    left:-1em;
    margin:0; 
  }
  #bulleAgir
  {
    position:absolute;
    top:22em;
    right:30%;
    margin:0; 
  }
  #illus-panneauObjectif
  {
    position:absolute;
    bottom:30%;
    right:2%;
  }
  div#animationVelo
  {
    display:block;
    position:absolute;
    bottom:0;
  }
  div#compteurSoutiens
  {
    position:absolute;
    bottom:20%;
    left:2%;
    width:auto;
  }
  
  div#compteurSoutiens div.fleche
  {
    display:block;
    position:absolute;
    top:3em;
    left:4em;
    width:150px;
    height:150px;
    background:transparent url(images//icone_flechecrayon_cc-by-3-hardtask_150px.png) no-repeat center center;
    
    animation-name: shake-vertical;
    animation-duration:10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    animation-play-state: running;
  }
  
  ul#listeActions li
  {
    float:left;
    width:33%;
    margin-bottom:3em;
  }
  
  div#zoneSoutiens
  {
    margin-right:2em;
  }

  h3#question
  {
    margin-top:0;
  }
  form#soutien_depot p.entete input
  {
    width:30%;
  }
  form#soutien_depot input#soutien_courriel
  {
    width:70%;
  }
  form#soutien_depot input#soutien_enregistrer
  {
    width:40%;
  }
}


/* Keyframes des animations */

@keyframes fleche-droite {
  0% {
    transform: translate(0, 0); } 
  25% {
    transform: translate(0.3em, 0); }
  50% {
    transform: translate(0.5em, 0); }
  75% {
    transform: translate(0.1em, 0); }
  100% {
    transform: translate(0, 0); } 
}

@keyframes shake-slow {
  0% {
    transform: translate(0, 0) rotate(-9.5deg);
    bottom:-8em; left:-20em; 
  }  
  10% {
    transform: translate(-3px, 1px) rotate(-9.5deg); }
  25% {
    transform: translate(3px, -1px) rotate(-9.0deg); }
  50% {
    transform: translate(-3px, 1px) rotate(-9.5deg); }
  75% {
    transform: translate(3px, -1px) rotate(-10.0deg); }
  90% {
    transform: translate(-3px, -1px) rotate(-9.5deg); }
  100% {
    transform: translate(0, 0) rotate(-9.5deg);
    bottom:10%; left:8%;
  } 
}

@keyframes shake-vertical {
  2% {
    transform: translate(0, -3px) rotate(0); }
  4% {
    transform: translate(0, -9px) rotate(0); }
  6% {
    transform: translate(0, 1px) rotate(0); }
  8% {
    transform: translate(0, -5px) rotate(0); }
  10% {
    transform: translate(0, 1px) rotate(0); }
  12% {
    transform: translate(0, -1px) rotate(0); }
  14% {
    transform: translate(0, -6px) rotate(0); }
  16% {
    transform: translate(0, 0px) rotate(0); }
  18% {
    transform: translate(0, 0px) rotate(0); }
  20% {
    transform: translate(0, 2px) rotate(0); }
  22% {
    transform: translate(0, 10px) rotate(0); }
  24% {
    transform: translate(0, 5px) rotate(0); }
  26% {
    transform: translate(0, 3px) rotate(0); }
  28% {
    transform: translate(0, 3px) rotate(0); }
  30% {
    transform: translate(0, 5px) rotate(0); }
  32% {
    transform: translate(0, 5px) rotate(0); }
  34% {
    transform: translate(0, -6px) rotate(0); }
  36% {
    transform: translate(0, 6px) rotate(0); }
  38% {
    transform: translate(0, -9px) rotate(0); }
  40% {
    transform: translate(0, 6px) rotate(0); }
  42% {
    transform: translate(0, 3px) rotate(0); }
  44% {
    transform: translate(0, 3px) rotate(0); }
  46% {
    transform: translate(0, 6px) rotate(0); }
  48% {
    transform: translate(0, -9px) rotate(0); }
  50% {
    transform: translate(0, 7px) rotate(0); }
  52% {
    transform: translate(0, 9px) rotate(0); }
  54% {
    transform: translate(0, 3px) rotate(0); }
  56% {
    transform: translate(0, -1px) rotate(0); }
  58% {
    transform: translate(0, -2px) rotate(0); }
  60% {
    transform: translate(0, -6px) rotate(0); }
  62% {
    transform: translate(0, -5px) rotate(0); }
  64% {
    transform: translate(0, 4px) rotate(0); }
  66% {
    transform: translate(0, -4px) rotate(0); }
  68% {
    transform: translate(0, -2px) rotate(0); }
  70% {
    transform: translate(0, -8px) rotate(0); }
  72% {
    transform: translate(0, -6px) rotate(0); }
  74% {
    transform: translate(0, -4px) rotate(0); }
  76% {
    transform: translate(0, 0px) rotate(0); }
  78% {
    transform: translate(0, 7px) rotate(0); }
  80% {
    transform: translate(0, -6px) rotate(0); }
  82% {
    transform: translate(0, 10px) rotate(0); }
  84% {
    transform: translate(0, -4px) rotate(0); }
  86% {
    transform: translate(0, 10px) rotate(0); }
  88% {
    transform: translate(0, -1px) rotate(0); }
  90% {
    transform: translate(0, 1px) rotate(0); }
  92% {
    transform: translate(0, 9px) rotate(0); }
  94% {
    transform: translate(0, -4px) rotate(0); }
  96% {
    transform: translate(0, -8px) rotate(0); }
  98% {
    transform: translate(0, 4px) rotate(0); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }
    
@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(-2.5deg); }
  4% {
    transform: translate(0, 0) rotate(-1.5deg); }
  6% {
    transform: translate(0, 0) rotate(4.5deg); }
  8% {
    transform: translate(0, 0) rotate(-2.5deg); }
  10% {
    transform: translate(0, 0) rotate(3.5deg); }
  12% {
    transform: translate(0, 0) rotate(7.5deg); }
  14% {
    transform: translate(0, 0) rotate(4.5deg); }
  16% {
    transform: translate(0, 0) rotate(4.5deg); }
  18% {
    transform: translate(0, 0) rotate(2.5deg); }
  20% {
    transform: translate(0, 0) rotate(-5.5deg); }
  22% {
    transform: translate(0, 0) rotate(0.5deg); }
  24% {
    transform: translate(0, 0) rotate(2.5deg); }
  26% {
    transform: translate(0, 0) rotate(-2.5deg); }
  28% {
    transform: translate(0, 0) rotate(-4.5deg); }
  30% {
    transform: translate(0, 0) rotate(3.5deg); }
  32% {
    transform: translate(0, 0) rotate(-2.5deg); }
  34% {
    transform: translate(0, 0) rotate(-5.5deg); }
  36% {
    transform: translate(0, 0) rotate(2.5deg); }
  38% {
    transform: translate(0, 0) rotate(-2.5deg); }
  40% {
    transform: translate(0, 0) rotate(2.5deg); }
  42% {
    transform: translate(0, 0) rotate(5.5deg); }
  44% {
    transform: translate(0, 0) rotate(6.5deg); }
  46% {
    transform: translate(0, 0) rotate(-4.5deg); }
  48% {
    transform: translate(0, 0) rotate(-0.5deg); }
  50% {
    transform: translate(0, 0) rotate(3.5deg); }
  52% {
    transform: translate(0, 0) rotate(1.5deg); }
  54% {
    transform: translate(0, 0) rotate(-1.5deg); }
  56% {
    transform: translate(0, 0) rotate(-4.5deg); }
  58% {
    transform: translate(0, 0) rotate(-0.5deg); }
  60% {
    transform: translate(0, 0) rotate(-5.5deg); }
  62% {
    transform: translate(0, 0) rotate(-0.5deg); }
  64% {
    transform: translate(0, 0) rotate(6.5deg); }
  66% {
    transform: translate(0, 0) rotate(6.5deg); }
  68% {
    transform: translate(0, 0) rotate(-2.5deg); }
  70% {
    transform: translate(0, 0) rotate(0.5deg); }
  72% {
    transform: translate(0, 0) rotate(2.5deg); }
  74% {
    transform: translate(0, 0) rotate(6.5deg); }
  76% {
    transform: translate(0, 0) rotate(-6.5deg); }
  78% {
    transform: translate(0, 0) rotate(-1.5deg); }
  80% {
    transform: translate(0, 0) rotate(2.5deg); }
  82% {
    transform: translate(0, 0) rotate(-1.5deg); }
  84% {
    transform: translate(0, 0) rotate(-5.5deg); }
  86% {
    transform: translate(0, 0) rotate(-5.5deg); }
  88% {
    transform: translate(0, 0) rotate(-5.5deg); }
  90% {
    transform: translate(0, 0) rotate(-1.5deg); }
  92% {
    transform: translate(0, 0) rotate(-5.5deg); }
  94% {
    transform: translate(0, 0) rotate(4.5deg); }
  96% {
    transform: translate(0, 0) rotate(5.5deg); }
  98% {
    transform: translate(0, 0) rotate(4.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } 
}
    
@keyframes chuteBulleInfo 
{
  0% {
    transform: translate(-40px, -70em);
  }
  5% {
    transform: translate(60px, -67em);
  }
  10% {
    transform: translate(-70px, -65em);
  }
  15% {
    transform: translate(20px, -62em);
  }
  20% {
    transform: translate(-50px, -60em);
  }
  25% {
    transform: translate(50px, -57em);
  }
  30% {
    transform: translate(-10px, -55em);
  }
  35% {
    transform: translate(60px, -52em);
  }
  40% {
    transform: translate(-60px, -50em);
  }
  45% {
    transform: translate(10px, -47em);
  }
  50% {
    transform: translate(-30px, -45em);
  }
  55% {
    transform: translate(40px, -42em);
  }  
  60% {
    transform: translate(-20px, -40em);
  }
  65% {
    transform: translate(20px, -35em);
  }
  70% {
    transform: translate(-30px, -30em);
  }
  75% {
    transform: translate(30px, -25em);
  }  
  80% {
    transform: translate(-60px, -20em);
  }
  85% {
    transform: translate(50px, -15em);
  }
  90% {
    transform: translate(-10px, -10em);
  }
  95% {
    transform: translate(40px, -5em);
  }      
  100% {
    transform: translate(0, 0);
  }
}