/************************** RESPONSIVE FONT ***********************/
html {
  font-size: 62.5%;
  /* 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("https://enoma.agencema3.fr/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; 
    
}

/*********** FIN BOUTONS ****************/


/**************** GENERAL ********************/
.grecaptcha-badge{
	display:none !important;
}
body{
	/*background-color:#fcefe5 !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;
}

























/* GRID BUILDER */
.wpgb-card-media{
	height:250px !important;
}
/* On met uniquement une bordure en haut et à gauche sur chaque carte */
.wp-grid-builder .wpgb-card {
    border-top: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
}

/* On ajoute la bordure manquante sur le côté droit et le bas de la grille entière */
.wp-grid-builder {
    border-right: 1px solid #000!important;
    border-bottom: 1px solid #000!important;
}
/* 1. On prépare le conteneur de la flèche */
.wpgb-block-7 {
    overflow: hidden; /* Pour cacher la flèche quand elle sort */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Style de la flèche par défaut */
.wpgb-block-7 svg {
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1) !important;
    display: block;
}

/* 3. L'effet au survol de l'article (la carte entière) */
.wpgb-card:hover .wpgb-block-7 svg {
    animation: enomaArrowSwipe 0.5s forwards;
}

/* 4. L'animation Keyframes (Swipe & Re-entry) */
@keyframes enomaArrowSwipe {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    45% {
        transform: translateX(150%);
        opacity: 1;
    }
    46% {
        transform: translateX(-150%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* FIN GRID BUILDER */


/*********** 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;
    }
	

}
/*****/