/*
 * Projet : BACHATA REUNION - SAINT-JUST & EMMA
 * 2024
 * Auteur : Teddy CHAN - LOOM DIGITAL
 */

:root {
  --sje-section-bgColor-01: #f59c24;
  --sje-body-color: #000;
  --sje-h2-color: #000;
  --sje-bs-primary: #fff;
  --sje-bg-soft-primary: #d3d3d3;
  --sje-link-color: #2c3e50;
  --sje-color-01: #db8c22;
  --sje-color-02: #858184;
  --sje-color-03: #343f52;
  --sje-btn-bgColor: #2c3e50;
  --sje-btn-borderColor: #1a252f;
}

body,
p {
  color: var(--sje-body-color);
}

footer p {
  color: var(--sje-bs-primary) !important;
}

h1,
h2 {
  font-family: "DM Serif Display" !important;
}

.navbar > .container {
  padding-right: 0;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
}

.link-body {
  color: var(--sje-link-color) !important;
  font-weight: bold;
}

a[rel="external"]:after {
  background: transparent url(../img/icons/external.svg) right 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 15px;
  padding-right: 4px;
  width: 25px;
}

.link-mobile {
  border-bottom: 2px dotted;
}

.arrow {
  position: absolute;
  bottom: 52%;
  left: 50%;
  transform: rotate(360deg);
  z-index: 10;
}

.arrow span {
  display: block;
  width: 3vw;
  height: 3vw;
  border-bottom: 2px solid var(--sje-bs-primary);
  border-right: 2px solid var(--sje-bs-primary);
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px);
  }
}

.titre_about {
  background-color: var(--sje-section-bgColor-01) !important;
}
.titre_about .rounded,
.titre_about .rounded img {
  border-radius: 13rem !important;
}
.titre_about .shadow {
  box-shadow: 2rem 0rem 3.5rem rgba(0, 0, 0, 0.4) !important;
}

h2 {
  color: var(--sje-h2-color);
}

.wrapper.bg-light.angled::after,
.wrapper.bg-light.angled::before {
  border-color: var(--sje-section-bgColor-01);
}

.icon-list.bullet-soft-primary.bullet-bg i {
  background-color: var(--sje-body-color);
}
.icon-list.bullet-soft-primary i {
  color: var(--sje-bs-primary);
}

.bg-pale-primary {
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.bg-soft-primary {
  background-color: var(--sje-bg-soft-primary) !important;
}

.titre_testimonials .bg-pale-primary {
  background-color: var(--sje-section-bgColor-01) !important;
}

.rounded,
.rounded img {
  border-radius: 1rem !important;
}

.link-text {
  font-weight: bold;
  color: var(--sje-link-color) !important;
}
.link-text:hover {
  border-bottom: 2px dotted;
}

.btn-primary.btn-circle.ripple::before,
.btn-primary.btn-circle.ripple::after {
  background: var(--sje-section-bgColor-01) !important;
}
.btn-normal,
.btn-normal:hover,
.btn:hover {
  border: 0px !important;
  background-color: var(--sje-btn-bgColor);
  color: var(--sje-bs-primary) !important;
}
.btn-reverse,
.btn-reverse:hover {
  border: 0px !important;
  background-color: var(--sje-bs-primary) !important;
  color: var(--sje-btn-bgColor) !important;
}

.titre_contact .rounded,
.titre_contact .rounded img {
  border-radius: 13rem !important;
}
.titre_contact .shadow {
  box-shadow: 2rem 0rem 3.5rem rgba(0, 0, 0, 0.4) !important;
}

a[href^="tel"] {
  color: var(--sje-bs-primary) !important;
}

.nav-link {
  padding-top: 0px;
  padding-bottom: 0px;
}
.nav-link:hover {
  transform: translateY(-0.15rem) !important;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--sje-bs-primary) !important;
  border-bottom: 2px dotted var(--sje-bs-primary);
}

.text-inverse a:not(.btn):hover {
  border-color: var(--sje-bs-primary) !important;
}

.inverse a {
  color: var(--sje-btn-bgColor) !important;
}

.navbar-unstick .navbar-nav li:last-child .nav-link {
  color: var(--sje-bs-primary) !important;
}
.navbar-stick .navbar-nav li:last-child .nav-link {
  color: var(--bs-nav-link-color) !important;
}

.navbar-stick .navbar-nav li .nav-link:hover,
.navbar-stick .navbar-nav li .nav-link:focus {
  color: var(--sje-color-02) !important;
}

#titre_contact p a {
  color: var(--sje-color-03) !important;
  font-size: 1.2rem;
  font-weight: bold;
}

.text-primary {
  color: var(--sje-color-03) !important;
}

.progress-wrap p {
  position: absolute;
  top: -1.3rem;
  left: 0.5rem;
}
.progress-wrap::after {
  color: var(--sje-body-color) !important;
}
.progress-wrap svg.progress-circle path {
  stroke: var(--sje-body-color) !important;
}

.swiper-hero .swiper-slide {
  background-position: 81rem center;
}

.swiper-slide > div > div > div {
  /* background-color: rgba(var(--bs-dark-rgb), 1.0); */
  background-color: transparent;
}

nav > div > div {
  background-color: rgba(0, 0, 0, 1) !important;
  border-radius: 0rem;
}

.text-sje-color {
  color: var(--sje-btn-bgColor);
}

.swiper-button-next,
.swiper-button-prev {
  top: 47% !important;
}

.swiper-controls .swiper-pagination .swiper-pagination-bullet {
  width: 0.8rem !important;
  height: 0.8rem !important;
}

.swiper-controls .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--sje-btn-bgColor) !important;
}
.swiper-controls
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--sje-btn-bgColor) !important;
  background-color: transparent !important;
}

.swiper-controls .swiper-pagination {
  bottom: -3rem !important;
}

.image-wrapper {
  /* page Mentions légales */
  background-position: center -100rem !important;
  background-size: auto !important;
}

/* ---------------------------------------------------------------------------
 * Accessibilite - RGAA 4.1 niveau AA
 * ------------------------------------------------------------------------ */

/* Critere 12.7 - Lien d'evitement.
   Premier element focusable de la page, invisible tant qu'il n'a pas le focus.
   Il permet a une personne naviguant au clavier de sauter la barre de
   navigation, repetee sur chaque page, pour atteindre directement le contenu. */
.lien-evitement:focus,
.lien-evitement:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 0.25rem;
  outline: 3px solid #f59c24;
  outline-offset: 2px;
}

/* Critere 10.7 - Prise de focus visible.
   Le theme neutralise l'anneau de focus par defaut du navigateur sur plusieurs
   composants. On le retablit de maniere uniforme et contrastee, uniquement
   pour la navigation au clavier (:focus-visible n'active rien a la souris).
   L'anneau est celui du site : jeton --accent-or-appui (assets/css/jetons.css),
   3:1 au moins sur les fonds clairs. L'orange #f59c24 d'origine donnait 2,16:1
   sur blanc (WCAG 1.4.11 en demande 3). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--accent-or-appui);
  outline-offset: 3px;
  box-shadow: none;
}

/* Sur un bandeau photo (texte blanc), aucun or ne tient 3:1 contre l'image.
   L'anneau y est double, comme sur les vignettes video : or clair entre deux
   filets sombres. */
.text-white a:focus-visible {
  outline-color: var(--accent-or);
  box-shadow: 0 0 0 10px var(--fond-sombre);
}

/* La cible du lien d'evitement recoit le focus par programme : on evite d'y
   afficher un anneau, qui n'apporterait rien a cet endroit. */
main#contenu:focus,
main#contenu:focus-visible {
  outline: none;
}