:root{

    /*radius*/
    --hpm-rad-large: 15px;
    --hpm-rad-medium: 10px;
    --hpm-rad-small: 4px;
    
    /*colors*/
    --hpm-dark: #160E54;
    --hpm-dark-75: #312783;
    --hpm-green: #00BCBC;
    --hpm-pink: #EA4C89;
    --hpm-violet: #800790;
    --hpm-grey: #F1F0F4;
    /*mise à jour colors */
    --compatibilité: #00A6ED;
    --conformité: #FFB400;
    --hot-fix: #EA638C;
    --qualité: #00BCBC;
    --valeurs-métiers: #BDADEA;
    /*padding*/
    --hpm-padding-large: 24px;
    --hpm-padding-medium: 16px;
    --hpm-padding-small: 8px;


}
body{
    font-family: 'Lato', sans-serif;
}   

h1, h2, h3, h4, h5, h6 {
    font-family: 'Intro-Black-Alt', sans-serif;
    color: var(--hpm-dark-75);
}
p{
    font-family: 'Lato', sans-serif;
    color:var(--hpm-dark);
}
p:empty{
    display:none;
}

/* Boutons */

.et_pb_button{
    border-width:1px;
    border-radius:var(--hpm-rad-medium);

}
.et_pb_button:hover{
    border-width:1px;
    border-radius:var(--hpm-rad-medium);

}

.cjmetiers-btn-wrapper-centered{
    display:flex;
    justify-content:center;
    flex-wrap: wrap ;
    gap:10px;
}

.cjmetiers-btn-wrapper-left{
    display:flex;
    justify-content:flex-start;
        flex-wrap: wrap ;
            gap:10px;
}

.cjmetiers-btn-wrapper-right{
    display:flex;
    justify-content:flex-end;
        flex-wrap: wrap ;
            gap:10px;
}

.hpm-btn-pink-light {
	background: white;
	border-radius: var(--hpm-rad-medium);
	border: 1px solid var(--hpm-pink);
	padding: 12px 16px;
	display: block;
	width: 100%;
	transition: all 0.3s ease;
	color: var(--hpm-pink) !important;
	font-family: "Lato", sans-serif !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	max-width: 300px;
	margin: 5px 0;
	position: relative;
}

.hpm-btn-pink-light:hover{
    background: var(--hpm-grey);
    border:1px solid var(--hpm-dark-75);
    color: var(--hpm-dark-75) !important;
}


.hpm-btn-pink-full {
	background: var(--hpm-pink);
	border-radius: var(--hpm-rad-medium);
	border: 1px solid var(--hpm-pink);
	padding: 12px 16px;
	display: block;
	width: 100%;
	transition: all 0.3s ease;
	color: white !important;
	font-family: "Lato", sans-serif !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	max-width: 300px;
	margin: 5px 0;
	position: relative;
}

.hpm-btn-pink-full:hover{
    background: var(--hpm-dark-75) !important;
    	border: 1px solid var(--hpm-dark-75) !important;
}

.hpm-btn-grey-light {
	background: var(--hpm-grey);
	border-radius: var(--hpm-rad-medium);
	border: 1px solid white;
	padding: 12px 16px;
	display: block;
	width: 100%;
	transition: all 0.3s ease;
	color: var(--hpm-dark-75) !important;
	font-family: "Lato", sans-serif !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	max-width: 300px;
	margin: 5px 0;
	position: relative;
}

a.hpm-btn-grey-light:hover{
    background: white;
    border: 1px solid var(--hpm-grey) !important;
}


.cj-metiers-header p{
    color:white;
}

/* mise à jour / changelog */

.cjmetiers-last-changelogs{
    display:flex;
    flex-direction:column;
    gap:var(--hpm-padding-small);
    background-color: var(--color4);
    padding: var(--hpm-padding-medium);
    border-radius: var(--hpm-rad-large);
    box-shadow: 3px 3px 3px var(--boxshadow);
}

.cjmetiers-last-changelogs .hpm-btn-grey-light{
    width:100%;
    max-width: 100%;
}

.cjmetiers-last-changelogs .hpm-post-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	line-height: 1.2;
    font-size:12px;
    justify-content:flex-start;
}

.cjmetiers-last-changelogs .category-valuers-metiers .hpm-post-category {
  background:var(--valeurs-métiers);
}
.cjmetiers-last-changelogs .category-qualite .hpm-post-category{
  background:var(--qualité);

}
.cjmetiers-last-changelogs .category-hot-fix .hpm-post-category{
  background:var(--hot-fix);  

}
.cjmetiers-last-changelogs .category-conformite .hpm-post-category{
  background:var(--conformité);
}
.cjmetiers-last-changelogs .category-compatibilite .hpm-post-category{
  background:var(--compatibilité);
}

.cjmetiers-last-changelogs .hpm-post-meta div{

    height:100%;
    border-radius:var(--hpm-rad-small);
    margin-right:5px;
    padding-top:5px;    
}

.cjmetiers-last-changelogs .hpm-post-meta .hpm-post-title{
    font-weight:600;
    color:var(--hpm-dark);
}

.cjmetiers-last-changelogs .hpm-post-meta .hpm-post-category{
    font-weight:400;
    color:white;
    padding:5px 10px;
}
.cjmetiers-last-changelogs .hpm-post-meta .hpm-post-date{

    color:var(--hpm-dark);
}




.cjmetiers-last-changelogs p{
    font-size:14px;
    line-height:1.2;
}