/*
Theme Name: LIZIWEB - Theme enfant Divi
Description: Theme enfant du theme Divi. Vous pouvez desormais le personnaliser sans risquer de perdre vos modifications
Author: LIZIWEB
Author URI: https://liziweb.com
Template: Divi
Version: 1.0
*/

/* ---------- Fonts --------------*/


.italiana-regular {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-style: normal;
}

.tajawal-regular {
  font-family: "Tajawal", serif;
  font-weight: 400;
  font-style: normal;
}

.tajawal-bold {
  font-family: "Tajawal", serif;
  font-weight: 700;
  font-style: normal;
}

h1, h2, h3 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
	font-size:65px;
}
h2 {
	font-size:45px;
}
h3 {
	font-size:36px;
}
p, li {
  font-family: "Tajawal", serif;
  font-weight: 400;
  font-size:19px;
  font-style: normal;
}

@media (max-width:980px) {
h1 {
    font-size: 30px;
}
	
h2 {
    font-size: 30px;
}	
	
h3 {
    font-size: 20px;
    text-transform: uppercase;
}	
	
	
	
}

/* ----------- Menu Header & Footer ----------- */
.menu a {
    font-size: 19px;
    color: black !important;
    cursor: pointer;
}

.menu a:hover {
    color: #C38661 !important;
}

#menu-header li a, #menu-header-english li a {
    font-size: 19px;
	font-family: "Italiana", serif;
	font-weight: bold;
}

.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
    padding: 31px 0px 0px 0px;
}
.et-menu .menu-item-has-children>a:first-child:after {
    padding-top: 40px;
}
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
	color:black!important;
	font-weight:bold;
}
.et_mobile_menu li a {
    border-bottom: 1px solid rgba(0,0,0,.03);
    color: #666;
    padding: 10px 5%;
    display: block;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Italiana';
	text-align: center;	
}
li.menu-item.menu-item-gtranslate-child {
    padding-left: 0px;
}
.et_mobile_menu, .nav li ul {
	border-top:3px solid #442413;
}

@media (max-width:980px) {
a.gt-current-wrapper.notranslate.glink.nturl.gt_raw_link-xxjexk {
    display: none;
}
a.gt-current-lang.notranslate.glink.nturl.gt_raw_link-xxjexk {
    display: none;
}
.et_pb_menu__logo img[src$=".svg"] {
    width: 100%;
    max-height: 80px!important;
}
}

@media (min-width:980px) {
.et_pb_menu__logo img[src$=".svg"] {
    padding-bottom:20px;
}
}

/* fleche sur item niveau 1 mobile pour ouverture sous menu*/

/* faire menu mobile avec sous-menu fermés + fleche par défaut*/
/* attention, intégre aussi du JS dans la personnalisation Divi -> Intégration */

/**** Cela permet de masquer les éléments du sous-menu sur les téléphones portables ****/
#page-container .mobile_nav li ul.hide {
    display: none !important;
}
/**** Cela permet d'ajuster le positionnement et la transparence de l'arrière-plan de l'élément de menu parent sur les téléphones mobiles. ****/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}
/**** Cette opération permet de styliser l'icône et de la déplacer vers la droite ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}
/**** Icône menu fermé : flèche vers le bas ****/
#page-container span.menu-closed:before {
    content: "▾";
    display: block;
    color: #000000!important;
    font-size: 18px;
    font-weight: bold;
}

/**** Icône menu ouvert : flèche vers le haut ****/
#page-container span.menu-closed.menu-open:before {
    content: "▴";
    color: #000000!important;
}
@media (max-width: 980px) {

  /* Niveau 1 */
  .et_pb_menu .et_mobile_menu > li > a {
    font-size: 20px !important;
  }

  /* Niveau 2 uniquement */
  .et_pb_menu .et_mobile_menu > li > ul.sub-menu > li > a {
    font-size: 16px !important;
  }

  /* Niveau 3 uniquement */
  .et_pb_menu .et_mobile_menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    font-size: 12px !important;
  }
}
/* ----------- Component boutons ----------- */

/* Transparent to white */
.mhk_content_transparent_white, .mhk_content_transparent_white-recrutement, .mhk_content_transparent_white-recrutement-uk{
    border: solid 2px white;
    border-radius: 7px;
    color: white;
    background-color: transparent;
    font-size: 15px !important;
    cursor: pointer;
	padding:8px 0px 5px 0px!important;
}

.mhk_content_transparent_white:hover, .mhk_content_transparent_white-recrutement:hover, .mhk_content_transparent_white-recrutement-uk:hover {
    background-color: white !important;
    border: solid 2px white !important;
    color: #442413;
}


/* Transparent to brown */
.mhk_content_transparent_brown {
    border: solid 2px #C38661;
    border-radius: 7px;
    color: white;
    background-color: transparent;
    font-size: 15px !important;
    cursor: pointer;
	padding:8px 0px 5px 0px!important;
}

.mhk_content_transparent_brown:hover {
    background-color: #C38661 !important;
    border: solid 2px #C38661 !important;
    color: white;
}


/* Transparent to white & brown */
.mhk_content_transparent_white_brown {
    border: solid 2px white;
    border-radius: 7px;
    color: white;
    background-color: transparent;
    font-size: 15px !important;
    cursor: pointer;
	padding:8px 0px 5px 0px!important;
}

.mhk_content_transparent_white_brown:hover {
    background-color: #C38661 !important;
    border: solid 2px #C38661 !important;
    color: white;
}


/* Brown to transparent */
.mhk_content_brown_transparent {
    border: solid 2px #C38661;
    border-radius: 7px;
    color: white;
    background-color: #C38661;
    font-size: 15px !important;
    cursor: pointer;
	padding:8px 0px 5px 0px!important;
}

.mhk_content_brown_transparent:hover {
    background-color: transparent !important;
    border: solid 2px #C38661 !important;
    color: #C38661;
}



/* Dark brown to transparent */
.mhk_content_dark_brown_transparent {
    border: solid 2px #442413;
    border-radius: 7px;
    color: white;
    background-color: #442413;
    font-size: 15px !important;
    cursor: pointer;
	padding:8px 0px 5px 0px!important;
}

.mhk_content_dark_brown_transparent:hover {
    background-color: transparent !important;
    border: solid 2px #442413 !important;
    color: #442413;
}


/* off-white to transparent */
.mhk_content_off_white_transparent {
    border: solid 2px #F2EEE3;
    border-radius: 7px;
    color: #442413;
    background-color: #F2EEE3;
    font-size: 15px !important;
    cursor: pointer;
	padding-top: 10px;
	padding:8px 10px 5px 10px!important;
}

.mhk_content_off_white_transparent:hover {
    background-color: transparent !important;
    border: solid 2px #F2EEE3 !important;
    color: #F2EEE3;
	padding-top: 10px!important;
}


/* Brown (white text) to transparent */
.mhk_content_brown_white_transparent {
    border: solid 2px #C38661;
    border-radius: 7px;
    color: white;
    background-color: #C38661;
    font-size: 15px !important;
    cursor: pointer;
	padding-top: 10px;
	padding:8px 10px 5px 10px!important;
}

.mhk_content_brown_white_transparent:hover {
    background-color: transparent !important;
    border: solid 2px #C38661 !important;
    color: white;
	padding-top: 10px!important;
}

.et_pb_button:after {
	display:none;
}


/* ----------- Component Lien ----------- */
.mhk_lien_sociaux {
    transition: filter 0.3s ease-in-out;
}

.mhk_lien_sociaux:hover {
    filter: invert(1) grayscale(100%) contrast(300%);
}

.mhk_link_black_brown {
    color: black;
    cursor: pointer;
    text-decoration: underline;
}

.mhk_link_black_brown:hover {
    color: #C38661;
}



/* ------------ Mise ne forme page accueil -----------*/
.metier-home-img-gauche {}
.metier-home-img-droite {}

.col-gauche-img {}
.col-droite-img {}

.col-gauche-txt {}
.col-droite-txt {}

.suiveznous p {
  position: relative;
  font-size: 17px;
  text-align: center;
  color: black;
  background-color: #F2EEE3;
  display: inline-block;
  padding: 0 10px; /* Ajuste pour masquer seulement la partie sous le texte */

}

.suiveznous p::before {
  content: "";
  position: absolute;
  left: -80px; /* Étend la ligne légèrement à gauche */
  right: -80px; /* Étend la ligne légèrement à droite */
  top: 30%;
  height: 3px;
  background: #C38661;
  z-index: -1; /* Met la ligne derrière le texte */
}

p.text-home-metier {
	padding: 15px 0px !important;
	font-size:17px!important;
}

/* responsive présentation métiers*/



@media (max-width:980px) {
.et_pb_column.et_pb_column_1_2.col-droite-txt,.et_pb_column.et_pb_column_1_2.col-gauche-img, .et_pb_column.et_pb_column_1_2.col-gauche-txt, .et_pb_column.et_pb_column_1_2.col-droite-img	 {
    width: 50%!important;
}	
p.text-home-metier {
    display: none;
}
	
.col-droite-txt .et_pb_button_module_wrapper, .col-gauche-txt .et_pb_button_module_wrapper {
    display: none;
}
/*.col-droite-txt .et_pb_module.et_pb_text, .col-gauche-txt .et_pb_module.et_pb_text {
	padding-top:40px!important;
}*/
	
/*.col-droite-txt {
  display: flex;
  align-items: center;
  justify-content: center;
}*/
}

/*@media (max-width:720px) {
.col-gauche-txt .et_pb_module.et_pb_text, .col-droite-txt .et_pb_module.et_pb_text {
    padding-top: 20px!important;
}
}*/
@media (max-width:450px) {
/*.col-gauche-txt .et_pb_module.et_pb_text, .col-droite-txt .et_pb_module.et_pb_text {
    padding-top: 20px!important;
}*/
.text-metier-h3, h5.et_pb_toggle_title {
    font-size:16px!important;
	word-break: keep-all; /* Empêche la coupure des mots */
}

}
/* ---------- Page métiers -------*/

@media (min-width:980px){
.col-metier-desktop .et_pb_gutters3 .et_pb_column{
    margin-right: 3%!important;
}

.et_pb_column.et_pb_column_1_3.col1-metiers{
	width: 40%!important;
	margin-right: 5%!important;
}
.et_pb_column.et_pb_column_1_3.col2-metiers{
	width: 25%!important;
	margin-right: 5%!important;
}
.et_pb_column.et_pb_column_1_3.col3-metiers{
	width: 25%!important;
	margin-right: 0%!important;
}
}

@media (max-width:979px){
	
h5.et_pb_toggle_title {
    display: inline-block;
    Width: 50%;
}
.et_pb_module.et_pb_image.bascule-metier-img {
    width: 50%;
}

h5.et_pb_toggle_title {
    position: relative;
    top: -100px;
    left: 50%;
	width: 45%;
	font-family: "Italiana", serif;
    font-weight: bold;
	font-size:20px;
    font-style: normal;
	text-transform:uppercase;
	padding-left: 20px!important;
}
.et_pb_toggle_close {
    background-color: #fff;
    padding: 0px;
    height: 0px!important;
}
.et_pb_toggle_title:before {
    font-size: 24px;
}
.et_pb_toggle {
    border: none;
}
}
/* --------- Page contacts -----*/

.puce-valeurs {
	
}


.puce-valeurs ul {
  list-style-type: none; /* Supprime les puces par défaut */
  padding-left: 0; /* Ajuste l'alignement */
}

.puce-valeurs li {
  background-image: url('https://myhousekeeper.agency/wp-content/uploads/2025/02/puce-recrutement.svg');
  background-repeat: no-repeat;
  background-position: 0 50%; /* Aligné verticalement au centre */
  background-size: 16px 16px; /* Ajuste la taille de l'image */
  padding-left: 25px; /* Décale le texte pour éviter un chevauchement */
}

/* ----------- Footer -------------*/

.menu-footer-custom a {
	font-size: 19px;
    font-family: "Italiana", serif;
    font-weight: bold;
}

.footer-infos-fin p {
	font-size: 13px;
}


/* ******** Formulaire Gravity Forms ---------*/

p.gform_description {
    display: none;
}
.gform_wrapper.gravity-theme .gfield_label {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 0;
    color: black;
    padding-top: 20px;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-full {
    font-size: 12px;
	color:black;
}
input#gform_submit_button_1, input#gform_submit_button_2 {
    background-color: #df9e80;
    color: white;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 10px;
	border:none;
}
.gform_wrapper.gravity-theme * {
    border-radius: 10px;
}
button.pum-close.popmake-close {
    background-color: #df9e80!important;
    font-weight: bold!important;
    color: black!important;
}


/* -------- Formulaire consentement -----*/

div#cmplz-message-1-optin p {
    font-size: 12px;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    height: 35px;
}
#cmplz-manage-consent .cmplz-manage-consent {
    bottom: -10px!important;
	right: 10px;
    padding: 5px 15px;
}

/* -------------- Page d'offres d'emploi ---------------*/
/* 1) Uniquement dans la ligne concernée */
.images-offres-emploi .et_pb_text_inner p{
  display: flex !important;
  align-items: center !important; /* alignement vertical net */
  margin: 0 !important;
}

/* 2) Slot fixe de 50px, en butée à gauche */
.images-offres-emploi .et_pb_text_inner p .slot-picto{
  width: 50px !important;
  flex: 0 0 50px !important;
  display: flex !important;
  justify-content: flex-start !important; /* image collée à gauche */
  align-items: center !important;
}

/* 3) Picto : 28px de haut, proportions conservées */
.images-offres-emploi .et_pb_text_inner p .slot-picto img.picto-offre-emploi{
  height: 28px !important;
  width: auto !important;
  max-width: 50px !important;
  display: block !important;
}

/* 4) Le texte commence toujours à 50 + 10px */
.images-offres-emploi .et_pb_text_inner p > span:not(.slot-picto){
  margin-left: 10px !important;
  line-height: 1.2 !important;   /* évite les décalages visuels */
}

.bouton-postuler{
  display: table;
  margin: 30px auto 0;
}

/* ------- Affichage page toutes les offres -----------*/

.job-card {
    padding: 20px;
    border-bottom: 2px solid black;
}
.job-card__title {
    font-size: 24px;
    font-weight: bold;
    font-family: 'Tajawal';
}
a.job-card__button {
    padding: 6px 20px;
    background-color: #C38661;
    color: black;
    border-radius: 5px;
}
/* === Carte offre === */
.job-card {
  display: flex;
  justify-content: space-between;
  align-items: center; /* aligne verticalement bouton et contenu */
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
}

/* bloc gauche */
.job-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* titre */
.job-card__title {
  font-size: 20px;
  font-weight: 700;
}

/* meta (localisation + date) */
.job-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  opacity: 0.85;
}

/* bloc bouton */
.job-card__actions {
  flex-shrink: 0; /* empêche le bouton de se compresser */
}

/* bouton */
.job-card__button {
  display: inline-block;
  text-decoration: none;
  transition: all .2s ease;
}
.job-card__button a {
	color:white!important;
	font-weight:bold;
}
.job-card__button:hover {
  background: #000;
  color: #fff;
}
.job-card__location::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("https://liziweb-dev.fr/MHK/wp-content/uploads/2026/02/offre-emploi-employe-de-maison-lieu.svg");
  background-size: contain;
  background-repeat: no-repeat;

}

@media (max-width: 768px) {

  .job-card {
    flex-direction: column;
    align-items: flex-start;
	margin-bottom: 10px;
  }

  .job-card__actions {
    width: 100%;
  }

  .job-card__button {
    width: 100%;
    text-align: center;
  }
}
/* === Bouton Voir === */
.job-card__button {
  color: #ffffff !important;     /* texte blanc */
  font-weight: 700;              /* bold */
  text-decoration: none;         /* enlève le soulignement */
  transition: all 0.25s ease;
}

/* état hover */
.job-card__button:hover {
  color: #ffffff !important;     /* reste blanc */
  background-color: #333333;     /* variation hover */
  border-color: #333333;
  text-decoration: none;
}

/* état focus (accessibilité clavier 👍) */
.job-card__button:focus {
  color: #ffffff !important;
  outline: none;
}
/* mettre les filtres à droite*/
.job-board__filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.job-board__label {
  margin-right: auto; /* pousse le reste à droite */
  margin-bottom: 20px;
}
button, input, select, textarea {
    font-family: inherit;
    border: 2px solid #C38661;
    border-radius: 5px;
    margin-bottom: 20px;
}



/* ------------------------------------*/
/* ------- FAQ ACCORDEON --------------*/

.row-faq-accordeon {
	
}

.faq-accordeon .et_pb_toggle {
    border-radius: 5px !important;
    overflow: hidden;
}

.faq-accordeon .et_pb_toggle.et_pb_toggle_open {
    border-radius: 5px !important;
    overflow: hidden;
}

.faq-accordeon .et_pb_toggle_title,
.faq-accordeon .et_pb_toggle_content {
    overflow: hidden;
}

.faq-accordeon .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.faq-accordeon .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_content {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.faq-accordeon .et_pb_toggle_close {
    background-color: #F2EEE3;
    padding: 20px;
	border: none;
}

.et_pb_accordion.faq-accordeon .et_pb_toggle_title,
.et_pb_accordion.faq-accordeon .et_pb_accordion_item h5.et_pb_toggle_title {
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #000 !important;
	top:0px!important;
	left:0%!important;
	width:100%!important;
	text-transform:none!important;
	padding-left: 0px !important;
	
}

.et_pb_accordion.faq-accordeon .et_pb_toggle_title::after,
.et_pb_accordion.faq-accordeon .et_pb_accordion_item h5.et_pb_toggle_title::after {
    color: #000 !important;
}
.et_pb_accordion.faq-accordeon .et_pb_toggle .et_pb_toggle_title:before {
    right: 0;
    left: auto;
    color: #000!important;
}

@media (max-width: 979px) {
.faq-accordeon .et_pb_toggle_close {
    height: auto !important;
}
}



/*.et_pb_accordion.faq-accordeon .et_pb_toggle_open .et_pb_toggle_title, .et_pb_toggle_open h5.et_pb_toggle_title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}*/

/* --------------------------------------------------------------- */
/* - AFFICHAGE DU BON FOOTER EN FONCTION DE LA LANGUE DE LA PAGE - */
/* --------------------------------------------------------------- */
html[lang="fr-FR"] .hide-en {
	display: none !important;
}

html[lang="en-GB"] .hide-fr {
	display: none !important;
}