/*
 * The website uses Bootstrap 5.3.3
 * use this file to add custom rules
 */

/*
 * Import Bootstrap icon fonts
 */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/*
 * Import Mulish font
 */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
  --bs-body-font-family: 'Mulish';
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

a {
  --bs-link-color: black;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #1E9F0A;
  --bs-link-hover-color-rgb: 30, 159, 10;
  text-decoration: none !important;
}

#bottomMenu .dropdown-menu {
  --bs-dropdown-border-color: black;
  --bs-dropdown-border-radius: 0;
  --bs-nav-link-color:black;
}

.nav-link {
  --bs-nav-link-color:#6C6C6C;
  --bs-nav-link-hover-color:#1E9F0A;
  --bs-nav-link-font-size: 14px;
  text-transform: uppercase;
}

.nav-link.active {
  --bs-navbar-active-color:#6C6C6C;
  text-decoration-line: underline !important;
  text-decoration-color: black !important;
}

#bottomMenu .nav-link {
  --bs-nav-link-color:black;
}
/*#navbarNav ul.navbar-nav a {
  --bs-nav-link-color:black !important;
}*/

#navbarTop {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#navbarNav {
  --bs-navbar-nav-link-padding-x:0.7rem;
}

#navbarNav ul li {
  font-size: 14px;
  line-height: 16px;
}

#navbarNav ul li a {
  font-size: 14px;
  line-height: 16px;
}

.hide {
  transform: translateY(-100%);
  opacity: 0;
}

#navbarNav.fixed-top {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

@media (max-width: 1199px) {
  .dropdown-menu {
    --bs-dropdown-border-color:  transparent !important;
    --bs-dropdown-border-radius: 0;
  }
  
  .dropdown-menu .nav-link {
    --bs-nav-link-color:#6C6C6C;
  }

  #bottomMenu ul.dropdown-menu li a.nav-link {
    --bs-nav-link-color:#6C6C6C;
    --bs-nav-link-hover-color:#1E9F0A;
  }

  #navbarNav .btn {
    --bs-btn-font-size:20px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
  }
  #navbarNav ul li {
    font-size: 20px;
    line-height: 16px;
  }

  #navbarNav ul li a {
    font-size: 20px;
    line-height: 16px;
  }
}

footer h4 {
  font-size: 25px;
}

@media (max-width: 992px) {
  footer h4 {
    font-size: 20px;
  }  
}


#footer-bottom {
  font-size: 11px;
}

/*
 * Définitions des variables globales
 * de Swiper slider
 */

.swiper {
  --swiper-theme-color: black !important;
  --swiper-pagination-bullet-size:6px;
  --swiper-pagination-bullet-horizontal-gap:3px;
  --swiper-navigation-size:10px;
}

.swiper-button-next,
.swiper-button-prev {
  background-color: var(--bs-gray-300);
  border-radius: 50%;
  padding:14px;
  font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #1e9f0a;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-slide:hover .icon-link svg {
  color: #1e9f0a;
}

.swiper-slider-rooms .swiper-slide div.card:hover div.card-img-top,
.swiper-slider-rooms div.card.active div.card-img-top {
    border: 5px solid var(--bs-secondary-border-subtle) !important;
}

.swiper-slider-rooms .swiper-slide div.card:hover {
  --bs-card-color: #1E9F0A;
}

.swiper-slider-rooms .swiper-slide div.card.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}


.single-exposition article h1 {
  font-size: 45px;
}

.single-exposition div.card-body {
    font-size: 14px;
}

.single-exposition div.card-body a {
    text-decoration: none;
    color: black !important;
}

.single-exposition div.card-body a:hover {
    text-decoration: underline;
    color: black !important;
}

/*
 * Définition des variables
 * pour les liens
 */
.icon-link {
  --bs-link-color-rgb: 0,0,0;
  --bs-link-hover-color-rgb: 0,0,0;
  text-decoration: none;
}

.icon-link svg {
  color: #C9D22A;
}
.icon-link:hover svg {
  color: #1e9f0a;
}

/*
 * Définition des variables
 * pour styliser les badges "badge"
 * de Bootstrap
 */
.badge {
  --bs-badge-border-radius: var(--bs-border-radius-pill);
  --bs-badge-color: black !important;
  text-transform: uppercase;
  font-weight: 300 !important;
}

.badge-primary {
  background-color: #C9D22A !important;
  --bs-badge-border-color:#C9D22A !important;
  --bs-badge-border-radius: var(--bs-border-radius-pill);
}

/*
 * Définition des variables
 * pour styliser les boutons "btn"
 * de Bootstrap
 */
.btn {
  --bs-btn-font-size:14px;
  --bs-btn-line-height:16px;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.btn-primary {
  --bs-btn-bg: white !important;
  --bs-btn-color:black !important;
  --bs-btn-border-color:black !important;
  --bs-btn-border-radius: var(--bs-border-radius-pill);
  --bs-border-width: 0.7px;
  --bs-btn-active-bg: white !important;
  --bs-btn-hover-bg: white !important;
  --bs-btn-active-color:#1E9F0A !important;
  --bs-btn-hover-color:#1E9F0A !important;
  --bs-btn-active-border-color:#1E9F0A !important;  
  --bs-btn-hover-border-color:#1E9F0A !important;
}

.btn-secondary {
  --bs-btn-bg: #C9D22A !important;
  --bs-btn-color:black !important;
  --bs-btn-border-color:#C9D22A !important;
  --bs-btn-border-radius: var(--bs-border-radius-pill);
  --bs-btn-active-bg: white !important;
  --bs-btn-hover-bg: white !important;
  --bs-btn-active-color:black !important;
  --bs-btn-hover-color:black !important;
  --bs-btn-active-border-color:black !important;
  --bs-btn-hover-border-color:black !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: white !important;
  --bs-btn-border-color: white !important;
  --bs-btn-border-radius: var(--bs-border-radius-pill);
  --bs-btn-active-color: #1E9F0A !important;
  --bs-btn-hover-color: #1E9F0A !important;
  --bs-btn-hover-border-color: #1E9F0A !important;
  --bs-btn-active-border-color: #1E9F0A !important;
}

.btn-outline-secondary {
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-active-bg: transparent !important;
}

.btn-outline-primary {
  --bs-btn-hover-bg: white !important;
  --bs-btn-active-bg: white !important;
}

/* 
 * Ajout de classes pour gérer l'affichage des bordures de manière "responsive".
 * Issu de : https://stackoverflow.com/questions/46412541/applying-borders-on-elements-depending-on-device-size-with-bootstrap/57089704#57089704
 */

@media (min-width: 576px) {
  .border-sm-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-left {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-top-0 {
    border-top: 0 !important;
  }
  .border-sm-right-0 {
    border-right: 0 !important;
  }
  .border-sm-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-sm-left-0 {
    border-left: 0 !important;
  }
  .border-sm-x {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-y {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-sm-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 768px) {
  .border-md-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-left {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-top-0 {
    border-top: 0 !important;
  }
  .border-md-right-0 {
    border-right: 0 !important;
  }
  .border-md-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-md-left-0 {
    border-left: 0 !important;
  }
  .border-md-x {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-y {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-md-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .border-lg-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-left {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-top-0 {
    border-top: 0 !important;
  }
  .border-lg-right-0 {
    border-right: 0 !important;
  }
  .border-lg-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-lg-left-0 {
    border-left: 0 !important;
  }
  .border-lg-x {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-y {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-lg-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1200px) {
  .border-xl-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-left {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-top-0 {
    border-top: 0 !important;
  }
  .border-xl-right-0 {
    border-right: 0 !important;
  }
  .border-xl-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-xl-left-0 {
    border-left: 0 !important;
  }
  .border-xl-x {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-y {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;;
  }
  .border-xl-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

/*
 * Page accueil
 */

body.home .swiper-slider-home-hero div.card {
  --bs-aspect-ratio: 40%;
  font-size: 1.5rem;
  @media (max-width: 768px) {
    --bs-aspect-ratio: 55%;
  }
}

body.home .swiper-slider-home-hero .card-title {
  @media (min-width: 1200px) {
   font-size: 70px;
  }
}

body.home .swiper-slider-home-showrooms div.card {
  --bs-aspect-ratio: 56%;
}

body.home .swiper-slider-home-collections div.card {
  /*background-size: cover;*/
  background-size: 100% 100%;
  transition: background-size 0.2s ease;
}

body.home .swiper-slider-home-collections div.card:hover {
  background-size: 103% 103%;
}

body.home .swiper-slider-home-artworks div.card-body {
  color: white;
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
body.home .swiper-slider-home-artworks div.card-body:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  opacity: 1;
}

body.home div.sbi_item {
  border: 0.3px solid rgba(0, 0, 0, .3);
}

/*
 * Page appel-a-creation
 */

body.appel-a-creation div#hero div.card h3.card-title::first-letter {
  text-transform: uppercase;
}

body.appel-a-creation div#hero div.card {
  --bs-aspect-ratio: 81%;
  @media (max-width: 768px) {
    --bs-aspect-ratio: 64%;
  }
}

body.appel-a-creation #items-mosaic div.card {
  @media (max-width: 576px) {
      .card-title {
        font-size:18px;
      }
      .card-subtitle {
        font-size: 15px;
        font-weight: normal;
      }
}