@charset "UTF-8";

#grid-body
{
	display: grid;
	max-width:1440px;
	background-color:rgb(250,250,250);
	margin:auto;
	grid-template-columns: repeat(14, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: 
		"fil fil fil fil fil fil fil fil fil fil fil fil fil fil"
		"aak aal aam title title title title title title title title aan aao aap"
		"aaq aar desc desc desc desc desc desc desc desc desc desc aas aat"
		"aau aav aaw aax aay share share share share aaz aba abb abc abd"
		"abe abf abg img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd abh abi abj"
		"abk abl abm figcap figcap figcap figcap figcap figcap figcap figcap abn abo abp"
		"abq abr red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first abs abt"
		"abu abv corps corps corps corps corps corps corps bordure bordure bordure abw abx"
		"aby abz shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey aca acb"
		"acc acd une une une une une une une une une une ace acf"
		"acg ach une-1 une-1 une-1 une-2 une-2 une-2 une-2 une-3 une-3 une-3 aci acj"
		"ack acl greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 acm acn"
		"aco acp sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous acq acr"
		"acs act greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 acu acv"
		"acw acx acy acz rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux ada adb adc ade"
		"adf adg formations formations formations formations formations formations formations formations formations formations adh adi"
		"adj adk forme-toi forme-toi forme-toi forme-toi forme-toi rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous adl adm"
		"adn ado greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 adp adq"
		"adr ads tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie adt adu"
		"adv adw categorie-1 categorie-1 categorie-1 categorie-2 categorie-2 categorie-2 categorie-2 categorie-3 categorie-3 categorie-3 adx ady"
		"adz aea plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles aeb aec";
		
}

.a-deco-none
{
	text-decoration: none;
}

#cont-vertical-rs
{
	position: absolute;
    width: 35px;
    margin-top: 25px;
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pictos-rs-vertical
{
	width: 100%;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.pictos-rs-vertical:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
}

#fil
{
	grid-area: fil;
	text-align: center;
	color: #8a8a8a;
	margin-top: 30px;
}

.a-fil
{
	font-family: overpass-light, Arial;
    font-size: 1rem;
    color: #8a8a8a;
	text-decoration: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.a-fil:hover
{
	color: #121619;
}

#title
{
	grid-area: title;
	margin-top:	25px;
	text-align: center;
}

#description
{
	grid-area: desc;
    font-family: overpass-light, Arial;
    font-weight: initial;
    font-size: 1.3rem;
    margin-top: 15px;
    text-align: center;
}

#etiquette-principale
{
	font-family: kaushan, Arial;
    font-size: 1.4rem;
    color: #B41021;
	text-decoration: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

#etiquette-principale:hover
{
	color: #254258;
}

#title-principal
{
	font-family: overpass-bold, Arial;
    font-weight: initial;
    font-size: 2.1rem;
    line-height: 2.4rem;
	margin: 5px 0 0 0;
}

#cont-partager
{
	grid-area: share;
	margin-top: 20px;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 50px;
	padding: 6px;
	padding-left: 20px;
	padding-right: 20px;
}

.share-fb
{
	background-image: url('images/sidebar/facebook.svg');
	width: 21px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 27px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 0.3s, background 0.3s;
	-moz-transition: opacity 0.3s, background 0.3s;
	-o-transition: opacity 0.3s, background 0.3s;
	transition: opacity 0.3s, background 0.3s;
}

.share-fb:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
	background-image: url('images/sidebar/facebook-red.svg');
}

.share-tw
{
	background-image: url('images/sidebar/twitter.svg');
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 40px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 0.3s, background 0.3s;
	-moz-transition: opacity 0.3s, background 0.3s;
	-o-transition: opacity 0.3s, background 0.3s;
	transition: opacity 0.3s, background 0.3s;
}

.share-tw:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
	background-image: url('images/sidebar/twitter-red.svg');
}

.share-in
{
	background-image: url('images/sidebar/linkedin.svg');
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 37px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 0.3s, background 0.3s;
	-moz-transition: opacity 0.3s, background 0.3s;
	-o-transition: opacity 0.3s, background 0.3s;
	transition: opacity 0.3s, background 0.3s;
}

.share-in:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
	background-image: url('images/sidebar/linkedin-red.svg');
}

#tx-partager-first
{
	font-family: overpass-bold, Arial;
    font-size: 1.1rem;
}

#img-hd
{
	grid-area: img-hd;
	margin-top:	10px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

#img-hd > img
{
	border-radius: 20px;
}

#video-principale
{
	position: absolute; 
	height: calc(100% - 5px);
}

#figcaption
{
	grid-area: figcap;
	font-family: ovepass-light, Arial;
	font-size: 0.9rem;
	text-align: center;
	color: #8a8a8a;
	margin-top: 10px;
}

#a-figcaption
{
	color: #8a8a8a;
	text-decoration: none;
}

#a-figcaption:hover 
{
	color: #B41021;
}

#redline-start-article
{
	grid-area: red-first;
	height: 4px;
	background-color: #B41021;
	margin-top: 35px;
	margin-bottom: 35px;
}

#corps-article
{
	grid-area: corps;
	font-family: overpass-light, Arial;
    font-size: 1.23rem;
    line-height: 1.95rem;
	border-right: 1px solid #ccc;
    padding-right: 22px;
}

#section-bordure
{
	grid-area: bordure;
}

.s-bordure
{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-left: 22px;
}

.livres-librairie
{
	margin-top: 15px;
}

.a-acces-biblio
{
	border-radius: 50px;
	border: 1px solid #121619;
	width: 90%;
	text-align: center;
	outline: none;
	font-size: 1.2rem;
	background: rgb(250, 250, 250);
	font-family: overpass-light, Arial;
	text-decoration: none;
	padding-top: 9px;
	padding-bottom: 9px;
	margin-top: 10px;
	margin-bottom: 45px;
	color: #121619;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;
}

.a-acces-biblio:hover
{
	color: #FFF;
	background-color: #121619;
}

.etiquette
{
	text-decoration: none;
	font-family: overpass-light, Arial;
	font-size: 1.12rem;
	color: #B41021;
}

.lil-title-article
{
	font-size: 1.12rem;
	font-family: overpass-bold, Arial;
	font-weight: initial;
	color: #121619;
	margin: 0;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

a:hover > .lil-title-article
{
	color: #254258;
}

.ajust-art-bord
{
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #ccc;
	padding-bottom: 25px;
}

.img-bord
{
	width: 100%;
	margin-top: 10px;
	border-radius: 15px;
}

#les-plus-lus
{
	width: 100%;
	text-align: left;
	font-family: overpass-bold, Arial;
	font-size: 1.2rem;
	color: #B41021;
	margin-top: 20px;
}

.link-article-video
{
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	z-index: 2;
}

.height-video
{
	position: absolute;
	height: 100%;
	border-radius: 15px;
}

.cont-video-height
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-top: 15px;
	margin-bottom: 10px;
}

.cont-flex-bord
{
	display: flex;
	margin-top: 30px;
}

.first-top-bord
{
	margin-top: 10px;
}

.num-art-bord
{
	font-family: kaushan, Arial;
	font-size: 1.8rem;
	padding-right: 20px;
	color: #B41021;
}

#cont-box-sources
{
	width: 100%;
	max-width: 1440px;
	position: fixed;
	bottom: 0;
	height: auto;
	padding: 25px;
	background-color: #B41021;
	color: #FFF;
	box-sizing: border-box;
	z-index: 110;
	display: none;
	line-height: 1.8rem;
}

#ajust-box-sources
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#close-sources
{
	width: 40px;
	min-width: 40px;
	height: 40px;
	font-family: overpass-light, Arial;
	font-size: 2rem;
	background: none;
	border: 1px solid #FFF;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
	cursor: pointer;
	-webkit-transition: color 0.3s, background 0.3s;
	-moz-transition: color 0.3s, background 0.3s;
	-o-transition: color 0.3s, background 0.3s;
	transition: color 0.3s, background 0.3s;
}

#close-sources:hover
{
	color: #B41021;
	background-color: #FFF;
}

#box-sources > a
{
	color: #FFF !important;
}

#box-sources > span
{
	color: #FFF !important;
}

#box-sources > a:hover
{
	text-decoration-style: dashed !important;
}



/*CORPS ARTICLE*/

p
{
	margin-bottom: 30px;
	margin-top: 30px;
}

blockquote
{
	border-left: 1px solid #B41021;
	padding-left: 20px;
	font-family: overpass-light, Arial;
	font-size: 1.92rem;
	line-height: 2.6rem;
	margin: 50px 0 50px 85px;
	width: 68%;
}

blockquote > p
{
	padding-top: 15px;
	padding-bottom: 15px;
}

#tx-par-auteur
{
	font-family: overpass-light, Arial;
	font-size: 1.1rem;
}

#tx-auteur
{
	font-family: overpass-bold, Arial;
	font-size: 1.1rem;
	text-decoration: none;
	color: #B41021;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

#tx-auteur:hover
{
	color: #254258;
}

.tx-size-lil-head-art, .a-dossier
{
	font-family: overpass-light, Arial;
	font-size: 0.95rem;
	color: #5f5f5f;
	text-decoration: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.a-dossier:hover
{
	color: #121619;
	text-decoration: underline;
	text-underline-position: under;
}

#tx-lecture
{
	font-family: overpass-light, Arial;
	font-size: 1.1rem;
	color: #5f5f5f;
}

#temps-lecture
{
	font-family: overpass-bold, Arial;
	font-size: 1.1rem;
	color: #5f5f5f;
}

.k-link
{
	color: #254258;
	text-decoration: underline;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.k-link:hover
{
	color: #B41021;
}

.k-link-alire
{
	font-family: overpass-bold, Arial;
	color: #B41021;
	text-decoration: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.k-link-alire:hover
{
	color: #254258;
}

.k-cont-push-btn
{
	display: flex;
	justify-content: center;
}

.k-push-btn
{
	border-radius: 50px;
	border: 2px solid #254258;
	text-align: center;
	outline: none;
	font-size: 1.2rem;
	background: rgb(250, 250, 250);
	padding: 9px 50px 9px 50px;
	font-family: overpass-bold, Arial;
	text-decoration: none;
	color: #254258;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;
}

.k-push-btn:hover
{
	background-color: #254258;
	color: #FFF;
}

.k-italic
{
	font-family: overpass-light-italic, Arial;
}

.k-bold
{
	font-family: overpass-bold, Arial;
}

.k-bold-italic
{
	font-family: overpass-bold-italic, Arial;
}

.k-red
{
	color: #B41021;
}

.k-autor
{
	font-family: overpass-bold, Arial;
	font-size: 1.4rem;
}

.k-book
{
	font-family: overpass-light, Arial;
	font-size: 1.4rem;
	display: table-footer-group;
	line-height: 25px;
}

.k-width-images
{
	width: 100%;
}

.k-top-images
{
	margin-top: 10px;
}

.k-figcaption
{
	font-family: overpass-light-italic, Arial;
	color: #8a8a8a;
	font-size: 0.9rem;
	display: table-footer-group;
	line-height: 20px;
}

.k-entete
{
	font-family: overpass-bold, Arial;
	font-size: 1.55rem;
	margin-bottom: -20px;
}

.twitter-tweet
{
	margin-top: 50px !important; 
	margin-bottom: 50px !important;
}    
	
.k-btn-sources
{
	cursor: pointer;
}

.k-sources-nbr-red
{
	color: #B41021;
	font-family: overpass-light, Arial;
	font-size: 1.35rem;
}

.k-sources
{
	margin-top: 15px;
	margin-bottom: 15px;
}

.k-cont-embed-youtube
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.k-cont-embed-youtube > img 
{
	width: 100%;
}

.k-iframe-youtube
{
	position: absolute;
	width: 100%;
	height: 100%;
}

.k-cont-pack
{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.k-cont-bis-pack
{
	width: 450px;
	box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, .1);
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 15px;
	overflow: hidden;
}

.k-a-cont-video
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.k-picto-hover-video
{
	position: absolute;
	width: 73px;
	height: 64px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	background-image: url(images/picto-yt-video.svg);
	background-repeat: no-repeat;
}

.k-a-cont-video:hover > .k-picto-hover-video
{
	background-image: url('images/picto-yt-video-red.svg');
	opacity: 1;
	filter: alpha(opacity=100);
}

.k-tx-pack
{
	padding: 30px;
}

.k-btn-decouvrir
{
	border-radius: 50px;
	border: 1px solid #121619;
	text-align: center;
	outline: none;
	font-size: 1.2rem;
	background: rgb(250, 250, 250);
	font-family: overpass-light, Arial;
	text-decoration: none;
	padding: 7px 55px 7px 55px;
	margin-top: 20px;
	margin-bottom: 30px;
	color: #121619;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;

}

.k-btn-decouvrir:hover
{
	color: #FFF;
	background-color: #121619;
}

hr
{
	border-style: solid;
	border-width: 0.5px;
	color: #B41021;
}

ul
{
	margin-left: 20px;
}

/*FIN CORPS ARTICLE*/


#share-and-keywords
{
	grid-area: shareandkey;
}

#cont-share-fin
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 25px;
}

#tx-partager-fin
{
	font-family: overpass-bold, Arial;
	font-size: 1.1rem;
	margin-right: 25px;
}

#cont-a-share-fin
{
	display: flex;
	justify-content: space-around;
	width: 150px;
}

#redline-end-article
{
	height: 4px;
	background-color: #B41021;
	margin-top: 15px;
	margin-bottom: 35px;
}

#tx-keywords
{
	font-family: overpass-bold, Arial;
	font-size: 1.1rem;
	min-width: 110px;
	margin-top: 12px;
}

#cont-keywords
{
	display: flex;
}

#cont-bis-keywords
{
	display: flex;
	flex-wrap: wrap;
}

.btn-keywords
{
	border-radius: 5px;
	border: 1px solid #5f5f5f;
	margin-right: 25px;
	margin-bottom: 20px;
	padding: 12px 20px 12px 20px;
	outline: none;
	background: none;
	font-size: 1.05rem;
	text-align: center;
	text-decoration: none;
	color: #5f5f5f;
	cursor: pointer;
	-webkit-transition: background 0.3s, color 0.3s, border 0.3s;
	-moz-transition: background 0.3s, color 0.3s, border 0.3s;
	-o-transition: background 0.3s, color 0.3s, border 0.3s;
	transition: background 0.3s, color 0.3s, border 0.3s;
}

.btn-keywords:hover
{
	color: #FFFFFF;
	background-color: #121619;
	border-color: #121619;
	
}

#cont-a-la-une
{
	grid-area: une;
	margin-top: 30px;
}

#tx-a-la-une, #tx-categorie, #plus-articles
{
	font-family: overpass-bold, Arial;
	font-size: 1.7em;
	color: #B41021;
	text-decoration: none;
}

#tx-a-la-une:hover, #tx-categorie:hover
{
	color: #121619;
}

#une-1
{
	grid-area: une-1;
}

#cont-une-2
{
	grid-area: une-2;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 1fr;
}

#une-3
{
	grid-area: une-3;
}

#une-2
{
	grid-column: 2 / span 6;
}

.hover-img
{
	filter: brightness(1);
	-webkit-transition: filter 0.3s;
	-moz-transition: filter 0.3s;
	-o-transition: filter 0.3s;
	transition: filter 0.3s;
}

.hover-img:hover
{
	filter: brightness(0.7);
}

.img-fin-article
{
	margin-top: 15px;
	margin-bottom: 10px;
	border-radius: 15px;
}

#cont-qui-sommes-nous
{
	grid-area: sommes-nous;
}

#cont-qui-sommes-nous, #cont-forme-toi
{
	text-align: center;
	border-right: 1px solid #CCC;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tx-title-nous
{
	font-family: overpass-bold, Arial;
	font-size: 1.8rem;
	margin-top: 30px;
	margin-bottom: 15px;
}

.tx-desc-nous
{
	font-family: overpass-light, Arial;
	font-size: 1.4rem;
	margin-bottom: 23px;
}

#nous-savoir-plus, #nous-forme-toi, #btn-rejoins-nous
{
	border-radius: 50px;
	border: 1px solid #121619;
	width: 41%;
	outline: none;
	font-size: 1.1rem;
	background-color: rgb(250, 250, 250);
	font-family: overpass-light, Arial;
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 30px;
	color: #121619;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;
}

#nous-savoir-plus:hover, #nous-forme-toi:hover, #btn-rejoins-nous:hover
{
	background-color: #121619;
	color: #FFF;
}

#fait-un-don
{
	border-radius: 50px;
	border: 1px solid #B41021;
	width: 41%;
	outline: none;
	font-size: 1.1rem;
	background-color: #B41021;
	font-family: overpass-regular, Arial;
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 30px;
	color: #FFF;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;
}

#fait-un-don:hover
{
	background-color: rgb(250,250,250);
	color: #B41021;
}

#cont-soutiens-nous
{
	grid-area: soutiens-nous;
}

#cont-soutiens-nous, #cont-rejoins-nous
{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cont-pictos-rs-nous
{
	grid-area: rsociaux;
	display: flex;
	align-items: center;
}

.space-around-rs-nous
{
	justify-content: space-around;
	padding: 25px 20px 20px 25px;
	box-sizing: border-box;
}

.pictos-rs-nous
{
	height: 50px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity 0.45s;
	-moz-transition: opacity 0.45s;
	-o-transition: opacity 0.45s;
	transition: opacity 0.45s;
}

.pictos-rs-nous:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
}

#greyline-1
{
	grid-area: greyline-1;
	background: none;
	border-bottom: 2px dotted #CCC;
	height: 4px;
	margin-bottom: 30px;
	margin-top: 50px;
}

#greyline-2
{
	grid-area: greyline-2;
	background: none;
	border-top: 2px dotted #CCC;
	height: 4px;
	margin-top: 30px;
}

#greyline-3
{
	grid-area: greyline-3;
	background: none;
	border-top: 2px dotted #CCC;
	height: 4px;
	margin-top: 30px;
}

#section-cours-form
{
	grid-area: formations;
	margin-bottom: 35px;
}

#a-cours-form
{
	width: 100%;
	display: flex;
	align-items: center;
}

#cont-forme-toi
{
	grid-area: forme-toi;
}

#cont-rejoins-nous
{
	grid-area: rejoins-nous;
}

#cont-tx-categorie
{
	grid-area: tx-categorie;
	margin-top: 30px;
}

#categorie-art-1
{
	grid-area: categorie-1;
}

#cont-categorie-art-2
{
	grid-area: categorie-2;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 1fr;
}

#categorie-art-2
{
	grid-column: 2 / span 6;
}

#categorie-art-3
{
	grid-area: categorie-3;
}

#cont-plus-articles
{
	grid-area: plus-articles;
	display: flex;
	flex-direction: column;
	margin-top: 40px;
}

.div-plus-articles
{
	margin-top: 10px;
}

.tx-plus-articles
{
	font-size: 1.12rem;
	font-family: overpass-bold, Arial;
	text-decoration: none;
	color: #121619;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.tx-plus-articles:hover
{
	color: #B41021;
}

/*rupture en dessous d'ordi/tablette paysage*/
@media screen and (max-width: 1200px)
{	
	#grid-body
	{
		grid-template-areas: 
			"fil fil fil fil fil fil fil fil fil fil fil fil fil fil"
			"aak aal aam title title title title title title title title aan aao aap"
			"aaq aar desc desc desc desc desc desc desc desc desc desc aas aat"
			"aau aav aaw aax aay share share share share aaz aba abb abc abd"
			"abe abf abg img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd abh abi abj"
			"abk abl abm figcap figcap figcap figcap figcap figcap figcap figcap abn abo abp"
			"abq red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first abr"
			"abs corps corps corps corps corps corps corps corps bordure bordure bordure bordure abt"
			"abu shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey abv"
			"abw une une une une une une une une une une une une abx"
			"aby une-1 une-1 une-1 une-1 une-2 une-2 une-2 une-2 une-3 une-3 une-3 une-3 abz"
			"aca greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 acb"
			"acd sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous ace"
			"acf greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 acg"
			"ach aci acj rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux ack acl acm"
			"acn formations formations formations formations formations formations formations formations formations formations formations formations aco"
			"acp forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous acq"
			"acr greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 acs"
			"act tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie acu"
			"acv categorie-1 categorie-1 categorie-1 categorie-1 categorie-2 categorie-2 categorie-2 categorie-2 categorie-3 categorie-3 categorie-3 categorie-3 acw"
			"acx plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles acy";
			
	}
}

/*rupture en dessous de tablette portrait*/
@media screen and (max-width: 959px)
{
	#grid-body
	{
		grid-template-areas: 
			"fil fil fil fil fil fil fil fil fil fil fil fil fil fil"
			"aak aal title title title title title title title title title title aao aap"
			"aaq aar desc desc desc desc desc desc desc desc desc desc aas aat"
			"aau aav aaw aax share share share share share share aba abb abc abd"
			"abe abf img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd abi abj"
			"abk abl abm figcap figcap figcap figcap figcap figcap figcap figcap abn abo abp"
			"red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first"
			"corps corps corps corps corps corps corps corps corps bordure bordure bordure bordure bordure"
			"shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey"
			"une une une une une une une une une une une une une une"
			"une-1 une-1 une-1 une-1 une-1 une-2 une-2 une-2 une-2 une-3 une-3 une-3 une-3 une-3"
			"greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1"
			"sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous"
			"greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2"
			"abq abr rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux abs abt"
			"formations formations formations formations formations formations formations formations formations formations formations formations formations formations"
			"forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous"
			"greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3"
			"tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie"
			"categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-2 categorie-2 categorie-2 categorie-2 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3"
			"plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles";
	}
	
	#corps-article
	{
		padding-left: 22px;
	}
	
	#share-and-keywords, #cont-plus-articles
	{
		padding-left: 22px;
		padding-right: 22px;
	}
	
	#tx-a-la-une, #tx-categorie
	{
		margin-left: 22px;
	}
	
	#une-1, #categorie-art-1
	{
		padding-left: 22px;
	}
	
	#une-3, #categorie-art-3
	{
		padding-right: 22px;
	}
	
	#cont-plus-articles
	{
		margin-top: 20px;
	}
	
	blockquote
	{
		margin: 50px 0 50px 1px;
		width: 90%;
	}
	
	#cont-vertical-rs
	{
		margin-left: 16px;
	}
	
	.s-bordure
	{
		padding-right: 22px;
	}
}

/*rupture smartphone*/
@media screen and (max-width: 767px)
{
	
	#grid-body
	{
		grid-template-areas: 
			"fil fil fil fil fil fil fil fil fil fil fil fil fil fil"
			"title title title title title title title title title title title title title title"
			"desc desc desc desc desc desc desc desc desc desc desc desc desc desc"
			"aaa share share share share share share share share share share share share aab"
			"img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd img-hd"
			"figcap figcap figcap figcap figcap figcap figcap figcap figcap figcap figcap figcap figcap figcap"
			"red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first red-first"
			"corps corps corps corps corps corps corps corps corps corps corps corps corps corps"
			"shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey shareandkey"
			"greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1 greyline-1"
			"soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous soutiens-nous"
			"sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous sommes-nous"
			"greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2 greyline-2"
			"rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux rsociaux"
			"bordure bordure bordure bordure bordure bordure bordure bordure bordure bordure bordure bordure bordure bordure"
			"une une une une une une une une une une une une une une"
			"une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1 une-1"
			"une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2 une-2"
			"une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3 une-3"
			"formations formations formations formations formations formations formations formations formations formations formations formations formations formations"
			"forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi forme-toi"
			"rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous rejoins-nous"
			"greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3 greyline-3"
			"tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie tx-categorie"
			"categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1 categorie-1"
			"categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2 categorie-2"
			"categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3 categorie-3"
			"plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles plus-articles";
	}
	
	#une-1, #categorie-art-1
	{
		padding-right: 22px;
		padding-bottom: 30px;
	}
	
	#une-2, #categorie-art-2
	{
		grid-column: 1 / span 8;
		padding-left: 22px;
		padding-right: 22px;
		padding-bottom: 30px;
	}
	
	#une-3, #categorie-art-3
	{
		padding-left: 22px;
		padding-bottom: 30px;
	}
	
	#cont-vertical-rs
	{
		display: none;
	}
	
	#cont-qui-sommes-nous, #cont-forme-toi
	{
		border-right: none;
	}
	
	#title-principal
	{
		margin-left: 22px;
		margin-right: 22px;
		font-size: 1.9rem;
		line-height: 2.3rem;
	}
	
	blockquote
	{
		font-size: 1.7rem;
    	line-height: 2.3rem;
	}
	
	ul
	{
		margin-left: 0px;
	}
	
	#description, #img-hd, #figcaption
	{
		margin-left: 22px;
    	margin-right: 22px;
	}
	
	.btn-keywords
	{
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 5px 10px 5px 10px;
	}
	
	#art-epingle
	{
		padding-top: 30px;
	}
	
	#greyline-1
	{
		margin-bottom: 10px;
	}
	
	#greyline-2, #greyline-3
	{
		margin-top: 25px;
	}
	
	#les-plus-lus
	{
		font-size: 1.7rem;
	}
	
	#cont-a-la-une
	{
		margin-top: 0;
	}
	
	#section-cours-form
	{
		margin-bottom: 0px;
		margin-top: 20px;
	}
	
	#nous-forme-toi, #btn-rejoins-nous
	{
		margin-bottom: 15px;
	}
	
	.div-plus-articles
	{
		margin-bottom: 10px;
	}
	
	#corps-article
	{
		border: none;
	}
	
}