/************************** RESPONSIVE FONT ***********************/
html {
 font-size: 1.00rem;
  /* changes a default 16px font size to 10px */
}
/*@media screen and (max-width: 1380px)
{
	html {
  font-size: 60%;
}
}
@media screen and (max-width: 1280px)
{
	html {
  font-size: 58%;
}
}
@media screen and (max-width: 1180px)
{
	html {
  font-size: 56%;
}
}
@media screen and (max-width: 1080px)
{
	html {
  font-size: 55%;
}
}
@media screen and (max-width: 980px)
{
	html {
  font-size: 54%;
}
}
@media screen and (min-width: 769px) and (max-width: 880px) 
{
	html {
  font-size: 53%;
}
}*/
/**************** FIN RESPONSIVE FONT ********************/

/*********** BOUTONS ****************/
/* 1. Changement de couleur du titre et de la div au survol */
.blurb-metiers:hover .titre-blurb-metier h3,
.blurb-metiers:hover .big-arrow {
    color: var(--gcid-secondary-color) !important; /* Ajuste le code hexa si besoin, ex: #00FFFF */
    
}
.blurb-metiers {
    cursor: pointer !important;
}

/* 2. Style du conteneur carré (50px x 50px) */
.big-arrow {
    width: 50px !important;
    height: 50px !important;
    position: relative;
    overflow: hidden; /* Pour cacher les flèches qui sortent */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* 3. Masquer l'image Divi originale pour la remplacer par nos flèches contrôlées */
.big-arrow img {
    opacity: 0;
}

/* 4. Création des deux flèches (Celle au centre et celle qui attend à gauche) */
.big-arrow .et_pb_image_wrap::before,
.big-arrow .et_pb_image_wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px; /* Ajuste la taille de ta flèche ici */
    height: 20px;
    background: url("/wp-content/uploads/2026/04/big-arrow2.svg") no-repeat center;
    background-size: contain;
    transition: all 0.4s ease-in-out !important;
}

/* Position par défaut : La flèche 1 est au centre, la flèche 2 est loin à gauche */
.big-arrow .et_pb_image_wrap::before {
    transform: translate(-50%, -50%); /* Centrage parfait */
}

.big-arrow .et_pb_image_wrap::after {
    transform: translate(-250%, -50%); /* Attend hors champ à gauche */
}

/* 5. L'animation au survol du parent */
.blurb-metiers:hover .big-arrow .et_pb_image_wrap::before {
    transform: translate(200%, -50%); /* La flèche 1 part à droite */
    opacity: 1;
}

.blurb-metiers:hover .big-arrow .et_pb_image_wrap::after {
    transform: translate(-50%, -50%); /* La flèche 2 arrive au centre */
    opacity: 1;
}

.blurb-metiers:hover .big-arrow {
	background-color:    var(--gcid-secondary-color) !important; 
    
}




.enoma-link-button {
  text-decoration: none;
}
/* underline animation */
.enoma-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
 transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.enoma-link-button:hover .enoma-text::after {
  transform: scaleX(1);
}

/* arrow */
.enoma-arrow img {
  height: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.enoma-link-button:hover .enoma-arrow img {
  transform: translateX(8px);
}
/*********** FIN BOUTONS ****************/


/**************** GENERAL ********************/
.grecaptcha-badge{
	display:none !important;
}
body{
	/*background-color:#fcefe5 !important;*/
}
.error404{
	background-color:#faf7f5 !important;
}
.et_menu_container{
	 /*   background-color: white;
    padding: 0px 30px;
    margin-top: 30px;
	transition: margin-top 0.4s ease-in-out, background 0.4s ease-in-out !important;*/
}
.et-fixed-header .et_menu_container {
    margin-top: 0px !important;
}
.footer-lien a:link, .footer-lien a:visited{
	color:#FFF;
}
.footer-lien a:hover{
	text-decoration:underline;
}
.text_inline {
    display: inline-block;
    margin: 0 10px;
	vertical-align:top; 
}
.image_inline  {
    display: inline-block;
    margin: 0 10px;
	vertical-align:bottom; 
}
#main-header .container{
	width:var(--gvid-lq65kpm3od) !important;
}
#page-container {
   overflow-x: hidden;
}
#random-img {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Si tu utilises le parallaxe */
#random-img .et-pb-parallax-background {
    background-size: cover !important;
    background-position: center !important;
}
/* On s'assure que le texte ne saute pas pendant l'animation */
.enoma-gsap-counter {
    font-variant-numeric: tabular-nums; /* Chiffres de largeur égale */
    display: inline-block;
}
.titre-metier h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.titre-metier h2::before {
     content: '';
    display: block;
    width: 4px;
    height: 1.2cap; /* hauteur exacte des majuscules */
    background-color: #4A6FE3;
    flex-shrink: 0;
}
.img1-apropos .et-pb-parallax-background{
	background-size: auto !important;
	background-position: bottom !important;
}
/* MENU */
#top-menu li {
    padding-right: 35px;
}
#top-menu li li a {
    padding: 5px 20px !important;
}
#main-header .nav li ul {
    background-color: #ffffff;
    padding: 0px 0px 10px 0px;
}
#top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a 
 {
	color:var(--gcid-heading-color) !important;
}
/* FIN MENU */
.montag::before{
	content: url("/wp-content/uploads/2026/05/check.svg"); /* ⚠️ difficile à styler */
}

/* EFFET SUR ROLL HOVER METIERS */
.image-blurb-metiers {
    position: relative;
    overflow: hidden;
    min-height: 600px; /* à ajuster selon ton design */
}

.image-blurb-metiers .et-pb-parallax-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-blurb-metiers .et-pb-parallax-background {
    z-index: 1;
    width: 100%;
    min-height: 100%;
}

.metier-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out !important;
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
}

.metier-layer.active {
    opacity: 1;
    z-index: 3;
}

.image-blurb-metiers .et_pb_module {
    position: relative;
    z-index: 10;
}
/* FIN EFFET SUR ROLL HOVER METIERS */


















/* GRID BUILDER */

/* carte références */
.wpgb-card-3 .wpgb-card-media{
	height:260px !important;
}
/* carte equipes */
.wpgb-card-5 .wpgb-card-media{
	height:400px !important;
}
.wp-grid-builder .wpgb-card-5 .wpgb-card-media-thumbnail div {
    background-position: 50% 0% !important;   
}
/* FIN GRID BUILDER */

/* Préparer le titre pour positionner le numéro */
.et_pb_toggle_item .et_pb_toggle_title {
    position: relative;
    padding-left: 25px;
}

/* Numéro en bleu via ::after positionné à gauche */
.montoggle1 .et_pb_toggle_title::after {
    content: "1";
    position: absolute;
    left: 0;
    top: 0;
    color: #4a6cf7; /* bleu — adapte à ta charte */
    font-weight: inherit;
}

.montoggle2 .et_pb_toggle_title::after { content: "2"; position: absolute; left: 0; top: 0; color: #4a6cf7; }
.montoggle3 .et_pb_toggle_title::after { content: "3"; position: absolute; left: 0; top: 0; color: #4a6cf7; }
.montoggle4 .et_pb_toggle_title::after { content: "4"; position: absolute; left: 0; top: 0; color: #4a6cf7; }
.montoggle5 .et_pb_toggle_title::after { content: "5"; position: absolute; left: 0; top: 0; color: #4a6cf7; }
.montoggle6 .et_pb_toggle_title::after { content: "6"; position: absolute; left: 0; top: 0; color: #4a6cf7; }
.montoggle7 .et_pb_toggle_title::after { content: "7"; position: absolute; left: 0; top: 0; color: #4a6cf7; }

/*********** FIN GENERAL ****************/

/*********** MOBILE ****************/
@media all and (max-width: 980px) {
	
.dsm_button .et_pb_button_two {
    margin-left: 0px !important;
}
.dsm_button .et_pb_button_two, .dsm_button .et_pb_button_one  {
	width:100%;
}
	#main-header .container {
    width: 95% !important;
}
	html,
	body {
		overflow-x: hidden;
	}
	body {
		position: relative
	}
	    #dtb-m-menu .menu-wrapper {
        overflow-x: hidden !important;
    }
	body.elfsight-popup-open #main-header,
    body.elfsight-popup-open #main-header.et-fixed-header {
        z-index: 1 !important;
    }
.wpgb-facet>fieldset:last-child {
    margin-bottom: 20px !important;
}	
	.et_pb_contact_field{
		width:100% !important;
	}
}
/*****/