/* LESS Document */
/*************************/
/* Imports */
/*************************/
@import "/include/css/google-fonts.css";
@import "/include/css/ajaxStyle.css";
@import "/include/css/gijgo.min.css";
@import "/include/css/all.min.css";
@import "/include/css/dataTables.bootstrap5.min.css";
@import "/include/css/responsive.bootstrap5.min.css";
@import "/include/assets/vendor/boxicons/css/boxicons.min.css";
@import "/include/assets/vendor/lightgallery/css/lightgallery-bundle.min.css";
@import "/include/assets/vendor/swiper/swiper-bundle.min.css";
@import "/include/css/theme.min.css";
body {
  overflow-x: hidden !important;
}
.dark-mode body {
  overflow-x: hidden !important;
  background-color: #1E1E1E;
}
.logo {
  width: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .logo {
    width: 200px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .logo {
    width: 150px;
  }
}
@media only screen and (min-width: 400px) and (max-width: 567px) {
  .logo {
    width: 120px;
  }
}
@media only screen and (max-width: 399px) {
  .logo {
    width: 100px;
  }
}
/* ==========================================================================
   Avatar
 ========================================================================== */
.avatar-xs {
  height: 1.5rem;
  width: 1.5rem;
}
.avatar-sm {
  height: 3rem;
  width: 3rem;
}
.avatar-md {
  height: 4.5rem;
  width: 4.5rem;
}
.avatar-lg {
  height: 6rem;
  width: 6rem;
}
.avatar-xl {
  height: 7.5rem;
  width: 7.5rem;
}
.avatar-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}
/* ==========================================================================
   Boutons Nav
========================================================================== */
.succursale {
  width: 175px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .succursale {
    width: 150px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .succursale {
    width: 130px;
  }
}
@media only screen and (max-width: 567px) {
  .succursale {
    width: 110px;
  }
}
.expand-link .icon-contract-succursale {
  display: none;
}
.expand-link:hover .icon-expand,
.expand-link:active .icon-expand {
  display: none;
}
.expand-link:hover .icon-contract-succursale,
.expand-link:active .icon-contract-succursale {
  display: inline-block;
}
.emploi {
  width: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .emploi {
    width: 140px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .emploi {
    width: 120px;
  }
}
@media only screen and (max-width: 567px) {
  .emploi {
    width: 100px;
  }
}
.expand-link-emploi .icon-contract-emploi {
  display: none;
}
.expand-link-emploi:hover .icon-expand-emploi,
.expand-link-emploi:active .icon-expand-emploi {
  display: none;
}
.expand-link-emploi:hover .icon-contract-emploi,
.expand-link-emploi:active .icon-contract-emploi {
  display: inline-block;
}
.commander {
  width: 175px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .commander {
    width: 150px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .commander {
    width: 130px;
  }
}
@media only screen and (max-width: 567px) {
  .commander {
    width: 110px;
  }
}
.expand-link-commander .icon-contract-commander {
  display: none;
}
.expand-link-commander:hover .icon-expand-commander,
.expand-link-commander:active .icon-expand-commander {
  display: none;
}
.expand-link-commander:hover .icon-contract-commander,
.expand-link-commander:active .icon-contract-commander {
  display: inline-block;
}
/* ==========================================================================
   Boutons Nav EN
========================================================================== */
.succursale-en {
  width: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .succursale-en {
    width: 150px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .succursale-en {
    width: 130px;
  }
}
@media only screen and (max-width: 567px) {
  .succursale-en {
    width: 100px;
  }
}
.emploi-en {
  width: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .emploi-en {
    width: 150px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .emploi-en {
    width: 150px;
  }
}
.commander-en {
  width: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .commander-en {
    width: 130px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .commander-en {
    width: 110px;
  }
}
@media only screen and (max-width: 567px) {
  .commander-en {
    width: 90px;
  }
}
/* ==========================================================================
   Nav
 ========================================================================== */
.dark-mode .navbar {
  background-color: #DA1E1F !important;
}
.fix-header {
  margin-top: 124px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .fix-header {
    margin-top: 99px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .fix-header {
    margin-top: 79px;
  }
}
@media only screen and (min-width: 400px) and (max-width: 567px) {
  .fix-header {
    margin-top: 67px;
  }
}
@media only screen and (max-width: 399px) {
  .fix-header {
    margin-top: 60px;
  }
}
.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 10px;
  padding-left: 14px;
}
@media only screen and (min-width: 900px) and (max-width: 1015px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media only screen and (min-width: 840px) and (max-width: 899px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 839px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 6px;
    padding-left: 8px;
  }
}
.navbar .nav-item:hover > .nav-link:not(.disabled) {
  color: #000 !important;
}
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.active {
  color: #000 !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff !important;
}
.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
}
.navbar .dropdown:hover > .nav-link {
  color: #fff !important;
}
.nav-link {
  color: #fff;
}
.nav-link:hover {
  color: #fff !important;
}
.offcanvas-body {
  background-color: #DA1E1F !important;
}
.offcanvas-header {
  background-color: #1E1E1E !important;
}
.navbar-expand-md .navbar-nav .nav-link .nav-link.active {
  color: #DA1E1F !important;
}
.nav-link:focus {
  color: #fe2c55 !important;
}
@media (max-width: 1015px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 12px;
    padding-left: 12px;
  }
}
/* ==========================================================================
   Medias sociaux
========================================================================== */
.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
  border-color: #fe2c55 !important;
  background-color: #fe2c55 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 0.375rem 1.125rem -0.375rem rgba(254, 44, 85, 0.8) !important;
          box-shadow: 0 0.375rem 1.125rem -0.375rem rgba(254, 44, 85, 0.8) !important;
}
.btn-tiktok:hover,
.btn-tiktok:focus,
.btn-tiktok:active {
  border-color: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 0.375rem 1.125rem -0.375rem rgba(0, 0, 0, 0.8) !important;
          box-shadow: 0 0.375rem 1.125rem -0.375rem rgba(0, 0, 0, 0.8) !important;
}
/* ==========================================================================
   Bnade commander
========================================================================== */
.titres-bande-commander {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: 700;
}
@media only screen and (max-width: 660px) {
  .titres-bande-commander {
    font-size: 30px;
  }
}
.text-bande-commander {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 38px;
}
@media only screen and (max-width: 660px) {
  .text-bande-commander {
    font-size: 18px;
  }
}
.hauteur-bande-commander {
  max-height: 200px;
}
@media only screen and (min-width: 991px) and (max-width: 1090px) {
  .hauteur-bande-commander {
    max-height: 275px;
  }
}
@media only screen and (max-width: 990px) {
  .hauteur-bande-commander {
    min-height: 275px;
  }
}
.roi-poutine-bande {
  width: 240px;
  position: relative;
  top: -110px;
}
@media only screen and (min-width: 1026px) and (max-width: 1090px) {
  .roi-poutine-bande {
    width: 300px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1025px) {
  .roi-poutine-bande {
    width: 275px;
    top: -80px;
  }
}
.btn-commander-bande-roi {
  margin-top: -150px;
}
@media only screen and (max-width: 990px) {
  .btn-commander-bande-roi {
    margin-top: 0;
  }
}
/* ==========================================================================
   Datepicker
 ========================================================================== */
.gj-picker div[role=navigator] div {
  padding-left: 15px !important;
  /*padding-right: 25px !important;*/
}
.datepicker-days {
  font-family: Nunito, sans-serif;
  border: #333132;
  background-color: #232121;
}
.datepicker {
  padding: 0!important;
}
.datepicker td,
.datepicker th {
  color: #a5a5a5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 28px;
}
.datepicker table tr td.active.active {
  background-color: #e82223 !important;
  background-image: none!important;
  color: #fff;
  border-color: transparent;
}
.datepicker table tr td.day:hover {
  background: #313a46;
  color: #fff !important;
}
.datepicker .datepicker-switch {
  color: #fefeff;
}
.datepicker-dropdown:before {
  border-bottom-color: #232121;
}
.datepicker-dropdown:after {
  border-bottom: 6px solid #232121;
}
.datepicker-days table-condensed th {
  color: #fefeff;
}
.datepicker-days table-condensed td {
  color: #a5a5a5;
}
.datepicker-days table-condensed td.active,
.datepicker-days table-condensed td.active:hover,
.datepicker-days table-condensed td.available:hover,
.datepicker-days table-condensed th.available:hover {
  background-color: #e82223;
  color: #fff;
}
.gj-picker div[role=navigator] div[role=period] {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #232121;
}
.fa,
.fas {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: #232121;
}
.gj-datepicker-bootstrap [role=right-icon] button {
  width: 38px;
  position: relative;
  border: 1px 1px 1px 0 solid;
  padding-top: 15px;
  padding-bottom: 15px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 0;
}
.gj-datepicker-md [role=right-icon] {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 24px;
  color: #fff;
}
/* ==========================================================================
   Modal
========================================================================== */
.modalStratos {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  outline: 0;
}
/* ==========================================================================
   Data tables pagination
========================================================================== */
.page-link.active,
.active > .page-link {
  z-index: 3;
  color: #fff;
  background-color: #253169;
  border-color: #253169;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: #22c55e;
}
/* ==========================================================================
   Carousel
========================================================================== */
.carousel-butons {
  left: 15%;
  top: 40%;
}
@media only screen and (min-width: 768px) and (max-width: 1480px) {
  .carousel-butons {
    left: 5%;
    top: 45%;
  }
}
.boutons-carousel {
  width: 175px;
}
@media only screen and (min-width: 990px) and (max-width: 1480px) {
  .boutons-carousel {
    width: 135px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
  .boutons-carousel {
    width: 115px;
  }
}
.swiper-wrapper {
  background-color: #000;
}
.dark-mode .btn-prev,
.dark-mode .btn-next {
  background-color: #DA1E1F !important;
}
.dark-mode .btn-prev:hover,
.dark-mode .btn-next:hover {
  background-color: #000 !important;
}
/* ==========================================================================
   Accueil
========================================================================== */
.titres-bande-rouge {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .titres-bande-rouge {
    font-size: 34px;
  }
}
@media only screen and (max-width: 660px) {
  .titres-bande-rouge {
    font-size: 24px;
  }
}
.bande-rouge {
  background-color: #da1e1f;
}
.pad-accueil {
  padding-top: 75px;
  padding-right: 50px;
  padding-left: 50px;
  padding-bottom: 75px;
}
@media only screen and (max-width: 990px) {
  .pad-accueil {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.text-accueil {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 38px;
}
@media only screen and (min-width: 661px) and (max-width: 992px) {
  .text-accueil {
    font-size: 18px;
    line-height: 32px;
  }
}
@media only screen and (max-width: 660px) {
  .text-accueil {
    font-size: 16px;
    line-height: 30px;
  }
}
.btn-danger {
  background-color: #DA1E1F;
  border-color: #DA1E1F;
}
.btn-danger:hover {
  background-color: #ef3c39;
  border-color: #ef3c39;
}
.btn-dark {
  color: #fff;
  background-color: #000;
  border: 2px solid #000;
}
.btn-dark:hover {
  color: #fff;
  background-color: #1E1E1E;
  border: 2px solid #1E1E1E;
}
/* ==========================================================================
   Succursales
========================================================================== */
.fix-header-succursales {
  margin-top: 184px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .fix-header-succursales {
    margin-top: 165px;
  }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .fix-header-succursales {
    margin-top: 130px;
  }
}
@media only screen and (max-width: 567px) {
  .fix-header-succursales {
    margin-top: 118px;
  }
}
.succursales-fond-noir {
  background-color: #000;
}
.nom-succursales {
  color: #fe2c55;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
/* ==========================================================================
   Forms
========================================================================== */
.dark-mode .form-control,
.dark-mode .form-select {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.7);
}
.btn-secondary {
  background-color: #2b2b2b !important;
  border-color: #2b2b2b !important;
}
.btn-secondary:hover {
  background-color: #4b4b4b !important;
  border-color: #4b4b4b !important;
}
.form-check-input:checked {
  background-color: #DA1E1F;
  border-color: #DA1E1F;
}
/*.form-check-input:checked, .form-check-input input:checked {
    background-color: #DA1E1F;
    border-color: #DA1E1F;
}*/
/* ==========================================================================
   Login
========================================================================== */
.form-signin {
  max-width: 330px;
  padding: 1rem;
}
.form-signin .form-floating:focus-within {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: #DA1E1F;
  border-color: 2px solid #DA1E1F;
}
/* ==========================================================================
   Admin
========================================================================== */
.logo-admin {
  width: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .logo-admin {
    width: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .logo-admin {
    width: 150px;
    margin-top: 15px;
  }
}
.marge-top {
  margin-top: 125px;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .marge-top {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .marge-top {
    margin-top: 95px;
  }
}
.bg-danger {
  background-color: #DA1E1F !important;
}
.bg-dark {
  background-color: #000 !important;
}
.page-item.active .page-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.page-link.active,
.active > .page-link {
  z-index: 3;
  color: #fff;
  background-color: #DA1E1F;
  border-color: #DA1E1F;
}
.modal-content {
  background-color: #272727;
}
/* ==========================================================================
   Left side menu
========================================================================== */
.leftside-menu {
  z-index: 1000;
  top: 200px;
  position: fixed;
}
.side-nav {
  padding-left: 0;
  list-style-type: none;
}
.side-nav ul {
  list-style-type: none;
}
.side-nav .side-nav-link {
  display: block;
  list-style: none;
  position: relative;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  padding: 8px;
}
.side-nav .side-nav-link:hover,
.side-nav .side-nav-link:focus,
.side-nav .side-nav-link:active {
  color: #DA1E1F;
  text-decoration: none;
}
.side-nav .side-nav-link span {
  vertical-align: middle;
}
.side-nav.bottom {
  bottom: 0;
  width: 100%;
  position: absolute;
}
.assiettes {
  color: #DA1E1F;
}
.fs-normal {
  font-size: 1rem !important;
}
/* ==========================================================================
   Galerie 
========================================================================== */
.gallery-item.video-item:hover::after {
  background-color: #DA1E1F;
  color: #fff;
  /*box-shadow: var(--si-gallery-video-indicator-hover-box-shadow);*/
}
.dark-mode .btn-video:hover {
  background-color: #DA1E1F;
  color: #fff;
}
.dark-mode .card {
  background-color: #1E1E1E;
}
.histoire {
  margin-top: 75px;
  margin-right: -50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1360px) {
  .histoire {
    margin-top: 25px;
    margin-right: -24px;
  }
}
@media only screen and (min-width: 991px) and (max-width: 1199px) {
  .histoire {
    margin-top: 0;
    margin-right: -24px;
  }
}
@media only screen and (max-width: 990px) {
  .histoire {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}
.fondation {
  margin-top: 0;
  margin-left: -24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1360px) {
  .fondation {
    margin-top: 0;
    margin-left: -24px;
  }
}
@media only screen and (min-width: 991px) and (max-width: 1199px) {
  .fondation {
    margin-top: 0;
    margin-left: -30px;
  }
}
@media only screen and (max-width: 990px) {
  .fondation {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
  }
}