@charset "iso-8859-1";

@import url(main.css);
@import url(gallery.css);
@import url(elements.css);
@import url(structure.css);
@import url(navigationElements.css);
@import url(form.css);
@import url(boxes.css);
@import url(account.css);
@import url(catalog.css);
@import url(publicationMethods.css);
@import url(search.css);
@import url(board.css);
@import url(ads.css);
@import url(directory.css);
@import url(community.css);
@import url(jquery-ui.css);
@import url(googleMap.css);
@import url(responsive.css);

/* --------------
CALAGE DES BLOCS
-----------------*/
*{
	font-size: 14px;
}
.clear {
	border:0;
	clear: both;
	height:0;
	line-height:0;
	visibility: hidden;
}

/* bouton pour revenir en haut */
#scroll{
    position: relative;
    bottom: 20px;
    right: 10px;
    display: none;
    background: url(/images/up.png) left center no-repeat;
	width: 40px;
	height: 40px;
	opacity: 0.3;
	filter: alpha(opacity=30);
	transition: opacity 1s ease-out;
	margin: 0 auto
    
}
#scroll:hover{
	transition: opacity 1s ease-out;
	opacity: 1;
	filter: alpha(opacity=100);
	
}
#scroll p{
	margin: 0;
}
#scroll p a{
    width: 40px;
	height: 40px;
	display: block;
}
 
.medias{
	margin: 20px 0 0 0;
}
.plan_du_site h5{
	display: none;
}
.aide{
	display: inline;
}
.aide p{
	margin: 20px 0 0 0;
}
input.rgpd{
	float: left;
	height: 20px;
}


.envmnt-ste-eco {
display: flex;
justify-content: space-between;
}

.ese-left-text {
width: 25%;
}

.ese-right-text {
width: 25%;
}

.pilier-first-line, .pilier-third-line {
display: flex;
width: 100%;
justify-content: space-between;
}

.pilier-second-line {
display: flex;
justify-content: center;
}

/* classes génériques */
.flex {
	display: flex;
}

.wrap {
	flex-wrap: wrap;
}

.flex-column {
	display: flex;
	flex-direction: column;
}


.direction-column {
	flex-direction: column;
}

.flex-around {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
	
.flex-between {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.align-items-center {
	display: flex;
	align-items: center;
}

.align-items-start {
	display: flex;
	align-items: start !important;
}
.justify-center {
	display: flex;
	justify-content: center;
}

.justify-end {
	display: flex;
	justify-content: end;
}

.flex-shrink-2 {
	flex-shrink: 2;
}

.display-none {
	display: none;
}

.w-100 {
	width: 100% !important;
	max-width: 980px;
}

.w-5 {
	width: 5%;
}

.w-10 {
	width: 10%;
	max-width: 10% !important;
}

.w-15 {
	width: 15%;
}
.w-20 {
	width: 20%;
}
.w-25 {
	width: 25%;
}

.w-24 {
	width: 24%;
}

.w-30 {
	width: 30%;
}

.w-50 {
	width: 50%;
}

.w-60 {
	width: 60%;
}

.w-70 {
	width: 70%;
}

.w-75 {
	width: 75%;
}

.w-80 {
	width: 80%;
	max-width: 80% !important;
}

.w-90 {
	width: 90%;
}



.h-50px {
	height: 50px;
}

.h-65px {
	height: 65px;
}

.h-85px {
	height: 85px;
}

.h-120px {
	height: 120px;
}

.h-150px {
	height: 150px;
}

.mt-0 {
	margin-top: 0px !important;
}
.mt-10px {
	margin-top: 10px;
}

.mt-15px {
	margin-top: 15px;
}

.mt-18px {
	margin-top: 18px;
}

.mt-20px {
	margin-top: 20px;
}

.mt-25px {
	margin-top: 25px;
}

.mt-30px {
	margin-top: 30px;
}

.mt-40px {
	margin-top: 40px !important;
}
.mt-50px {
	margin-top: 50px;
}

.mt-70px {
	margin-top: 70px;
}

.mb-20px {
	margin-bottom: 20px;
}

.mb-40px {
	margin-bottom: 40px;
}

.mb-50px {
	margin-bottom: 50px;
}
.mb-70px {
	margin-bottom: 70px;
}

.mb-100px {
	margin-bottom: 100px !important;
}

.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-10px {
	margin: 10px 0;
}

.my-30px {
	margin: 30px 0;
}

.my-50px {
	margin: 50px 0;
}

.mr-1 {
	margin-right: 1%;
}

.ml-10 {
	margin-left: 10%;
}

.p-20px {
	padding: 20px;
}

.px-0 {
	padding-left: 0px !important;
	padding-right:0px !important;
}
.px-5px {
	padding: 0 5px;
}

.px-10px {
	padding-left: 10px;
	padding-right: 10px;
}

.py-20px {
	padding: 20px 0;
}

.pl-0 {
	padding-left: 0px !important;
}

.pl-5px {
	padding-left: 5px;
}

.pl-35px {
	padding-left: 35px !important;
}

.pr-0 {
	padding-right: 0px !important;
}

.pr-5px {
	padding-right: 5px;
}

.pr-20px {
	padding-right: 20px !important;
}

.pb-0 {
	padding-bottom: 0px !important;
}

.pb-20px {
	padding-bottom: 20px !important;
}

.border-none {
	border: none !important;
}

.bg-white {
	background: #ffffff !important;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.italic {
	font-style: italic;
}

.red-text {
	color: #c50006 !important;
}

.black-text {
	color: #000000;
}

.rse-h4 {
	font-size: 1.1em !important;
	font-weight: normal !important;
}

.rse-p {
	font-size: 14px !important;
	color: #666666 !important;
	font-style: normal !important;
	font-weight: initial !important;
}

.bloc-images-50 {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding: 1.5%;
	box-sizing: border-box;
}

.section-bloc-images .bloc-images-50 .bloc-text {
	background: #f0f0f0;
	padding: 10px;
	text-transform: uppercase;
	color: #666666;
	font-weight: normal;
	cursor: pointer;
}

.bloc-images-50 .bloc-text h3{
	margin: 8px 0;
	text-transform: uppercase;
	color: #666666;
	font-weight: bold;
	cursor: pointer;
}

.bloc-images-50 img {
	border-bottom: 2px solid #ff0012;
}

.mobile-only {
	display: none;
}

.not-on-mobile {
	display: block;
}

@media screen and (max-width: 1024px) {

	.rse .full-section {
		padding: 90px 20px !important;
	  }
}

 

@media screen and (max-width: 979px){

	

	.tab-w-100 {
		width: 100% !important;
	}

	.tab-max-w-100 {
		max-width: 100% !important;
	}

	.tab-justify-content-center {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.tab-justify-self-center {
		justify-self: center ;
	}
	.tab-w-49 {
		width:49%;
	}

	.tab-mx-auto {
		margin-left: auto;
		margin-right: auto;
	}

	.tab-mt-15px {
		margin-top: 15px;
	}

	.tab-mt-30px {
		margin-top: 30px !important;
	}

	.tab-mb-30px {
		margin-bottom: 30px !important;
	}

	.tab-px-0 {
		padding-left: 0 !important;
		padding-right: 0;
	}

	.tab-pl-0 {
		padding-left: 0 !important;
	}

	.tab-pr-0 {
		padding-right: 0;
	}


	.tab-pt-5px {
		padding-top: 5px;
	}

	.tab-pt-10px {
		padding-top: 10px;
	}

	.carousel-inner {
		height: 10vh !important;
	}

	
}

@media screen and (max-width: 510px){

	.mobile-only {
		display: block;
	}
	.not-on-mobile {
		display: none;
	}

	.mob-justify-center {
		display: flex;
		justify-content: center;
	}

	.mob-flex-row-reverse {
		display:flex;
		flex-direction: column-reverse !important;
	}

	.mob-wrap {
		flex-wrap: wrap;
	}
	
	.mob-w-100 {
		width: 100%;
	}
	
	.mob-w-49 {
		width:49%;
	}

	.mob-max-w-100 {
		max-width: 100% !important;
	}

	.mob-mt-15px {
		margin-top: 15px;
	}

	.mob-mt-30px {
		margin-top: 30px;
	}

	.mob-mt-50px {
		margin-top: 50px;
	}

	.mob-mb-15px {
		margin-bottom: 15px !important;
	}

	.mob-my-10px {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.mob-px-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mob-px-20px {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.mob-pt-5px {
		padding-top: 5px;
	}

	.mob-pt-10px {
		padding-top: 10px;
	}

	.mob-pr-0 {
		padding-right: 0px !important;
	}

	.mob-pl-0 {
		padding-left: 0px !important;
	}

	.carousel-inner {
		height: 20vh !important;
	}

	.nythingSlider-in5 {
		width: 100px !important;
	}

	.mr-1 {
		margin-right: 0;
	}
}

@media screen and (max-width:405px) {

	.carousel-inner {
		height: 25vh !important;
	}
}

/* RSE */

.rse h2 {
	font-weight: normal !important;
	font-size: 1.7em !important;
	color:#c50006 !important;
	text-align: left !important;
	text-transform: none !important;
	margin-bottom: 30px !important;
}
.rse h3 {
	font-size: 1.2em !important;
	font-weight: normal !important;
}
.rse h4 {
	font-size: 1.1em !important;
	text-transform: none !important;
}

/* Accueil RSE */

.rse-h1 {
	font-size: 1em;
	text-transform: lowercase;
}

.rse-red-top-border {
	border-top: 1px solid #ff0012;
}

.rse-section-bloc-images .bloc-images img {
	border-bottom: 2px solid #ff0012;
}

.rse-section-bloc-images .bloc-images .bloc-text {
	background: #f0f0f0;
	padding: 10px;
	
}

.rse-section-bloc-images .bloc-images .bloc-text h3 {
	margin: 8px 0;
	text-transform: uppercase;
	color: #666666;
	font-weight: normal;
	cursor: pointer;
}

.rse-bg-gray {
	background: #f0f0f0 !important;
}


/* gouvernance responsable */

.gouv-section-bloc-images .bloc-images img{
  border-bottom: 2px solid #ff0012;
}

.gouv-section-bloc-images .bloc-images .bloc-text {
  
  background: #f0f0f0;
  padding: 10px;
  
  
}

.gouv-section-bloc-images .bloc-images .bloc-text h3 {
  margin: 8px 0;
  color: #666666;
  font-weight: normal;
  
}



/*.gouv-orga {
	background: #f0f0f0;
}*/


.gouv-orga-h3 {
	color: #666666;
	cursor: pointer;
}


/* Travailler chez Javaux */



.rse-travailler-chez-javaux ul li::marker {
	color: #c50006;
}


/* Offrir des solutions durables à nos clients */ 

.rse-offre-durable h4 {
	text-transform: uppercase;
	font-size: 1.2em;
}

.rse-offre-durable hr {
	border-top: 1px solid #666666;
}

/* Avoir un impact positif sur le territoire */

.red-circle {
	border-radius: 50%;
	width: 260px;
	height: 260px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #c50006;
}

.white-circle {
	border-radius: 50%;
	width: 230px;
	height: 230px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e0e3e3;
}

.white-circle p {
	font-size: 5rem;
	color: #c50006;
}
/* RSE Footer */

.rse-footer-col-1, .rse-footer-col-2 {
	float: left !important;
	width: 33%;
	text-align: left !important;
}

.rse-footer-col-1 p, .rse-footer-col-2 p, .rse-footer-col-3 p {
	line-height: 20px !important;
}

.rse-footer-col-3 {
	float: left !important;
	width: 20%;
	text-align: left !important;
}
.rse-footer-col-3 h5 {
	display: none;
}


.rse-footer-col-2 li, .rse-footer-col-3 li {
	
	list-style: none;
	text-decoration: none;
	border: none !important;
	text-align: left !important;
	
	
	font-size: 10px !important;
	line-height: 30px !important;
}




@keyframes slidein {
	from { display: none; }
	to { transform: translateY(100%); opacity: 0;}
  }

  .animated-element {
	animation: slidein 200ms;
	display: block;
  }


  /* test diagramme pourcentage */

  :root {
	--progress-bar-width: 260px;
	--progress-bar-height: 260px;
	--font-size: 5rem;
  }
  
  .circular-progress {
	width: var(--progress-bar-width);
	height: var(--progress-bar-height);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .inner-circle {
	position: absolute;
	width: calc(var(--progress-bar-width) - 30px);
	height: calc(var(--progress-bar-height) - 30px);
	border-radius: 50%;
	background-color: #ffffff;
  }
  
  .percentage {
	position: relative;
	font-size: var(--font-size);
	color: rgb(255, 255,255, 1);
  }


  /* test carousel */

  /* Définition d'un container pour gérer l'affichage */
.container {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 10vh;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}
/* Définition des diapositives */
.slide {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
    width: 100%;
    /* Largeur de l'image est de 100% */
	
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}
/* Définition des boutons de contrôle du carousel */

/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: 10%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots .dot {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin: 5px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
    /* Border de 10px pour le point actif */
    border: 10px solid #761530 !important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    border: 10px solid #2596be;
}

.text-carousel button {
	background: none;
	font-size: 4rem;
}


/* rubrique acgualités - articles */

#chapo {
	padding: 0 !important;
}

#news #chapo, .chapoPicture, .chapoPicture img {
	width:100%;
	
}

#news #chapo img {
	padding: 25px 0 !important;
	margin: 0 !important;
}

#news h2 {
	margin: 25px 0;
	font-weight: bold;
	color: #c50007;
}

#news h3 {
	font-weight: 400;
}

.textLeft, .textRight {
	padding-top: 25px;
}

.textLeft img {
	padding-left: 40px;
	padding-bottom:20px;
	margin-right:0 !important;
}

.textRight img {
	padding-right: 40px;
	padding-bottom: 20px;
	margin-right: 0 !important;
}

#news .back {
	padding-top: 25px;
}

#news .back a {
	color:#c50006 !important;
	
}

.underPicture {
	padding-top: 10px;
}

.PagerPrevious {
	margin-right: 20px  !important;
}

.PagerNext {
	margin-left:20px !important;
}