@charset "UTF-8";
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* VARIABLES */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* Couleurs */
/* ----------------------------------------------------- */
/* Spécifiques au site */
/* ----------------------------------------------------- */
/* gris moyen fonce */
/* gris moyen */
/* gris clair */
/* Nuances de gris */
/* ----------------------------------------------------- */
/* Correspondances couleurs -> texte */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* FONTS */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* FONT-SIZES */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* TRANSITIONS */
/* ----------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* BOX SHADOW */
/* ---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------- */
/* BASES PADDING & MARGIN */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* BORDER RADIUS */
/* ----------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* SCREENS */
/* ---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------- */
/* ADMIN */
/* ----------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* PATHS */
/* ---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* MIXIN.SCSS */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* FONT FACE */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* KEYFRAMES */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CENTRE UNE IMAGE */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CENTRE UN ELEMENT */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CENTRE UN BACKGROUND QUAND ON LE MET EN INLINE */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* TRIANGLES */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* Display flex */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* Object Fit */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* FONCTIONS */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CONVERSION PX -> EM */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CONVERSION PX -> REM */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* CONVERSION PX -> % */
/* ----------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* TRACKING INDESIGN -> LETTER SPACING CSS */
/* ---------------------------------------------------------------------------------------------------------- */
.timeline {
  position: relative;
}
.timeline:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: auto;
  background-color: rgba(var(--wp--preset--color--primary-rgb), 0.125);
}
.timeline__date {
  position: relative;
  margin: var(--paddingBase) 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: stretch;
}
.timeline__date__text {
  order: 1;
  border: 1px solid var(--wp--preset--color--quaternary);
  box-shadow: 5px 7px 8px rgba(103, 123, 187, 0.25);
  padding: var(--paddingBase);
}
.timeline__date__date .h4 {
  font-family: var(--wp--preset--font-family--primary);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
}
.timeline__date__image img {
  width: 100%;
}
.timeline__date__image__container {
  order: 2;
  background-color: var(--wp--preset--color--white);
}
.timeline__date:nth-child(odd) .timeline__date__text {
  background-color: var(--wp--preset--color--quaternary);
}
.timeline__date:nth-child(even) .timeline__date__text {
  background-color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* -------------------- RESPONSIVE --------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* XS */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* SM */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* MD */
/* ----------------------------------------------------- */
@media (min-width: 992px) {
  .timeline__date {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .timeline__date__text {
    width: 100%;
  }
  .timeline__date.timeline__date__hasimage .timeline__date__text {
    width: 60%;
  }
  .timeline__date.timeline__date__hasimage .timeline__date__image {
    height: 100%;
  }
  .timeline__date.timeline__date__hasimage .timeline__date__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .timeline__date.timeline__date__hasimage .timeline__date__image__container {
    width: 40%;
  }
  .timeline__date.timeline__date__hasimage:nth-of-type(even) .timeline__date__image__container {
    order: 2;
  }
  .timeline__date.timeline__date__hasimage:nth-of-type(even) .timeline__date__text {
    order: 1;
  }
  .timeline__date.timeline__date__hasimage:nth-of-type(odd) .timeline__date__image__container {
    order: 1;
  }
  .timeline__date.timeline__date__hasimage:nth-of-type(odd) .timeline__date__text {
    order: 2;
  }
}
/* ----------------------------------------------------- */
/* LG */
/* ----------------------------------------------------- */
@media (min-width: 1200px) {
  .timeline__date.timeline__date__hasimage .timeline__date__text {
    width: 45%;
  }
  .timeline__date.timeline__date__hasimage .timeline__date__image__container {
    width: 55%;
  }
}
/* ----------------------------------------------------- */
/* XL */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* XXL */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* HOVER */
/* ----------------------------------------------------- */

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