@font-face {
    font-family: 'Rubik';
    src: url('../font/Rubik-Bold.woff2') format('woff2'),
        url('../font/Rubik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../font/Rubik-Black.woff2') format('woff2'),
        url('../font/Rubik-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../font/Rubik-Regular.woff2') format('woff2'),
        url('../font/Rubik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../font/Rubik-Italic.woff2') format('woff2'),
        url('../font/Rubik-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

:root{
	--main-color-1 : #009EA3;
	--main-color-1-alpha : rgba(0,158,163,0.1);
	--main-color-2 : #99CC00;
	--main-color-2-alpha : rgba(153,204,0,0.2);
	--main-color-2-WCAG : #4F8100;
	--main-color-2-WCAG-alpha : rgba(79,129,0,0.1);
	--main-color-txt : #4C4C4C;
	--main-color-bg-projet : #F2F2F2;
}


html,body{padding:0;margin:0;font-family: 'Rubik', Arial, sans-serif;color: var(--main-color-txt);line-height:1.4}
header,section,footer{
	width:500px;
	margin:20px auto;
}

h2{
	font-weight : bold;
	color : var(--main-color-1);
	margin-bottom:10px;
	text-transform:uppercase;
	font-size:1em;
}
h3{
	font-size:1em;
	margin-bottom:0px;
}
p{
	margin:10px 0;
	text-align:justify;
	text-justify:inter-character;
}
ol ol{
	list-style-type:upper-latin;
}

a{
	color:var(--main-color-1);
	transition: outline 0.3s, background-color 0.3s;
	-webkit-transition: outline 0.3s, background-color 0.3s;
	outline-color: rgba(0,0,0,0);
}

a:hover{
	outline:5px solid var(--main-color-1-alpha);
	background-color:var(--main-color-1-alpha);
	border-radius:0.5px;
}

.uppercase{text-transform:uppercase;}

.externalLink{
	color : var(--main-color-2-WCAG);
}

.externalLink:hover{
	outline:5px solid var(--main-color-2-WCAG-alpha);
	background-color:var(--main-color-2-WCAG-alpha);
	border-radius:0.5px;
}
.externalLink::after{
	content:"\00a0";
	background: url("../img/external-link.png") no-repeat center;
	background-size:contain;
	display:inline-block;
	width : 15px;
	min-height : 15px;
	margin-left:5px;
}
.infoPlus{
	font-style:italic;
}
section ul, section ol{
	padding:0;
}
section ol{
	list-style: inside decimal;
}
section ol ol{
	list-style-type: upper-alpha;
}
section ol h3{
	display:inline-block;
	margin:0;
}
section ol h4{
	display:inline-block;
	margin:0;
}
section ol ul{
	list-style:outside;
	text-align:justify;
	padding-left:20px;
}
/*Header-------------------------------------------*/
h1{
	font-weight:normal;
	text-align:justify;
	text-justify:inter-character;
	text-align-last: justify;
}
/*Hack Safari pour justifier la dernière ligne*/
h1:after{
   content: "";
   display: inline-block;
   width: 100%;
   position:absolute;
}

header{
	margin-top:4em;
}

header > a{
	display:inline-block;	
}
header > a:hover{
	background:none;
	outline:none;
}
header a img{
	width: 500px;
	transform: scale(1.18) translateX(-3px);
	margin-bottom:109px;
}

header section{
	display:flex;
	column-gap: 60px;
}

header section > *{
	flex: 1 1 0px;
}

header *{
	margin:0;
}

header ul{
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	font-size:0.9em;
	color:var(--main-color-2);
}
header li{
	height:24px;
	line-height:24px;
	display:inline-flex;
}
header li::before{
	content: '';
	display: inline-block;
	height: 24px;
	width: 27px;
	margin-right:10px;
	background-size:contain;
}
header li a{
	color:var(--main-color-1);
}
header li a:hover{
	outline:5px solid var(--main-color-1-alpha);
	background-color:var(--main-color-1-alpha);
}
header #afd::before{
	background-image: url("../img/logo-afd.png");
}
header #mda::before{
	background-image: url("../img/logo-mda.png");
}
header #fs::before{
	background-image: url("../img/logo-fs.png");
}
header #ls::before{
	background-image: url("../img/logo-ls.png");
}
header h1{
	font-size: 1.3em;
	letter-spacing: -0.04em;
	line-height:1.3em;
}
header h1 span:nth-child(2), header h1 span:nth-child(3){
	color:var(--main-color-2);
}
header h1 span:nth-child(4){
	color:var(--main-color-1);
}
/*Prestation-------------------------------------------*/
#prestations ul{
	list-style:inside;
}
#prestations ul h3{
	display: inline-block;
	margin:0;
}
/*Portfolio-------------------------------------------*/
#portfolio ul{
	display:flex;
	list-style:none;
	flex-wrap:wrap;
}
#portfolio ul li{
	height:125px;
}
#portfolio ul li img{
	height:100%;
}

/*Tarifs-------------------------------------------*/
#tarifs ul{
	display:flex;
	list-style:none;
}

#tarifs ul li{
	flex: 1 1 0px;
	border: solid #B2B2B2;
	padding:20px 40px;
	box-sizing:border-box;
}
#tarifs ul li:first-child{
	border-width:2px 1px 2px 2px;
}
#tarifs ul li:last-child{
	border-width:2px 2px 2px 1px;
}

#tarifs ul li span{
	display:block;
	font-weight:normal;
	text-align:justify;
	text-justify:inter-character;
	text-align-last: justify;
}
/*Hack Safari pour justifier la dernière ligne*/
#tarifs ul li span:after{
   content: "";
   display: inline-block;
   width: 100%;
   position:absolute;
}

#tarifs ul li span{
	font-size:1em;
}

#tarifs ul li span:first-child{
	color:var(--main-color-2);
	font-weight:900;
	font-size:1.8em;
}

/*Contacts-------------------------------------------*/
#contact ul{
	display:flex;
	list-style:none;
	column-gap: 60px;
	justify-content:center;
}
#contact ul li{
	padding:0;
	height:40px;
}
#contact ul li img{height:100%; transition:transform 0.3s}

#contact a:hover{
	outline:none;
	background:none;
}
#contact a:hover img{transform:scale(1.2);}

/*Footer-------------------------------------------*/
footer{
	margin-top:60px;
	margin-bottom:60px;
	text-align:center;
}
footer ul{
	list-style:none;
	padding:0;
}
footer li {
	margin-bottom:10px;
}

/*Portfolio réalisation multimédia-------------------------------------------*/
.portefolio-real{
	list-style:none;
	h3{padding: 20px 0 0px 0;text-align: center;}
	h3::after{content:""; display:block; width: 50%; border-bottom: solid 2px var(--main-color-2); margin: 5px auto 10px;}
	li > a{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		overflow:hidden;
		background-color:var(--main-color-txt);
		&:before{content:"";float:left;padding-top:52%}
		span{display:flex;width:auto;position:absolute; padding:10px 20px;border-radius:100px;background:var(--main-color-1); color:#FFF;box-shadow:0 0 10px #000;text-transform:uppercase; transition:transform 0.3s;-webkit-transition: transform 0.3s;}
		img{display:flex;width:100%;margin:0;flex-basis:100%;transition: filter 0.3s;-webkit-transition: filter 0.3s;};
	}
	li > a:hover{
		outline:none;
		background:none;
		img{filter: brightness(50%)};
		span{transform: scale(1.2,1.2)}
	}
	dl{background-color:var(--main-color-bg-projet); padding-bottom: 20px; margin-bottom:20px;}
	dt{border-left: solid 5px var(--main-color-2); padding-left : 5px;font-weight:bold;margin: 0 20px 0 20px;}
	dd{margin: 0 20px 5px 30px;}
	dd:last-child{margin: 0 20px 0 30px;}
	dt.presta{color: #333; margin:0; padding:10px 30px 0;background:var(--main-color-2); border-left:none; &::after{content:""; display:block; width : 10%; border-bottom: solid 1px #333;margin:5px 0 0 0;}}
	dd.presta{color: #333; margin:0 0 20px 0; padding:5px 30px 10px;background:var(--main-color-2);}
}

/*Smarphone---------------------------------------*/
@media screen and (max-width: 600px) {
	header,section,footer{
		width:300px;
	}
	/*Header-------------*/
	header a img{
		width:300px;
		transform:scale(1.18) translateX(-2px);
	}
	header section{
		flex-direction:column;
	}
	header h1{
		display: flex;
		flex-direction: column;
		margin-bottom:0.5em;
		font-size:2em;
	}
	header h1 span:last-child, header h1 span:first-child{
		font-size:0.8em;
	}
	header ul{
		align-items: center;
	}
	header ul li{
		margin:5px 0;
	}
	/*Portefolio-------------*/
	#portfolio ul li{
		height:150px;
	}
	/*Tarifs-------------*/
	#tarifs ul{
		flex-direction:column;
		row-gap:10px;
	}
	/*Contacts-------------*/
	#contact ul{
		column-gap: inherit;
		justify-content:space-between;
	}
	/*Portfolio réalisation multimédia-------------------------------------------*/
	.portefolio-real{
		li > a{
			min-height:190px;
		}
	}
}