/* Feuille de style additionnelle créée pour le site du TEN*/

:root {
  --ten-blue: #1989ca;
  --long-bandeau: 1300px;
  --haut-bandeau: 300px;
}

/* Styles de mise en forme pour les articles */
.tenblue {
  color: var(--ten-blue);
}

.gras {
  font-weight: bolder;
}

.lettrine {
  font-size: larger;
  font-weight: bolder;
}

/* FIN - Styles de mise en forme pour les articles */


/* Bandeau d'affichage  des articles avec mot clé Permanent */
.permanent {
}

.permanent ul {
  float: left;
}

.permanent li {
  float: left;
}

.permanent li a {
  text-decoration: none;
}

.permanent li img {
  width: auto;
  height: auto;
  max-width: 170px;
  max-height: 170px;
  float: none;
  margin: auto;
}

.vignette {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 15px;
  padding: 10px;
  display: inline-block;
  text-align: center;
  border: 1px solid;
  box-shadow: 10px 10px 5px var(--ten-blue);
}

.vignette:hover {
  background-color: #bbe1f7;
  transform: scale(1.1);
}

/* Tooltip text */
.vignette .tooltiptext {
  visibility: hidden;
  width: 140px;
  margin-left: -70px; /* Use half of the width, to center the tooltip */
  background-color: white;
  color: black;
  text-align: center;
  font-size: smaller;
  /*font-style: italic;*/
  font-weight: bolder;
  padding: 5px 0;
  border-radius: 3px;
  border: 1px solid black;

  top: 40%;
  left: 50%;
  position: absolute;/*
  z-index: 0;*/
}

.vignette .tooltiptext a {
  color: inherit;
}

.vignette .tooltiptext a:visited {
  color: inherit;
}

.vignette .tooltiptext .click {
  color: inherit;
  font-size: smaller;
  font-style: italic;
  font-weight: lighter;
}

/* Show the tooltip text when you mouse over the tooltip container */
.vignette:hover .tooltiptext {
  visibility: visible;
}
/* FIN - Bandeau d'affichage  des articles avec mot clé Permanent */


/* Bandeau défilant pour le haut de page */
.slideshow {
  float: left;
  overflow: hidden;
  height: var(--haut-bandeau);
  width: var(--long-bandeau);
  margin: 0 auto;
  z-index: -1;
  top: 0%;
  left: 0%;
  position: absolute;
}

.slide-wrapper {
  width: calc(var(--long-bandeau) * 5);
  animation: slide 30s ease infinite;
}

.slide {
  float: left;
  height: var(--haut-bandeau);
  width: var(--long-bandeau);
}

@keyframes slide {
  0%, 100% {margin-left: 0px;}
  10% {margin-left: 0px;}
  20% {margin-left: calc(var(--long-bandeau) * -1);}
  30% {margin-left: calc(var(--long-bandeau) * -1);}
  40% {margin-left: calc(var(--long-bandeau) * -2);}
  50% {margin-left: calc(var(--long-bandeau) * -2);}
  60% {margin-left: calc(var(--long-bandeau) * -3);}
  70% {margin-left: calc(var(--long-bandeau) * -3);}
  80% {margin-left: calc(var(--long-bandeau) * -4);}
  90% {margin-left: calc(var(--long-bandeau) * -4);}
}
/* FIN - Bandeau défilant pour le haut de page */

/* Animation image de fond pour le haut de page */
/* Ne permet pas bien de gérer les transitions - les images apparaissent subitement */
@keyframes slideHeader {
  0%, 100% {background-image:url("img/bandeau_TEN_1.jpg");}

  20% {background-image:url("img/bandeau_TEN_2.jpg");}

  40% {background-image:url("img/bandeau_TEN_3.jpg");}

  60% {background-image:url("img/bandeau_TEN_4.jpg");}

  80% {background-image:url("img/bandeau_TEN_5.jpg");}
}
/* FIN - Animation image de fond pour le haut de page */