/*COULEURS*/
:root {
  --retz: #083381;
  --texte: #333333;
  --blanc: #FFF;
  --blanc-casse: #F8F5ED;
  --facebook: #4267B2;
  --bleuAA: #2E5D87;
  --bleu: #2f7e98;
  --bleu-ciel: #7EC6E3;
  --bleu-frais: #2f7e98;
  --orangeAA: #D65A27;
  --orange: #ae6242;
  --jauneAA: #8a6a00;
  --jaune: #F6C746;
  --jaune-clair: #FBEBBE;
  --vertAA: #4F7D51;
  --vert: #518152;
  --violetAA: #6A3FA4;
  --violet: #A367B1;
}
/*---COULEUR TEXTE*/
.texte {
  color:var(--texte) !important;
}
.texte-noir {
  color:var(--texte) !important;
}
.texte-blanc {
  color:var(--blanc) !important;
}
.texte-facebook {
  color:var(--facebook) !important;
}
.texte-retz {
  color:var(--retz) !important;
}
.texte-vert {
  color:var(--vertAA) !important;
}
/* =========================
  FONTS
  ========================= */
@font-face {
  font-family: 'Tomarik Brush';
  src: url('../fonts/tomarik-brush.woff2') format('woff2'), url('../fonts/tomarik-brush.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* Meilleure perf et UX */
}
/* =========================
  COULEURS (Variables CSS)
  ========================= */
:root {
  --retz: #083381;
  --texte: #333333;
  --blanc: #FFF;
  --blanc-casse: #F8F5ED;
  --facebook: #4267B2;
  --bleuAA: #2E5D87;
  --bleu: #2f7e98;
  --bleu-ciel: #7EC6E3;
  --bleu-frais: #2f7e98;
  --orangeAA: #D65A27;
  --orange: #ae6242;
  --jauneAA: #8a6a00;
  --jaune: #F6C746;
  --jaune-clair: #FBEBBE;
  --vertAA: #4F7D51;
  --vert: #518152;
  --violetAA: #6A3FA4;
  --violet: #A367B1;
}
/* =========================
  COULEUR TEXTE
  ========================= */
.texte,
.texte-noir {
  color: var(--texte) !important;
}
.texte-blanc {
  color: var(--blanc) !important;
}
.texte-facebook {
  color: var(--facebook) !important;
}
.texte-retz {
  color: var(--retz) !important;
}
.texte-vert {
  color: var(--vertAA) !important;
}
.texte-violet {
  color: var(--violetAA) !important;
}
.texte-orange {
  color: var(--orangeAA) !important;
}
.texte-bleu {
  color: var(--bleu-frais) !important;
}
#landing .texte-bleu-2 {
  color: var(--bleuAA) !important;
}
.texte-or {
  color: var(--jauneAA) !important;
}
/* =========================
  COULEUR BLOC
  ========================= */
.bg-beige {
  background-color: var(--blanc-casse);
}
.bg-orange {
  background-color: var(--bg-organiseur-orange);
}
.bg-vert {
  background-color: var(--bg-organiseur-vert);
}
.bg-bleu {
  background-color: var(--bg-organiseur-bleu);
}
.bg-rose {
  background-color: var(--bg-organiseur-rose);
}
.bg-facebook {
  background-color: var(--facebook);
}
/* =========================
  DÉGRADÉ BLOC
  ========================= */
.dg-blanc {
  background: linear-gradient(to bottom, var(--blanc) 0%, transparent 100%);
}
.dg-beige {
  background: linear-gradient(to bottom, var(--bg-organiseur-beige) 0%, transparent 100%);
}
.dg-orange {
  background: linear-gradient(to bottom, var(--bg-organiseur-orange) 0%, transparent 100%);
}
.dg-vert {
  background: linear-gradient(to bottom, var(--bg-organiseur-vert) 0%, transparent 100%);
}
.dg-bleu {
  background: linear-gradient(to bottom, var(--bg-organiseur-bleu) 0%, transparent 100%);
}
.dg-rose {
  background: linear-gradient(to bottom, var(--bg-organiseur-rose) 0%, transparent 100%);
}
.dg-facebook {
  background: linear-gradient(to bottom, var(--facebook) 0%, transparent 100%);
}
/* =========================
  COULEUR BOUTON
  ========================= */
.gris {
  background: var(--texte) !important;
}
.blanc {
  background: var(--blanc) !important;
  color: var(--texte) !important;
}
.retz {
  background: var(--retz) !important;
  color: var(--blanc) !important;
}
.facebook {
  background: var(--facebook) !important;
  color: var(--blanc) !important;
}
.vert {
  background: var(--vert) !important;
  color: var(--blanc) !important;
}
.violet {
  background: var(--violet) !important;
  color: var(--blanc) !important;
}
.orange {
  background: var(--orange) !important;
  color: var(--blanc) !important;
}
.bleu {
  background: var(--bleu) !important;
  color: var(--blanc) !important;
}
/*---DEGRADE  BLOC*/
.dg-blanc {
  background:linear-gradient( to bottom, var(--blanc) 0%, transparent 100% );
}
.dg-beige {
  background: linear-gradient( to bottom, var(--bg-organiseur-beige) 0%, transparent 100% );
}
.dg-orange {
  background:linear-gradient( to bottom, var(--bg-organiseur-orange) 0%, transparent 100% );
}
.dg-vert {
  background:linear-gradient( to bottom, var(--bg-organiseur-vert) 0%, transparent 100% );
}
.dg-bleu {
  background:linear-gradient( to bottom, var(--bg-organiseur-bleu) 0%, transparent 100% );
}
.dg-rose {
  background:linear-gradient( to bottom, var(--bg-organiseur-rose) 0%, transparent 100% );
}
.dg-facebook {
  background:linear-gradient( to bottom, var(--facebook) 0%, transparent 100% );
}
/*---COULEUR BOUTON*/
.gris {
  background:var(--texte) !important;
}
.blanc {
  background:var(--blanc) !important;
  color:var(--texte) !important;
}
.retz {
  background:var(--retz) !important;
  color:var(--blanc) !important;
}
.facebook {
  background:var(--facebook) !important;
  color:var(--blanc) !important;
}
.vert {
  background:var(--vert) !important;
  color:var(--blanc) !important;
}
.violet {
  background:var(--violet) !important;
  color:var(--blanc) !important;
}
.orange {
  background:var(--orange) !important;
  color:var(--blanc) !important;
}
.bleu {
  background:var(--bleu) !important;
  color:var(--blanc) !important;
}
/*HACK*/
main .text-formatted #landing ul li::before {
  display: none;
}
#landing .slick-slider .slick-dots {
  padding-bottom: 1em;
}
#landing .slick-slider .slick-dots button {
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  border: none;
}
#landing .slick-slider .slick-dots button:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  background-color: white !important;
  /*border:1px solid var(--bleu-frais) !important;*/
  border:2px solid var(--retz) !important;
}
#landing .slick-slider .slick-dots li.slick-active button:before,
#landing .slick-slider .slick-dots li:hover button:before {
  background-color:var(--retz) !important;
  border:2px solid var(--retz) !important;
}
/*TIMELINE STYLE*/
#landing p.lead {
  line-height: 1.4;
  font-size: 1.125rem;
}
.timeline-section {
  margin: 0;
  padding: 2rem;
  transition: background 0.3s ease-in-out;
}
.timeline-section.fondateur {
  background: #FFFFFF;
  background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 243, 234, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 243, 234, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 243, 234, 1) 50%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
}
.timeline-section.edition-retz {
  background: #FFFFFF;
  background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 244, 255, 1) 25%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 244, 255, 1) 25%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 244, 255, 1) 25%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
}
#landing .timeline-section h2 {
  font-size: 3rem;
  font-weight: bold;
  margin-top: 0;
  color:var(--retz) !important;
  position: relative;
  display: inline-block;
  align-items: center;
  gap: 0.5rem;
  /* espace entre texte et icônes */
}
#landing .timeline-section h2:after {
  content: "";
  display: inline-block;
  background-image: url(https://www.editions-retz.com/themes/custom/retz/assets/images/svg/gimmiques-03--half-sun.svg);
  width: 1.5rem;
  height: 2.5rem;
  margin-left: 0rem;
  transform: rotate(-25deg) scale(-1, 1);
  top: -8px;
  position: absolute;
}
#landing .timeline-section h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}
#landing .timeline-text p {
  font-size: 1em;
}
.text-center {
  text-align: center;
}
.timeline-block .row > div {
  position: relative;
  z-index: 1;
}
.timeline-nav-wrapper {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 1000;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.timeline-nav {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0rem 1rem;
  gap: 1rem;
  scrollbar-width: none;
}
.timeline-nav::-webkit-scrollbar {
  display: none;
}
.nav-item {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 32px;
  background: #F1F1F1;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  font-size: 1.5rem;
  transition: background 0.5s ease;
}
.nav-item:hover {
  background:var(--bleu-frais) !important;
  color: rgba(255, 255, 255, 1);
}
.nav-item.active {
  background:var(--retz) !important;
  color: #FFF;
}
.timeline-container {
  width: 100%;
  margin: auto;
  padding: 0 0;
}
.timeline-block {
  padding-bottom: 3rem;
  padding-top: 5rem;
  position: relative;
}
.timeline-block::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color:var(--retz) !important;
  /* ou #005baa */
  transform: translateX(-50%);
  z-index: 0;
}
.timeline-text {
  font-size: 1.1rem;
  line-height: 1.6;
}
.timeline-text a:hover {
  color:var(--retz) !important;
}
.timeline-block img {
  max-width: 100%;
}
.timeline-block img.img-border {
  border: 16px solid #FFFFFF;
}
.timeline-block img.img-shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
}
#landing .image-carousel .slick-track {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}
#landing .image-carousel .slick-slide {
  float: none !important;
  display: inline-flex;
  justify-content: center;
  margin: 0 auto;
}
#landing .image-carousel .slide-frame.slick-slide img {
  margin: 0px auto;
  display: block;
  max-width: 100%;
  height: auto;
}
.image-carousel .slick-prev,
.image-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
  border:2px solid var(--retz) !important;
}
.image-carousel .slick-prev:hover,
.image-carousel .slick-next:hover {
  background: white;
  opacity: 1;
}
.image-carousel .slick-prev {
  left: 0px;
  /* place à gauche du slider */
}
.image-carousel .slick-next {
  right: 0px;
  /* place à droite du slider */
}
.nav-arrow {
  color:var(--retz) !important;
  border: none;
  padding: 1rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  /*+border-radius: 4rem;*/
  -moz-border-radius: 4rem;
  -webkit-border-radius: 4rem;
  -khtml-border-radius: 4rem;
  border-radius: 4rem;
  transition: background 0.5s ease;
}
.nav-arrow:hover {
  background-color:var(--bleu-frais) !important;
  color: #FFFFFF !important;
}
.nav-arrow.right {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background: #F9F9F9;
}
.nav-arrow.left {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #F9F9F9;
}
#scrollToTop {
  background-color:var(--retz) !important;
  color: white;
  z-index: 1000;
  position: fixed;
  bottom: 90px;
  right: 30px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 999;
  border-radius: 50%;
  border: 0px solid black;
  transition: background 0.5s ease;
}
#scrollToTop:hover {
  background:var(--bleu-frais) !important;
}
#scrollToTop img {
  width: 32px;
  height: 32px;
  fill: #fff;
  animation: floatFade 2s infinite ease-in-out;
}
@keyframes floatFade {
  0% {
    opacity: 0.5;
    transform: translateY(6px);
  }
  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
  100% {
    opacity: 0.5;
    transform: translateY(6px);
  }
}
.navigation-horizontal {
  background: #FFFFFF;
  /*+border-radius: 8rem;*/
  -moz-border-radius: 8rem;
  -webkit-border-radius: 8rem;
  -khtml-border-radius: 8rem;
  border-radius: 8rem;
  margin: 1rem 0 2rem !important;
  padding: 1rem !important;
  box-shadow: 0rem 0.5rem 0.5rem rgba(74, 74, 74, 0.13);
}
.timeline-block .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.timeline-block .col-image,
.timeline-block .col-text {
  flex: 1 1 45%;
  max-width: 45%;
}
.timeline-block .col-image {
  background: url(../img/bg-col-img.png) center / contain no-repeat;
}
.timeline-block .col-date {
  display: flex;
  align-items: center;
  /* vertical */
  justify-content: center;
  /* horizontal */
  flex: 0 0 10%;
  max-width: 10%;
  text-align: center;
}
.timeline-date {
  font-size: 2rem;
  color: #FFFFFF !important;
  margin: 0;
  /*writing-mode: vertical-rl;*/
  /*transform: rotate(180deg);*/
  font-weight: bold;
  padding: 0.5rem 1rem;
  background-color:var(--bleu-frais) !important;
  /*+border-radius: 0px 0px 0px 6px;*/
  -moz-border-radius: 0px 0px 0px 6px;
  -webkit-border-radius: 0px 0px 0px 6px;
  -khtml-border-radius: 0px 0px 0px 6px;
  border-radius: 0px 0px 0px 6px;
  border:1px solid var(--bleu-frais) !important;
  position: relative;
}
.timeline-date:after {
  content: "";
  display: inline-block;
  background-image: url(https://www.editions-retz.com//themes/custom/retz/assets/images/svg/gimmiques-04--three-lines-tilted.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: -16px;
  transform: rotate(-170deg) scale(-1, 1);
  left: -14px;
}
/*infos*/
.timeline-text .infos {
  padding: 1rem;
  margin: 1rem;
  border:1px solid var(--bleu-frais) !important;
  background-color: #FFFFFF;
  /*+box-shadow: 6px 6px rgba(26, 69, 83, 0.085);*/
  -moz-box-shadow: 6px 6px rgba(26, 69, 83, 0.085);
  -webkit-box-shadow: 6px 6px rgba(26, 69, 83, 0.085);
  box-shadow: 6px 6px rgba(26, 69, 83, 0.085);
  border-bottom-left-radius: 6px;
}
.timeline-text .infos h4 {
  margin: 0 0 0.5em 0;
  color:var(--bleu-frais) !important;
}
.timeline-text .infos p {
  margin: 0;
}
/*infos-solo*/
#timeline .infos-solo {
  padding: 2rem;
  margin: 1rem;
  background-color:var(--bleuAA) !important;
  border-radius: 0px 0px 0px 16px;
  position: relative;
}
/* Image : uniquement le zoom infini */
#timeline .infos-solo .ico-angle-wrap {
  position: absolute;
  top: -24px;
  right: -24px;
}
#timeline .infos-solo img.ico-angle {
  background-color:var(--jaune) !important;
  padding: 1em;
  /*+border-radius: 10em;*/
  -moz-border-radius: 10em;
  -webkit-border-radius: 10em;
  -khtml-border-radius: 10em;
  border-radius: 10em;
  animation: pulseZoom 1.5s ease-in-out infinite;
  width: 80px;
  height: 80px;
}
#timeline .infos-solo h4 {
  margin: 0 0 0.5em 0;
  color: #FFFFFF !important;
  font-size: 1.5em;
}
#timeline .infos-solo p {
  margin: 0;
  font-size: 1.25em;
  color: #FFFFFF !important;
}
/*Legend*/
#timeline p.legend {
  margin: 0.5em 0 0;
  font-size: 0.8em;
  font-style: italic;
}
/* Responsive */
@media (max-width: 767.98px) {
  .timeline-block .row {
    flex-direction: column;
  }
  .timeline-block .col-image,
  .timeline-block .col-text,
  .timeline-block .col-date {
    max-width: 100%;
    flex: 1 1 100%;
  }
  #landing .timeline-section h2 {
    font-size: 2rem;
    margin-bottom: 0;
  }
  #landing .timeline-section h3 {
    font-size: 1.25rem;
  }
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
  .timeline-date {
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
  }
}
@media (max-width: 767.98px) {
  .timeline-block .row {
    display: flex;
    flex-direction: column;
  }
  .timeline-section {
    padding: 1rem;
  }
  .timeline-block .col-date {
    order: 1;
  }
  .timeline-block .col-text {
    order: 3;
  }
  .timeline-block .col-image {
    order: 2;
  }
  .timeline-date {
    font-size: 2rem;
  }
  .timeline-date {
    writing-mode: initial;
    transform: none;
    margin: 1rem 0;
  }
  .timeline-block {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    position: relative;
  }
  .timeline-block::before {
    content: "";
    position: absolute;
    top: 0;
    /* 👈 commence tout en haut */
    left: 50%;
    /* centrée horizontalement */
    width: 1px;
    height: 80px;
    /* hauteur fixe */
    transform: translateX(-50%);
    /* centrage horizontal uniquement */
    z-index: 0;
  }
  .navigation-horizontal {
    padding: 0.5rem !important;
    margin: 0.5rem 0 2rem !important;
  }
  .nav-item {
    font-size: 1rem;
  }
}
@media (max-width: 575.98px) {
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}
/*ANIMATIONS*/
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.timeline-block .fade-in-left {
  opacity: 0;
}
.timeline-block.aos-animate .fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.5s;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.timeline-block .fade-in-right {
  opacity: 0;
}
.timeline-block.aos-animate .fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
  animation-delay: 0.5s;
}
@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.timeline-block .fade-in {
  opacity: 0;
}
.timeline-block.aos-animate .fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.5s;
}
@keyframes pulseZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/*--*/
[data-aos="fade-rotate"] {
  opacity: 0;
  transform: rotate(0deg);
  will-change: transform, opacity;
}
[data-aos="fade-rotate"].aos-animate {
  opacity: 1;
  transform: rotate(-4deg) !important;
}
/*--*/
[data-aos="fade-rotate-inv"] {
  opacity: 0;
  transform: rotate(0deg);
  will-change: transform, opacity;
}
[data-aos="fade-rotate-inv"].aos-animate {
  opacity: 1;
  transform: rotate(4deg) !important;
}