/* PAGE ACTUALITES */

.imageFondActu {
  background-image: url("../images/fondParticules.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.entete {
  height: 3.5em;
  display: block;
  margin: 2em;
  margin-left: 4.2em;
}
.row1 h2 {
  display: inline-block;
  vertical-align: top;
  margin-left: 2.2em;
  font-size: 1.5em;
  font-weight: normal;
  color: #999999;
}
.contenuActu {
  position: relative;
  padding: 2em;
  display: inline-block;
  width: 60%;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 25px;
  border: 3px solid #dddddd;
  color: #282828;
}
.rond1 {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 32px;
  height: 32px;
  border: 4px solid white;
  border-radius: 50%;
  background-color: #808080;
}
.legende {
  position: relative;
}
.titre {
  z-index: 2;
}
.titre {
  position: absolute;
  top: 2em;
  right: 24em;
  background-color: white;
  z-index: 5;
  padding: 0.5em;
  padding-top: 0;
}
.rond3 {
  position: absolute;
  top: 2em;
  right: 34em;
  width: 50px;
  height: 50px;
  border: 4px solid #c5000b;
  border-radius: 50%;
  background-color: white;
  margin-bottom: 2em;
  z-index: 3;
}
.titre h2 {
  font-size: 1.5em;
  font-weight: normal;
  color: #c5000b;
  margin-top: 0.4em;
}
.rond4 {
  position: absolute;
  top: 2em;
  right: 17.4em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: rgba(224, 0, 0, 0.5);
  z-index: 5;
}
.rond4bis {
  position: absolute;
  top: 2em;
  right: 17.4em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: white;
  z-index: 3;
}
.ensembleAgenda {
  position: absolute;
  top: 3.5em;
  right: 14em;
  width: 21em;
  padding-left: 16em;
  border-top: 2px solid #c5000b;
  z-index: 2;
}
.imgAgenda {
  margin-top: -3em;
  width: 5em;
  z-index: 4;
  background-color: white;
  position: absolute;
  top: 3.5em;
  right: 14em;
}
.rond2 {
  position: absolute;
  bottom: 0;
  right: 7em;
  width: 50px;
  height: 50px;
  border: 4px solid #dddddd;
  border-radius: 50%;
  background-color: white;
  margin-bottom: 1.8em;
  z-index: -1;
}
.retour {
  position: absolute;
  bottom: 0;
  right: 7.7em;
  margin-bottom: 2.4em;
}
.retour a {
  color: #999999;
  font-size: 1.1em;
  text-decoration: none;
}

/* =============================================================================
   Agenda
   ========================================================================== */

* {
  box-sizing: border-box;
}
/* Fixe la couleur de fond */
.agenda {
  //background-color: white;
  min-height: 400px;
  width: 70%;
  margin-left: 8%;
  margin-right: 27%;
}
/* La "timelime" (ligne verticale) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  padding-top: 2em;
  padding-bottom: 2em;
}
/*  La "timelime" (ligne verticale) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #474e5d;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Conteneur autour de "content" */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
/* Les cercles sur la timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #474e5d;
  border: 4px solid #dddddd;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Place le conteneur à gauche */
.left {
  left: 0;
  text-align: right;
}
/* Place le conteneur à droite */
.right {
  left: 50%;
  text-align: left;
}
/* Flèches qui pointent vers la droite */
/*
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #474e5d;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #474e5d;
}
*/
/* Flèches qui pointent vers la droite */
/*
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #474e5d;
  border-width: 10px 10px 10px 0;
  border-color: transparent #474e5d transparent transparent;
}
*/
/* Fixe les flèches pour les conteneurs du côté droit */
.right::after {
  left: -16px;
}
/* Le contenu */
.content1 {
  padding: 20px 30px;
  //background-image: linear-gradient(to right, #ff0000 0, #861141 100%);
  position: relative;
  border-radius: 50px 6px 50px 50px;
  color: #282828;
  border: 12px solid #861141;
  transform: rotate(7deg);
}
.content2 {
  padding: 20px 30px;
  //background-image: linear-gradient(to left, #00a933 0, #158466 50%);
  position: relative;
  border-radius: 6px 50px 50px 50px;
  color: #282828;
  border: 12px solid #158466;
  transform: rotate(-7deg);
}
.content3 {
  padding: 20px 30px;
  //background-image: linear-gradient(to right, #729fcf 0, #3465a4 100%);
  position: relative;
  border-radius: 50px 6px 50px 50px;
  color: #282828;
  border: 12px solid #3465a4;
  transform: rotate(7deg);
}
.content4 {
  padding: 20px 30px;
  //background-image: linear-gradient(to left, #c71585 0, #8b008b 50%);
  position: relative;
  border-radius: 6px 50px 50px 50px;
  color: #282828;
  border: 12px solid #8b008b;
  transform: rotate(-7deg);
}
.right .content {
  box-shadow: 5px 5px #dddddd;
}
.left .content {
  box-shadow: -5px 5px #dddddd;
}

/* Media queries -Ttimeline responsive sur les écrans plus petits que 600px */
@media screen and (max-width: 600px) {

/* Place la timelime à gauche */
  .timeline::after {
    left: 31px;
  }
/* Conteneurs pleine largeur */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
/* Fais en sorte que les flèches pointent vers la gauche */
  .container::before {
    left: 60px;
    border: medium solid #1b83f2;
    border-width: 10px 10px 10px 0;
    border-color: transparent #1b83f2 transparent transparent;
  }
/* Fait en sorte que les cercles soient tous à la même place */
  .left::after, .right::after {
    left: 15px;
  }
/* Fais en sorte que tous les conteneurs de droite se comportent comme ceux de gauche */
  .right {
    left: 0%;
  }
/* Fait disparaitre les éléments superflus */
  .rond4, .rond4bis, .imgAgenda, .titre, .ensembleAgenda, .rond1, .rond2 {
    display: none;
  }

}