:root{
    --font-title: 'Montserrat', 'Roboto', Arial, Helvetica, sans-serif;
    --font-paragraphe: 'Roboto', Arial, Helvetica, sans-serif;
	--primary:#002c50;
    --custom-primary:#DEB298;
    --secondary:#EBEFF2;
    --custom-secondary:#F9F2ED;
	--familiplus:#e30613;
    --blanc: #ffffff;
    --noir: #000000;
    --button-primary: #034692;
    --border-secondary: #6A88A7;
    --large: 16px;
    --xxl: 32px;
}

/* RESET */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;}
html {
  scroll-behavior: smooth;
}
body {
	font-family: var(--font-paragraphe);
	font-style: normal;
    /* columns: var(--noir); */
}

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

a{
    text-decoration: none;
    color: inherit;
}

/* Text & text color */

/* Mobile */
.gros-titre, .sous-titre-emphase, .titre-3 .titre-section{
    font-family: var(--font-title);
}
.gros-titre{
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
}
.titre-display{
    font-size: 32px;
    line-height: 40px;
    font-weight: 900;
}
.sous-titre-emphase{
    font-size: 28px;
    line-height: 36px;
    font-weight: 800;
}
.titre-2{
    font-size: 20px;
    line-height: 28px;
}
.titre-3{
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
}
.titre-section{
    font-size: 24px;
    line-height: 32px;
    font-weight: 800;
    justify-self: flex-start;
}
.body-2{
        font-size: 15px;
        line-height: 21px;
        font-weight: 400;
        margin-bottom: var(--large);
    }
    .indent{
        padding-inline-start: 2rem;
    }
.caption-1{
    font-size: 12px;
    line-height: 16px;
}
.tw-balance{
    text-wrap: balance;
}
.tw-pretty{
    text-wrap: pretty;
}

/* Tablette */
@media screen and (min-width: 768px) {
    .gros-titre, .titre-display .sous-titre-emphase{
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    }
    .gros-titre{
        font-size: 80px;
        line-height: 1;
        font-weight: 900;
    }
    .titre-display{
        font-size: 32px;
        line-height: 40px;
        font-weight: 900;
    }
    .sous-titre-emphase{
        font-size: 32px;
        line-height: 40px;
        font-weight: 800;
    }
    .body-2{
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }
}

@media screen and (min-width: 1240px) {
    .gros-titre, .titre-display .sous-titre-emphase{
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    }
    .gros-titre{
        font-size: 105px;
        line-height: 1;
        font-weight: 900;
    }
    .titre-display{
        font-size: 46px;
        line-height: 54px;
        font-weight: 900;
    }
    .sous-titre-emphase{
        font-size: 46px;
        line-height: 54px;
        font-weight: 800;
    }
    .titre-2{
        font-size: 30px;
        line-height: 38px;
    }
    .titre-section{
        font-size: 36px;
        line-height: 43px;
        font-weight: 800;
    }
    .body-2{
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }
}
.center{
    text-align: center;
}
.blanc{
    color: var(--blanc);
}
.primary{
    color: var(--primary);
}
.noir{
    color: var(--noir);
}

/* Layouts */
/* navigation */
.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;
    align-items: center;
}
.nav-bar a{
	font-weight: 900;
	color: var(--primary);
}
.social {
	display: flex;
	flex-direction: row ;
	justify-content: end;
    height: var(--large);
	margin: 0 1em;}
.social.logo{
	margin-right: 1em;}
/* Conteneurs */
.conteneur-full-width{
	display: flex;
	flex-direction: column;
    justify-items: center;
}
.col-conteneur{
    display: flex;
	width: 90%;
	max-width: 1200px;
	margin: auto;
    flex-direction: column;
    gap: var(--large);
}
.conteneur, .conteneur-reverse, .conteneur-wrap{
	display: flex;
	width: 90%;
	max-width: 1200px;
	margin: auto;
	/* align-items: center; */
	justify-content: center;
	flex-direction: column;
    gap: var(--large);
}

/* Rows */
.row{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--large);
    justify-content: space-between;
}
.gap-start{
    /* justify-content: flex-start;*/
    gap: var(--large);
}
.row-wrap{
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: var(--large);
}
.row-strech{
    display: flex;
    flex-direction: column;
    gap: var(--large);
    align-items: stretch;
}
.row-4-2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--large);
}
/* Columns */
.col-50{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.col-75, .col-75-col-tab{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.col-25{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.col-25-expand{
    display: flex;
    flex-direction: row;
    width: 35%;
    /* max-width: 176px; */
    margin: auto;
    align-items: flex-end;
}
.col-25-row{
    display: flex;
    flex-direction: column;
    width: calc(25% - var(--large));
}
.col-100{
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* Mobile portrait 320-480 */

/* Tablette portrait 480-768 */
@media screen and (min-width: 480px) {
    .row-strech{
        display: flex;
        flex-direction: column;
        gap: var(--large);
        align-items: stretch;
    }
}

/* Tablette paysage / petit laptop 768-1024 */
/* Tablette */
@media screen and (min-width: 768px) {
   .conteneur{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--large);
    }
    .conteneur-reverse{
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: var(--large);
    }
    .conteneur-wrap{
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--large);
    }
    .row{
        display: flex;
        flex-direction: row;
        /* gap: var(--large); */
        justify-content: space-between;
    }
    .row-strech{
        display: flex;
        flex-direction: row;
        gap: var(--large);
        align-items: stretch;
    }
    .gap-start{
        justify-content: flex-start;
        gap: var(--large);
    }
    /* Columns */
    .col-50{
        display: flex;
        flex-direction: column;
        max-width: 50%;
    }
    .col-75{
        display: flex;
        flex-direction: column;
        width: calc(75% - var(--large));
    }

    .col-25{
        display: flex;
        flex-direction: column;
        width: calc(25% - var(--large));
    }
    .col-25-expand{
        display: flex;
        flex-direction: row;
        width: calc(30% - var(--large));
        min-width: 275px;
        max-width: 381px;
        align-items: flex-end;
    }     
}

/* Desktop large */
@media screen and (min-width: 1024px) {
    
}
.bg-primary{
    background-color: var(--primary);
}
.bg-custom-primary{
    background-color: var(--custom-primary);
}
.bg-secondary{
    background-color: var(--secondary);
}
.bg-custom-secondary{
    background-color: var(--custom-secondary);
}
.bg-noir{
    background-color: var(--noir);
}
.content{
    /* background-color: #00f2fe; */
}
.justify-center{
    justify-content: center;
}
.auto{
    justify-content: space-between;
}
.max-100-50{
    max-width: 100%;
}
.strech{
    align-items: stretch;
}
.self-auto{
    align-self: auto;
}
.self-start{
    align-self: flex-start;
}
.self-center{
    align-self: center;
}
.self-end{
    align-self: flex-end;
}
.grow{
    flex-grow: 1;
}
.mt{
    margin-top: var(--large);
}
.mb{
    margin-bottom: var(--large);
}
.mtb{
    margin-top: var(--large);
    margin-bottom: var(--large);
}
.mtb-xxl{
    margin-top: var(--large);
    margin-bottom: var(--large);
}
@media screen and (min-width: 768px) {
        .mtb-xxl{
        margin-top: var(--xxl);
        margin-bottom: var(--xxl);
    }
}

/* Elements */
/* Images */
.cover, .cover-left-center{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: auto;
	flex-direction: column;
    width: 100%;
}
.cover img{
	display: flex;
	height: auto;
	width: 100%;
	margin: 0 auto;
}

.radius{
    border-radius: 24px;
}
/* Hero */
/* Mobile */
.hero-content, .content{
    max-width: 100%;
}
.hero-img{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto;
}
.bg-hero{
    background: url(../img/bg-hero.png) center no-repeat;
    background-size: cover;
}
/* Horizontal Tablette + Laptop */
@media screen and (min-width: 768px) {
    .hero-content{
        width: 50%;
    }
    .hero-img{
        display: flex;
        width: 40%;
        justify-content: end;
    }
    .max-100-50{
        align-items: center;
        max-width: 50%;
    }
    .cover-left-center{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin: auto;
        flex-direction: column;
        width: 100%;
    }
}
/* Horizontal Desktop */
/* @media screen and (min-width: 992px) {
    .hero-content{
        width: 50%;
    }
    .hero-img{
        display: flex;
        width: 40%;
        justify-content: end;
    }
    .max-100-50{
        align-items: center;
        max-width: 50%;
    }
    .cover-left-center{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin: auto;
        flex-direction: column;
        width: 100%;
    }
} */

/* Slider */

.slider-container {
    width: 98%;
    /* max-width: 1200px; */
    position: relative;
    overflow: hidden;
    /* border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); */
    margin: auto;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    touch-action: pan-y pinch-zoom;
}

.slide {
    min-width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 40px;
}

/* .slide h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.slide p {
    font-size: 1.5rem;
    opacity: 0.9;
} */

/* Couleurs des slides */
.slide-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.slide-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.slide-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.slide-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

/* Flèches de navigation */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev {
    left: 20px;
}

.nav-arrow.next {
    right: 20px;
}

/* Dots de navigation */
.dots-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.75);
    transform: scale(1.2);
}

.dot.active {
    background: white;
    width: 32px;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .slide {
        height: 400px;
    }

    .slide h2 {
        font-size: 2.5rem;
    }

    .slide p {
        font-size: 1.2rem;
    }

    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* Cards and products */
.card{
    background-color: transparent;
    border-radius: 20px;
    border: 1px solid var(--primary);
    padding: var(--large);
    
    /* Flexbox pour organiser le contenu verticalement */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* Hauteur fixe pour uniformiser les cartes */
    /* height: 400px; */
    /* Largeur responsive */
    flex: 1 1 250px; /* Grandit, rétrécit, base de 420px */
    min-width: 250px;
    max-width: 275px;
}
.article{
    background-color: transparent;
    /* Flexbox pour organiser le contenu verticalement */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--large);
    max-width: 375px;
}

/* Boutons */

.bouton-prime, .bouton-second{
    display: flex;
    align-self: flex-start;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Keeps the expanding background within the button's bounds */
	display: inline-flex;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    z-index: 1; /* Ensures button content is above the pseudo-element */
	/* transition: background .3s ease-in-out; */
}
    .bouton-prime{
        color: var(--blanc);
        background: var(--button-primary);
    }
    .bouton-second{
		background: transparent;
        border: 1px solid var(--border-secondary);
    }
    .bouton-prime::before{
        content: "";
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        width: 0;
        height: 0%;
        background-color: var(--primary); /* New background color on hover */
        /* border-radius: 50%; Starts as a circle */
        transform: translate(-50%, -50%); /* Centers the pseudo-element's origin point */
        transition: width 0.5s ease; /* Smooth size transition */
        z-index: -1; /* Puts the pseudo-element behind the button content */
    }
    .bouton-second::before{
        content: "";
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        width: 0;
        height: 0%;
        background-color: var(--button-primary); /* New background color on hover */
        /* border-radius: 50%; Starts as a circle */
        transform: translate(-50%, -50%); /* Centers the pseudo-element's origin point */
        transition: width 0.5s ease; /* Smooth size transition */
        z-index: -1; /* Puts the pseudo-element behind the button content */
    }
    
    .bouton-prime:hover::before, .bouton-prime:active::before, .bouton-second:hover::before, .bouton-second:active::before{
		width: 200%; /* Expand width to cover the whole button */
        height: 200%; /* Expand height to cover the whole button */
	}

.bouton-large{
    width: 100%;
}
@media screen and (min-width: 1000px) {
    .bouton-large{
        max-width: 15em;
    }   
}
.bouton .text, .bouton-prime .text, .bouton-second .text{
	font-family: 'Montserat', Arial, Helvetica, sans-serif;
    margin: var(--large) 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .02em;
	color: var(--blanc);
    position: relative;
    z-index: 2; /* Ensures text is always on top */}
    .bouton-second .text{
        color: var(--primary);
    }
	.bouton-prime:hover .text, .bouton-second:hover .text{
		color: var(--blanc);
	}

/* Logos et signature */
.logo, .bg-image{
	display: inline-block;}
	.logo.familiprix-head{
		background: url(../img/logo-familiprix.svg) center no-repeat;
		width: 10rem;
		height: 3rem;}
	.logo.familiprix{
    	background: url(../img/logo-familiprix.svg) center no-repeat;
    	background-size: contain;
    	width: 10.625rem;
    	height: 2.9375rem; }
	.logo.familiplus{
		background: url(../img/logo-familiplus.svg) center no-repeat;
		background-size: contain;
		width: 100%;
		max-width: 22rem;
		height: 8rem;}
	.logo.fb{
		background: url(../img/ico-facebook.svg) center no-repeat;
		background-size: contain;
		width: 0.75rem;
		height: auto;
		margin-right: 1.25em; }
	.logo.ig{
		background: url(../img/ico-instagram.svg) center no-repeat;
		background-size: contain;
		width: 1.5rem;
		height: auto;
		margin-right: 1.25em; }
	.logo.yt{
		background: url(../img/ico-youtube.svg) center no-repeat;
		background-size: contain;
		width: 1.5rem;
		height: auto; }
    .bg-image.hero-image{
        background: url(../img/image-hero.png) center no-repeat;
        background-size: contain;
        width: 334px;
        height: 334px;
    }
    .bg-image.hero-image-2{
        background: url(../img/image-hero-2.png) center no-repeat;
        background-size: contain;
        width: 580px;
        height: 632px;
    }
    .bg-image.hero-bebe{
        background: url(../img/bebe.svg) center no-repeat;
        background-size: contain;
        height: 324px;
        width: 100%;
        /* max-width: 324px; */
        
    }
    .bg-image.accessoires-bebe{
        background: url(../img/accessoires-bebe.svg) center no-repeat;
        background-size: contain;
        width: 230px;
        height: 179px;
    }
    .bg-image.test-grossesse{
        background: url(../img/test-grossesse.svg) center no-repeat;
        background-size: contain;
        width: 204px;
        height: 204px;
    }
    .bg-image.grossesse{
        background: url(../img/grossesse.svg) center no-repeat;
        background-size: contain;
        width: 230px;
        height: 212.57px;
    }
    .bg-image.maman-bebe{
        background: url(../img/maman-bebe.svg) center no-repeat;
        background-size: contain;
        width: 230px;
        height: 212.57px;
    }
    .bg-image.produits-trousse{
        background: url(../img/produits-trousse-post-accouchement.png) center no-repeat;
        background-size: contain;
        width: 272px;
        height: 212.08px;
    }
    .bg-image.pharmacien{
        background: url(../img/pharmacien.svg) center no-repeat;
        background-size: contain;
        width: 230px;
        height: 212.57px;
    }
    .bg-image.couches{
        background: url(../img/couches.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.soins-doux{
        background: url(../img/soins-doux.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.repas-bebe{
        background: url(../img/repas-bebe.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.suces-biberons{
        background: url(../img/suces-biberons.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.article-grossesse{
        background: url(../img/grossesse-changements-peau.jpg) center no-repeat;
        background-size: contain;
        width: 375px;
        height: 229px;
        background-color: #000000;
    }
    .bg-image.article-essentiels{
        background: url(../img/essentiel-arrive-bebe.jpg) center no-repeat;
        background-size: contain;
        width: 375px;
        height: 229px;
        background-color: #000000;
    }
    .bg-image.article-choix-couches{
        background: url(../img/choix-couches-nouveaux-parents.jpg) center no-repeat;
        background-size: contain;
        width: 375px;
        height: 229px;
        background-color: #000000;
    }
    a.bg-image:hover, a img:hover{
        opacity: 0.7;
        transition: opacity 500ms ease-out;
    }
    /* Tablette desktop 768px */
    /* Desktop 768px */
    @media (min-width: 992px) {
        .bg-image.hero-bebe{
            background: url(../img/bebe.svg) center no-repeat;
            background-size: contain;
            width: 100%;
            /* max-width: 580px; */
            height: 632px;
        }
        .bg-image.accessoires-bebe{
            background: url(../img/accessoires-bebe.svg) center no-repeat;
            background-size: contain;
            width: 371px;
            height: 286.18px;
        }
        .bg-image.test-grossesse{
            background: url(../img/test-grossesse.svg) center no-repeat;
            background-size: contain;
            width: 345px;
            height: 345px;
        }
        .bg-image.grossesse{
            background: url(../img/grossesse.svg) center no-repeat;
            background-size: contain;
            width: 345px;
            height: 369.09px;
        }
        .bg-image.maman-bebe{
            background: url(../img/maman-bebe.svg) center no-repeat;
            background-size: contain;
            width: 373px;
            height: 373.01px;
        }
        .bg-image.produits-trousse{
            background: url(../img/produits-trousse-post-accouchement.png) center no-repeat;
            background-size: contain;
            width: 419px;
            height: 388px;
        }
        .bg-image.pharmacien{
            background: url(../img/pharmacien.svg) center no-repeat;
            background-size: contain;
            width: 373px;
            height: 373px;
        }
    }
    .bg-image.image-50-50{
        background: url(../img/image-50-50.png) center no-repeat;
        background-size: cover;
        width: 100%;
        min-height: 400px;
        border-radius: 24px;
    }
    .bg-image.image-25-75{
        background: url(../img/image-25-75-mobile.png) center no-repeat;
        background-size: cover;
        width: 354px;
        height: 206px;
        border-radius: 24px;
    }
        /* Tablette */
        @media screen and (min-width: 480px) {
            .bg-image.image-25-75{
                background: url(../img/image-25-75-tablette.png) center no-repeat;
                background-size: cover;
                width: 275px;
                height: 160px;
                border-radius: 24px;
            }
        }
        /* Tablette paysage / petit laptop 768-1024 */
        @media screen and (min-width: 768px) {
            .bg-image.image-25-75{
                background: url(../img/image-25-75.png) center no-repeat;
                background-size: cover;
                width: 354px;
                height: 350px;
                border-radius: 24px;
            }
        }
    .bg-image.circle-profil-1{
        background: url(../img/elipse.svg) center right no-repeat;
        background-size: contain;
        width: 372px;
        height: 372px;
    }
    .bg-image.circle-cat-1{
        background: url(../img/categories-circle.png) center right no-repeat;
        background-size: contain;
        width: 177px;
        height: 176px;
        /* width: calc(25% - var(--large));
        height: auto; */
    }
        /* Laptop and Desktop */
        /* Desktop 992 */
        @media screen and (min-width: 768px) {
            .bg-image.hero-image{
                background: url(../img/image-hero.png) center right no-repeat;
                background-size: contain;
                width: 582px;
                height: 632px;
            }
        }
		.logo *, .bg-image * {
			display: none;}