@charset "utf-8";
/* CSS Document */


@font-face {
  		font-family:"WalkwayUltraBold";
    	src: url('../fonts/WalkwayUltraBold.eot'); /* Pour IE9 Compat mode */
		src: url('../fonts/WalkwayUltraBold.woff') format('woff'),/* Pretty Modern Browsers */
		url('../fonts/WalkwayUltraBold.ttf') format('truetype'),/* Safari, Android, iOS */
	 	url('../fonts/WalkwayUltraBold.svg#WalkwayUltrabold') format('svg'); /* Legacy iOS */
}

.great .WalkwayUltraBold {font-family:'WalkwayUltraBold';letter-spacing: 0.05em;  
	-webkit-font-smoothing :antialiased;
  -moz-osx-font-smoothing : auto; }
  
body {font-family:"Muli", Helvetica, Arial, sans-serif; font-size: 14px}
p {font-size:18px; color:#888888; overflow: hidden}

.section, .page-header {padding:80px 0px 10px; clear:both}
section h2 {padding-bottom:20px}


h1 {
	font-family:"WalkwayUltraBold", Helvetica, Arial, sans-serif; 
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:#222222; 
	text-align: center
	}


h2, h3, h4, h5, h6 {
	font-family:"Muli", Helvetica, Arial, sans-serif; 
	letter-spacing: 0.05em;
}
h2  {font-size: 1.6em;font-weight:400;-webkit-font-smoothing: antialiased; text-transform: uppercase; letter-spacing: inherit;color:#8bb7df; text-align: center}

h3 {font-size: 1.2em;color:#8bb7df;text-transform: uppercase;font-weight:800;line-height: 1.4em}

h4 {font-size: 1.2em; color:#8bb7df; font-weight:600;margin-top: 20px;opacity:0.8}

h5 {font-size: 0.9em;color:#d77584;font-weight:800;}

.accentuation {font-size: 1em; color:#d77584; font-weight:500; margin:10px;}

h6 {font-size: 0.6em; font-weight:800;text-transform: uppercase; color:#0057b8}

hr {margin-top: 10px; margin-bottom:10px;}

.styleHTML {margin:0px auto 20px auto}


sup {font-family: 'Didact Gothic', Helvetica, Arial, sans-serif, sans-serif; font-size: 0.6em; letter-spacing: 0.05em; top: -.9em;}
p sup {top: -.6em;}

.great {font-size: 160%;letter-spacing: inherit;}

p .small {
    font-size: 60%;
}

footer p {font-size:inherit}

.bleuclair {color:#8bb7df;}

.couleur {display: inline-block;}
.couleur h3 {text-transform : inherit}
.godet {
    width: 150px; 
    height: 150px;
    margin: 20px;
    padding: 10px;
    font-size: 10px;
    line-height: 2.6em;
    color: #fff;
    text-align: left;
    border: 2px solid #cccccc;
    
}

.code {
	
    background: #eee;
    border-radius: 3px;
    font-family: courier, monospace;
	font-size:16px;
    padding: 10px;
	color:#555555;
	border:1px solid #d77584;
}

.fonte {display:block; max-width:720px; text-align: left;}
.fonte p {font-size: 14px;}


span.paragraphe {padding-left:20px}

.bg_bleu {background:#0057b8;}
.bg_noir {background:#222222;}
.bg_rouge {background:#E4002B;}


.bg_nuit {background:#023665;}
.bg_violet {background:#3d1152;}
.bg_prune {background:#600832;}

.bg_ciel {background:#8bb7df;}
.bg_pervenche {background:#d7dceb;}
.bg_rose {background:#d77584;}

.bg_eau {background:#98d8b9;}
.bg_argile {background:#E5d5a7;}
.bg_chair {background:#fdc99a;}
.bg_blanc {background:#ffffff; color:#222222}
.bg_grey {background:#f4f4f4}

.cellule {font-size: 0.9em; font-weight: 800}


.card {padding-top:50px;}
/*PANELS ================================================================================*/
.panel-heading {padding: 3px; text-align: center}
.panel-heading h2 {font-size: 1.6em; color:#666; letter-spacing: 0.05em }
 h3.panel-title {background:#f4f4f4;font-size: 12px; color:#448ACB;padding: 10px; text-align: center; letter-spacing: 0.07em} 
.collapse.panel-title {color:#E4002B}

/*LISTES ================================================================================*/
ul {padding-inline-start: 10px; list-style: none}

ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 30px;
	color:#448ACB;
	font-weight:600;
	
}

.liste {max-width:400px}

.liste>li {text-align: left; padding:5px
}

li {line-height: 1.8 em;}

.lien {list-style: none; font-family: 'Muli'; font-weight:800; color:#0057b8}

.chapitre {background-image: url(../images/bg1.png);max-width:600px;
}

.chapitre ul {padding:50px 80px 50px 80px;}
.chapitre li a {color:#fff; }
.lettrine {background:url(../images/LETTRINE-COQ_BLANC.png);font-size:80px; font-family: 'Muli'; color:#ccc}
/*COULEURS================================================================================*/


/*NAVIGATION================================================================================*/


.navbar-toggle {
    background-color: #E4002B;
}

 .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
	padding-bottom: 15px;
}


.inline {display:inline}

/*LIEN ================================================================================*/
a:focus, a:hover{
	text-decoration: none;
	color:#448ACB;	
}

li a {
    color: #232323;
    text-decoration: none;font-weight:400;
}

footer p{
    font-size: 0.9em;
}




/*ICONES ================================================================================*/
.icone {
	display: inline-block;
	text-align: center;	
	margin:25px;

}

.icone_btn {
	display: inline-block;
	text-align: center;	
	margin:10px;
	background:url(../images/bg1.png);
	min-width: 100px;
	padding:5px 10px;
	color:#fff;
}

.icone_btn a {color:#fff}
a.icone_btn:hover {color:#fff;opacity:0.8}
.icone_btn a:hover {opacity:0.8}

.icone img, .icone_btn {
  object-fit: cover;
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.icone:hover img, .icone:focus img, .active, .icone_btn:hover, .icone_btn:focus {
  box-shadow: none;
	cursor: pointer;
	color:rgba(255,255,255,0.8)
}

/*FA ICONES ================================================================================*/
h2 .fas {color:#e4002b; margin-right: 10px; padding:20px; font-size:50px; vertical-align:bottom}

.fa {padding-right:5px;}
/*ILLUSTRATIONS================================================================================*/

.off img, .off:hover img,.off:focus img {box-shadow: none;cursor:default}
.active img { box-shadow: none;
	cursor: pointer;
	}

/*VIGNETTES================================================================================*/

.vignette {text-align: center; padding:4px;background:#d7dceb; width:140px; min-width:40px}
.marge {background:#fff; margin:20px}



.pourtour {padding:30px}
.cadre {padding:2px; background: #dddddd;}
.thumbnail {
    display: block;
    padding: 0px; 
    margin-bottom: 20px;
    line-height: 1.42857143;
    background: #ffffff;
    border-radius: 0px; 
}


.marge {margin:15px auto 0px auto}
.illustration img {padding:30px}
.carre {margin: 30px auto}

figcaption {font-size : 0.8em; padding:10px}
 
/*GALERIE================================================================================*/
#portfoliolist {display:block; max-width: 1160px; text-align: center}
#portfoliolist .portfolio {
	
	max-width: 250px;
	margin-bottom :60px;
	display:none; 

	overflow:hidden;
	margin-right: 10px;
		
}

	.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		padding:4px;
		background:#d7dceb;
	cursor:none;
	}

	.portfolio img {
		width:100%;
		position: relative;
		opacity: 1;
 -webkit-transition: all 450ms ease-in 0s;
  -moz-transition: all 450ms ease-in 0s;
  -o-transition: all 450ms ease-in 0s;
	-ms-transition: all 450ms ease-in 0s;
  transition: all 450ms ease-in 0s;
	
	}
	
	.portfolio .label {
		position: absolute;
		width: 100%;
		height:100%;
		background: url(../images/bg1.png);
		left:0px;
		top:-100%;
		opacity: 1;
		-webkit-transition: all 450ms ease-in 0s;
 		 -moz-transition: all 450ms ease-in 0s;
  		-o-transition: all 450ms ease-in 0s;
		-ms-transition: all 450ms ease-in 0s;
  		transition: all 450ms ease-in 0s;
	
	
	}

		.portfolio .copyright {
			padding-top: 10px;
		
			opacity:0.8;
			color: #fff;
			font-weight:400;
			font-size:1em
		}
		

	
		.portfolio .label-text {
			position: absolute;
			width: 100%;
			height:-100%;
			color:#fff;
			z-index:500;
			top:20px;
			
		}
			
			.portfolio .poids {
				display:block;
				font-size:12px;
				padding-top: 10px;
				
			}


	
	.portfolio:hover .label {
   top:0;
		
  }
	.portfolio:hover img {
   opacity: 0;
	-webkit-transition: all 450ms ease-out 0s;
  -moz-transition: all 450ms ease-out 0s;
  -o-transition: all 450ms ease-out 0s;
	-ms-transition: all 450ms ease-out 0s;
  transition: all 450ms ease-out 0s;		
  }  

.fa-download{}
.fa-download{display: block;width:100%; height: 100%;
	color: #fff;font-size: 16px; padding-top: 25%;
			
			z-index:2;color: #fff;font-size: 16px; text-align: center}
 
.fichier a {color:#fff; line-height: 2}
.fichier a:hover, .poids a:focus { 
	
	
	
 opacity:0.8;}
	


/* WELL ELEMENT
-------------------------------------------------- */
.well {
	color: #222222;
	border-radius:inherit;
	border-bottom-left-radius: 50px;
	border-top-right-radius: 50px;
	padding:40px;
  	font-style: italic;
	font-size: 1.2em;}

.well a {color:#0057b8; font-weight:600}
	
/* FOOTER
-------------------------------------------------- */	
footer {min-height: 70px; background: #fff}


/* colonne
-------------------------------------------------- */
.colonne {border-right: 6px solid #d7dceb;  }
.soussection {padding:20px;}
.soussection.versionH { margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-10%);padding:0px; /* tiré de la moitié de sa propre hauteur */}
/*RESPONSIVE ================================================================================*/


	
	
	
	
	@media (max-width: 960px) {	
.icone {
	max-width:20%;
	margin:10px;
}
	
	

}

@media (max-width: 760px) {	

	.colonne {border-right: 0px solid #d7dceb;  }
	.section, .page-header {padding:80px 0px 10px; clear:both}
}

@media (max-width: 520px) {	
	.icone {
	max-width:15%;
	min-width:120px;
	margin:10px;
	
}


}