/* FONTS

-------------------------------------------------- */

@font-face {

  font-family: 'Material Symbols Outlined';

  font-style: normal;

  src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2');

}

:root {

  /*---general ----*/

  --bs-primary: #768B6E;

  --bs-secondary: #A6B198;

  --bs-success: #28a745;

  --bs-danger: #dc3545;

  --bs-warning: #ffc107;

  --bs-info: #17a2b8;

  --bs-light: #ffffff;

  --bs-light-rgb: 255, 255, 255;

  --bs-dark: #343a40;

  --bs-dark-rgb: 21, 19, 19;

  --bs-link-color: #000000;

  --bs-link-color-rgb: 0, 0, 0;

  --bs-link-hover-color: #768B6E;

  --bs-link-hover-color-rgb: 118, 139, 110;

  --bs-primary-bg-subtle: rgba(118, 139, 110, 0.2);

  --bs-primary-text-emphasis: #000000;

  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(118, 139, 110, 0.25);

}

[data-bs-theme=dark] {

  color-scheme: dark;

  --bs-link-color: #ffffff;

  --bs-link-hover-color: #768B6E;

  --bs-link-color-rgb: 255, 255, 255;

  --bs-link-hover-color-rgb: 118, 139, 110;

  --bs-body-color: #ffffff;

  --bs-body-color-rgb: 222, 226, 230;

  --bs-body-bg: rgba(0, 0, 0, 0.5);

  --bs-body-bg-rgb: 33, 37, 41;

  --bs-primary-border-subtle: #768B6E;

  --bs-secondary-color: rgb(255 255 255);

  --bs-heading-color: #ffffff;

  --bs-card-inner-border-radius: 0;

  --bs-emphasis-color: #fff;

  --bs-emphasis-color-rgb: 255, 255, 255;

  --bs-secondary-color: rgba(222, 226, 230, 0.75);

  --bs-secondary-color-rgb: 222, 226, 230;

  --bs-secondary-bg: #343a40;

  --bs-secondary-bg-rgb: #000000;

  --bs-tertiary-color: rgba(222, 226, 230, 0.5);

  --bs-tertiary-color-rgb: 222, 226, 230;

  --bs-tertiary-bg: #2b3035;

  --bs-tertiary-bg-rgb: 43, 48, 53;

  --bs-primary-text-emphasis: #6ea8fe;

  --bs-secondary-text-emphasis: #a7acb1;

  --bs-success-text-emphasis: #75b798;

  --bs-info-text-emphasis: #6edff6;

  --bs-warning-text-emphasis: #ffda6a;

  --bs-danger-text-emphasis: #ea868f;

  --bs-light-text-emphasis: #f8f9fa;

  --bs-dark-text-emphasis: #dee2e6;

  --bs-primary-bg-subtle: #031633;

  --bs-secondary-bg-subtle: #161719;

  --bs-success-bg-subtle: #051b11;

  --bs-info-bg-subtle: #032830;

  --bs-warning-bg-subtle: #332701;

  --bs-danger-bg-subtle: #2c0b0e;

  --bs-light-bg-subtle: #343a40;

  --bs-dark-bg-subtle: #1a1d20;

  --bs-primary-border-subtle: #084298;

  --bs-secondary-border-subtle: #41464b;

  --bs-success-border-subtle: #0f5132;

  --bs-info-border-subtle: #087990;

  --bs-warning-border-subtle: #997404;

  --bs-danger-border-subtle: #842029;

  --bs-light-border-subtle: #495057;

  --bs-dark-border-subtle: #343a40;

  --bs-heading-color: inherit;

  --bs-code-color: #e685b5;

  --bs-highlight-color: #dee2e6;

  --bs-highlight-bg: #664d03;

  --bs-border-color: #495057;

  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  --bs-form-valid-color: #75b798;

  --bs-form-valid-border-color: #75b798;

  --bs-form-invalid-color: #ea868f;

  --bs-form-invalid-border-color: #ea868f;

}

/* Appliquer la couleur à certains éléments */

.bg-primary {

  background-color: var(--bs-primary) !important;

}

.text-primary {

  color: var(--bs-primary) !important;

}

.btn-primary {

  background-color: var(--bs-primary) !important;

  border-color: var(--bs-primary) !important;

  color: #ffffff !important;

}

.btn-primary:hover {

  background-color: var(--bs-secondary) !important;

  border-color: var(--bs-secondary) !important;

  color: #ffffff !important;

}

.card {

  border-radius: 0;

  border: none;

}

.card-img, .card-img-top {

  border-top-left-radius: 0;

  border-top-right-radius: 0;

}

.card-img, .card-img-bottom {

  border-bottom-right-radius: 0;

  border-bottom-left-radius: 0;

}

.card .bg-dark {

  background-color: rgba('0,0,0,0.7');

}

.card .border-secondary:hover {

  border-color: var(--bs-primary) !important;

  cursor: pointer;

}

.form-control:focus {

  border-color: var(--bs-primary);

  outline: 0;

  box-shadow: none;

}

.form-check-input:checked {

  background-color: var(--bs-primary);

  border-color: var(--bs-primary);

}

.form-check-input:focus {

  border-color: var(--bs-primary);

  outline: 0;

  box-shadow: none;

}

.bg-dark p {

  color: #ffffff;

}

.form-control:not(textarea) {

  border-radius: 50em;

  font-size: 12px;

}

.form-control texarea {

  border-radius: 0;

}

.menu-search-input {

  background-color: transparent;

  border: none;

}

.menu-search-input:focus {

  background-color: transparent;

  border: none;

}

.input-group-text {

  border: none;

  background-color: transparent;

}

.input-group {

  background-color: #f2f2f2;

  border-radius: 50em;

  min-width: 235px;

  max-width: 500px;

  max-height: 54px;

}

.input-group input {

  background-color: transparent;

  border: none;

}

.btn {

  border-radius: 50em;

  text-transform: uppercase;

  font-family: 'Inter';

  font-size: 12px;

  padding: 11px 25px;

}

.icon-accent {

  font-size: 50px !important;

  color: var(--bs-primary);

  fill: var(--bs-primary);

}

/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */

body {

  color: #000000;

  font-size: 15px;

  font-family: 'Inter', sans-serif;

  font-weight: 200;

}

p {

  font-family: 'Inter', sans-serif;

  font-weight: 200;

}

ul li {

  font-family: 'Inter', sans-serif;

  font-weight: 200;

}

a {

  transition: 0.5s;

  cursor: pointer;

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

  font-family: 'Inter', sans-serif;

  font-weight: 600;

}

@media (min-width: 1400px) {

  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {

    max-width: 1600px;

  }

}

.material-symbols-outlined {

  font-family: 'Material Symbols Outlined';

  font-weight: normal;

  font-style: normal;

  font-size: 24px; /* Preferred icon size */

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;

}

.nb-items {

  font-size: 10px;

  position: relative;

  color: #ffffff;

  content: "";

  width: 15px;

  height: 15px;

  background-color: var(--bs-primary);

  display: block;

  position: absolute;

  right: 5px;

  bottom: 0;

  z-index: 0;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-weight: bold;

}

.items-count {

  position: relative;

}

/*--- icone compare ---*/

#compare {

  width: 20px;

}

#loader {

  width: 100%;

  height: 100%;

  position: fixed;

  z-index: 999;

  display: block;

  background-color: rgba(0, 0, 0, 0.5);

  text-align: center;

  top: 0;

  padding-top: 25%;

}

.spinner-border {

  width: 80px;

  height: 80px;

}

iframe {

  min-height: 449px !important;

  width: 100%;

}

table tr {

  border-bottom: 1px solid #ededed;

  border: 1px solid #ededed;

}

table td {

  padding: 10px !important;

}

table td:nth-child(2), table td:nth-child(4) {

  border-right: 1px solid #ededed;

}

/* HEADER

-------------------------------------------------- */

.b-example-divider {

  height: 3rem;

  background-color: rgba(0, 0, 0, .1);

  border: solid rgba(0, 0, 0, .15);

  border-width: 1px 0;

  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);

}

.form-control-dark {

  color: #fff;

  background-color: var(--bs-dark);

  border-color: var(--bs-gray);

}

.form-control-dark:focus {

  color: #fff;

  background-color: var(--bs-dark);

  border-color: #fff;

  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);

}

.bi {

  vertical-align: -.125em;

  fill: currentColor;

}

.text-small {

  font-size: 85%;

}

.dropdown-toggle {

  outline: 0;

}

.drop_search_menu {

  max-width: 500px;

  margin-top: 12px;

  border-radius: 10px;

}

#menu-top-mobile-form {

  background-color: rgba(115, 115, 115, 0.5);

}

/* Mode Desktop : le menu est affiché normalement */

@media (min-width: 992px) {

  .menu-container {

    display: flex !important;

    justify-content: center;

    align-items: center;

  }

}

/* Mode Mobile : menu caché par défaut et arrive en glissant */

@media (max-width: 991px) {

  .menu-container {

    position: fixed;

    top: 0;

    right: 0;

    width: 80vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.95);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform: translateX(100%);

    transition: transform 0.4s ease-in-out;

    z-index: 1050;

  }

  .menu-container.show {

    transform: translateX(0);

  }

  /* Bouton Fermer */

  .close-menu {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 40px;

    color: white;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 1051;

  }

  /* Overlay pour fermer */

  .menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease-in-out;

    z-index: 1049;

  }

  .menu-overlay.show {

    opacity: 1;

    visibility: visible;

  }

}

/* hero-banner

-------------------------------------------------- */

.hero-banner {

  background-image: url('../images/fond-1.jpg');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  min-height: 700px;

  position: relative;

}

.hero-banner:before {

  content: '';

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 0;

  display: block;

  position: absolute;

  background-color: rgba(0, 0, 0, 0.2);

}

.hero-banner .container {

  z-index: 1;

}

/* SLIDER

-------------------------------------------------- */

/* Donne une taille spécifique aux sliders */

.swiper-container {

  width: 100%;

  position: relative;

  overflow: hidden;

}

.swiper-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.swiper {

  width: 100%;

  max-height: 417px !important;

}

.swiper-slide {

  width: auto;

}

.swiper-button-next, .swiper-button-prev {

  width: 40px;

  height: 40px;

  background: rgb(91 91 91 / 70%);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  z-index: 10;

}

/* Effet au survol */

.swiper-button-next:hover, .caroussel_accueil_slider .swiper-button-prev:hover {

  background: rgba(255, 255, 255, 0.9);

  color: var(--bs-dark);

}

.swiper-pagination-bullet {

  background: rgb(117 117 117 / 90%);

  width: 10px;

  height: 10px;

  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);

}

.swiper-pagination-bullet-active {

  background: var(--bs-primary) !important;

  opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) !important;

}

.swiper-button-next:after, .swiper-button-prev:after {

  font-size: 15px;

}

#caroussel_accueil_slider .swiper-pagination-bullet, #caroussel_accueil_services .swiper-pagination-bullet {

  background: #ffffff;

  width: 10px;

  height: 10px;

  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);

}

#caroussel_accueil_slider .swiper-container {

  height: 300px; /* Hauteur du slider */

}

#caroussel_accueil_slider .swiper {

  width: 100%;

}

#caroussel_plan_populaire .swiper {

  justify-content: center !important;

}

#caroussel_accueil_slider .swiper-slide {

  height: auto !important;

  width: auto;

  max-width: 92%;

}

/* Positionne les boutons sur la droite */

#caroussel_accueil_slider .swiper-button-next, #caroussel_accueil_slider .swiper-button-prev {

  position: absolute;

  right: 0; /* Décalé légèrement pour être bien visible */

  left: auto;

  transform: rotate(90deg);

}

/* Centrer les boutons verticalement */

#caroussel_accueil_slider .swiper-button-prev {

  top: 25%; /* Positionné en haut */

}

#caroussel_accueil_slider .swiper-button-next {

  top: 75%; /* Positionné en bas */

}

#caroussel_accueil_slider .swiper-pagination-vertical.swiper-pagination-bullets, #caroussel_accueil_slider .swiper-vertical > .swiper-pagination-bullets {

  right: 14px;

}

#caroussel_plan_populaire .swiper-slide img, #caroussel_plan_proposition .swiper-slide img, #caroussel_plan_similaires .swiper-slide img {

  aspect-ratio: 3 / 2;

}

#caroussel_plan_populaire .swiper-container, #caroussel_accueil_collections .swiper-container, #caroussel_plan_proposition .swiper-container, #caroussel_plan_similaires .swiper-container {

  height: 416px !important;

}

#caroussel_plan_populaire .swiper-pagination, #caroussel_accueil_collections .swiper-pagination, #caroussel_plan_proposition .swiper-pagination, #caroussel_plan_similaires .swiper-pagination {

  position: relative;

  margin: 0 33px;

  width: auto;

}

#caroussel_plan_populaire .swiper-button-next, #caroussel_accueil_collections .swiper-button-next, #caroussel_plan_proposition .swiper-button-next, #caroussel_plan_similaires .swiper-button-next {

  position: relative;

  top: 0;

  width: 40px;

  height: 40px;

  background: rgb(91 91 91 / 70%);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  z-index: 10;

}

#caroussel_plan_populaire .swiper-button-prev, #caroussel_accueil_collections .swiper-button-prev, #caroussel_plan_proposition .swiper-button-prev, #caroussel_plan_similaires .swiper-button-prev {

  position: relative;

  top: 0;

}

#caroussel_plan_populaire .pagination, #caroussel_accueil_collections .pagination, #caroussel_plan_proposition .pagination, #caroussel_plan_similaires .pagination {

  width: auto;

  max-width: 394px;

  justify-content: center;

  display: flex;

  align-items: center;

  min-height: 50px;

  min-width: 220px;

  margin: 0 auto;

}

#caroussel_accueil_services .card {

  min-height: 336px;

  margin: 5%;

}

#caroussel_accueil_services .card-body {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

#caroussel_realisations .card-body {

  color: #ffffff;

  background-color: rgba(0, 0, 0, 0.5);

  width: 100%;

  position: absolute;

  bottom: 0;

}

/* image HOTSPOT

-------------------------------------------------- */

.card > a:hover:before {

  content: "";

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  z-index: 1;

  background-color: rgba(0, 0, 0, 0.1);

}

.hotspot-container {

  position: relative;

  display: inline-block;

}

.hotspot {

  position: absolute;

  width: 20px;

  height: 20px;

  background: var(--bs-primary);

  border-radius: 50%;

  cursor: pointer;

  border: 2px solid white;

}

/* Exemples de position */

.hotspot1 {

  top: 20%;

  left: 30%;

}

.hotspot2 {

  top: 60%;

  left: 50%;

}

.popover-custom {

  max-width: 350px;

}

.popover-body {

  padding: 0;

}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {

  border-right-color: var(--text-secondary);

}

/* nav-tabs 

-------------------------------------------------- */

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

  color: #ffffff;

  background-color: var(--bs-primary);

  border-color: var(--bs-nav-tabs-link-active-border-color);

}

.drop_search_menu .list-group {

  height: 200px;

  overflow: auto;

}

/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */

/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}

/* Declare heights because of positioning of img element */

.carousel-item {

  height: 32rem;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  height: 32rem;

}

/* MARKETING CONTENT

-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

/* rtl:begin:ignore */

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}

/* rtl:end:ignore */

/* network_icon

------------------------- */

.network_icon {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}

.network_icon .round-icon {

  background-color: #363636;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

}

.network_icon .round-icon:hover {

  background-color: #768B6E;

}

.network_icon .round-icon svg {

  fill: #ffffff;

  max-height: 20px;

  width: 20px;

}

/* side-icon-bar

------------------------- */

.side-icon-bar a {

  position: relative;

}

.nb-add {

  font-size: 18px;

  position: relative;

  color: #ffffff;

  content: "";

  width: 22px;

  height: 22px;

  background-color: var(--bs-primary);

  display: block;

  position: absolute;

  right: 15px;

  top: 0;

  z-index: 0;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-weight: bold;

  line-height: 0.75;

}

.side-icon-bar .round-icon {

  background-color: #ffffff;

  border-radius: 50%;

  padding: 10px;

  color: #000000;

  fill: #000000;

  width: 44px !important;

  height: 44px !important;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.5s;

  margin: 0 auto;

}

.side-icon-bar .round-icon:hover {

  background-color: var(--bs-primary);

  border-radius: 50%;

  padding: 10px;

  color: #ffffff;

  fill: #ffffff;

  width: 44px !important;

  height: 44px !important;

  display: flex;

  align-items: center;

  justify-content: center;

}

.side-icon-bar {

  font-size: 12px;

  border-radius: 20px 0 0 20px;

}

/* RESPONSIVE CSS

-------------------------------------------------- */

@media (max-width: 960px) {

  .swiper {

    width: 100%;

    max-height: 313px !important;

  }

  .nb-add {

    right: -7px;

  }

}