/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
	 Base styles: opinionated defaults
	 ========================================================================== */

html {
		color: #222;
		font-size: 1em;
		line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
}

::selection {
		background: #b3d4fc;
		text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 1em 0;
		padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
		vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
		border: 0;
		margin: 0;
		padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
		resize: vertical;
}

/* ==========================================================================
	 Browser Upgrade Prompt
	 ========================================================================== */

.browserupgrade {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
}

/* ==========================================================================
	 Author's custom styles
	 ========================================================================== */


.titre-libelle{display:block; padding:0 0 2px 0; margin:0; font-size:0.7rem; font-weight:500; color:#01C77F; box-sizing:border-box;}
.inputtextnew{display:block; width:100%; padding:5px 10px; margin:0 0 10px 0; border-radius:0;  border:none; outline:none; box-shadow:none;  background-color:#ececec; color:#555; outline:none; font-size:0.8rem; font-weight:500; box-sizing:border-box; transition:all 0.5s ease;}
.inputtextnew:focus{background-color:#01C77F !important; color:#fff;}


html, body{display:block; padding:0; margin:0; width:100%;font-family: 'Jost', sans-serif; font-weight:500; overflow-x: hidden; 
box-sizing: border-box;
white-space: normal;}
html.background-jcg{background: url(../../img/background.jpg) no-repeat center; background-size: cover; background-attachment: fixed;}

/*AFFICHAGE MESSAGE RESPONSIVE PAS ENCORE OPERATIONNEl*/
.noresponsiveaffichageprevention{display:none !important;}
.noresponsiveaffichageprevention .tablecellresponsive{display:table-cell; margin:0; padding:20px 40px; box-sizing:border-box; vertical-align:middle; font-size:1rem; color:#4c4c4c;}
.noresponsiveaffichageprevention .tablecellresponsive img{display:block; width:216px; max-width:100%; margin:0 auto 10px auto; padding:0;}
@media screen and (max-width: 1020px){
	.noresponsiveaffichageprevention{display:none; table-layout:fixed;
		 vertical-align:middle; text-align:center; z-index: 999999999999; position:fixed; top:0; left:0; width:100%; height:100%; background-color:white; box-sizing:border-box; overflow:hidden;}
}





.clear{clear:both;}


/*STYLE ECRITURE*/
.titre-a{display:block; padding:0 0 5px 0; margin:0; font-size:1.2rem; font-weight:400; color:#F12690; box-sizing:border-box;}
.titre-a i{display:inline-block; vertical-align:middle; padding:0 5px 0 0; font-size:1.6rem;}
.titre-b{display:block; padding:0 0 15px 0; margin:0; font-size:0.8rem; font-weight:300; color:#4c4c4c; font-style:italic; box-sizing:border-box;}
.titre-b a{text-decoration:none; color:#F12690;}
.titre-b a:hover{text-decoration:underline;}
.titre-c{display:block; padding:0 0 15px 0; margin:0; font-size:0.9rem; font-weight:300; color:#4c4c4c; box-sizing:border-box;}
.titre-big{display:block; padding:0 0 10px 0; margin:0; font-size:2rem; font-weight:300; color:#F12690; box-sizing:border-box;}
.titre-big i{display:inline-block; vertical-align:text-top; padding:0 10px 0 0; font-size:2.4rem;}
.titre-avec-numero{display:block; position:relative; padding:5px 0 20px 50px; margin:0; font-size:1.6rem; font-weight:300; color:#F12690; box-sizing:border-box;}
.titre-avec-numero .numero{display:block; position:absolute; top:0; left:0; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; padding:0; margin:0; color:white; background-color:#F12690; box-sizing:border-box;}

.descriptif-a{display:block; padding:0 0 15px 0; margin:0; font-size:0.9rem; font-weight:400; color:#4c4c4c;box-sizing:border-box;}
.descriptif-a a{text-decoration:none; color:#F12690;}
.descriptif-a a:hover{text-decoration:underline;}
.descriptif-b{display:inline-block; padding:5px 7px; margin:0; font-size:0.75rem; font-weight:500; color:#fff; background-color:#01C77F; border-radius:5px 5px 0 0; box-sizing:border-box;}
@media screen and (max-width: 1400px){
	.titre-big{padding:0 0 10px 0 ; font-size:1.4rem; font-weight:500;}
	.titre-big i{padding:0 5px 0 0; font-size:1.4rem;}
	.descriptif-a{padding:0 0 10px 0; font-size:0.85rem; }

	.titre-a{display:block; padding:0 0 5px 0; margin:0; font-size:1rem; font-weight:500;}
	.titre-a i{font-size:1.2rem;}
	

}
@media screen and (max-width: 760px){
	.titre-big{padding:0 0 5px 0 !important; font-size:1.2rem; font-weight:500 !important;}
	.titre-big i{padding:0 5px 0 0 !important; font-size:1.2rem !important;}
	.descriptif-a{padding:0 0 5px 0 !important; font-size:0.8rem !important; }
	

}

/*COULEUR*/
.rouge{color:#d24848  !important;}
.orange{color:#F12690 !important;}
.bleu{color:#F12690 !important;}
.vert{color:#45ae65 !important;}



/*INPUT TEXT---------------------------------------------------------------*/
.inputtext{display:block; width:100%; padding:12px 15px; margin:0 0 10px 0; border-radius:5px;  border:solid 1px #c2c2c2; outline:none; box-shadow:none;  background-color:#fff; color:#777; outline:none; font-size:0.85rem; font-weight:400; box-sizing:border-box; transition:all 0.5s ease;}
.inputtext:focus{background-color:#F12690; color:#fff;}

/*AREA TEXT---------------------------------------------------------------*/
.areatext{display:block; width:100%; padding:12px 15px; margin:0 0 10px 0; border-radius:5px;  border:solid 1px #c2c2c2; outline:none; box-shadow:none;  background-color:#fff; color:#777; outline:none; font-size:0.85rem; font-weight:400; box-sizing:border-box; transition:all 0.5s ease;}
.areatext:focus{background-color:#F12690; color:#fff;}




/*LES BOUTONS---------------------------------------------------------------*/
.inputbouton{display:inline-block; text-decoration:none; cursor:pointer; padding:10px 15px; margin:0 0 0 0; border-radius:5px;  border:solid 1px #F12690; background-color:#F12690; color:#fff; outline:none; font-size:0.9rem; font-weight:500; box-sizing:border-box; transition:all 0.3s ease;}
.inputbouton:hover{border-color:#01C77F;background-color:#01C77F; }
.inputbouton i{display:inline-block; vertical-align:sub;  padding:0 5px 0 0; margin:0; font-size:1.2rem;}
.inputboutonbis{display:inline-block; text-decoration:none; cursor:pointer; cursor:pointer; padding:10px 15px; margin:0 0 10px 0; border-radius:5px;  border:solid 1px #ececec; background-color:#fff; color:#4c4c4c; outline:none; font-size:0.6rem; text-transform:uppercase;  font-weight:400; box-sizing:border-box; transition:all 0.3s ease;}
.inputboutonbis:hover{border-color:#01C77F;background-color:#01C77F;color:white; }
.inputboutonbis i{display:inline-block; vertical-align:sub;  padding:0 5px 0 0; margin:0; font-size:1.2rem;}
.inputboutonbis-rouge:hover{border-color:#01C77F;background-color:#01C77F;color:white; }
.inputboutonbis-vert:hover{border-color:#01C77F;background-color:#01C77F;color:white; }
.inputboutonbis-orange:hover{border-color:#f3b74f;background-color:#f3b74f;color:white; }
@media screen and (max-width: 760px){
	.inputbouton{display:block !important; width:100%  !important; float:none  !important; padding:10px 5px !important; margin:20px 0 !important; border-radius:0px !important;  font-size:0.8rem !important; font-weight:500 !important;}

}




/*CASE A COCHER---------------------------------------------------------------*/
.case-a-cocher{display:block; position:relative; padding:2px 10px 0 30px; margin:0 0 7px 0; font-size:0.85rem; font-weight:300; color:#4c4c4c; cursor:pointer; box-sizing:border-box; transition:all 0.3s ease;}
.case-a-cocher a{color:#4c4c4c; text-decoration:none;}
.case-a-cocher:hover{color:#F12690;}
.case-a-cocher a:hover{color:#4c4c4c; text-decoration:underline;}
.case-a-cocher input { display: none; }
.case-a-cocher i{display:none; position:absolute; top:0; left:0; padding:0; margin:0; font-size:1.4rem; vertical-align:middle;  box-sizing:border-box;}
.case-a-cocher i.active{display:block;}

@media screen and (max-width: 760px){
	.case-a-cocher{padding:0;}
	.case-a-cocher i{position:static; padding:0 0 10px 0; font-size:2.4rem; text-align:center;}
}

/*CASE A COCHER---------------------------------------------------------------*/
.case-a-cocher-copie{display:block; position:relative; padding:0px 0px 0 19px; margin:0 0 10px 0; font-size:0.75rem; font-weight:400; color:#4c4c4c; cursor:pointer; box-sizing:border-box; transition:all 0.3s ease;}
.case-a-cocher-copie a{color:#4c4c4c; text-decoration:none;}
.case-a-cocher-copie:hover{color:#F12690;}
.case-a-cocher-copie a:hover{color:#4c4c4c; text-decoration:underline;}
.case-a-cocher-copie input { display: none; }
.case-a-cocher-copie i{display:none; position:absolute; top:0; left:0; padding:0; margin:0; font-size:1rem; vertical-align:middle;  box-sizing:border-box;}
.case-a-cocher-copie i.active{display:block;}

@media screen and (max-width: 760px){
	.case-a-cocher-copie{padding:0;}
	.case-a-cocher-copie i{position:static; padding:0 0 10px 0; font-size:2.4rem; text-align:center;}
}



/*CONNEXION---------------------------------------------------------------*/
.boite-connexion{display:inline-block; vertical-align:top; border-radius:5px; position:relative; z-index:99; width:350px; padding:30px 30px; margin:60px auto; max-width:95%; background-color:white; border:solid 4px #F12690; box-sizing:border-box;}
.boite-connexion img{display:block; padding:0 0 30px 0; margin:0 auto; width:90%; box-sizing:border-box;}
.boite-connexion label{display:block; padding:0 0 10px 0; margin:0; color:#898b8d; font-size:0.9rem; font-weight:300; box-sizing:border-box;}
.boite-connexion label .input{display:block; width:100%; outline:none; border:solid 2px #000; border-radius:5px; box-shadow:none; text-shadow:none;  padding:10px 10px; margin:5px 0 0 0; font-size:1rem; color:#898b8d;  box-sizing:border-box;  transition:all 0.4s ease;}
.boite-connexion label .input:focus{border-color:#F12690; background-color:#F12690; color:white;}
.boite-connexion #connexion{display:block; width:100%; cursor:pointer; text-align:center; border-radius:5px; border:none; outline:none; box-shadow:none; text-shadow:none;  padding:10px 10px; margin:10px 0 0 0; font-size:1rem; color:white; background-color:#4c4c4c;  box-sizing:border-box;  transition:all 0.4s ease;}
.boite-connexion #connexion:hover{ background-color:#F12690;}
.boite-connexion .mdpforget{display:block; text-decoration:none; padding:0; margin:20px 0 0 0; color:#F12690; font-size:0.9rem; font-weight:300; font-style:italic; text-align:center; box-sizing:border-box;}
.boite-connexion .mdpforget:hover{text-decoration:underline;}
@media screen and (max-width: 760px){
	.boite-connexion{display:block; border-radius:0px; width:100%; padding:30px 30px; margin:0; max-width:100%; background-color:white; border:none; }
	.boite-connexion img{padding:0 0 10px 0; margin:0 auto; width:40%; }

}

/*NOUVEL UTILISATEUR*/
.boite-nouvel-utilisateur{display:block; border-radius:5px; position:relative; z-index:99; width:600px; max-width: 95%; padding:30px 30px; margin:60px auto 60px auto; background-color:white; border:solid 4px #F12690; box-sizing:border-box;}
.boite-nouvel-utilisateur img{display:block; padding:0 0 30px 0; margin:0 auto; width:298px; max-width: 90%; box-sizing:border-box;}
@media screen and (max-width: 760px){
	.boite-nouvel-utilisateur{display:block; border-radius:0px; width:100%; padding:30px 30px; margin:0; max-width:100%; background-color:white; border:none; }
	.boite-nouvel-utilisateur img{padding:0 0 10px 0; margin:0 auto; width:40%; }

}


/*LISTING LIENS*/
.listing-liens{display:block; padding:0 0 50px 0; margin:0; box-sizing:border-box;}
.listing-liens a{display:block; cursor:pointer; padding:2px 0; margin:5px 0 0 0; text-decoration:none; color:#222; outline:none; font-size:0.9rem; font-weight:400; box-sizing:border-box; transition:all 0.3s ease;}
.listing-liens a:hover{color:#01C77F; }
.listing-liens a i{display:inline-block; vertical-align:sub;  padding:0 5px 0 0; margin:5px 0 0 0; font-size:1.2rem;}


/*LIGHT BOX AFFICHAGE MESSAGE */
.lightbox-message{display:none; z-index:999999999; opacity:0.9; background-color:black; position:fixed; top:0; left:0; width:100%; height:100%; padding:0; margin:0; box-sizing:border-box;}
.lightbox-message-wrapper{display:none; z-index:999999999; position:fixed; top:50px; left:50%; width:400px; padding:20px 10px; border-top:solid 10px transparent; margin:0 0 0 -200px; color:#4c4c4c; text-align:center; background-color:white; box-sizing:border-box;}
.lightbox-message-wrapper .lightbox-message-contenu{display:block; padding:0 10px; margin:0 0 20px 0; font-size:0.9rem; font-weight:400; text-align:center; line-height:1.2rem;  box-sizing:border-box; }
.lightbox-message-wrapper .lightbox-message-contenu i{display:none; margin:0 auto; text-align:center; font-size:2.7rem; padding:0 0 15px 0;  box-sizing:border-box; }
.lightbox-message-wrapper .retour-lightbox-simple{display:inline-block; cursor:pointer; text-decoration:none; text-align:center; font-size:0.7rem; font-weight:600; text-transform:uppercase; background-color:transparent; color:white; padding:10px 20px; margin:0;  box-sizing:border-box; transition:all 0.3s ease;}
.lightbox-message-wrapper .retour-lightbox-simple:hover{background-color:#01C77F !important;}
.lightbox-message-wrapper.erreur{border-color:#d24848;}
.lightbox-message-wrapper.erreur .lightbox-message-contenu .erreur{display:block; color:#d24848;}
.lightbox-message-wrapper.erreur .retour-lightbox-simple{background-color:#d24848;}
.lightbox-message-wrapper.avertissement{border-color:#f3b74f;}
.lightbox-message-wrapper.avertissement .lightbox-message-contenu .avertissement{display:block; color:#f3b74f;}
.lightbox-message-wrapper.avertissement .retour-lightbox-simple{background-color:#f3b74f;}
.lightbox-message-wrapper.info{border-color:#F12690;}
.lightbox-message-wrapper.info .lightbox-message-contenu .info{display:block; color:#F12690;}
.lightbox-message-wrapper.info .retour-lightbox-simple{background-color:#F12690;}

@media screen and (max-width: 760px){
	.lightbox-message-wrapper{top:0%; left:0%; width:100%; max-height:100%; padding:20px 20px; margin:0px 0 0 0px; width:100%;}

}


/* ==========================================================================
	 Helper classes
	 ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
		display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
		visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
		content: " "; /* 1 */
		display: table; /* 2 */
}

.clearfix:after {
		clear: both;
}

/* ==========================================================================
	 EXAMPLE Media Queries for Responsive Design.
	 These examples override the primary ('mobile first') styles.
	 Modify as content requires.
	 ========================================================================== */

@media only screen and (min-width: 35em) {
		/* Style adjustments for viewports that meet the condition */
}

@media print,
			 (-webkit-min-device-pixel-ratio: 1.25),
			 (min-resolution: 1.25dppx),
			 (min-resolution: 120dpi) {
		/* Style adjustments for high resolution devices */
}

/* ==========================================================================
	 Print styles.
	 Inlined to avoid the additional HTTP request:
	 http://www.phpied.com/delay-loading-your-print-css/
	 ========================================================================== */

@media print {
		*,
		*:before,
		*:after,
		*:first-letter,
		*:first-line {
				background: transparent !important;
				color: #000 !important; /* Black prints faster:
																	 http://www.sanbeiji.com/archives/953 */
				box-shadow: none !important;
				text-shadow: none !important;
		}

		a,
		a:visited {
				text-decoration: underline;
		}

		a[href]:after {
				content: " (" attr(href) ")";
		}

		abbr[title]:after {
				content: " (" attr(title) ")";
		}

		/*
		 * Don't show links that are fragment identifiers,
		 * or use the `javascript:` pseudo protocol
		 */

		a[href^="#"]:after,
		a[href^="javascript:"]:after {
				content: "";
		}

		pre,
		blockquote {
				border: 1px solid #4c4c4c;
				page-break-inside: avoid;
		}

		/*
		 * Printing Tables:
		 * http://css-discuss.incutio.com/wiki/Printing_Tables
		 */

		thead {
				display: table-header-group;
		}

		tr,
		img {
				page-break-inside: avoid;
		}

		img {
				max-width: 100% !important;
		}

		p,
		h2,
		h3 {
				orphans: 3;
				widows: 3;
		}

		h2,
		h3 {
				page-break-after: avoid;
		}
}