/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/

/*
Titre:
michroma

Sous-titre:
Montserrat

Texte: 
Lora
*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
  src: url(7Au9p_AqnyWWAxW2Wk3GzWQI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(7Au9p_AqnyWWAxW2Wk3GzWQI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

html {
  scroll-behavior: smooth;
}

body{
  position: relative;
  overflow: auto;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'lora', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "michroma", serif;
  font-weight: 900 !important;
  font-style: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}


::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #000000;
  border-radius: 5px;
  border: 1px solid #F5F5F5;
}

/*Cookie consent style*/

.cookiesBtn--essentials .cookiesBtn__link{
  background-color: #ffffff!important;
  border: 1px solid #ffffff!important;
  color: #000000!important;
}

.cookiesBtn--accept .cookiesBtn__link{
  background-color: #000000!important;
  border: 1px solid #ffffff!important;
}

.cookies__save .cookiesBtn__link{
  background-color: #000000!important;
  border: 1px solid #ffffff!important;
}


#cookies-policy .cookies__category input:checked+.cookies__box:after {
  background: #ffffff!important;
  opacity: 1;
}

#cookies-policy .cookies__details {
  color: #ffffff!important;
}

.btn-manage-cookies .btn-manage-cookies__link{
  color: #0d6efd!important;
  border: none!important;
  background-color: #ffffff00!important;
  white-space: nowrap;
  padding: 0;
}

.btn-manage-cookies .btn-manage-cookies__link:hover{
  color: #0A58CA!important;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Maven Pro', sans-serif;
}

::selection {
  background: #ffffff;
  color: #fff;
}

::-moz-selection {
  background: #ffffff;
  color: #fff;
}

section {
  margin-top: 40px;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  text-align: center;
  margin-top: 25px;
}

.section-heading h2 {
  font-size: 47px;
  font-weight: 500;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 em {
  font-style: normal;
  color: #ffffff;
}

.section-heading img {
  margin: 20px auto;
}

.section-heading-blanc {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.section-heading-blanc h2 {
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading-blanc h2 em {
  font-style: normal;
  color: #ffffff;
}

.section-heading h3 {
  font-size: 30px;
  font-weight: 500;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
}

@media screen and (min-width: 1200px) {

  .section-heading h3::before {
    content: "";
    width: 85px;
    position: absolute;
    top: 50%;
    right: -155px;
    transform: translateY(-50%);
    border: 2px solid #ffffff;
  }
  
  .section-heading h3::after {
    content: "";
    width: 85px;
    position: absolute;
    top: 50%;
    left: -155px;
    transform: translateY(-50%);
    border: 2px solid #ffffff;
  }
}


.dark-bg h2 {
  color: #fff;
}

.dark-bg p {
  color: #fff;
}

.main-button a {
  display: inline-block;
  font-size: 15px;
  padding: 12px 20px;
  background-color: #ffffff;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #132541;
}


.carousel-caption-home{
  text-transform: uppercase;
  font-size: 15px;
  color: #ffffff;
  border-radius: 21px;
  border-radius: 50px;
  background: linear-gradient(145deg, #1167cf, #003b83);
  box-shadow: 1px 1px 2px #002f6894, -2px -2px 2px #003f8c85;
}

.carousel-caption {
  position: relative!important;
  width: 75%!important;
  padding-top: 2rem!important;
}
/*button*/

.btn-blanc {
  position: relative;
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 25px;
  display: inline-block;
  cursor: pointer;
  border-radius: 6em;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  font-weight: 500;
  color: black;
  background-color: white;
}

.btn-blanc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-blanc:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-blanc::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.btn-blanc::after {
  background-color: #fff;
}

.btn-blanc:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

/*btn-noir*/

.btn-noir {
  position: relative;
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 25px;
  display: inline-block;
  cursor: pointer;
  border-radius: 6em;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  font-weight: 500;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

.btn-noir:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-noir:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-noir::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.btn-noir::after {
  background-color: #1f1f1f;
}

.btn-noir:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}




/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.dropdown-style {
  border-radius: 20px;
}

.background-header .dropdown-style {
  color: #000 !important;
  border:  1px solid #ffffff !important;
}

.background-header .dropdown-style:hover {
  color: #fff !important;
  background-color: #ffffff !important;
}

@media screen and (max-width: 768px) {
  .background-header .dropdown-style:hover {
    color: #000 !important;
    border:  1px solid #ffffff !important;
  }

  .div-langue {
    position: fixed;
    top: 10px;
    left: 10px;
  }
  
}
.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li:not(.active):not(.main-button) a {
  color: #232d39!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.icon-img {
  max-width: 282px; /* Limite la largeur de l'image à 100% de la largeur du conteneur */
  max-height: 50px; 
  width: auto; 
  height: auto; 
}

.container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-center img {
  max-width: 100%; /* Pour s'assurer que l'image ne dépasse pas la largeur de son conteneur */
  height: auto; /* Pour conserver les proportions de l'image */
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #ffffff;
  font-weight: 900;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li a {
  position: relative;
  display: inline-block;
  font-size: 17px;
  font-weight: 400;
  color: #7a7a7a;
  text-decoration: none;
  line-height: 20px;
  padding: 5px 5px;
  margin-left: 15px;
  margin-right: 15px;
}


.header-area .main-nav .nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 3px;
  background-color: #ffffff; /* Blanc */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.header-area .main-nav .nav li a:hover::after,
.header-area .main-nav .nav li a.active::after {
  transform: translateX(-50%) scaleX(1);
}



.header-area .main-nav .nav a.active {
  display: inline-block;
  padding: 5px 5px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0px;
  border: none;
  height: auto;
  line-height: 20px;
}


@media screen and (max-width: 1200px) {
  .header-area .main-nav .nav li a {
    padding: 7px 12px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li#admin-button a {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ffffff;
  color: #fff;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: all .3s;
  height: auto;
  line-height: 20px;
}

.header-area .main-nav .nav li#admin-button a:hover {
  background-color: #132541;
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .header-area .main-nav .nav li:hover:not(.main-button) a,
  .header-area .main-nav .nav li:not(.main-button) a.active {
    color: #fff!important;
  }
  .background-header .main-nav .nav li:hover:not(.main-button) a,
  .background-header .main-nav .nav li:not(.main-button) a.active {
    color: #fff!important;
    opacity: 1;
  }
}



.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  /* right: 40px; */
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #ffffff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #ffffff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #ffffff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #ffffff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #ffffff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #ffffff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #ffffff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #ffffff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 0px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #ffffff;
}
@media screen and (max-width: 1400px) {
  .header-area .main-nav .logo {
    font-size: 28px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .icon-img {
    max-width: 170px; /* Limite la largeur de l'image à 100% de la largeur du conteneur */
    max-height: 50px; 
    width: auto; 
    height: auto; 
  }

  .header-area .main-nav .nav li a {
    font-size: 13px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 6px;
    padding-right: 6px;
  }
  .header-area .main-nav:before {
    display: none;
  }
  .header-area .main-nav .logo {
    font-size: 16px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .icon-img {
    max-width: 130px; /* Limite la largeur de l'image à 100% de la largeur du conteneur */
    max-height: 40px; 
    width: auto; 
    height: auto; 
  }

  .header-area .main-nav .nav li a {
    font-size: 10px;
  }
}

@media (max-width: 1000px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav:before {
    display: none;
  }
  .header-area .main-nav .logo {
    font-size: 12px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .icon-img {
    max-width: 130px; /* Limite la largeur de l'image à 100% de la largeur du conteneur */
    max-height: 30px; 
    width: auto; 
    height: auto; 
  }

  .header-area .main-nav .nav li a {
    font-size: 8px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #ffffff;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ffffff!important;
    opacity: 1;
  }
  .header-area {
    background-color: rgb(14 17 20 / 1) !important;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    font-weight: 700;
    font-size: 14px;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    color: #ffffff !important;
  }

  .header-area .main-nav .nav a.active{
    color: #ffffff!important;
    border: unset !important;
    font-weight: 700;
    border-radius: unset !important;
    font-size: 18px !important;
    background-color: unset !important;
  }

  .header-area .main-nav .nav a:hover {
    color: #ffffff!important;
    border: unset !important;
    font-weight: 700;
    border-radius: unset !important;
    font-size: 18px !important;
    background-color: unset !important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    /* background-color: rgb(14 17 20 / 0.5); */
    background-color: rgb(14 17 20 / 1);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
    overflow-x: auto;
}

.main-banner .caption {
  text-align: center;
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #ffffff;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 80px;
}

.feature-item {
  display: flex;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #232d39;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
}


#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/cta-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #ffffff;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}

#savoir_faire_shema {
  padding: 130px 0px;
  background-image: url(../images/savoir_faire_shema.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.col-savoir {
  padding: 0px 0px 0px 0px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
  margin-bottom: 30px;
  height: 100%;
}

.col-savoir h2 {
background-color: #ffffff;
color: #fff;
padding: 10px ;
font-size: 22px;
border-radius: 10px 10px 0px 0px;
text-transform: uppercase;
}

.col-savoir-img img {
  margin-top: 20px;
  height: 180px;
}

.col-savoir p {
  padding: 20px 20px 0 20px;
  font-size: 18px;
  color: #000;
}

.p-savoir {
  padding-left: 40px;
  padding-right: 20px;
  font-size: 15px!important;
  text-align: justify;
}

.col-validation-img img {
  margin-top: 20px;
  border-radius: 10px;
  width: 95%;
}

.searchbox {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
}

.sticky-searchbox {
  position: sticky;
  top: 9%;
  z-index: 999;
}

@media screen and (max-height: 900px) {
  .sticky-searchbox {
    top: 10%;
  }
}

@media screen and (max-height: 800px) {
  .sticky-searchbox {
    top: 11%;
  }
}

@media screen and (max-height: 700px) {
  .sticky-searchbox {
    top: 13%;
  }
}

@media screen and (max-height: 600px) {
  .sticky-searchbox {
    top: 15%;
  }
}

@media screen and (max-height: 500px) {
  .sticky-searchbox {
    top: 20%;
  }
  
}


.searchbox input {
  width: 100%;
  height: 40px;
  line-height: 28px;
  padding: 0 1rem;
  padding-left: 2.5rem;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background-color: #f1f1f1;
  color: #0d0c22;
  transition: 0.3s ease;
}

.searchbox input:focus,
.searchbox input:hover {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 55, 122, 0.2);
  background-color: #ffffff;
  outline: none;
}

.searchbox i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 20px;
}
/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
#tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding:25px 25px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 18px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
  align-items: center;
  display: flex;
}
#tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ffffff;
}
#tabs .main-rounded-button a:hover {
  background-color: #132541;
}
#tabs ul li a img {
  max-width: 100%;
  margin-right: 20px;
}

#tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
#tabs ul .ui-tabs-active a {
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: flex;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ffffff;
}

#tabs ul .ui-tabs-active span {
  color: #ffffff;
}
.tabs-content {
  text-align: left;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 28px;
}


/* 
---------------------------------------------
schedule
--------------------------------------------- 
*/

#schedule {
  padding: 0px 0px 140px 0px;
  background-image: url(../images/schedule-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#schedule table tbody {
  border-top: 1px solid #fff; 
}

#schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

#schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

#schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

#schedule .filters {
  margin-bottom: 40px;
}
#schedule .filters ul {
  padding: 0;
  text-align: center;
}
#schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
#schedule .filters ul li:last-child {
  margin-right: 0px;
}
#schedule .filters ul li:last-child::after {
  display: none;
}
#schedule .filters ul li.active,
#schedule .filters ul li:hover {
  color: #ffffff;
}
#schedule .filters-content {
  margin-top: 50px;
}
#schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/* 
---------------------------------------------
trainers
--------------------------------------------- 
*/

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
  padding: 40px;
  height: 100%;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

#trainers .trainer-item ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

#trainers .trainer-item ul.social-icons li:last-child {
  margin-right: 0px;
}

#trainers .trainer-item ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

#trainers .trainer-item ul.social-icons li a:hover {
  color: #ffffff;
}

#certifications img {
  border-radius: 20px;
}

.card-flip {
}

.card-flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
}

.card-flip:hover .card-flip-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  transform: rotateY(0deg);
}

.card-front img {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

.card-back {
  transform: rotateY(180deg);
  position: relative;
}

.card-back img {
  filter: blur(4px) opacity(0.5);
}

.card-back h3 {
  text-transform: uppercase;
  font-size: 15px;
  color: #ffffff;
  border-radius: 21px;
  border-radius: 50px;
  background: linear-gradient(145deg, #1167cf, #003b83);
  box-shadow: 3px 3px 5px #002f6894, -3px -3px 5px #003f8c85;
  position: fixed;
  top: 50%;
  left: 17%;
  padding: 15px;
}

#actualites .card {

  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.4);
  border-radius: 1em;

}

#actualites h3 {
  font-weight: 600;
  background: linear-gradient(145deg, #1167cf, #003b83);
  color: #fff;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
}

#actualites .card img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-body-acutalite {
  padding: 1rem;
  border-radius: 1em;
}

.lireplus{
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.lireplus button {
  background-color: #787a7d;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.lireplus button:hover {
  background-color: #414345;
  scale: 1.1;
  
}

.actualiteContent p {
  text-align: justify;
  white-space: pre-line;
  line-height: 22px;
}

#actualiteFooter p {
  font-weight: 600;
  color: #000000;
}
/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-form form {
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  margin: 30px;
}


.contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

#candidature-spontanee .contact-form {
  padding: 80px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/carriere/proccessus5.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-form label {
  color: #151717;
  font-weight: 600;
}

.contact-form input, 
.contact-form select,
.contact-form textarea {
  border: 1px solid #ffffff7d;
  border-radius: 10px;
  font-size: 13px;
  background-color: #f9f9f9;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
  transition: 0.2s ease-in-out;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 55, 122, 0.2);
  background-color: #fff;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ffffff;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #132541;
}

#offre_images img{
  min-height: 200px;
  width: 100%;
}

.card {
  height: 100%;
}

#offre_images .col-md-4 {
  margin-bottom: 10px;
}
/* 
---------------------------------------------
Mot du directeur
--------------------------------------------- 
*/

.container-mot_directeur {
  position: relative;
  text-align: center;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 2px 2px 30px #ffffff;
}

.container-mot_directeur p {
  font-family: "Handlee", cursive;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  white-space: pre-line;
}

.signature {
  justify-content: space-between;
  display: flex;
}

@media (max-width: 1000px) {
  .signature {
    flex-direction: column;
  }
}

/* 
---------------------------------------------
Mot engagement
--------------------------------------------- 
*/

.container-notre_engagement {
  text-align: center;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 2px 2px 30px #ffffff;
}

.container-notre_engagement p {

  text-align: justify;
  white-space: pre-line;
}

/*
---------------------------------------------
Chiffres clés
---------------------------------------------
*/


.number-counter {
  font-size: 25px;
}

.counter {
  background : linear-gradient(145deg, #1167cf, #003b83);
  padding: 20px;
  margin-bottom: 20px;
  height: 100%;
  color: #fff;
  border-radius: 10px;
}

.counter h3 {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight:bold;
}

.count-number {
  color: #ffffff;
  font-size: 26px;
  line-height: normal;
}

.count-text {
  color: #ffffff;
  font-size: 17px;
  line-height: normal;
  white-space: pre-line;
  text-align: left;
}

.counter ul {
  font-size: 16px;
}

/*
---------------------------------------------
video 
---------------------------------------------
*/

.video-container {
  max-width: 100%;
  overflow: hidden;
}


@media (max-width: 1400px) {
  .video-responsive {
    width: 100%
  }
}

@media (max-width: 1000px) {
  .video-responsive {
    width: 100%
  }
}

@media (max-width: 500px) {
  .video-responsive {
    width: 100%
  }
}

/*
---------------------------------------------
Timeline
---------------------------------------------
*/

.main-timeline {
  position: relative
}

.main-timeline:before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: #c6c6c6;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}

.main-timeline .timeline {
  margin-bottom: 40px;
  position: relative
}

.main-timeline .timeline:after {
  content: "";
  display: block;
  clear: both
}

.main-timeline .icon {
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.main-timeline .icon:before,
.main-timeline .icon:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.33s ease-out 0s
}

.main-timeline .icon:before {
  background: #fff;
  border: 2px solid #232323;
  left: -3px
}

.main-timeline .icon:after {
  border: 2px solid #c6c6c6;
  left: 3px
}

.main-timeline .timeline:hover .icon:before {
  left: 3px
}

.main-timeline .timeline:hover .icon:after {
  left: -3px
}

.main-timeline .date-content {
  width: 50%;
  float: left;
  margin-top: 22px;
  position: relative
}

.main-timeline .date-content:before {
  content: "";
  width: 36.5%;
  height: 2px;
  background: #c6c6c6;
  margin: auto 0;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0
}

.main-timeline .date-outer {
  width: 125px;
  height: 125px;
  font-size: 16px;
  text-align: center;
  margin: auto;
  z-index: 1
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
  content: "";
  width: 125px;
  height: 125px;
  margin: 0 auto;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.33s ease-out 0s
}

.main-timeline .date-outer:before {
  background: #fff;
  border: 2px solid #232323;
  left: -6px
}

.main-timeline .date-outer:after {
  border: 2px solid #c6c6c6;
  left: 6px
}

.main-timeline .timeline:hover .date-outer:before {
  left: 6px
}

.main-timeline .timeline:hover .date-outer:after {
  left: -6px
}

.main-timeline .date {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 27%;
  left: 0
}

.main-timeline .month {
  font-size: 18px;
  font-weight: 700
}

.main-timeline .year {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #d71616;
  line-height: 36px
}

.main-timeline .timeline-content {
  margin-top: 25px;
  width: 50%;
  padding: 20px 0 20px 50px;
  float: right
}

.main-timeline .title {
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 15px 0
}

.main-timeline .description {
  margin-bottom: 0
}

.main-timeline .timeline:nth-child(2n) .date-content {
  float: right
}

.main-timeline .timeline:nth-child(2n) .date-content:before {
  left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
  padding: 20px 50px 20px 0;
  text-align: right
}

@media only screen and (max-width: 991px) {
  .main-timeline .date-content {
      margin-top: 35px
  }
  .main-timeline .date-content:before {
      width: 22.5%
  }
  .main-timeline .timeline-content {
      padding: 10px 0 10px 30px
  }
  .main-timeline .title {
      font-size: 17px
  }
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      padding: 10px 30px 10px 0
  }
}

@media only screen and (max-width: 767px) {
  .main-timeline:before {
      margin: 0;
      left: 7px
  }
  .main-timeline .timeline {
      margin-bottom: 20px
  }
  .main-timeline .timeline:last-child {
      margin-bottom: 0
  }
  .main-timeline .icon {
      margin: auto 0
  }
  .main-timeline .date-content {
      width: 95%;
      float: right;
      margin-top: 0
  }
  .main-timeline .date-content:before {
      display: none
  }
  .main-timeline .date-outer {
      width: 110px;
      height: 110px
  }
  .main-timeline .date-outer:before,
  .main-timeline .date-outer:after {
      width: 110px;
      height: 110px
  }
  .main-timeline .date {
      top: 30%
  }
  .main-timeline .year {
      font-size: 24px
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      width: 95%;
      text-align: center;
      padding: 10px 0
  }
  .main-timeline .title {
      margin-bottom: 10px
  }
}

/*time line rh */

.main-timeline-rh:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline-rh .timeline-rh{
    width: calc(50% + 70px);
    margin: 0 5px 0 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 20px;
    float: left;
}
.main-timeline-rh .timeline-rh-content{
    color: #555;
    background: #fff;
    min-height: 130px;
    padding: 30px 150px 30px 30px;
    border-top: none;
    display: block;
    position: relative;
    border-radius: 20px;
}
.main-timeline-rh .timeline-rh-content:before{
    content: "";
    background-color: #00C6DA;
    height: 100%;
    width: 70px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 20px;
}
.main-timeline-rh .timeline-rh-content:hover{ text-decoration: none; }
.main-timeline-rh .timeline-rh-icon{
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 16px;
}
.main-timeline-rh .timeline-rh-year{
    color: #333;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 90px;
}
.main-timeline-rh .title{
    color: #00C6DA;
    font-size: 23px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.main-timeline-rh .description{
    font-size: 14px;
    margin: 0;
}
.main-timeline-rh .timeline-rh:nth-child(even){
    float: right;
    margin: 0 0 0 5px;
}
.main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-content{ padding: 30px 30px 30px 150px; }
.main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-content:before{
    right: auto;
    left: 0;
}
.main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-icon{
    right: auto;
    left: 10px;
}
.main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-year{
    right: auto;
    left: 90px;
}
.main-timeline-rh .timeline-rh:nth-child(4n+2) .timeline-rh-content:before{ background-color: #00A6F9; }
.main-timeline-rh .timeline-rh:nth-child(4n+2) .title{ color: #00A6F9; }
.main-timeline-rh .timeline-rh:nth-child(4n+3) .timeline-rh-content:before{ background-color: #FF3E7D; }
.main-timeline-rh .timeline-rh:nth-child(4n+3) .title{ color: #FF3E7D; }
.main-timeline-rh .timeline-rh:nth-child(4n+4) .timeline-rh-content:before{ background-color: #7438B9; }
.main-timeline-rh .timeline-rh:nth-child(4n+4) .title{ color: #7438B9; }
@media screen and (max-width:767px){
    .main-timeline-rh .timeline-rh,
    .main-timeline-rh .timeline-rh:nth-child(even){
        width: 100%;
        margin: 0 0 30px;
    }
}
@media screen and (max-width:576px){
    .main-timeline-rh .timeline-rh .timeline-rh-content,
    .main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-content{
        text-align: center;
        padding: 130px 25px 25px;
    }
    .main-timeline-rh .timeline-rh .timeline-rh-content:before,
    .main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-content:before{
        height: 70px;
        width: 100%;
    }
    .main-timeline-rh .timeline-rh-icon,
    .main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-icon{
        transform: translateY(0) translateX(-50%);
        top: 16px;
        left: 50%;
        right: auto;
    }
    .main-timeline-rh .timeline-rh-year,
    .main-timeline-rh .timeline-rh:nth-child(even) .timeline-rh-year{
        top: 80px;
        left: 50%;
        right: auto;
    }
}

.counter-RH {
  background: linear-gradient(to bottom,#d7808e, #4b9df5f5,  #ffffffb0); /* Dégradé avec une touche de rose */
  padding: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  height: 100%;
  border-radius: 30px;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Ajoute une transition pour une animation fluide */
  scale: 1.05;
}

.counter-RH:hover {
  background: linear-gradient(to bottom, #4b9df5, #d7808e, #ffffff); /* Nouveau dégradé de bleu au survol */
  scale: 1.1;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1px;
}

.counter-RH h2{
  background-color: #ffffff;
  border-radius: 20px;
  border: 3px solid #fff;
  margin-bottom: 20px;
  font-weight: 800;
}

.counter-RH img {
  margin-bottom: 20px;
}

.counter-RH h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.counter-RH text {
  font-size: 36px;
  font-weight: 800;
}

.counter-RH h2{
  background-color: #ffffff;
  border-radius: 20px;
  border: 3px solid #fff;
  margin-bottom: 20px;
  font-weight: 800;
}

.counter-RH img {
  margin-bottom: 20px;
}

.counter-RH h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.counter-RH text {
  font-size: 36px;
  font-weight: 800;
}


.counter-HF-globale h2{
  background-color: #ffffff;
  border-radius: 20px;
  border: 3px solid #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 800;
}

.counter-HF-globale text {
  font-size: 36px;
  font-weight: 800;
}

/*
---------------------------------------------
siege
---------------------------------------------
*/

/* Style du conteneur */
.pin-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


/* Animation pour l'effet de cercle */
@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.image-thumb{
  position: relative;
}

/* Style du cercle d'animation */
.pin-container::before {
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  position: relative;
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 2vw; /* Ajustez la taille du cercle */
  height: 2vw; /* Ajustez la taille du cercle */
  animation: pulse 1.5s infinite;
  top: 0%;
  left: -45%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 1900px) {
  .pin-container::before {
    top: -23%;
    left: -63%;
  }
  
}

@media screen and (max-width: 1500px) {
  .pin-container::before {
    top: 0%;
    left: -33%;
  }
}

.cdr-container::before {
  border: 2px solid red; /* Couleur du cercle */
}

.cdr-container .icon {
  color: red; /* Couleur de l'icône */
}

.site-container::before {
  border: 2px solid blue; /* Couleur du cercle */
}

.site-container .icon {
  color: blue; /* Couleur de l'icône */
}

.filiale-container::before {
  border: 2px solid rgb(185 8 255); /* Couleur du cercle */
}

.filiale-container .icon {
  color: rgb(185 8 255); /* Couleur de l'icône */
}

.partenaire-container::before {
  border: 2px solid rgb(0, 119, 12); /* Couleur du cercle */
}

.partenaire-container .icon {
  color: rgb(0, 119, 12); /* Couleur de l'icône */
}


.icon {
  width: 17px!important;
}

.pin:hover::before {
  position: absolute;
  top: -40px; /* Ajustez la position du texte */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond */
  color: white; /* Couleur du texte */
  padding: 5px 10px; /* Espace intérieur */
  border-radius: 5px; /* Coins arrondis */
  white-space: nowrap; /* Empêche le texte de se retourner */
  z-index: 999;
}

#icon-activite:hover {
  transform: scale(1.2);
}

.icon-animation {
  margin: 0 5px;
  animation: increment 1s infinite;
}

@keyframes increment {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-20px);
  }
  100% {
      transform: translateY(0);
  }
}


/*
---------------------------------------------
Sommaire
---------------------------------------------
*/

.scrollspy-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  bottom: 0;
  z-index: 999;
  flex-direction: column;
  justify-content: center;
}

/* Styliser les liens qui ne sont pas actifs ni survolés */
.scrollspy-container a:not(.active):not(:hover) {
  display: block;
  padding: 6px; /* Réduire la taille du padding */
  text-align: center;
  background-color: rgb(0 0 0 /60%);
  font-size: 0px; /* Réduire la taille de la police */
  text-decoration: none;
  transition: all 0.3s;
  width: 12px;
  border-radius: 50%;
  margin: 10px;
}

/* Styliser les liens actifs et survolés */
.scrollspy-container a.active {
  /* Style pour les liens actifs ou survolés */
  display: block;
  padding: 8px; /* Réduire la taille du padding */
  text-align: center;
  background-color: rgb(0 0 0 /100%);
  font-size: 0px; /* Réduire la taille de la police */
  text-decoration: none;
  transition: all 0.3s;
  width: 17px;
  border-radius: 50%;
  border: #000 solid 1px;
  margin: 10px!important;
}
.scrollspy-container a:hover {
  /* Style pour les liens actifs ou survolés */
  display: block;
  padding: 8px; /* Garder la taille du padding d'origine */
  font-size: 11px; /* Garder la taille de la police d'origine */
  width: 100%;
  text-transform: uppercase;
  color: #fff;
  background-color: rgb(0 0 0 /100%);
  font-weight: bold;
  border: #000 solid 1px;
  border-radius: 30px;
}

@media screen and (max-width: 800px) {
  .scrollspy-container a:not(.active):not(:hover) {
    display: block;
    padding: 4px; 
    text-align: center;
    background-color: rgb(0 0 0 /60%);
    font-size: 0px; /* Réduire la taille de la police */
    text-decoration: none;
    transition: all 0.3s;
    width: 12px;
    border-radius: 50%;
    margin: 10px;
  }
  .scrollspy-container a.active{
    display: block;
    padding: 8px; /* Garder la taille du padding d'origine */
    font-size: 0px; /* Garder la taille de la police d'origine */
    width: 100%;
    color: #fff;
    background-color: rgb(0 0 0 /100%);
    text-decoration: none;
    font-weight: bold;
    border: #000 solid 1px;
    width: 17px;
    border-radius: 50%;
  }
  .scrollspy-container a:hover {
    display: block;
    padding: 4px; 
    text-align: center;
    background-color: rgb(0 0 0 /60%);
    font-size: 0px; /* Réduire la taille de la police */
    text-decoration: none;
    transition: all 0.3s;
    width: 12px;
    border-radius: 50%;
    margin: 10px;
  }
  
}

  /*---------------------------------------------
  Carrieres
  ---------------------------------------------
  */

.container-photo {
  text-align: center;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(14 17 20 / 0.6);
}

.image-overlay h5 {
  font-size: 50px;
  color: #fff;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-top: 20px;
  margin-bottom: 70px;
}

.image-overlay p {
  font-size: 25px;
  color: #fff;
  margin-bottom: 0px;
}

@media screen and (max-width: 800px) {
  .image-overlay h5 {
    font-size: 25px;
    margin-bottom: 10px;
  }
  
  .image-overlay p {
    font-size: 12px;
  }
}




.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 2px solid rgba(0,0,0,.125);
  box-shadow: 0px 0px 25px 3px #939393a6;
 
}

.card:hover {
  scale: 1.05;
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.5rem 1.5rem;
}
/*
---------------------------------------------
Actualités
---------------------------------------------
*/


/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
.copyright {
  padding: 25px 0;
  border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer-list a:hover {
  color: #ffffff !important;
}



/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, #ffffff, #0c1218);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* l'animation de rotation */
@keyframes rotate-zoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.6);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.loading-image {
  animation: rotate-zoom 1.3s linear infinite;
  width: 50px; 
  height: 50px; 
}

/* carousel */

.marquee {
  margin: 0 auto;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, white 5%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, white 5%, transparent 100%);
}
.marquee .marquee__content {
  display: flex;
  opacity: 0;
}
.marquee .marquee__content.go {
  opacity: 1;
  animation: marquee 45s linear infinite forwards;
}
.marquee .marquee__content:hover {
  animation-play-state: paused;
}
.marquee .marquee__list {
  display: flex;
  justify-content: space-around;
  width: 33.33%;
  /* reset list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.marquee .marquee__list li {
  padding: 0 10px;
}

.marquee__list img {
  /* height: 100px; */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.6%);
  }
}


/* carousel 2 */

@keyframes marquee2 {
  100% {
    transform: translateX(0);
  }
  0% {
    transform: translateX(-66.6%);
  }
}

.marquee2 {
  margin: 0 auto;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.marquee2:before, .marquee2:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 1;
}
.marquee2:before {
  left: 0;
  background: linear-gradient(to right, white 5%, transparent 100%);
}
.marquee2:after {
  right: 0;
  background: linear-gradient(to left, white 5%, transparent 100%);
}
.marquee2 .marquee2__content {
  display: flex;
  opacity: 0;
}
.marquee2 .marquee2__content.go {
  opacity: 1;
  animation: marquee2 45s linear infinite forwards;
}
.marquee2 .marquee2__content:hover {
  animation-play-state: paused;
}
.marquee2 .marquee2__list {
  display: flex;
  justify-content: space-around;
  width: 33.33%;
  /* reset list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.marquee2 .marquee2__list li {
  padding: 0 10px;
}

.marquee2__list img {
  height: 100px;
}

.link-film {
  position: relative;
  width: 80%;
  height: 80%;
  border: none;
  background-color: #dadce7;
}

.link-film:hover {
  scale:1.1;
}

.link-film::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  /* Couleur noire transparente */
  transition: background 0.3s ease;
  /* Ajouter une transition fluide */
}

.link-film:hover::before {
  background: rgba(0, 0, 0, 0.5);
  /* Couleur noire transparente avec une opacité de 0.5 lorsqu'il est survolé */
}

.image-bg {
  position: relative;
  background-image: url('chemin/vers/image.jpg');
  background-size: cover;
  background-position: center;
  border: none!important;
  border-radius: 20px;
}

.image-bg-container {
  background-color: rgb(14 17 20 / 0.6);

  backdrop-filter: blur(5px);
}


.carousel-control-prev {
  left: -50px;
}

.carousel-control-next {
  right: -50px;
}

@media (max-width: 768px) {
  .carousel-control-next {
    right: -20px;
  }
  .carousel-control-prev {
    left: -20px;
  }
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px; /* Ajustez la taille du bouton selon vos préférences */
  padding: 10px 20px; /* Ajustez la taille du bouton selon vos préférences */
  background-color: #ffffff; /* Couleur de fond du bouton */
  border: 2px solid #000000; /* Bordure du bouton */
  border-radius: 8px; /* Arrondi de la bordure */
  cursor: pointer;
}

/* 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;
  text-transform: uppercase;
  margin-bottom: 5%;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 1rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 992px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 10rem;
    font-size: 10rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

#introduction-offres i{
  font-size: 100px;
  color: #ffffff;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 992px) {
  .carousel-caption-home {
    text-transform: uppercase;
    font-size: 10px;
    color: #ffffff;
    background-color: rgb(0 0 0 / 55%);
  }

  .main-banner .caption h2 {
    font-size: 2rem;
  }
  #features {
    margin-bottom: 110px;
  }
  #features .feature-item {
    margin-bottom: 30px;
  }
  #our-classes .tabs-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .trainer-item {
    margin-bottom: 30px;
  }
  #contact-us #map {
    margin-bottom: -7px;
  }
  #contact-us .contact-form {
    padding: 10px;
  }

  #candidature-spontanee .contact-form {
    padding: 10px;
  }
  #contact-us .contact-form #contact {
    padding: 30px;
  }

}

@media (max-width: 450px) {
  .feature-item .right-content a.text-button {
    margin-left: 130px;
  }
}

.disabled-link:hover {
  cursor: not-allowed;
  content: "En cours de développement";
}


.lead {
  text-align: justify;
}


#mot-DG-container {
  padding: 20px;
  border-radius: 5px;
  background: #fffffb;
  position: relative;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  .profile-img {
    height: 200px;
    width: 200px;
    background: url(../images/societe/Stephane_Charre.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: -33px;
    left: -33px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  }
  .profile-name {
    margin: 40px 0px 70px 0px;
  }

  p {
    white-space: pre-line;
    text-align: justify;
    font-family: "Handlee", cursive;
  }
}

@media (max-width: 768px) {
  #mot-DG-container {
    .profile-name {
      margin: 160px 0px 130px 0px;
    }
  }
}

#mot-DRH-container {
  padding: 20px;
  border-radius: 5px;
  background: #fffffb;
  position: relative;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  .profile-img {
    height: 200px;
    width: 200px;
    background: url(../images/carriere/Celine_Thibaux.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: -33px;
    left: -33px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  }
  .profile-name {
    margin: 40px 0px 70px 0px;
  }

  p {
    white-space: pre-line;
    text-align: justify;
    font-family: "Handlee", cursive;
  }
}

@media (max-width: 768px) {
  #mot-DRH-container {
    .profile-name {
      margin: 160px 0px 130px 0px;
    }
  }
}


#candidature-form label {
  color: #151717;
  font-weight: 600;
}

#candidature-form input, 
#candidature-form select,
#candidature-form textarea {
  border: 1px solid #ffffff7d;
  border-radius: 10px;
  font-size: 13px;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
  transition: 0.2s ease-in-out;
}

#candidature-form input:focus,
#candidature-form select:focus,
#candidature-form textarea:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 55, 122, 0.2);
  background-color: #fff;
}

#candidature-form textarea {
  height: 150px;
  resize: none;
}

#card-offre-home {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: 0.3s ease-in-out;
}

.section-heading-card-home {
  text-align: center;
}

.section-heading-card-home h2 {
  font-size: 30px;
  font-weight: 500;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-bottom: 22px;
}

.section-heading-card-home h2 em {
  font-style: normal;
  color: #ffffff;
}

#card-offre-home h4 {
  font-size: 18px;
}

#card-offre-home text {
  font-size: 14px;
}

#card-offre-home h3 {
  font-weight: 600;
  background: linear-gradient(145deg, #1167cf, #003b83);
  color: #fff;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
}

#card-offre-home img {
  border-radius: 10px;
  width: 70%;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  #card-offre-home img {
    width: 100%;
  }
}

#card-home-height1, 
#card-home-height2, 
#card-home-back1, 
#card-home-back2 {
  background: linear-gradient(158deg, #1a1a1a, #333333); /* dégradé gris-noir */
  border-radius: 20px;
  color: white; /* texte clair sur fond sombre */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ombre discrète */
  padding: 1.5rem;
  transition: transform 0.2s ease-in-out;
}

#card-home-height1:hover, 
#card-home-height2:hover, 
#card-home-back1:hover, 
#card-home-back2:hover {
  transform: translateY(-5px); /* effet de survol subtil */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.alert {
  border-radius: 10px;
  bottom: 10px;
  right : 10px;
  width: 30%;
  position: fixed;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
}

.alert li {
  list-style-type: none;
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1157 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 300px;
  width: 100%;
  color: #333;
  text-align: left;
  box-shadow: none !important;
}
figure.snip1157 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.snip1157 img {
  max-width: 100%;
  vertical-align: middle;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  margin: 40px 0 0 10px;
}
figure.snip1157 blockquote {
  display: block;
  border-radius: 8px;
  position: relative;
  background-color: #fafafa;
  padding: 25px 50px 30px 50px;
  font-size: 0.8em;
  font-weight: 500;
  margin: 0;
  line-height: 1.6em;
  font-style: italic;
}
figure.snip1157 blockquote:before,
figure.snip1157 blockquote:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 50px;
  opacity: 0.3;
  font-style: normal;
}
figure.snip1157 blockquote:before {
  top: 25px;
  left: 20px;
}
figure.snip1157 blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 0;
}
figure.snip1157 .arrow {
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #fafafa;
  margin: 0;
  position: absolute;
}
figure.snip1157 .author {
  position: absolute;
  bottom: 45px;
  padding: 0 10px 0 120px;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.snip1157 .author p {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
  color: #ffffff;
}
figure.snip1157 .author span {
  font-weight: 400;
  text-transform: none;
  padding-left: 5px;
  font-size: 0.8em;
  color: #ffffff;
}