/**
* Template Name: Impact
* Template URL: https://bootstrapmade.com/impact-bootstrap-business-website-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Rubik",  system-ui, -apple-system, "Segoe UI", Rubik, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #fafafa; /* Background color for the entire website, including individual sections */
  --default-color: #161A30; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #161A30; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #6C9833; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --hhb-noir: #161A30; /* moir hhb */
  --hhb-vert: #6C9833; /* vert hhb */
  --hhb-orange: #FF4D06; /* orange hhb */
  --hhb-blanc: #fafafa; /* blanc hhb */
  --hhb-bleu: #0C72BA; /* bleu hhb */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #f85a40; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #01433c; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #f85a40; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.btn-danger {
  background-color: var(--hhb-orange);
}

.btn-voir {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 15px;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.btn-voir:hover {
  background-color: var(--hhb-vert);
  color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: var(--hhb-vert);
  --heading-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  //background-color: color-mix(in srgb, var(--accent-color) 90%, black 10%);
  background-color: var(--hhb-noir);
  height: 40px;
  padding: 0;
  font-size: 24px;
  transition: all 0.5s;
}

.header .topbar .social-links a {
  // color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  color: var(--contrast-color);
  line-height: 0;
  transition: 0.3s;
  margin-right: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .topbar .special-links a {
  // color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  color: var(--contrast-color);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .special-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 50px;
  padding: 1px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 36px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  font-size: 32px;
  margin-left: 2px;
  color: var(--nav-hover-color);
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

@media (max-width: 640px) {
  .header .logo h1 {
    font-size: 24px;
  }
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }
/*
  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }
*/
  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--hhb-orange);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--accent-color);
  --default-color: #fff;
  --heading-color: #fff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about {
  margin-bottom: 30px;
}
.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}
.footer .social-links {
  display: flex;
  justify-content: left;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--default-color);
  border-color: var(--default-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links p a:hover {
  color: var(--default-color);
}

.footer .footer-links p a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}2

.footer .footer-links ul a:hover {
  color: var(--default-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-contact p a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .footer-contact p a:hover {
  color: var(--default-color);
}

.footer .footer-styo {
  padding: 30px;
}

.footer .copyright {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  .footer .footer-styo {
    padding: 10px 90px;
  }
  .footer .social-links {
    justify-content: center;
  }

}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}
@media screen and (max-width: 768px) {
  .scroll-top {
    visibility: hidden;
  }
  .scroll-top.active {
    visibility: hidden;
  }
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: var(--accent-color);
  --default-color: #fff;
  --heading-color: #fff;
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 160px 0 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol a {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title nav ol a:hover {
  color: var(--default-color);
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 112px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 100px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .section-title {
    padding-bottom: 30px;
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
.home {
  --default-color: #ffffff;
  --heading-color: #ffffff;
  //background-color: var(--background-color);
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
  width: 100%;
  position: relative;
  padding: 140px 0px 40px 0px;
}

.home .container {
  position: relative;
  z-index: 3;
}

.home h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.home h2 .accent {
  color: var(--conrast-color);
}

.home p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
  margin-bottom: 30px;
}

.home .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
}

.home .btn-get-started:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.home .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-weight: 600;
  color: var(--default-color);
}

.home .btn-watch-video i {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.home .btn-watch-video:hover i {
  color: var(--default-color);
}

@media (max-width: 640px) {
  .home {
    padding: 100px 0 0 0;
  }
  .home h2 {
    font-size: 36px;
  }

  .home .btn-get-started,
  .home .btn-watch-video {
    font-size: 14px;
  }
}

.home .icon-boxes {
  padding-bottom: 60px;
  z-index: 4;
}

@media (min-width: 1200px) {
  .home .icon-boxes:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% + 20px);
    background-color: var(--contrast-color);
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
}

.home .icon-box {
  padding: 60px 30px;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), white 4%);
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
  text-align: center;
}

.home .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.home .icon-box .title a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.home .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 48px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.home .icon-box:hover {
  background-color: color-mix(in srgb, var(--accent-color), white 10%);
}

.home .icon-box:hover .title a,
.home .icon-box:hover .icon {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Infos Section
--------------------------------------------------------------*/
.actus {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}
.actus .actus-container {
  background-color: var(--accent-color);
  height: 100%;
  padding: 10px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 80%);
}

.actus .actus-facebook {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 80%);
}

.actus .actus-item {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 90%);
}

.actus .actus-item:last-child {
  margin-bottom: 0;
}

.actus .actus-item i {
  font-size: 20px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}
  .actus .actus-item-deco i {
    display: none;
  }
  
.actus .actus-item h3 {
  color: var(--contrast-color);
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.actus .actus-item h4 {
  color: var(--contrast-color);
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.actus .actus-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}
.actus .actus-item-texte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.actus .actus-item-image {
  padding-left: 0px;
  padding-right: 0px;
}
.actus .actus-item-image-cadre {
  height: 120px;
  overflow: hidden;
  border: 1px solid var(--hhb-blanc);
}
.actus .actus-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
}

.actus .voireve-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.actus .voireve-btn:hover {
  background-color: var(--hhb-vert);
  color: var(--contrast-color);
}
.actus .aller-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.actus .aller-btn:hover {
  background-color: var(--hhb-vert);
  color: var(--contrast-color);
}

.actus .licence-btn {
  color: var(--contrast-color);
  background-color: var(--hhb-noir);
  display: inline-block;
  text-align: center;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.actus .licence-btn:hover {
  background-color: var(--background-color);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.actus .boutique-btn {
  color: var(--contrast-color);
  background-color: var(--hhb-orange);
  display: inline-block;
  text-align: center;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.actus .boutique-btn:hover {
  background-color: var(--background-color);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.actus .billetterie-btn {
  color: var(--contrast-color);
  background-color: var(--hhb-orange);
  display: inline-block;
  text-align: center;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.actus .billetterie-btn:hover {
  background-color: var(--background-color);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.evenement-detail img {
  width: 100% !important;
}

@media screen and (max-width: 768px) {
  .evenement-detail img {
    width: 100% !important;
  }
  .actus .actus-item i {
    display: none;
  }
  .actus .actus-item-deco i {
    display: inline;
    background-color: transparent;
  }
  .actus .actus-item-image {
    padding: 0px 10px 10px 0px;
  }
  .actus .actus-item-image-cadre {
    height: 150px;
  }
  .actus .actus-item-image-cadre img {
    //position: relative;
    //top: -50%;
  }
  .actus .actus-item-texte {
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}


/*--------------------------------------------------------------
# Partenaires Section
--------------------------------------------------------------*/
.partenaires .swiper {
  padding: 10px 0;
}

.partenaires .swiper-wrapper {
  height: auto;
}

.partenaires .swiper-slide img {
  transition: 0.3s;
}

.partenaires .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# OLD Equipes Section
--------------------------------------------------------------*/
/*
.equipes {
  background-color: color-mix(in srgb,  var(--hhb-vert), transparent 98%);
}
.equipes .equipes-item {
  padding: 30px 20px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
  height: 100%;
}

.equipes .equipes-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
}

.equipes .equipes-item .icon i {
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.equipes .equipes-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 98%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.equipes .equipes-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.equipes .equipes-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.equipes .equipes-item:hover .icon i {
  color: var(--heading-color);
}

.equipes .equipes-item:hover .icon:before {
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.equipes .equipes-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

@media screen and (max-width: 768px) {
  .equipes .equipes-item {
    padding: 20px 20px;
  }
}
*/

/*--------------------------------------------------------------
# Equipes Section
--------------------------------------------------------------*/
.equipes {
  background-color: color-mix(in srgb,  var(--hhb-vert), transparent 98%);
}

.equipes .equipes-item {
  padding: 30px 20px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
  height: 100%;
}

.equipes .equipes-button {
  border : 0px;
  background-color: transparent;
  padding: 0px;
}
.accordion-button:not(.collapsed) {
  box-shadow: unset;
}
.accordion-button:focus {
 box-shadow: unset;
}

.equipes .equipes-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 5px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.equipes .equipes-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.equipes .equipes-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}

.equipes .voirplus-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 15px;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.equipes .voirplus-btn:hover {
  background-color: var(--hhb-vert);
  color: var(--contrast-color);
}

/* detail planning */
.table-planning {
  border-color: var(--hhb-vert);
}

.table-planning th {
  background-color:  var(--hhb-noir);
  color: var(--hhb-blanc);
}

.table-planning .odd {
  background-color:  var(--hhb-vert);
  color: var(--hhb-noir);
  border: 1px solid var(--hhb-blanc);
}

.table-planning .even {
  background-color:  var(--hhb-noir);
  color: var(--hhb-blanc);
  border: 1px solid var(--hhb-blanc);
}

/*--------------------------------------------------------------
# club Section
--------------------------------------------------------------*/
.club {
  background-color: color-mix(in srgb,  var(--hhb-vert), transparent 98%);
}

.club .organisation {
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
}

.club .valeurs-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
  text-align: center;
}

.club .valeurs-item img {
    padding: 10px;
}

.club .bureau {
  padding: 30px;
  text-align: center;
}

.club .bureau img {
  padding: 10px;
}
  
.club .bureau h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.club .bureau:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.club .commissions {
  text-align: center;
  padding-top: 20px;
}

.club .commissions-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.club .commissions-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.club .commissions-item {
  border-left: 5px solid var(--hhb-vert);
  border-top: unset;
  padding-left: 10px;
  margin-bottom: 20px;

}

.club .bureau p {
  margin-bottom: 0px;
}

@media screen and (max-width: 768px) {
  .club .bureau {
    padding: 10px 30px;
  }
  .club .bureau img {
    padding: 2px;
  }
  .club .valeurs {
    padding-left: 5px;
    padding-right: 5px;
  }
  .club .valeurs-item h5 {
    font-size: 12px;
  }
  .club .valeurs-item img {
    padding: 2px;
  }
  .club .commissions {
    margin-top: 10px;
    padding-top: 20px;
  }
  .club .commissions-item {
    padding-top: 10px;
    padding-left: 0px;
    border-top: 5px solid var(--hhb-vert);
    border-left: unset;
  }
}

/*--------------------------------------------------------------
# matchs Section
--------------------------------------------------------------*/
.matchs {
  background-color: color-mix(in srgb,  var(--hhb-vert), transparent 98%);
}
.matchs .matchs-item {
  padding: 30px 20px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
  height: 100%;
}

.matchs .matchs-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
}

.matchs .matchs-item .icon i {
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.matchs .matchs-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 98%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.matchs .matchs-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.matchs .matchs-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.matchs .matchs-item .matchs-detail {
  display: grid;
  grid-template-columns: 55px 1fr;
  align-items: center;
  margin-bottom: 1px;
}

.matchs .matchs-item .lieu {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 18px;
}

.matchs .matchs-item .heure {
  color: var(--hhb-blanc);
  background-color: var(--hhb-vert);
  font-size: 14px;
  //font-weight: 500;
  border: 1px solid var(--hhb-vert);
  border-radius: 5px;
  padding: 0px;
  text-align: center;
  margin-right: 4px;
}

.matchs .matchs-item .exterieur {
  color: var(--hhb-blanc);
  background-color: var(--hhb-bleu);
  border: 1px solid var(--hhb-bleu);
}

.matchs .matchs-item .triangulaire {
  font-size: 12px;
  color: var(--hhb-orange);
  margin-right: 2px;
}

.matchs .matchs-item .separe {
  color: var(--hhb-orange);
  font-weight: 700;
  margin-left: 2px;
  margin-right: 2px;
}

.matchs .matchs-item .hhb {
  font-size: 14px;
  font-weight: 700;
}

.matchs .matchs-item .adversaire {
  font-size: 14px;
  font-weight: 400;
}

.matchs .matchs-item .salle {
  font-size: 14px;
  margin-left: 4px;
}

.matchs .matchs-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.matchs .matchs-item:hover .icon i {
  color: var(--heading-color);
}

.matchs .matchs-item:hover .icon:before {
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.matchs .matchs-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.matchs .matchs-item:hover .readmore {
  color: var(--accent-color);
}

.matchs .voirplus-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 15px;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.matchs .voirplus-btn:hover {
  background-color: var(--hhb-vert);
  color: var(--contrast-color);
}

@media screen and (max-width: 768px) {
  .matchs .matchs-item {
    padding: 30px 10px;
  }
}
/*--------------------------------------------------------------
# Résultats Section
--------------------------------------------------------------*/
.resultats {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}
.resultats .resultats-item {
  padding: 30px 4px;
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
  height: 100%;
}

.resultats .resultats-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
}

.resultats .resultats-item .icon i {
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.resultats .resultats-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 98%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.resultats .resultats-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.resultats .resultats-item .match {
  display: grid;
  grid-template-columns: 1fr 30px 10px 30px 1fr;
  line-height: 24px;
  //margin-bottom: 1px;
}

.resultats .resultats-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.resultats .resultats-item .eq1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  padding-right: 4px;
}

.resultats .resultats-item .eq2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding-left: 4px;
}

.resultats .resultats-item .hhb {
  font-weight: 600;
} 

.resultats .resultats-item .score {
  font-size: 18px;
  text-align: center;
} 

.resultats .resultats-item .scorevictoire {
  color: var(--hhb-vert);
}

.resultats .resultats-item .scorenul {
  color: var(--hhb-bleu);
}

.resultats .resultats-item .scoredefaite {
  color: var(--hhb-orange);
}

.resultats .resultats-item .gagne {
  font-weight: 700;
} 

.resultats .resultats-item .perdu {
  font-weight: normal;
}  

.resultats .resultats-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.resultats .resultats-item:hover .icon i {
  color: var(--heading-color);
}

.resultats .resultats-item:hover .icon:before {
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.resultats .resultats-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.resultats .resultats-item:hover .readmore {
  color: var(--accent-color);
}

.resultats .voirplus-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 15px;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.resultats .voirplus-btn:hover {
  background-color: var(--hhb-orange);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}
.stats .stats-item {
  padding: 10px 20px;
}

.stats .stats-item i {
  font-size: 44px;
  color: var(--accent-color);
  line-height: 0;
  margin-right: 15px;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Arbitrage Section
--------------------------------------------------------------*/
.arbitrage {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}
.contact .saisie {
  background-color: var(--hhb-vert);
  color: #ffffff;
  font-size: 14px;
  padding: 50px;
}  
.contact .saisie .form_label {
  font-size: 14px;
} 
.contact .help-block {
  color: #f70000;
  background-color: #fffb96;
  padding: 0px 5px;
}
.contact .validmail {
  color:  color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  margin-top: 15px;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}
.contact .validmail:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--hhb-orange), transparent 10%);
}
@media screen and (max-width: 768px) {
  .contact .saisie {
    padding: 15px 10px;
  }
}


/*--------------------------------------------------------------
# Halloffame Section
--------------------------------------------------------------*/
.halloffame {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}
.halloffame .member {
  background-color: color-mix(in srgb, var(--hhb-blanc), transparent 20%);
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 80%);
  text-align: center;
  border-radius: 15px;
  padding: 15px;
  overflow: hidden;
}

.halloffame .member img {
  border-radius: 15px;
  overflow: hidden;
}

.halloffame .member .member-content {
  padding: 0 20px 30px 20px;
}

.halloffame .member h4 {
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 20px;
}

.halloffame .member span {
  font-style: italic;
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.halloffame .member .social {
  margin-top: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.halloffame .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
}

.halloffame .member .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.halloffame .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.halloffame .swiper-wrapper {
  height: auto;
}

.halloffame .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.halloffame .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.halloffame .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Partenaires Section
--------------------------------------------------------------*/
.partenaires {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
}

/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/
.modal-header {
  background-color: var(--hhb-vert);
  color: var(--hhb-blanc);
}

.modal-header .btn-close {
  opacity: 1;
}

.modal-header h5 {
  color: var(--hhb-blanc);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}