:root{
	--primaire:#002c50;
	--familiplus:#e30613;
	--dark-red:#b40000;
	--dark-grey: #e6e6e6;
	--gold: #dfcabc;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;}
html{
	scroll-behavior: smooth;
}
body {
	font-family: Roboto, sans-serif;}
a{
	color: inherit;
	font-weight: bold;
}

/* Font et Typographie */
h1, .gros-titre, .large-text {
	font-family: Roboto;
	font-size: 3rem;
	font-weight:900;
	line-height: 1.1;
	letter-spacing: normal;}
h2, .sous-titre, .medium-text {
	font-size: 2rem;
	font-weight:900;
	margin-bottom: 0.5rem;}
.sous-titre {
	padding-top: 3rem;}
h3, .emphase {
	font-size: 1.45rem;
	font-weight:700;}
.titre-produit{
	height: 4rem;
	font-weight: 500;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #002c53;
	margin-top: 1rem;
}
.medium-text{
	margin-bottom: 1rem;}
.date{
	margin-bottom: 1rem;
}
.m-txt {
	max-width: 75ch;}
.sm-txt{
	position: relative;
	margin: 0 auto;
	font-size: 0.7rem;}
.center-text{
	text-align: center;
}
.left-text{
	text-align: left;
}

/* Background color */
.bg-prime{
	padding: 0;
	margin: 0;
	/* background: linear-gradient(90deg,#b40000 0,#f80000 50%,#b40000 100%); */
	/* background: linear-gradient(90deg,#ecedeb 0,#ffffff 50%,#ecedeb 100%); */
	background: linear-gradient(90deg,#ecedeb 0,#ffffff 50%,#ecedeb 100%);
}
	/* background: linear-gradient(90deg,#c46d67 0,#e28f8c 50%, #c46d67 100%);} */
.bg-secondaire{
	padding: 0;
	margin: 0;
	/* background-color: #f8f1f3; */
	/* background-color: #bf958c; */
	background-color: #a67971;
}
.bg-gris{
	padding: 0;
	margin: 0;
	background: linear-gradient(90deg,#e6e6e6,#fff);}
.bg-bleu{
	padding: 0;
	margin: 0;
	background: #002c50;}

/* Font color */
.gold{
	color: #dfcabc;}
.blanc{
	color: white;}
.bleu{
	color: #002c50;}

/* Layout */
/* header and footer */
.nav-bar{
	display: flex;
	/*height: 10vh;*/
	height: 5rem;
	max-width: 100%;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	background-color: white;
	z-index: 100;}
.nav-bar-conteneur{
	display: flex;
	margin: auto;
	width: 90%;
	max-width: 1200px;
	flex-direction: row;
	justify-content: space-between;
	/* align-items: center; */
}
.nav-bar a{
	font-weight: 900;
	color: #002c50;}
.social {
	display: flex;
	flex-direction: row ;
	justify-content: end;
	margin: 0 1em;}
.social.logo{
	margin-right: 1em;}
/* main */
.conteneur, .conteneur-reverse{
	/* display: flex; */
	width: 90%;
	max-width: 1000px;
	margin: auto;
	/* align-items: center;
	justify-content: center;
	flex-direction: column; */
}
	/* padding: 3rem 0;} */
.conteneur-full {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	/*height: 90vh;*/ 
	/* margin: auto; */
	/* align-items: center; */
	justify-content: center;
	/* flex-direction: column; */
	padding: 0;
	gap: 1rem;  
}
.produit{
	max-width: 230px;
	padding: 1rem;
    background-color: #fff;
    border-radius: 10px;
}
.fit-picture{
	width: 100%;
	height: auto;
}
.colonne {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	width: 90%;
	margin: auto;}

.center-content-left-text{
	display: flex;
	max-width: 80%;
	margin: auto;
	justify-content: center;
	flex-direction: column;}
.align-center{
	align-items: center;}
		.justify-content{
			display: flex;
			justify-content: center;}
			.align-center-element{
				display: flex;
				align-content: center;}
/* Elements */

.bouton, .bouton-prime, .bouton-bleu, .bouton-produit{
	display: inline-flex;
    justify-content: center;
	max-width: 15em;
    border-radius: 6px;
	background: #f80000;
	box-shadow: 0 6px 11px rgba(0,44,80,.2);
    text-align: center;
    text-decoration: none;
	transition: background .3s ease-in-out;
	margin-top: 2em;}
	.bouton{
		background: #f80000;}
	.bouton:hover{
		background: #b40000;}
	.bouton:active{
		background: #c40000;
		box-shadow: none;}
.bouton-prime{
	/* background: #dfcabc; */
	color: #000000;
	/* background: #cc949d; */
	/* background: #bf7a87; */
	background: #bf958c;
}
	.bouton-prime:hover{
		/* background: #cab0a4; */
		background: #a67971;
	}
	.bouton-prime:active{
		background: #a67971;
		box-shadow: none;}
	.bouton-produit{
		width: 100%;
		margin-bottom: 1rem;
	}
	.bouton-bleu, .bouton-produit{
		background: #002c50;}
		.bouton-bleu:hover, .bouton-produit:hover{
			background: #004883;
		}
		.bouton-bleu:active, .bouton-produit:active{
			background: #004883;
			box-shadow: none;}
.bouton .text, .bouton-prime .text, .bouton-bleu .text{
	margin: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .02em;
	color: #fff;}
	.bouton-produit .text{
		margin: 16px 12px;
		font-size: 16px;
		font-weight: 700;
		line-height: 18px;
		letter-spacing: .02em;
		color: #fff;}
	/* .bouton-prime .text{
		color: #000000;
	} */

/* Rule them all */

.mtb-rem{
	margin: 3rem 0;}

.mt-rem{
	margin-top: 3rem;}
.mb-rem{
	margin-bottom: 3rem;}
.ptb-rem{
	padding: 2rem 0;}
.pt-rem{
	padding-top: 2rem;}

/* Logos et signature */
.logo {
	display: inline-block;}
	.logo.familiprix-head{
		background: url(../img/logo-familiprix.svg) center center no-repeat;
		width: 10rem;
		height: 3rem;}
	.logo.familiprix{
    	background: url(../img/logo-familiprix.svg) center center no-repeat;
    	background-size: contain;
    	width: 10.625rem;
    	height: 2.9375rem; }
	.logo.look-fetes{
		background: url(../img/logo-look-fetes.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 30rem;
		height: 8rem;}
	.logo.holiday-look{
		background: url(../img/logo-holiday-look.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 30rem;
		height: 8rem;}
	.logo.concours{
		background: url(../img/concours.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 15rem;
		height: 5rem;}
	.logo.contest{
		background: url(../img/contest.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 15rem;
		height: 5rem;}
	.logo.familiplus{
		background: url(../img/logo-familiplus.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 22rem;
		height: 8rem;}
	.logo.fb{
		background: url(../img/ico-facebook.svg) center center no-repeat;
		background-size: contain;
		width: 0.75rem;
		height: auto;
		margin-right: 1.25em; }
	.logo.ig{
		background: url(../img/ico-instagram.svg) center center no-repeat;
		background-size: contain;
		width: 1.5rem;
		height: auto;
		margin-right: 1.25em; }
	.logo.yt{
		background: url(../img/ico-youtube.svg) center center no-repeat;
		background-size: contain;
		width: 1.5rem;
		height: auto; }
		.logo * {
			display: none;}

/* image et texture */

/* .dots{
	background-image: none;
} */
.cover{
	display: flex;
	align-items: center;
	margin: auto;}
	.cover img, .cover a img{
		position: relative;
		height: auto;
		/* min-height:20em;
		max-width:30em; */
		width: 100%;
		margin: 0 auto;}
	/* .cover a { */
	/* position: relative;
	height: auto; */
	/* min-height:20em;
	max-width:30em; */
	/* width: 100%;
	margin: 0 auto;} */

	.video-conteneur{
		max-width: 100%;
		margin: 0 auto;
	}

	video{
		width: 100% !important;
		/* max-width: 800px; */
		height: auto !important;
	}

@media screen and (min-width: 1000px) {
	.conteneur, .conteneur-reverse{
	  /* display: flex; */
	  width: 90%;
	  /* flex-direction: row; */
	  margin: auto;}
	.conteneur-reverse{
		flex-direction: row-reverse;}
	.center-content{
		max-width: 65%;}
	.colonne{
		flex: 1;
		width: 90%;}
	.conteneur-articles{
		flex-direction: row;
		align-items: flex-start;
		width: 90%;
		max-width: 1200px;}
	.article {
		align-items: flex-start;}
	.logo.familiprix-head {
	background-size: contain;
	width: 14rem;
	height: 5rem;}
	.logo.guide-fetes {
		background-size: contain;
		width: 34rem;
		height: 10rem;}
	.dots{
		background-image: url("../img/points.svg");
		background-repeat: no-repeat;
		background-position: top right;
		background-size: 15%;}}