div.header{
	height: 10em;
}
div.header>p{
	height: inherit;
	background-color: #003134;
	width: 25%;
	position: absolute;
	right:0;
}
div.header.rouge>p{
	background-color: #410016;
}
div.header.violet>p{
	background-color: #42053e;
}
div.header>p>span:first-child{
    display: inline-block;
	height: inherit;
    width: 0%;
    position: absolute;
    left: -11px;
    border-left: 28px solid #fff;
    transform: skew(-10deg);
}
div.header>p>span:nth-child(2){
    position: absolute;
    left: 30%;
    top: 40%;
}
.wrapAll h1 {
	color:#000;
	width:100%;
	height: 300px;
	position: relative;
	z-index: 1;	
	font-size: 2.5em; 
}
.wrapAll h1::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
	height: 100%;
	opacity: 1;
	background-image: url("../../images/img1.jpg");
	background-repeat: no-repeat;
	z-index: -1;
}
.wrapAll h1.rougeTitle::before {
	background-image: url("../../images/img2.png");
	background-size: contain;
}
.wrapAll h1.violetTitle::before {
	background-image: url("../../images/img3.png");
	background-size: contain;
}
.wrapAll { font-size: 1.3em }
.wrapAll h1 span:nth-child(1) {
	display:block;
	width:40%;
	font-weight: bolder;
} 
.wrapAll h1 span:nth-child(1):after {
    content: "";
    display: block;
    width: 30%;
	padding-top:0.5em;
    border-bottom: 10px solid #c9862d;
}
.wrapAll h1 span:nth-child(2) {
	display:block;
	padding-top:0.5em;
	font-size:0.75em;
}

h2 { 
	color:#fff;
	width: 100%;
    padding: 1em;
	text-align: center;
    font-size: 2em;
}
h3 { 
	font-size: 1.3em;
	color: #222;
}
h4 { 
	font-size: 1.2em;
	color: #222;
}
h5 {
	font-style: normal;
	font-size: 1em;
	color: #222;
}
.orange { background-color: #c9862d; }
.rouge 	{ background-color: #6a0032; }
.olive  { background-color: #8b9538; }
.violet { background-color: #6b1e69; }
.bleu   { background-color: #1e384b; }
.vert	{ background-color: #036064; }
.navy 	{ background-color: #003134; }

.spaceBottom { margin-bottom:1em; }

.wrapAll .floatRight { width: 80%; }

.wrapAll .rightBox { width: 80%; float:right; padding-top:2em; }
.wrapAll .thePlus { text-align: center; font-size:3em; font-weight:bold; }
.wrapAll .twoCol { columns: 2; -webkit-columns: 2; -moz-columns: 2; }

.downloadinfographic {
	font-size: 1.23em;
}

ul.grogg {
    flex: none;
}	
ul.grogg li {
	list-style: none;
	position: relative;	
    min-height: 5em !important;
	width: 50%;
	margin: 0% 0% 0% 10%;
}
ul.grogg li::before {
	content: " ";
    display: block;
    position: absolute;
    width: 108px;
    height: 70px;
    background-size: contain;
    left: -125px;
    top: 0;
    background: url(../../images/a11y1.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(2)::before {
    background: url(../../images/a11y2.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(3)::before {
    background: url(../../images/a11y3.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(4)::before {
    background: url(../../images/a11y4.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(5)::before {
    background: url(../../images/a11y5.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(6)::before {
    background: url(../../images/a11y6.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(7)::before {
    background: url(../../images/a11y7.jpg) no-repeat 50% 50%;
}
ul.grogg li:nth-of-type(8)::before {
    background: url(../../images/a11y8.jpg) no-repeat 50% 50%;
}

ol.orangeList {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
}
ol.orangeList li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  margin-bottom: 2em;
}
ol.orangeList li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 50px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: -10px;
  background: #c9862d;
  text-align: center;
  text-shadow: 5px 5px 5px #666;
}
ol.rougeList li::before {
	background: #6a0032;
}
p.retour {
	text-align:right;
}
p.retour::before,
.checkHead::before {
    content: " ";
    display: inline-block;
    position: absolute;
    width: 25px;
    height: 25px;
    background: url(../../images/check.jpg) no-repeat 50% 50%;
    background-size: contain;
	margin-left: -40px;
}
.checkHead {
	margin: 0 0 1em 2.2em;
	
}
.checkHead::before {
	width: 37px;
	height: 37px;
	margin-left: -55px;
}
#part12 { 
	padding: 1em 0 1em 2em;
    font-size: 2em;
}
#part12::before {
    content: " ";
    display: inline-block;
    position: absolute;
    background: url(../../images/check.jpg) no-repeat 50% 50%;
    background-size: contain;
	width:55px;
	height:55px;
	left: 10px;
}
@media only screen and (max-width: 1300px) {
	.wrapAll .twoCol { columns: 1; -webkit-columns: 1; -moz-columns: 1; }
	ul.grogg li {
	width: 100%;
	margin: 0% 0% 0% 10%;
	}
	div.header>p>span:nth-child(2) {
		top: 20%;
	}
}	
@media only screen and (max-width: 1200px) {
	.wrapAll h1::before {
		background-size:150px;
		opacity:0.5;
		right:-200px;
	}
	.wrapAll h1 span:nth-child(1) {
		width:90%;
	}
	.wrapAll h1 span:nth-child(1):after {
		border-bottom: 5px solid #c9862d; 
	}
	.wrapAll .floatRight { width: 100%; clear:both; }
	.wrapAll .rightBox { width: 100%; padding-top:1em; }
}
@media only screen and (max-width: 800px) {

	.wrapAll { font-size: 1.1em }
	.wrapAll h1{
			background-color:rgb(201, 134, 45, .3); 
	}
	.wrapAll h1::before {
		display: none;
	}

	.wrapAll h1 span:nth-child(2) {
		width:100%;
	}
	
	.wrapAll .twoCol {
		padding: 0 10%;
	}
	
	img.floatLeft {display:none;}

	ul.grogg li {
		margin: 0% 0% 0% 15%;
	}
	
	ul.grogg li::before {
		left: -110px;
	}
	
	div.header>p>span:nth-child(2) {
		display: flex;
		left: -100%;
	}
}