/* *****************************************************************
TOOLS
***************************************************************** */

* {
	box-sizing: border-box;
	/* On spécifie que la largeur (width) de chaque boîte comprend le padding et la bordure (par défaut, c'est seulement la largeur du contenu) */
}

html {
	font-size: 62.5%;
	/* 1rem = 10px (la formule est 10/16*100) la taille par défaut étant 16px */
}

body {
	font-size: 1.6rem;
	/* on remets la taille du texte par défaut pour le body à 16px en utilisant les rem comme unité) */
}

/* # 00748D */

/* # CB8606 */

:root {
	--principalColor: #00748D;
	--secondaryColor: #CB8606;
}

/* *****************************************************************
GENERALITES
***************************************************************** */

body {
	font-family: 'Nunito', sans-serif;
	color: #414141;
	font-size: 1.8rem;
	background-color: #ededed;
}

.wrapper {
	max-width: 1500px;
	margin: auto;
}

h1,
h2,
h3,
h4,
nav,
.logo strong {
	font-family: 'Fjalla One', sans-serif;
}

a {
	text-decoration: none;
}

p {
	margin: 0 0 1.5rem 0;
}

ul {
	padding-left: 0;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* *****************************************************************
HEADER
***************************************************************** */

header {
	background: url(../img/path.png) repeat-x 0 bottom var(--principalColor);
}

header .wrapper {
	padding: 2rem;
}

header img {
	margin-right: .5rem;
}

strong {
	font-size: 2.2rem;
	font-weight: normal;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav a {
	color: white;
}

nav ul {
	display: flex;
	list-style: none;
	font-size: 2rem;
}

nav li a {
	padding: 1rem 2rem;
	margin-left: 3rem;
}

nav li a:hover,
.current {
	background-color: #fff;
	color: var(--principalColor);
}

/* *****************************************************************
MAIN
***************************************************************** */

.intro {
	background: url(../img/bg-header.jpg) left center;
	background-size: cover;
	padding: 15rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

h1 {
	background-color: var(--secondaryColor);
	font-size: 3rem;
	text-transform: uppercase;
	color: white;
	/*display: inline-block; inutil*/
	margin-bottom: 3rem;
	padding: 1.5rem 2rem;
}

.intro p {
	background-color: white;
	color: var(--principalColor);
	font-weight: bold;
	font-size: 2rem;
	display: inline-block;
	padding: 1rem 3rem;
}

/********** articles **********/

section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0 2rem;
}

h2 {
	font-size: 2.5rem;
	color: var(--principalColor);
	text-align: center;
	margin: 7rem 0 5rem 0;
	flex: 1 0 100%;
}

h2::before,
h2::after {
	content: "-";
	padding: 0 1rem;
	color: var(--secondaryColor);
}

article {
	line-height: 1.5;
	background-color: #ededed;
	padding: 2rem;
}

h3 {
	font-size: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h3::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 3rem;
	background-color: var(--secondaryColor);
	color: white;
	padding: 1rem 2rem;
	margin-bottom: 2rem;
}

.charges::before {
	content: "\f02d";
}

.shopping::before {
	content: "\f07a";
}

.suivi::before {
	content: "\f00c";
}

.cle::before {
	content: "\f084";
}

article,
.partners {
	width: 24%;
}

.partners {
	text-align: center;
}

.partners img {
	border: 3px solid var(--principalColor);
}

.plus {
	background-color: var(--principalColor);
	color: white;
	font-weight: bold;
	display: block;
	text-align: center;
	padding: 1rem 2rem;
	margin: 2rem;
}

/* *****************************************************************
FOOTER
***************************************************************** */

footer {
	background: url(../img/path.png) repeat-x var(--principalColor) 0 bottom;
	margin-top: 5rem;
}

footer .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4rem 2rem;
}

footer img {
	margin-right: 1rem;
}

footer a {
	color: white;
}

.reseaux {
	display: flex;
}

.reseaux a {
	margin: 0 1rem;
	font-size: 3rem;
}

.reseaux a:hover,
.reseaux a:focus {
	color: var(--secondaryColor);
}

/* *****************************************************************
LICENSE
***************************************************************** */

.license {
	padding: 2em;
	text-align: center;
	color: #fff;
	background-color: #444;
}

.license img {
	width: 65px;
	height: auto;
}

.license a {
	text-decoration: none;
	color: #DD5735;
}

/* *****************************************************************
PAGES INTERIEURES
***************************************************************** */

.real,
.actu {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.real section,
.actu section {
	width: 74%;
}

.real h1,
.actu h1 {
	background-color: transparent;
	color: var(--secondaryColor);
	text-align: center;
	margin-top: 5rem;
}

.real h1::before,
.real h1::after,
.actu h1::before,
.actu h1::after {
	content: " - ";
	color: var(--principalColor);
}

aside {
	width: 24%;
	font-size: 1.6rem;
	margin-right: 2rem;
}

.real h2 {
	margin: 1.5rem 0;
}

.comments,
.tweets {
	margin: 5rem 0;
	padding: 2rem 1rem 2rem 2rem;
	background-color: #ededed;
}

.scroll {
	height: 500px;
	overflow: auto;
	padding-right: 1rem;
}

blockquote {
	margin: 3rem 0;
}

/*

// SI ON VEUT SUPPRIMER LES <hr> de la page HTML

blockquote::after {
	content: "";
	display: block;
	border: solid 1px red;
	margin: auto;
	width: 18%;
	margin-top: 2rem;
}
blockquote:last-child::after {
	display:none;
}
*/

q {
	display: flex;
}

q::before {
	content: url(../img/quote.png);
	margin-right: 1rem;
}

cite {
	display: flex;
	align-items: center;
	margin-top: 1rem;
	color: var(--principalColor);
	font-size: 1.4rem;
	font-weight: bold;
}

cite::before {
	content: url(../img/client.png);
	margin-right: 1.5rem;
}

hr {
	border: 1px solid var(--secondaryColor);
	margin: 0 10rem;
}

.tweets {
	padding: 2rem;
}

.tweets li {
	margin: 2rem 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: help;
}

.tweets li::before {
	content: url(../img/circle.png);
	margin-right: 1rem;
}

/* *****************************************************************
PAGE REALISATIONS
***************************************************************** */

.gallery {
	display: grid;
	/*plusieurs solutions :*/
	/*grid-template-columns:200px 200px 200px;*/
	/*grid-template-columns: 25% 25% 25% 25% */
	/*grid-template-columns: repeat(4, 25%);*/
	/*grid-template-columns: 1fr 1fr 1fr; ici */
	/*3 fractions égales */
	/*repeat(nombre_de_colonnes, taille_colonnes)*/
	/*grid-template-columns: repeat(4, 1fr);*/
	/*pour info : ne change pas automatiquement, donc pas repsonsive sans les media query*/
	/* version RESPONSIVE */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

	/*gap : goutière*/
	gap: 1rem;

}

.portrait {
	grid-row: span 2;
}

.gallery img {
	/*étire l'image, donc la déforme*/
	align-self: stretch;
	justify-content: stretch;
	/*couvre le fond sans déformer*/
	object-fit: cover;
	border: var(--principalColor) 3px solid;
}

/* *****************************************************************
PAGE ACTUALITES
***************************************************************** */

.actu section h1 {
	flex: 1 0 100%;
}

.actu h2 {
	margin-top: 3rem;
}

.actu article {
	width: 100%;
	margin-bottom: 5rem;
}

.actu picture {
	float: left;
	margin-right: 2rem;
}

.actu .plus {
	display: inline-block;
	margin-left: 0;
}

/* *****************************************************************
RESPONSIVE
***************************************************************** */

/* *****************************************************************
TABLETTE
***************************************************************** */

@media screen and (max-width:1100px) {

	/*header*/
	.wrapper nav {
		display: flex;
		flex-direction: column;
		/*justify-content: space-around;*/
		/*align-content: center;*/
	}

	.logo {
		display: flex;
		flex-direction: column;
		/*justify-content: space-around;*/
		align-content: center;
	}
	.logo img {
		text-align: center;
		margin-bottom: 1em;
		/*margin-right:0;*/
	}
	.logo strong {
		text-align: center;
	}
	nav ul {
		margin-top: 2em;
		display: flex;
		width: 100%;
		justify-content: space-around;
		/*align-content:space-around;*/
	}
	/*MAIN index*/
	.home article {
		width: 50%;
	}

	.partners {
		width: 50%;
		margin: 1em 0;
	}
	
	.plus{
		width:50%;
		margin:1em auto;
	}

	/*MAIN ACTUALITE*/
	.actu, 
	.real{
		display: flex;
		flex-direction: column;
	}
	
	.actu article{
		width:100%;
	}
	.actu aside,
	.actu section,
	.real aside,
	.real section{
		width: 100%;
	}

	.actu aside,
	.real aside{
		display: flex;
		justify-content:space-between;
		align-items:flex-start;
		padding :0 4 rem;

	}
	
	.actu .plus{
		width : 25%;
	}

	.tweets {
		padding: 1rem 2rem;
		width: 60%;
	}
	.comments{
		width:32%;
	}

	/*FOOTER*/
	/*footer {*/
	/*	background: var(--principalColor);*/
	/*}*/

	footer .wrapper {
		padding-bottom: 1em;
	}

	footer .logo {
		display: flex;
		flex-direction: row;
	}
	footer .logo strong {
		display: inline-block;
		padding-top: 0.5em;
	}

	.reseaux {
		margin-bottom: 0.5em;
	}

}


/* *****************************************************************
MOBILE
***************************************************************** */

@media screen and (max-width:780px) {
	/*MAIN index*/
	.wrapper section article {
		width: 100%;
	}

	.partners {
		width: 100%;
		margin: 1em 0;
	}
	
	/*MAIN actu real*/
	
	/*.gallery{*/
	/*		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));*/

	/*}*/
	
	aside{
		flex-direction:column;
	}
	
	.comments,
	.tweets{
	WIDTH:100%;	
	}
	.comments,
	.tweets{
		padding-left:3rem;
	}
	
	/*footer*/
	footer .wrapper{
		flex-direction:column-reverse;
	}
	footer .logo {
		display: flex;
		flex-direction: column;
		/*justify-content: space-around;*/
		align-content: center;
		margin:2em 0 0 0;
	}
	footer .logo img {
		text-align: center;
		margin-bottom: 1em;
		/*margin-right:0;*/
	}
	footer .logo strong {
		text-align: center;
		padding:0;
	}
	
}

/* *****************************************************************
PETIT MOBILE
***************************************************************** */
@media screen and (max-width:630px) {
header nav ul {
	flex-direction: column;
    align-items: center;
}

header nav ul li {
	/*padding:0.5em;*/
	/*margin : 0.2em;*/
	width:100%;
	text-align:center;
}

header nav ul li a {
		margin : 0;
		display: block;
}

.actu .plus{
	width:50%;
}
}