*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;}
body {
	font-family: "Roboto", sans-serif;
	font-style: normal;}
a{
	color: inherit;
	font-weight: bold;
}

/* Font et Typographie */
h1, h2, .gros-titre, .large-text {
	font-family: 'Montserrat';
	font-size: 1.8rem;
	font-weight:900;
	line-height: 1.1;
	letter-spacing: normal;
	margin-bottom: 1rem;}
.sous-titre, .medium-text {
	font-family: 'Montserrat';
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight:600;
	/* margin-bottom: 1.5rem; */
}
/* .sous-titre {
	padding-top: 3rem;
} */
.emphase {
	font-size: 1.45rem;
	font-weight:700;}

h3, .titre-services {
	font-family: 'Montserrat';
	font-size: 1.125rem;
	font-weight:800;
	margin-bottom: 5px;
}

.titre-article {
	font-family: 'Montserrat';
	margin: 1rem 0;}
.titre-article a {
	text-decoration: none;
	/* margin: 1.25rem 0;*/}
.medium-text{
	margin-bottom: 1rem;}

/* p, p.sm-txt {
	max-width: 75ch;} */
.sm-txt{
	position: relative;
	margin: 0 auto;
	font-size: 0.7rem;
	padding: 0 3rem;}
.center-text{
	text-align: center;
}

/* Background color */

.bg-prime{
	background-color: #F0E6DF;
}
.bg-secondaire{
	background-color: #E1CABC;
}
.bg-blanc{
	background-color: #fff;
}
.bg-swirl{
	background: url(../img/curve.svg) center no-repeat;
	background-size: cover;
	background-color: #B98A77;
}
.bg-stars{
	background: url(../img/etoile-m.svg) left bottom no-repeat, url(../img/etoile-s.svg) right bottom no-repeat;
	padding-left: 1rem;
	/* background-size: 50px, 130px, auto; */
}
.bg-gris{
	padding: 0;
	margin: 0;
	background: linear-gradient(90deg,#e6e6e6,#fff);}

.bg-pale{
	padding: 0;
	margin: 0;
	background: linear-gradient(0deg,#FEFEFE,#E7E7E7);}

.bg-sun{
	display: none;
}

.bg-bleu{
	padding: 0;
	margin: 0;
	background: #002c50;}

/* @media screen and (min-width: 1000px){
	.bg-dots{
		background: url(../img/dots-up.png) top left no-repeat;
	}
} */
.top-left{
	position: relative;
    top: -4rem;
    margin-bottom: -4rem;
}
.bottom-right{
	display: flex;
    flex-direction: row;
    justify-content: right;
    margin-top: 1rem;
    margin-bottom: -4rem;
}
@media screen and (min-width: 1000px){
	.bottom-right{
		display: flex;
		flex-direction: row;
		justify-content: right;
		margin-top: -4rem;
		margin-bottom: -4rem;
	}
	.bg-sun{
		display: inline-block;
		position: absolute;
		margin-left: -8rem;
		margin-top: -1rem;
		z-index: 100;
	}
}


/* Font color */
.blanc{
	color: white;}
.noir{
	color: #000000;}
.bleu{
	color: #002c50;}

/* Layout */
/* header and footer */
.nav-bar{
	display: flex;
	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;}
.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-full-width{
	display: flex;
	flex-direction: column;
}
.conteneur, .conteneur-reverse{
	display: flex;
	width: 90%;
	max-width: 1440px;
	margin: auto;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 3rem 0;}
	.conteneur-note{
		width: 90%;
	}
	.conteneur-slim{
		display: flex;
		width: 90%;
		max-width: 1200px;
		margin: auto;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
.colonne {
	display: flex;
	flex-direction: column;
	/* margin: auto; */
}
.colonne-center{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.colonne-2-5, .colonne-3-5, .colonne-1-3, .colonne-2-3 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/* text-align: center; */
}
.colonne-50-50 {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	width: 100%;
	/* text-align: center; */
}

.colonne-50-right, .colonne-50-left{
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	justify-content: center;
	/* align-items: center; */
}

.row{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.conteneur-row{
	display: flex;
	width: 90%;
	max-width: 1200px;
	flex-direction: row;
	justify-content: center;
	margin: auto;
}
.img-cat-style{
	position: relative;
	width: 150px;
	height: auto;
}
.conteneur-articles {
	display: flex;
	width: 90%;
	max-width: 1200px;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: auto;}
.article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 90%;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 1.5rem;
	border-radius: 35px;}
.article a img{
	filter: brightness(100%);
	background-color: #000000;
	transition: all 0.25s ease-out;
}
.article a img:hover{
	filter: brightness(50%);
}
p.article{
	color: #044675;
}

	@media screen and (min-width: 890px){
		.article {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 32%;}
	}

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

/* Elements */

.bouton, .bouton-prime, .bouton-bleu{
	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: #ffffff;
	background: #B98A77;
}
	.bouton-prime:hover{
		/* background: #cab0a4; */
		background: #ceaa9a;
		box-shadow: none;
		color: #fff;
	}
	.bouton-prime:active{
		background: #ceaa9a;
		box-shadow: none;
		color: #fff;}
	.bouton-bleu{
		background: #002c50;}
		.bouton-bleu:hover{
			background: #004883;
		}
		.bouton-bleu: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-prime .text{
		color: #000000;
	} */
	.bouton-prime:hover .text{
		color: #fff;
	}
/* Rule them all */
.p-lr{
	display: flex;
	width: 95%;
	margin: 0 0.8rem;}
.mt-rem{
	margin-top: 3rem;}
.mb-rem{
	margin-bottom: 3rem;}
	.mb-rem-slim{
		margin-bottom: 1rem;}
.mtb-rem{
	margin: 3rem 0;}
.mb-rem-s{
	margin-bottom: 1rem;}
.pt-rem{
padding-top: 3rem;}
.ptb-rem{
	padding: 3rem;}
.pb-rem{
	padding-bottom: 3rem 0;}
.pb-rem-xtr{
	padding-bottom: 8rem;}
.ptb-rem{
padding: 3rem 0;}

/* 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.soins-bebe{
		background: url(../img/des-soins-pour-bebe.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 30rem;
		height: 14rem;}
	.logo.baby-care{
		background: url(../img/holiday-gift-ideas.svg) center center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 30rem;
		height: 14rem;}
	.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;}

.icon-services{
	height: 3rem;
	width: 3rem;
	margin-right: 1rem;
}
.cover{
	display: flex;
	align-items: center;
	margin: auto;}
.cover img,.cover a {
	position: relative;
	height: auto;
	width: 100%;
	margin: 0 auto;}
	.cover-right{
		display: flex;
		align-items: center;
		margin-left: auto;}
	.cover-right img,.cover-right a {
		position: relative;
		height: auto;
		width: 100%;}
	
	.black-bg{
		background-color: #000000;
	}
	.image.noel{
		background: url(../img/noel-2024-hight.jpg) center center no-repeat;
		background-size: cover;
		height: 20rem;
		width: 100%;
	}

	.image.bebe-ourson{
		background: url(../img/bebe-ourson-peluche.png) center center no-repeat;
		background-size: cover;
		height: 28rem;
		width: 100%;
	}
	
	@media screen and (min-width: 890px){
		.image.noel{
			background: url(../img/noel-2024.jpg) top center no-repeat;
			background-size: cover;
			height: 40rem;
			width: 100%;
		}
	}
	@media screen and (min-width: 1000px){
		.image.noel{
			background: url(../img/noel-2024.jpg) center center no-repeat;
			background-size: cover;
			height: 25rem;
			width: 100%;
		}
	}
	a.noel{
		transition: all 0.25s ease-out;
	}
	a.noel:hover{
		filter: brightness(50%);
	}
	.image * {
		display: none;}

	.cards{
		/* width: 100%; */
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		row-gap: 1rem;
	}
	.large-card{
		width: 100%;
		/* margin: 0 auto; */
		padding: 2rem;
		border-radius: 30px 30px 30px 30px;
		z-index: 200;
	}
	.large-card-left-align-center{
		display: flex;
		flex-direction: column;
		width: 90%;
		text-align: left;
		align-items: center;

	}
	.x-large-card{
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0 auto;
		padding: 2rem;
		border-radius: 30px 30px 30px 30px;
		z-index: 200;
	}
	.card{
		width: 18rem;
		height: 25rem;
		background-color: #000000;
		border-radius: 25px 25px 0 25px;
	}
	.r-corner{
		background-color: #000000;
		border-radius: 21px;
	}
	a.card{
		text-decoration: none;
	}
	.titre-categorie{
		position: relative;
		padding: 21rem 1rem 2.35rem 2rem ;
		opacity: 1;
	}
	
	.maquillage{
		background: url(../img/maquillage.jpg) center center no-repeat;
		background-size: cover;
		border-radius: 25px 25px 0 25px;
		width: 18rem;
		height: auto;
	}
	.dermo{
		background: url(../img/dermo-cosmetique.jpg) center center no-repeat;
		background-size: cover;
		border-radius: 25px 25px 0 25px;
		width: 18rem;
		height: auto;
	}
	.confiserie{
		background: url(../img/confiserie.jpg) center center no-repeat;
		background-size: cover;
		border-radius: 25px 25px 0 25px;
		width: 18rem;
		height: auto;
	}
	.parfum{
		background: url(../img/parfum.jpg) center center no-repeat;
		background-size: cover;
		border-radius: 25px 25px 0 25px;
		width: 18rem;
		height: auto;
	}
	.maquillage, .dermo, .confiserie, .parfum{
		opacity: 1;
		transition: opacity 0.25s;
	}
	.maquillage:hover, .dermo:hover, .confiserie:hover, .parfum:hover{
		opacity: 0.5;
	}

	.titre-categorie:hover{
		opacity: 1;
	}

@media screen and (min-width: 1000px) {
	.conteneur-full-width{
		display: flex;
		flex-direction: row;
	}
	.conteneur, .conteneur-reverse{
	  display: flex;
	  width: 90%;
	  flex-direction: row;
	  justify-content: center;
	  margin: auto;}
	.conteneur-reverse{
		flex-direction: row-reverse;}
	.center-content{
		max-width: 65%;}
	.colonne{
		/* flex: 1; */
		display: flex;
		flex-direction: column;
		margin: auto;
		width: 90%;}
	.colonne-50-50 {
		display: flex;
		flex-direction: column;
		width: 50%;
		text-align: left;
		align-items: flex-start;
		justify-content: center;
	}
	.colonne-50-right, .colonne-50-left{
		width: 77%;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.colonne-50-left{
		display: flex;
		margin-left: auto;
		/* margin-right: 2rem; */
	}
	.colonne-50-right{
		display: flex;
		/* flex-direction: column;
		align-items: flex-start; */
		margin-right: auto;
		margin-left: 2rem;
	}
	.colonne-2-5 {
		display: flex;
		flex-direction: column;
		width: 40%;}
	.colonne-3-5 {
		display: flex;
		flex-direction: column;
		width: 60%;}
	.colonne-2-5, .colonne-3-5{
		text-align: left;
		align-items: flex-start;
	}
	.colonne-1-3 {
		display: flex;
		flex-direction: column;
		width: 33%;}
	.colonne-2-3 {
		display: flex;
		flex-direction: column;
		width: 66%;}
		.colonne-1-3, .colonne-1-3{
			text-align: left;
			align-items: flex-start;
		}
	.x-large-card{
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 0 auto;
		padding: 2rem;
		border-radius: 30px 30px 30px 30px;
		z-index: 200;
	}
	.cards{
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap:1rem;
		align-items: center;
	}
	.card{
		/* width: 24%; */
	}
	.p-l{
		padding-left: 3rem;
	}
	.p-r{
		padding-right: 4rem;
	}
	.logo.familiprix-head {
	background-size: contain;
	width: 14rem;
	height: 5rem;}

	
}