www.chapril.org-spip/css/perso-modif.css

@font-face
{
	font-family:'dejavu_sanscondensed';
	src:url(webfonts/DejaVuSansCondensed-webfont.eot);
	src:url(webfonts/DejaVuSansCondensed-webfont.eot?#iefix) format("embedded-opentype"),url(webfonts/DejaVuSansCondensed-webfont.woff) format("woff"),url(webfonts/DejaVuSansCondensed-webfont.svg#dejavu_sanscondensed) format("svg");
	font-weight:400;
	font-style:normal
}

@font-face
{
	font-family:'dejavu_sanscondensed_oblique';
	src:url(webfonts/DejaVuSansCondensed-Oblique-webfont.eot);
	src:url(webfonts/DejaVuSansCondensed-Oblique-webfont.eot?#iefix) format("embedded-opentype"),url(webfonts/DejaVuSansCondensed-Oblique-webfont.woff) format("woff"),url(webfonts/DejaVuSansCondensed-Oblique-webfont.svg#dejavu_sanscondensed_oblique) format("svg");
	font-weight:400;
	font-style:normal
}

@font-face
{
	font-family:'dejavu_sanscondensed_bold';
	src:url(webfonts/DejaVuSansCondensed-Bold-webfont.eot);
	src:url(webfonts/DejaVuSansCondensed-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(webfonts/DejaVuSansCondensed-Bold-webfont.woff) format("woff"),url(webfonts/DejaVuSansCondensed-Bold-webfont.svg#dejavu_sanscondensed_bold) format("svg");
	font-weight:400;
	font-style:normal
}

*
{
	margin:0;
	padding:0
}

a
{
	text-decoration:none;
	color:#2e5281
}

a:hover
{
	color:#ff5e00
}

a:active
{
	color:#5bc6f2
}

body
{
	font-family:'dejavu_sanscondensed',sans-serif;
	color:#5f5f5f;
	background-color:#f7f7f9
}

p,li
{
	font-size:14px;
	line-height:24px
}

h1,h2,h3,H4
{
	color:#2e5281;
	font-weight:400
}

h1
{
	font-size:32px
}

h2
{
	font-size:24px
}

h3
{
	font-size:21px
}

H4
{
	font-size:19px
}

a[href*]
{
	color:#2e5281
}

header
{
	display:grid;
	grid-template-rows:75px;
	grid-template-columns:15% 70% 15%;
	background-color:#005184;
	color:#fff
}

header > a
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:1;
	grid-column-end:2;
	justify-self:flex-end;
	align-self:center;
	margin:10px
}

header p a
{
	color:#fff
}

header .spip_logos
{
	width:auto;
	height:45px
}

#navigation
{
	grid-column-start:2;
	grid-column-end:3;
	list-style-type:none;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:1px;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(0,1fr));
	justify-items:center;
	align-content:center;
	align-items:center;
	justify-content:center;
	margin-right:6rem
}

header #navigation a
{
	text-align:center
}

.menu-mobile-ouvre
{
	display:none
}

.menu-mobile-ferme
{
	display:none
}

header p
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:3;
	grid-column-end:-1;
	justify-self:flex-end;
	align-self:center;
	padding-right:2rem
}

header nav a
{
	color:#fff
}

header a:hover
{
	color:#ff9759
}

header p
{
	margin:0 10px 0 0;
	color:#e2edf9;
	font-size:11px;
	line-height:15px
}

.banniere
{
	display:grid;
	grid-template-rows:440px;
	grid-template-columns:1fr;
	background:url(../img/bann-2-ecrans.png),url(../img/bann-3-ecrans.png),url(../img/bann-fond.png),linear-gradient(to right,#1878c3,#538ce8,#81c1ff);
	background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
	background-position:bottom -240px right -50%,bottom -190px left 10%,bottom -230px center,center center;
	background-size:800px,800px,650px,100%
}

.banniere article
{
	grid-column-start:1;
	grid-column-end:-1;
	grid-row-start:1;
	grid-row-end:-1;
	justify-self:center;
	padding-top:100px
}

.banniere article h1
{
	color:#fff;
	font-size:35px
}

.banniere article p
{
	display:flex;
	justify-content:center;
	flex-direction:row;
	padding-top:20px
}

.banniere article a
{
	margin:1rem 3rem 0 0;
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family:'dejavu_sanscondensed_bold';
	padding:.3rem 1rem;
	background-color:#2e5281;
	border-radius:5px;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5)
}

.banniere article a ~ a
{
	color:#2e5281;
	background-color:#fff;
	margin-right:0
}

.banniere article a:hover
{
	color:#fff;
	background-color:#ff5e00
}

.presentation
{
	display:grid;
	grid-template-rows:1fr;
	grid-template-columns:10% 40% 40% 10%
}

.presentation article
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3;
	margin:0 50px
}

.presentation article + article
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:3;
	grid-column-end:4;
	padding-bottom: 100px;
}

.presentation article h2
{
	padding:3rem 0
}
.presentation h3
{
	margin-bottom: 0.5rem;
}

.bouton-simple
{
	text-transform:uppercase;
	font-size:13px;
	font-family:'dejavu_sanscondensed';
	letter-spacing:1px;
	padding:10px 0;
	margin:1rem 0;
	display:block;
	color:#416687
}

articles div
{
	margin-bottom:1.5rem
}

.bouton-utilise
{
	display:block;
	max-width:200px;
	min-width:100px;
	margin-top:.7rem;
	text-align:center;
	color:#fff;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family:'dejavu_sanscondensed_bold';
	background-color:#2e5281;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5);
	border-radius:7px;
	padding:.7rem 1rem
}

.bouton-utilise:hover
{
	color:#fff;
	background-color:#ff5e00
}

.presentation blockquote.postscriptum p
{
	font-family:dejavu_sanscondensed_oblique;
	font-size:12px;
	line-height:17px;
	margin:0;
	padding:.5rem 0
}

.derniers-services
{
	display:grid;
	grid-template-rows:1fr;
	grid-template-columns:10% 40% 40% 10%;
	margin:4rem 0
}

.sous-titre
{
	grid-row-start:1;
	grid-row-end:2;
	grid-column-start:1;
	grid-column-end:-1;
	text-align:center
}

.derniers-services article
{
	grid-row-start:2;
	grid-row-end:3;
	grid-column-start:2;
	grid-column-end:3;
	margin:20px 40px;
	text-align:center;
	background-color:#fff;
	border-radius:8px;
	border-top:14px #b0cbe8 solid;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5)
}

.derniers-services article + article
{
	grid-row-start:2;
	grid-row-end:3;
	grid-column-start:3;
	grid-column-end:4
}

.derniers-services article + article + article
{
	grid-row-start:3;
	grid-row-end:4;
	grid-column-start:2;
	grid-column-end:3
}

.derniers-services article + article + article + article
{
	grid-row-start:3;
	grid-row-end:4;
	grid-column-start:3;
	grid-column-end:4
}

.derniers-services .bouton-appel
{
	grid-column-start:1;
	grid-column-end:-1;
	margin:5rem auto;
	text-align:center;
	color:#fff;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family:'dejavu_sanscondensed_bold';
	background-color:#2e5281;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5);
	border-radius:10px;
	padding:1.2rem 2.5rem;
	min-width:250px;
	max-width:300px
}

.derniers-services blockquote.postscriptum p
{
	font-family:'dejavu_sanscondensed_oblique';
	font-size:12px;
	line-height:17px;
	padding:.5rem 1rem 1rem
}

.master-rubrique .derniers-services
{
	display:grid;
	grid-template-rows:1fr;
	grid-template-columns:10% 80% 10%;
	margin:4rem 0
}

.master-rubrique .sous-titre
{
	grid-row-start:1;
	grid-row-end:2;
	grid-column-start:1;
	grid-column-end:-1
}

.master-rubrique .tous-les-services
{
	grid-row-start:2;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between
}

.master-rubrique .derniers-services article
{
	width:45%;
	margin:1rem;
	text-align:center;
	background-color:#fff;
	border-radius:8px;
	border-top:14px #b0cbe8 solid;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5)
}

.master-rubrique .derniers-services h2
{
	padding:1rem 0;
	height:2rem
}

.derniers-services .bouton-appel:hover
{
	color:#fff;
	background-color:#ff5e00
}

.derniers-services h2,.derniers-services h1
{
	text-transform:lowercase;
	height:4rem
}

.derniers-services h2::first-letter,.derniers-services h1::first-letter
{
	text-transform:uppercase
}

.derniers-services h3
{
	text-align:center;
	margin:2rem auto .7rem
}

.derniers-services p
{
	text-align:left;
	padding:1rem
}

.derniers-services img
{
	width:90%;
	box-shadow:0 0 5px 0 rgba(0,81,132,0.5);
	height:auto;
	margin:.5rem auto
}

.derniers-services .bouton-utilise
{
	max-width:120px;
	margin:1rem auto 1.5rem
}

.engagements
{
	display:grid;
	grid-template-rows:1fr;
	grid-template-columns:10% 26.6666666% 26.6666666% 26.6666666% 10%;
	margin-bottom:4rem
}

.engagements article
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3;
	margin:0 1rem
}

.engagements article + article
{
	grid-column-start:3;
	grid-column-end:4
}

.engagements article + article + article
{
	grid-column-start:4;
	grid-column-end:5
}

.engagements article img
{
	margin:0 auto 2rem;
	display:block;
	width:auto;
	height:60px
}

.engagements h2
{
	padding-bottom:1.5rem;
	text-align:center
}

footer
{
	display:grid;
	grid-template-rows:80px;
	grid-template-columns:15% 42.5% 42.5%;
	background-color:#005184;
	color:#fff;
	margin-top:6rem
}

footer ul
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3;
	align-self:center;
	list-style-type:none;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:1px
}

footer .signature-april
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:3;
	grid-column-end:-1;
	justify-self:flex-end;
	align-self:center;
	display:flex;
	margin-right:right;
	height:20px
}

.signature-april p
{
	font-size:11px;
	line-height:30px
}

footer img
{
	margin:0 2rem 0 1rem;
	width:auto;
	height:30px
}

footer ul a
{
	color:#fff;
	font-size:10px
}

footer ul a:hover
{
	color:#ff9759
}

.contenu-texte
{
	display:grid;
	grid-template-rows:1fr;
	grid-template-columns:15% 70% 15%
}

.contenu-texte article
{
	grid-row-start:1;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3
}

.contenu-texte h1
{
	grid-row-start:1;
	grid-row-end:2;
	grid-column-start:2;
	grid-column-end:3;
	margin:4rem 0 0
}

.contenu-texte h3
{
	margin:3rem 0 1rem
}

.contenu-texte strong
{
	margin:2rem 0 .5rem;
	display:block;
	font-size:17px;
	color:#2e5281;
	font-family:'dejavu_sanscondensed'
}

.contenu-texte ul
{
	list-style:none;
	padding-left:20px;
	padding-bottom:6px
}

.contenu-texte ul li
{
	list-style-image:url(../img/fleche.png);
	list-style-position:inside;
	text-indent:-20px;
	padding:4px 0
}

.contenu-texte li:first-child
{
	padding-top:10px
}

.contenu-texte ol
{
	padding-left:20px;
	padding-bottom:6px
}

.contenu-texte ol li
{
	padding:4px 0
}

.contenu-texte .suitedarticles
{
	grid-row-start:2;
	grid-row-end:-1;
	grid-column-start:2;
	grid-column-end:3;
	min-height:800px;
	text-align:left
}

.contenu-texte h2
{
	margin:3rem 0 1rem
}

.contenu-texte p
{
	padding-bottom:6px
}

@media screen and (max-width: 1240px) {
	.banniere
	{
		background-position:bottom -240px right -1fr,bottom -190px left 10%,bottom -230px center,center center
	}
	
	.presentation article
	{
		margin:0 25px
	}
	
	.derniers-services article
	{
		margin:20px
	}
}

@media screen and (max-width: 1080px) {
	.banniere
	{
		background-position:bottom -240px left 290%,bottom -190px left -50%,bottom -230px center,center center
	}
	
	.derniers-services article
	{
		margin:10px
	}
	
	header p
	{
		padding-right:5px
	}
}

@media screen and (max-width: 980px) {
	header
	{
		grid-template-rows:85px;
		grid-template-columns:100px auto 100px;
		margin-top:-85px
	}
	
	#navigation
	{
		transition:all .5s ease-in;
		grid-column-start:1;
		grid-column-end:-1;
		text-align:center;
		justify-items:stretch;
		background-color:#153A6A
	}
	
	header #navigation a
	{
		padding:1.5rem
	}
	
	header > a
	{
		grid-row-start:2;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:2;
		justify-self:center;
		padding:10px;
		margin:0
	}
	
	header p
	{
		grid-row-start:2;
		grid-row-end:-1;
		grid-column-start:2;
		grid-column-end:3;
		padding-right:20px;
		margin:0
	}
	
	.menu-mobile-ouvre,.menu-mobile-ferme
	{
		grid-row-start:2;
		grid-row-end:-1;
		grid-column-start:3;
		grid-column-end:-1;
		color:#6ae;
		font-size:inherit;
		text-transform:uppercase;
		border:1px solid #6ae;
		padding:5px
	}
	
	#navigation
	{
		margin-top:0;
		margin-right:0;
		justify-content:initial
	}
	
	#menu:target
	{
		margin-top:0
	}
	
	.menu-mobile-ouvre
	{
		display:none
	}
	
	.menu-mobile-ferme
	{
		display:block
	}
	
	#menu:target a.menu-mobile-ferme
	{
		display:none
	}
	
	#menu:target a.menu-mobile-ouvre
	{
		display:block
	}
	
	#navigation:target + a.menu-mobile-ouvre
	{
		display:none
	}
	
	header nav a:hover,.menu-mobile:hover,.menu-mobile-ouvre:hover,.menu-mobile-ferme:hover
	{
		color:#fff;
		background-color:#ff5e00;
		border-color:#ff5e00
	}
	
	.banniere
	{
		background-position:bottom -240px left 440%,bottom -190px left -120%,bottom -230px center,center center
	}
	
	.presentation
	{
		grid-template-columns:5% 45% 45% 5%
	}
	
	.presentation article
	{
		margin:0 25px
	}
	
	.presentation article + article
	{
		margin:0 0 0 40px
	}
	
	.derniers-services
	{
		grid-template-columns:5% 45% 45% 5%
	}
	
	.contenu-texte,.apropos .contenu-texte
	{
		grid-template-columns:5% 90% 5%
	}
	
	.engagements
	{
		grid-template-columns:5% 30% 30% 30% 5%
	}
	
	footer
	{
		grid-template-columns:5% 47.5% 47.5%
	}
	
	footer .signature-april p
	{
		line-height:15px;
		text-align:right;
		font-size:10px
	}
	
	.master-rubrique .derniers-services
	{
		grid-template-columns:5% 90% 5%
	}
}

@media screen and (max-width: 760px) {
	.banniere
	{
		grid-template-rows:400px;
		background-position:bottom -290px right 60%,bottom -210px left -120%,bottom -270px center,center top
	}
	
	.banniere article
	{
		padding-top:50px
	}
	
	.banniere article h1
	{
		color:#fff;
		margin:0 2rem;
		text-align:center;
		line-height:50px;
		font-size:30px
	}
	
	.banniere article p
	{
		padding-top:20px
	}
	
	.presentation
	{
		grid-template-columns:7% 86% 7%
	}
	
	.presentation article
	{
		grid-row-start:1;
		grid-row-end:2;
		grid-column-start:2;
		grid-column-end:3;
		margin:0 auto;
		background-image:url(../img/chat-marche-bleu-ciel-filet.svg);
		background-repeat:no-repeat;
		background-position:bottom 0 center;
		background-size:1fr
	}
	
	.presentation article + article
	{
		grid-row-start:2;
		grid-row-end:-1;
		grid-column-start:2;
		grid-column-end:3;
		margin:2rem auto;
		background-image:url(../img/chat-course-bleu-ciel-filet.svg);
		display:grid;
		grid-template-rows:100px 140px 140px 100px 140px;
		grid-template-columns:50% 50%;
		justify-content:space-between;
		align-items:flex-start;
		column-gap:1rem;
		row-gap:1rem
	}
	
	.presentation article h2
	{
		grid-row-start:1;
		grid-row-end:2;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.presentation article + article h2
	{
		padding:1rem 0 3rem
	}
	
	.presentation blockquote.postscriptum p
	{
		padding:.5rem 0 5rem
	}
	
	article div
	{
		grid-row-start:2;
		grid-row-end:3;
		grid-column-start:1;
		grid-column-end:2;
		background-color:#fff;
		border-radius:5px;
		padding:1rem
	}
	
	article div + div
	{
		grid-row-start:2;
		grid-row-end:3;
		grid-column-start:2;
		grid-column-end:-1
	}
	
	article div + div + div
	{
		grid-row-start:3;
		grid-row-end:4;
		grid-column-start:1;
		grid-column-end:2
	}
	
	.presentation article + article .postscriptum
	{
		grid-row-start:3;
		grid-row-end:4;
		grid-column-start:2;
		grid-column-end:-1
	}
	
	.presentation article + article .bouton-simple
	{
		grid-row-start:4;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:-1;
		margin:3rem auto 0;
		text-align:center;
		color:#fff;
		font-size:14px;
		letter-spacing:1px;
		font-family:'dejavu_sanscondensed_bold';
		background-color:#2e5281;
		box-shadow:0 0 5px 0 rgba(0,81,132,0.5);
		border-radius:10px;
		padding:1.2rem 2.5rem;
		min-width:250px;
		max-width:300px
	}
	
	.presentation article + article .bouton-simple:hover
	{
		color:#fff;
		background-color:#ff5e00
	}
	
	.bouton-utilise
	{
		max-width:180px;
		padding:.7rem
	}
	
	.derniers-services
	{
		grid-template-rows:1fr;
		grid-template-columns:1fr;
		margin:2rem 0 1rem
	}
	
	.derniers-services article
	{
		grid-row-start:2;
		grid-row-end:3;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.derniers-services article + article
	{
		grid-row-start:3;
		grid-row-end:4;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.derniers-services article + article + article
	{
		grid-row-start:4;
		grid-row-end:5;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.derniers-services article + article + article + article
	{
		grid-row-start:5;
		grid-row-end:6;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.derniers-services .bouton-appel
	{
		grid-column-start:1;
		grid-column-end:-1;
		margin:2rem auto 5rem
	}
	
	.derniers-services img
	{
		width:70%
	}
	
	.derniers-services article
	{
		margin:2rem 4rem
	}
	
	.engagements
	{
		grid-template-rows:1fr 1fr 1fr;
		grid-template-columns:1fr
	}
	
	.engagements article
	{
		grid-row-start:1;
		grid-row-end:2;
		grid-column-start:1;
		grid-column-end:-1;
		margin:3rem 5rem .5rem
	}
	
	.engagements article + article
	{
		grid-row-start:2;
		grid-row-end:3;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.engagements article + article + article
	{
		grid-row-start:3;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.master-rubrique .derniers-services
	{
		margin-top:4rem
	}
	
	.master-rubrique .tous-les-services
	{
		flex-flow:column wrap
	}
	
	.master-rubrique .derniers-services article
	{
		width:initial
	}
}

@media screen and (max-width: 640px) {
	header #navigation a
	{
		padding:1.5rem .2rem
	}
	
	header #navigation a:first-child
	{
		margin-left:0
	}
	
	header #navigation a:last-child
	{
		margin-right:0
	}
}

@media screen and (max-width: 512px) {
	#navigation
	{
		grid-template-columns:auto
	}
	
	header #navigation a:first-child
	{
		margin-left:0
	}
	
	header #navigation a:last-child
	{
		margin-right:0
	}
	
	header #navigation a
	{
		padding:1rem;
		border-bottom:1px solid #2e5281;
		font-size:14px
	}
	
	.banniere
	{
		background-position:bottom -290px right 100%,bottom -180px left -20%,bottom -190px center,center center;
		background-size:700px,700px,550px,400%
	}
	
	.banniere article a
	{
		margin:1rem 1rem 0 0
	}
	
	.presentation article + article .spip_out,.bouton-utilise
	{
		margin:1rem auto 0
	}
	
	.presentation article + article .bouton-simple,.derniers-services .bouton-appel
	{
		padding:1rem .1rem
	}
	
	.bouton-simple
	{
		font-size:11px;
		padding:7px 0;
		margin:2rem auto;
		text-align:center;
		border:1px solid #97b0c6;
		max-width:150px;
		border-radius:5px
	}
	
	.bouton-simple:hover
	{
		background-color:#ff5e00;
		border-color:#ff5e00;
		color:#fff
	}
	
	.presentation article
	{
		background-size:170%
	}
	
	.presentation article + article
	{
		display: block;
	}
	
	.presentation article h2
	{
		text-align:center
		grid-row-start:1;
		grid-row-end:2;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	article div
	{
		grid-row-start:2;
		grid-row-end:3;
		grid-column-start:1;
		grid-column-end:-1;
		text-align:center
	}
	
	article div + div
	{
		grid-row-start:3;
		grid-row-end:4;
		grid-column-start:1;
		grid-column-end:-1;
		grid-row-start:4;
		grid-row-end:5;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.presentation article + article .bouton-simple
	{
		grid-row-start:5;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:-1
	}
	
	.derniers-services article
	{
		margin:1rem 2rem
	}
	
	.derniers-services .bouton-utilise
	{
		margin:1rem auto 1.5rem
	}
	
	.engagements article
	{
		margin:3rem 2rem .5rem
	}
	
	footer
	{
		grid-template-columns:1fr
	}
	
	footer ul
	{
		display:none
	}
	
	footer .signature-april
	{
		grid-row-start:1;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:-1
	}
}

@media screen and (max-width: 500px) {
	header
	{
		grid-template-rows:285px;
		margin-top:-285px
	}
}