/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Author: Ton Nom
Author URI: https://tonsite.com/
Description: Thème enfant pour OceanWP.
Template: oceanwp
Version: 1.0
*/

/* CSS personnalisé commence ici */
#site-logo #site-logo-inner {
	position: relative;
	z-index: 1;
}

.elementor-button-wrapper a:focus, 
.menu-item a:focus, 
.elementor-widget-container a:focus,
.oceanwp-mobile-menu-icon a:focus, 
.language-options a:focus,
#mobile-dropdown ul li a .dropdown-toggle:focus {
	outline : 0px !important;
}

#menu-item-2506 a span, #menu-item-39 a span, #menu-item-2630 a span {
  background-color: #ffffff;
  color: #FE7254;
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px;
  transition: all 0.3s ease;
}

.center-menu #site-navigation-wrap {
	width: 100%;
}
#site-header-inner {
	width: 100% !important;
}
@media (min-width: 959px) and (max-width: 1200px) {
  #site-header #site-navigation, 
  .main-navigation, 
  .navigation-wrap {
    justify-content: flex-start !important;
    padding-left: 50px;
  }
}

/* Au survol : inversion des couleurs */
#menu-item-2506 a span:hover, #menu-item-39 a span:hover, #menu-item-2630 a span:hover {
  background-color: #FE7254;
  color: #ffffff;
}
/****GRADIENT BACKGROUND****/
#top-bar {
	display : none;
}
.bg-gradient, #site-header {
    background: 
        radial-gradient(99.13% 871.76% at 99.13% 3.45%, rgba(254, 114, 84, 0.6) 0%, rgba(196, 35, 0, 0.6) 100%), 
        linear-gradient(0deg, #FE7254, #FE7254) !important;
}
.custom-logo-link img {
	width : 37px !important;
	height : auto;
}
/******SUB MENU START*******/
/******Large window START*******/
@media (min-width: 959px) {
  .menu-item-has-children > .sub-menu {
    display: none !important;
  }

	#site-header-inner {
		margin-left: 128px;
	}
  #site-header #site-navigation, 
  .main-navigation, 
  .navigation-wrap {
      position: relative;
      width: 100%;
	  align-items: center;
      justify-content: center;
      display: flex;
  }

  .menu-item-has-children {
    position: relative;
  }

  .menu-item-has-children > a {
    position: relative;
    z-index: 1000;
  }

  .sub-menu {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #FFFFFF99;
    z-index: 999;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
    margin: 0;
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .sub-menu.submenu-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .submenu-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: flex-start;
  }

  .submenu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    width: 70%;
    text-align: left;
    align-items: start;
  }

  .sub-menu li {
    min-width: 0px;
    margin: 0;
    box-sizing: border-box;
  }

  .sub-menu a {
    color: #333;
    font-family: Poppins !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    transition: color 0.3s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sub-menu a:hover {
    color: #ff5733;
    background-color: transparent !important;
  }

  .sub-menu,
  .sub-menu ul,
  .sub-menu li {
    list-style: none;
  }

  .submenu-title {
    font-family: Poppins !important;
    font-weight: 600 !important;
    font-size: 28px;
    margin-bottom: 20px;
  }

  @supports (-webkit-touch-callout: none) {
    .sub-menu {
      left: 0;
      width: 100vw;
    }
  }
}
/******Large window END*******/
/******Mobile window START*******/
#mobile-dropdown {
	min-height: calc(100vh - 132px) !important;
  	overflow-y: auto;
	background-color: white;
	padding-top : 15px;
}
#mobile-dropdown ul li {
	border : 0px !important;
}
#mobile-dropdown ul li a {
	padding: 15px 15px !important;
	font-family: Poppins;
	font-weight: 400;
	font-size: 24px !important;
	line-height: 130% !important;
	letter-spacing: 0%;
}
#mobile-dropdown ul li .sub-menu li a {
	font-family: Poppins;
	color:black;
	font-weight: 400;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0%;
}
#mobile-dropdown #mobile-menu-search {
	display: none !important;
}
.fa-bars-staggered{
	font-size : 30px;
}
/* Cacher l'ancien + ou - si besoin */
#mobile-dropdown ul li a .dropdown-toggle:before {
  content: '\f054' !important; /* Unicode pour chevron-right */
  font-family: "Font Awesome 6 Free"; /* Peut varier selon ta version */
  font-weight: 900; /* Solid */
  display: inline-block;
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Quand le menu est ouvert (ajuste cette classe si OceanWP utilise une autre) */
#mobile-dropdown ul li.active>a>.dropdown-toggle:before {
  content: '\f078' !important;
}

/******Mobile window END*******/
/******SUB MENU END*******/
/****** FOOTER START ******/
#footer .elementor-widget-heading {
	min-height : 20px;
	margin-bottom : 15px;
}	
/****** FOOTER ENDS *****/

/** HEADER STARTS **/

h1 span{
	font-weight: 700;
}

a:focus,
a:active {
	outline: none;
	border: none!important;
}

/** --------------langue switcher-------------------**/
/* Styles pour le sélecteur de langue dans l'en-tête */
.language-switcher {
  position: absolute;
  right: 128px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 1001;
}

.language-switcher .dropdown-toggle {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.language-switcher .dropdown-toggle:after {
  content: '\f078';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  font-size: 10px;
}

/* Menu déroulant des langues */
.language-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: none;
  z-index: 1010;
  min-width: 120px;
}

.language-options.show {
  	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 196px;
	height: 143px;
	background-color: #FFFFFF99;
	opacity : 1;
	backdrop-filter: blur(10px);
	margin-top: 20px;
	border-radius: 0px;
}

.language-options a {
  display: block;
  padding: 8px 15px;
  color: #03071E;
  text-decoration: none;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: background-color 0.2s;
}

.language-options a:hover,
.language-options a.active {
  color: #03071E;
	font-weight: 700;
}

/* Adaptation pour le mobile */
@media (max-width: 959px) {
  .language-switcher {
    display: none; /* Cacher dans l'en-tête sur mobile */
  }
  
  .mobile-language-switcher {
    padding: 10px 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 15px;
  }
  
  .mobile-language-switcher a {
    padding: 12px 15px !important;
    font-size: 18px !important;
    display: block;
    font-family: Poppins, sans-serif !important;
    color: #333 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .mobile-language-switcher a:last-child {
    border-bottom: none;
  }
  
  .mobile-language-switcher .current-language {
    font-weight: 600;
    color: #ff5733 !important; /* Couleur d'accent correspondant à votre design */
  }
}

/* Ajustement pour correspondre au design Figma */
@media (min-width: 960px) {
  .language-switcher {
    margin-left: 20px;
  }
  
  .language-switcher .dropdown-toggle {
    background-color: transparent;
    border: none;
    color: white;
    padding: 5px;
  }
  
  .language-switcher .dropdown-toggle span {
    margin-right: 5px;
  }
}

.center-menu #site-navigation-wrap {
	right: 0px !important;
}
.dropdown-toggle img {
	margin: 5px;
	width: 11px;
}
/**MOBILE LANGUE SWITCHER **/
.figma-mobile-language-switcher-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 40px; /* Distance from bottom of mobile-dropdown container */
    left: 0;
    right: 0;
}

/* Main container styling */
.figma-mobile-language-switcher {
    width: auto;
    display: flex;
    flex-direction: column-reverse; /* Reversed to position options above selector */
    align-items: center;
    position: relative;
}

/* Language selector button styling */
.figma-language-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ff6347;
    border-radius: 4px;
    /*border-top-left-radius: 4px;
	border-top-right-radius: 4px;*/
    padding: 10px 15px;
	margin-top: 1px;
    width: 131px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
.figma-language-selector:hover, .figma-language-selector:focus, .figma-language-selector:active {
  background-color: #fe7254;
  color: white;
}
.figma-language-selector:hover .figma-arrow-icon img {
  content: url('https://preprod.humans4help.com/wp-content/uploads/2025/04/mobile-menu-arrow.svg');
}

.figma-language-selector:hover .figma-globe-icon img {
  content: url('https://preprod.humans4help.com/wp-content/uploads/2025/04/Vector.svg');
}

/* Globe icon styling */
.figma-globe-icon {
	color : #fe7254;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.figma-globe-icon img {
    width: 11px;
    height: 11px;
}

/* Selected language text */
.figma-selected-language {
    flex-grow: 1;
    text-align: center;
}

/* Arrow icon styling */
.figma-arrow-icon {
	color : #fe7254;
    display: flex;
    align-items: center;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.figma-arrow-icon img {
    width: 11px;
    height: 11px;
}

/* Rotate arrow when options are shown */
.figma-arrow-icon.arrow-up img {
    transform: rotate(180deg);
}

/* Language options dropdown - positioned ABOVE the selector button */
.figma-language-options {
    position: absolute;
    bottom: 100%; /* Position above the selector */
    width: 131px;
    background: #fe7254;
	border-radius: 4px;
    /*border-top-left-radius: 4px;
	border-top-right-radius: 4px;*/
    display: none;
    flex-direction: column;
    z-index: 0;
    overflow: hidden;
}

/* Show language options when active */
.figma-language-options.show {
    display: flex;
	padding: 15px;
}

/* Individual language option */
.figma-language-option {
    padding: 10px 15px;
    color: #FFFFFF80;
    background: none;
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
	
	font-family: Poppins;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
}

.figma-language-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Active language styling */
.figma-language-option.active {
    font-weight: bold;
    position: relative;
	color: white;
	
	font-family: Montserrat;
	font-weight: 600;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;

}

/* Make sure the mobile dropdown has proper positioning */
#mobile-dropdown {
    z-index: 999;
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    /* Ensure the mobile menu is tall enough to have room at the bottom */
    #mobile-dropdown {
        min-height: 100vh;
    }
}
/** HEADER ENDS  **/

/* Postuler formulaire */
.ff-el-group .ff-el-input--label {
	font-family: 'Poppins';
    color: #03071E;
}
.ff-el-input--content .ff-el-form-control {
    border-radius: 0px !important;
    border: 0px !important;
    padding-left: 0px !important;
}
.ff-el-input--content{
	border-bottom: 1px solid black !important;
	margin-left: 15px;
}
.ff-el-group .ff-btn ff-btn-submit {
    background-color: #FE7254 !important;
    color: #ffffff;
}
.soumettre_postuler button {
	background-color: #FE7254 !important;
}