:root{
    --font-title: 'Montserrat', 'Roboto', Arial, Helvetica, sans-serif;
    --font-paragraphe: 'Roboto', Arial, Helvetica, sans-serif;
	--primary:#002c50;
    --blue50: #E3F1FB;
    /* --custom-primary:#FFFAC6; */
    /* --custom-primary:#FFDE42; */
    --custom-primary:#ACCF7A;
    --secondary:#EBEFF2;
    /* --custom-secondary:#FFDE42; */
    /* --custom-secondary:#FFFAC6; */
    --custom-secondary:#E7EFBA;
	--familiplus:#FDA9FF;
    --blanc: #ffffff;
    --noir: #000000;
    --grey: #BEBEBE;
    --light-grey: #ECECEC;
    --button-primary: #034692;
    --border-secondary: #6A88A7;
    --small: 8px;
    --large: 16px;
    --xxl: 32px;

    /* Pour le slider de confettis */
    --card-max-width: 420px;
    --card-ratio: 580 / 610;
    /* ---- Layer 3 : position/taille libres du visuel fixe (coeur) ---- */
    --fixed-top: 0%;
    --fixed-left: 54%;
    --fixed-width: 40%;

    /* ---- Ajustement de l'animation des tuiles ---- */
    --slide-display-time: 3.2s;   /* temps qu'un slide reste affiché avant de basculer */
    --slide-transition: .7s;      /* durée du fade + déplacement, à l'entrée ET à la sortie */
    --slide-travel: 6%;           /* distance verticale parcourue pendant le fade (l'effet "bas vers haut") */

    /* ---- Layer 4 : réglages de la pluie de confettis ---- */
    --confetti-count: 13;        /* nombre de pièces affichées simultanément */
    --confetti-min-dur: 2s;      /* vitesse : durée mini d'une chute */
    --confetti-max-dur: 4s;      /* vitesse : durée maxi d'une chute */
    --confetti-distance: 950%;   /* distance parcourue (hauteur de la chute) */
}

/* 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); */
    max-width: 100%;
}

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

a{
    text-decoration: none;
    color: inherit;
}
/* Magik trick */
.hide-mobile{
    display: none;
}
.show-mobile{
    display: block;
}

/* Tablette portrait 480-768 */
@media screen and (min-width: 480px) {
    .hide-mobile{
        display: block;
    }
    .show-mobile{
        display: block;
    }
}


/* Text & text color */

/* Mobile */
.gros-titre, .sous-titre-emphase, .titre-display, .titre-2, .titre-3, .titre-section, .titre-produit, .body-2-titre{
    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;
}
.titre-produit{
    font-size: 18px;
    line-height: 1.25;
    font-weight: 500;
    padding: var(--large);
    border-radius: 0 0 24px 24px;
}
.body-2, .body-2-titre{
    font-size: 15px;
    line-height: 21px;
    font-weight: 400;
    margin-bottom: var(--large);
}
.body-2-titre{
    font-weight: 800;
    margin-bottom: 0;
}
    .indent{
        padding-inline-start: 2rem;
    }
.caption-1{
    font-size: 12px;
    line-height: 16px;
}
.uppercase{
    text-transform: uppercase;
}
.emphase{
    font-weight: 800;
}
.tw-balance{
    text-wrap: balance;
}
.tw-pretty{
    text-wrap: pretty;
}

/* Tablette */
@media screen and (min-width: 768px) {
    .gros-titre, .titre-display .sous-titre-emphase, .body-2-titre {
        font-family: var(--font-title)
    }
    .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;
    }
    .body-2-titre{
        font-size: 16px;
        line-height: 22px;
        font-weight: 800;
        margin-bottom: 0;
    }
}

@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, .body-2-titre{
        font-size: 16px;
        line-height: 22px;
    }
    .body-2{
        font-weight: 400;
    }

    .body-2-titre{
        font-weight: 800;
        margin-bottom: 0;
    }
}
.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-big-icon {
        display: flex;
        flex-direction: row ;
        justify-content: space-between;
        max-width: 150px;
        height: 2rem;
    }
.social.logo{
	margin-right: 1em;}

/* Conteneurs */
.conteneur-full-width{
	display: flex;
	flex-direction: column;
    justify-items: center;
    width: 100%;
}
.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);
}
.conteneur-nogap-mobile{
    display: flex;
    width: 90%;
    max-width: 1200px;
    margin: auto;
	justify-content: center;
	flex-direction: column;

}

/* Rows */
.row{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--large);
    justify-content: space-between;
}
.row-md{
    display: flex;
    flex-direction: row;
    gap: var(--large);
    justify-content: space-between;
}
.row-center{
    display: flex;
    flex-direction: row;
    gap: var(--large);
    justify-content: center;
}
.gap-start{
    /* justify-content: flex-start;*/
    gap: var(--large);
}
.row-wrap{
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: var(--large);
}
@media screen and (min-width: 786px) {
    /* .row-wrap{
        display: flex;
        flex-direction: row;
        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);
}
.row-3-2, .row-5-2-1{
    display: flex;
    gap: var(--large);
    /* align-items: stretch; */
    justify-content: center;
    flex-wrap: wrap; /* Permet le passage à la ligne sur petit écran */
}

/* Columns */

.col-50{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.col-50md{
        display: flex;
        flex-direction: column;
        min-width: 50%;
        /* gap: var(--large); */
    }
.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;
    }
    .col-20{
        flex: 0 0 calc(50% - var(--large)); /* Passe à 2 colonnes sur tablette */
    }
}

/* Tablette paysage / petit laptop 768-1024 */
/* Tablette */
@media screen and (min-width: 768px) {
   .conteneur, .conteneur-nogap-mobile{
        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; */
        flex-direction: row;
        max-width: 50%;
    }
     .col-50-left{
        position: relative;
        left: 2%;
        display: flex;
        flex-direction: column;
        /* flex-direction: row; */
        max-width: 50%;
        justify-content: flex-start;
    }
    .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;
    }     
}
.sticky{
    position: sticky;
    top: 0;
    z-index: 999;
}
/* 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-blue50{
    background-color: var(--blue50);
}
.bg-custom-secondary{
    background-color: var(--custom-secondary);
}
.bg-noir{
    background-color: var(--noir);
}
.bg-blanc{
    background-color: var(--blanc);
}
.bg-gris{
    background-color: var(--light-grey);
}
.bg-familiplus{
    background-color: var(--familiplus);
}
.content{
    /* background-color: #00f2fe; */
}
.justify-center{
    justify-content: center;
}
.justify-self{
    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;
}
.flex-end{
    justify-content: flex-end;
}
.left-flex-end{
    justify-content: flex-start;
}
.rb-position{
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: var(--large);
}
.center-position{
    align-items: center;
    justify-content: center;
}
.left-center-position{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.ptb{
    padding-top: var(--large);
    padding-bottom: var(--large);
}
.mt-small{
    margin-top: var(--small);
}
.mb-small{
    margin-bottom: var(--small);
}
.mtb-small{
    margin-top: var(--small);
    margin-bottom: var(--small);
}
.mt-s-l{
    margin-top: var(--small);
}
.mb-s-l{
    margin-bottom: var(--small);
}
.mtb-s-l{
    margin-top: var(--small);
    margin-bottom: var(--small);
}
.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);
}
.mb-xxl{
    margin-bottom: var(--large);
}
.mlr-xxl{
    margin-left: var(--large);
    margin-right: var(--large);
}
@media screen and (min-width: 768px) {
    .mt-s-l{
        margin-top: var(--large);
    }
    .mb-s-l{
        margin-bottom: var(--large);
    }
    .mtb-s-l{
        margin-top: var(--large);
        margin-bottom: var(--large);
    }
    .mtb-xxl{
        margin-top: var(--xxl);
        margin-bottom: var(--xxl);
    }
    .mb-xxl{
        margin-top: var(--xxl);
        margin-bottom: var(--xxl);
    }
    .left-center-position{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
    }
    .left-flex-end{
        justify-content: flex-end;
    }
}

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

/* Horizontal Tablette + Laptop */
@media screen and (min-width: 768px) {
    .cover .align-item-stretch{
        align-items: center;
        
    }
}

.cover img, .cover-left-center img, .cover-center-stretch img{
	display: flex;
	height: auto;
	width: 100%;
	margin: 0 auto;
}
.border-radius{
    border-radius: 20px;
    overflow: hidden;
}
.border-radius-stroke{
    border-radius: 20px;
    border: 1px solid var(--grey);
    overflow: hidden;
}
.radius{
    border-radius: 24px;
}
.radius-tl{
    border-radius: 24px 0 0 0; /*Top-left, top-right, bottom-right, bottom-left*/
}
.radius-tr{
    border-radius: 0 24px 0 0; /*Top-left, top-right, bottom-right, bottom-left*/
}
.radius-bl{
    border-radius: 0 0 24px 0; /*Top-left, top-right, bottom-right, bottom-left*/
}
.radius-br{
    border-radius: 0 0 0 24px; /*Top-left, top-right, bottom-right, bottom-left*/
}
/* 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;
}
/* Hero Full bg image et signature */
.hero-bg-img-signature {
    background: url(../img/main-vague-mobile.png) bottom 12% right no-repeat;
    background-size: cover;
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: min-height 0.5s ease;
}
    .nav-absolute{
        position:absolute; /* sur la hero */
        top:0;left:0;right:0;
        z-index:10; /* devant la hero */
    }
    .hero-bg-img-signature .nav-bar{
        max-width:1200px;
        margin:0 auto;
        padding:var(--xxl);
        display:flex;
        align-items:center;
        background-color: transparent;
        position:relative; /* pour calage */
    }
/* Horizontal Tablette + Laptop */
@media screen and (min-width: 768px) {
    .hero-bg-img-signature {
        background: url(../img/main-vague-mobile.png) bottom 7% right no-repeat;
        background-size: cover;
        min-height: 600px;
        transition: min-height 0.5s ease;
    }

    .hero-content{
        width: 50%;
    }
    .hero-img{
        display: flex;
        /* width: 40%; */
        width: 50%;
        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-bg-img-signature {
        background: url(../img/main-vague.png) bottom right no-repeat;
        background-size: cover;
        min-height: 600px;
        transition: min-height 0.5s ease;
    }
}

/* Slider avec confettis */

.confettis-slider {
    position: relative;
    width: 100%;
    max-width: var(--card-max-width);
    aspect-ratio: var(--card-ratio);
    margin: 0 auto;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  .layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* ---------- LAYER 1 : fond, SVG importé ---------- */
  .layer-bg { z-index: 1; }
  .layer-bg img { width: 100%; height: 100%; display: block; }

  /* ---------- LAYER 2 : slides, SVG importés ---------- */
  .layer-slides { z-index: 2; pointer-events: none; }

  .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(6%);
    transition: opacity .7s ease, transform .7s ease;
  }
  .slide img { width: 100%; height: 100%; display: block; }
  .slide.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  .slide.is-leaving {
    opacity: 0;
    transform: translateY(-6%);
  }

  /* ---------- LAYER 3 : élément fixe, SVG importé, repositionnable ---------- */
  .layer-fixed { z-index: 3; pointer-events: none; }
  .fixed-el {
    position: absolute;
    top: var(--fixed-top);
    left: var(--fixed-left);
    width: var(--fixed-width);
  }
  .fixed-el img { width: 100%; height: auto; display: block; }

  /* ---------- LAYER 4 : pluie de confettis — générée en JS (pas de fichier importé) ---------- */
  .layer-confetti { z-index: 4; pointer-events: none; overflow: hidden; }

  .confetti-piece {
    position: absolute;
    top: -10%;
    left: var(--x);
    width: var(--size);
    height: auto;
    opacity: 0;
    animation: confetti-fall var(--dur) linear var(--delay) infinite;
    will-change: transform, opacity;
  }
  .confetti-piece svg { width: 100%; height: 100%; display: block; }

  @keyframes confetti-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--r-start)); opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate3d(var(--drift), var(--confetti-distance), 0) rotate(var(--r-end)); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .slide { transition: opacity .3s ease; transform: none !important; }
    .confetti-piece { animation: none; opacity: 0; }
  }

/* 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;
}
.card-strech{
     /* Aligne les cartes sur 3 colonnes sur grand écran */
    /* Calcule la largeur : (100% - espaces) / 3 */
    flex: 0 1 100%;

    /* Permet aux cartes de rétrécir sur mobile si besoin */
    min-width: 250px; 
    /* max-width: 375px; */
    
    /* Supprimez la hauteur fixe 'height' pour que le contenu décide */
    padding: var(--xxl);
    background-color: var(--familiplus);

    /* ÉTAPES clés pour permettre le grow et aligner le bouton au bas de la carte: */
    display: flex;         /* Transforme la carte en conteneur Flexbox */
    flex-direction: column; /* Aligne les éléments de haut en bas */

}
.avantage{
    /* flex: 0 1 100%;
    min-width: 200px;
    padding: var(--large);
    display: flex;
    flex-direction: column; */
    flex: 0 1 calc((100% - (var(--large) * 2) ) / 2);
    /* min-width: 200px; */
    min-width: 160px;
    padding: var(--large);
    display: flex;
    flex-direction: column;
}

/* Tablette paysage / petit laptop 768-1024 */
@media screen and (min-width: 768px) {
    .card-strech{
        /* Aligne les cartes sur 2 colonnes sur tablette paysage */
        /* Calcule la largeur : (100% - espaces) / 3 */
        flex: 0 1 calc((100% - (var(--large) * 2) ) / 2);

        /* Permet aux cartes de rétrécir sur mobile si besoin */
        min-width: 250px; 
        /* max-width: 375px; */
        
        /* Supprimez la hauteur fixe 'height' pour que le contenu décide */
        padding: var(--xxl);
        background-color: var(--familiplus);

        /* ÉTAPES clés pour permettre le grow et aligner le bouton au bas de la carte: */
        display: flex;         /* Transforme la carte en conteneur Flexbox */
        flex-direction: column; /* Aligne les éléments de haut en bas */
    }
    .avantage{
        flex: 0 1 calc((100% - (var(--large) * 2) ) / 2);
        min-width: 200px;
        padding: var(--large);
        display: flex;
        flex-direction: column;
    }
}
/* Large desktop 1024 < */
@media screen and (min-width: 1025px) {
    .card-strech{
        /* Aligne les cartes sur 3 colonnes sur grand écran */
        /* Calcule la largeur : (100% - espaces) / 3 */
        flex: 0 1 calc((100% - (var(--large) * 2) ) / 3);

        /* Permet aux cartes de rétrécir sur mobile si besoin */
        min-width: 250px; 
        /* max-width: 375px; */
        
        /* Supprimez la hauteur fixe 'height' pour que le contenu décide */
        padding: var(--xxl);
        background-color: var(--familiplus);

        /* ÉTAPES clés pour permettre le grow et aligner le bouton au bas de la carte: */
        display: flex;         /* Transforme la carte en conteneur Flexbox */
        flex-direction: column; /* Aligne les éléments de haut en bas */

    }
    .avantage{
        flex: 0 1 calc((100% - (var(--large) * 4) ) / 5);
        min-width: 200px;
        padding: var(--large);
        display: flex;
        flex-direction: column;
    }
}

.tile{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* background-color: #00f2fe; */
}
.article{
    background-color: transparent;
    /* Flexbox pour organiser le contenu verticalement */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--large);
    width: 100%;
    /* max-width: 100%; */
}
.produit{
    background-color: transparent;
    /* Flexbox pour organiser le contenu verticalement */
    display: flex;
    flex-direction: column;
    /* align-items: flex-start;
    gap: var(--large); */
    width: 100%;
    max-width: 375px;
    border: 1px solid var(--grey);
    border-radius: 24px;
    flex-grow: 1;
    overflow: hidden;
}
/* Tablette paysage / petit laptop 768-1024 */
@media screen and (min-width: 768px) {
    .produit{
        background-color: transparent;
        /* Flexbox pour organiser le contenu verticalement */
        display: flex;
        flex-direction: column;
        /* align-items: flex-start;
        gap: var(--large); */
        width: 33%;
        max-width: 375px;
        border: 1px solid var(--grey);
        border-radius: 24px;
        flex-grow: 1;
        overflow: hidden;
    }
    .article{
        background-color: transparent;
        /* Flexbox pour organiser le contenu verticalement */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--large);
        /* max-width: 216px; */
        width: calc(33% - var(--large));
    }
}
/* Large desktop 1024 < */
@media screen and (min-width: 1025px) {
    .article{
        background-color: transparent;
        /* Flexbox pour organiser le contenu verticalement */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--large);
        /* max-width: 386px; */
        /* max-width: calc(33% - var(--large)); */
    }
    .produit{
        background-color: transparent;
        /* Flexbox pour organiser le contenu verticalement */
        display: flex;
        flex-direction: column;
        /* align-items: flex-start;
        gap: var(--large); */
        width: 33%;
        max-width: 375px;
        border: 1px solid var(--grey);
        border-radius: 24px;
        flex-grow: 1;
        overflow: hidden;
    }
}
.mw-350{
    min-width: 250px;
}
.bg-img-produit{
    background-color: var(--blanc);
    transition: all 500ms ease-out;
    border-radius: 24px 24px 0 0;
}
.bg-img-produit:hover{
    background-color: var(--secondary);
    transition: all 500ms ease-out;
}
.bg-img-produit:hover .img-produit img {
  opacity: 0.7;
  transition: opacity 500ms ease-out;
}
.img-produit{
    position: relative;
    max-height: 227px;
    width: auto;
    margin: 0 auto;
    /* background: var(--blanc); */
}

/* Boutons */

.bouton-prime, .bouton-second, .bouton-second-blanc{
    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-second-blanc{
		/* background: transparent; */
        background: var(--blanc);
        /* 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-second-blanc::before{
        content: "";
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        width: 0;
        height: 0%;
        background-color: var(--blue50); /* 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, .bouton-second-blanc:hover::before, .bouton-second-blanc:active::before{
		width: 200%; /* Expand width to cover the whole button */
        height: 200%; /* Expand height to cover the whole button */
	}

.bouton-large{
    position: relative;
    width: 95%;
    margin: 0 auto;
}
/* @media screen and (min-width: 1000px) {
    .bouton-large{
        max-width: 95%;
        margin: 0 auto;
    }   
} */
.bouton .text, .bouton-prime .text, .bouton-second .text, .bouton-second-blanc .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, .bouton-second-blanc .text{
        color: var(--primary);
    }
	.bouton-prime:hover .text, .bouton-second:hover .text{
		color: var(--blanc);
	}

/* Logos et signature */
.logo, .bg-image, .tag{
	display: inline-block;}
	.logo.familiprix-head{
		background: url(../img/logo-familiprix.svg) center no-repeat;
		width: 10rem;
		height: 3rem;}
    .logo.familiplus-10-head{
		background: url(../img/10ans-familiplus.svg) center no-repeat;
        background-size: contain;
		width: 13rem;
		height: 3rem;}
    .logo.familiplus-10{
		background: url(../img/10ans-familiplus.svg) center no-repeat;
        background-size: contain;
		width: 100%;
		height: 108px;}
	.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; }
    .logo.fb-black{
		background: url(../img/ico-facebook.svg) center center no-repeat;
		background-size: contain;
		width: 3rem;
		height: auto;
		/* margin-right: 1.25em;  */
    }
	.logo.ig-black{
		background: url(../img/ico-instagram.svg) center center no-repeat;
		background-size: contain;
		width: 3rem;
		height: auto;
		/* margin-right: 1.25em;  */
    }
	.logo.in-black{
		background: url(../img/ico-linkedin.svg) center center no-repeat;
		background-size: contain;
		width: 3rem;
		height: auto;
		/* margin-right: 1.25em;  */
    }
    .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-image-gif{
        background: url(../img/50k-fr-mobile.gif) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 225px;
    }
    .bg-image.hero-image-gif-en{
        background: url(../img/50k-en-mobile.gif) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 225px;
    }
    /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .bg-image.hero-image-gif{
                    background: url(../img/50k-fr.gif) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 610px;
                }
                .bg-image.hero-image-gif-en{
                    background: url(../img/50k-en.gif) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 610px;
                }
            }

    .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;
    }
    .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; */
    }

    /* campagne Bébé */
    .bg-image.hero-bebe{
        background: url(../img/bebe.svg) center no-repeat;
        background-size: contain;
        height: 324px;
        width: 100%;
    }
    .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;
    }
    /* Landing Stylé */
    .tag.signature-fr{
        background: url(../img/signature-fr-mobile.svg) top right no-repeat;
        background-size: contain;
        width: 260px;
        height: 208px;
        margin-left: 0;
        transition: width 0.5s ease-out, height 0.5s ease-out;
    }
     .tag.signature-en{
        background: url(../img/signature-mobile-en.svg) top right no-repeat;
        background-size: contain;
        width: 260px;
        height: 208px;
        margin-left: 0;
        transition: width 0.5s ease-out, height 0.5s ease-out;
    }
    a.bg-image:hover, a img:hover{
        opacity: 0.7;
        transition: opacity 500ms ease-out;
    }
    /* bg image and custom style */
    /* campagne Stylé */
    .tag.mini{
         background: url(../img/mini.svg) top right no-repeat;
        background-size: contain;
        height: 106.4px;
        width: 16rem;
        max-width: 305px;
    }
    .acessoires-estivaux{
        display: flex;
        position: relative;
        background: url(../img/accessoires-estivaux.jpg) center no-repeat;
        background-size: cover;
        height: 143px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .acessoires-estivaux{
                    display: flex;
                    position: relative;
                    background: url(../img/accessoires-estivaux.jpg) center no-repeat;
                    background-size: cover;
                    height: 172px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .lunettes-soleil{
        display: flex;
        position: relative;
        background: url(../img/lunettes-soleil.jpg) center no-repeat;
        background-size: cover;
        height: 143px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .lunettes-soleil{
                    display: flex;
                    position: relative;
                    background: url(../img/lunettes-soleil.jpg) center no-repeat;
                    background-size: cover;
                    height: 172px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .bas-femmes{
        display: flex;
        position: relative;
        background: url(../img/bas-femmes.jpg) center no-repeat;
        background-size: cover;
        height: 143px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .bas-femmes{
                    display: flex;
                    position: relative;
                    background: url(../img/bas-femmes.jpg) center no-repeat;
                    background-size: cover;
                    height: 172px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .accessoires-cheveux{
        display: flex;
        position: relative;
        background: url(../img/accessoires-cheveux.jpg) center no-repeat;
        background-size: cover;
        height: 143px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .accessoires-cheveux{
                    display: flex;
                    position: relative;
                    background: url(../img/accessoires-cheveux.jpg) center no-repeat;
                    background-size: cover;
                    height: 172px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .bijoux{
        display: flex;
        position: relative;
        background: url(../img/bijoux.jpg) center no-repeat;
        background-size: cover;
        height: 330px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .bijoux{
                    display: flex;
                    position: relative;
                    background: url(../img/bijoux.jpg) center no-repeat;
                    background-size: cover;
                    height: 380px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .accessoires-ete{
        display: flex;
        position: relative;
        background: url(../img/accessoires-ete.jpg) center no-repeat;
        background-size: cover;
        height: 330px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .accessoires-ete{
                    display: flex;
                    position: relative;
                    background: url(../img/accessoires-ete.jpg) center no-repeat;
                    background-size: cover;
                    height: 380px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    .mini{
        display: flex;
        position: relative;
        background: url(../img/bg-mini-small.jpg) center no-repeat;
        background-size: cover;
        height: 330px; /* reponsable de la hauteur responsive*/
        width: auto;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .mini{
                    display: flex;
                    position: relative;
                    background: url(../img/bg-mini.jpg) center no-repeat;
                    background-size: cover;
                    height: 380px; /* reponsable de la hauteur responsive*/
                    width: auto;
                }
            }
    /* Campagne solaire */
    .bg-image.hero-femme{
        background: url(../img/femme.svg) center no-repeat;
        background-size: contain;
        height: 580px;
        width: 100%;
    }
    /* Campagne VPH */
    .bg-image.hero-pharmacienne-patient{
        background: url(../img/pharmacienne-patient.svg) center no-repeat;
        background-size: contain;
        height: 410px;
        width: 90%;
        margin-bottom: var(--xxl);
    }
     /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                 .bg-image.hero-pharmacienne-patient{
                    background: url(../img/pharmacienne-patient.svg) center no-repeat;
                    background-size: contain;
                    height: 580px;
                    width: 100%;
                }
            }
    .concept-ete{
        display: flex;
        position: relative;
        background: url(../img/concept-ete-small.png) left center no-repeat;
        background-size: cover;
        border-radius: 20px;
        height: 230px;
        width: 100%;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .concept-ete{
                    display: flex;
                    position: relative;
                    background: url(../img/concept-ete.png) left center no-repeat;
                    background-size: cover;
                    border-radius: 32px;
                    height: 230px;
                    width: 100%;
                }
            }
    .bg-image.protection-solaire{
        background: url(../img/protection-solaire.svg) center no-repeat;
        background-size: contain;
        width: 210px;
        height: 210px;
    }
    .bg-image.bouteille-eau{
        background: url(../img/bouteille-eau.svg) center no-repeat;
        background-size: contain;
        width: 210px;
        height: 210px;
    }
    .bg-image.chapeau{
        background: url(../img/chapeau.svg) center no-repeat;
        background-size: contain;
        width: 210px;
        height: 210px;
    }
    .bg-image.psst-bobos-ete{
        background: url(../img/psst-bobos-ete.png) center no-repeat;
        background-size: contain;
        height: 350px;
        width: 100%;
    }
    .bg-image.psst-summer-first-aid{
        background: url(../img/psst-summer-first-aid.png) center no-repeat;
        background-size: contain;
        height: 350px;
        width: 100%;
    }
    .bg-image.psst-itss{
        background: url(../img/psst-itss.png) center no-repeat;
        background-size: contain;
        height: 350px;
        width: 100%;
    }
    .bg-image.psst-stbbis{
        background: url(../img/psst-stbbis.png) center no-repeat;
        background-size: contain;
        height: 350px;
        width: 100%;
    }

    .bg-image.produits-solaires{
        display: flex;
        position: relative;
        background: url(../img/illustration-produits-solaires-small.svg) center no-repeat;
        background-size: contain;
        background-color: #FFFAC6;
        border-radius: 20px;
        height: 230px;
        width: 100%;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .bg-image.produits-solaires{
                    display: flex;
                    position: relative;
                    background: url(../img/illustration-produits-solaires.svg) center no-repeat;
                    background-size: contain;
                    background-color: #FFFAC6;
                    border-radius: 32px;
                    height: 230px;
                    width: 100%;
                }
            }
    
     .bg-image.solaire-visage{
        background: url(../img/protection-solaire-visage.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.solaire-corps{
        background: url(../img/protection-solaire-corps.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.solaire-enfants{
        background: url(../img/protection-solaire-enfants.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    .bg-image.solaire-peau-sensible{
        background: url(../img/protection-solaire-peau-sensible.png) center no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
    }
    #hide-mobile{
        display: none;
    }
    #hide-desktop{
        display: flex;
        flex-direction: column;
    }
        @media screen and (min-width: 768px) {
                #hide-desktop{
                    display: none;
                }
                #hide-mobile{
                    display: flex;
                    flex-direction: column;
                }
            }
    /* END bg image and custom style */
    /* Campagne VPH */
    .bg-image.groupe-gens{
        background: url(../img/groupe-gens.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 162px;
    }
    .bg-image.homme-femme{
        background: url(../img/icon-homme-femme.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 162px;
    }
    .bg-image.virus{
        background: url(../img/virus.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 162px;
    }
    .bg-image.vaccin-vph{
        background: url(../img/vaccin-vph.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 198px;
    }
     .bg-image.condom{
        background: url(../img/condom.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 198px;
    }
    .bg-image.pharmacien-vert{
        background: url(../img/pharmacien-fond-vert.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 198px;
    }
    .bg-image.depistage{
        background: url(../img/test-depistage-vph.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 198px;
    }
    .bg-image.succursale{
        background: url(../img/succursale.svg) center no-repeat;
        background-size: contain;
        width: 159px;
        height: 152px;
    }
    .bg-image.app-jeu{
        background: url(../img/carte-application-mobile.png) bottom center no-repeat;
        background-size: contain;
        width: 100%;
        height: 197px;
        border-radius: 20px;
        border: 1px solid var(--grey);
        overflow: hidden;
    }
     .bg-image.app-jeu-en{
        background: url(../img/carte-application-mobile-en.png) bottom center no-repeat;
        background-size: contain;
        width: 100%;
        height: 197px;
        border-radius: 20px;
        border: 1px solid var(--grey);
        overflow: hidden;
    }
    .bg-image.gif-concours{
        background: url(../img/concours-old.gif) bottom center no-repeat;
        background-size: contain;
        width: 100%;
        height: 200px;
    }
        /* 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: 100%;
                height: 160px;
                border-radius: 24px;
            }
        }
        /* Tablette desktop 768px */
        /* Tablette paysage / petit laptop 768-1024 */
        @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;
            }
            .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;
            }
            .tag.signature-fr{
                background: url(../img/signature-fr.svg) top right no-repeat;
                background-size: contain;
                width: 410px;
                height: 333px;
                margin-left: 0;
                transition: width 0.5s ease-out, height 0.5s ease-out;
            }
            .tag.signature-en{
                background: url(../img/signature-en.svg) top right no-repeat;
                background-size: contain;
                width: 410px;
                height: 333px;
                margin-left: 0;
                transition: width 0.5s ease-out, height 0.5s ease-out;
            }
            .bg-image.app-jeu{
                background: url(../img/carte-application.png) bottom center no-repeat;
                background-size: contain;
                width: 100%;
                height: 280px;
                border-radius: 20px;
                border: 1px solid var(--grey);
                overflow: hidden;
            }
            .bg-image.app-jeu-en{
                background: url(../img/carte-application-en.png) bottom center no-repeat;
                background-size: contain;
                width: 100%;
                height: 280px;
                border-radius: 20px;
                border: 1px solid var(--grey);
                overflow: hidden;
            }
        }

        /* Laptop and Desktop */
        /* Desktop 992px */
        @media (min-width: 992px) {
            .tag.signature-fr{
                background: url(../img/signature-fr.svg) top right no-repeat;
                background-size: contain;
                width: 716px;
                height: 445px;
                margin-left: 0;
                transition: width 0.5s ease-out, height 0.5s ease-out;
            }
            .tag.signature-en{
                background: url(../img/signature-en.svg) top right no-repeat;
                background-size: contain;
                width: 716px;
                height: 445px;
                margin-left: 0;
                transition: width 0.5s ease-out, height 0.5s ease-out;
            }
            .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.vaccin-vph{
                background: url(../img/vaccin-vph.svg) center no-repeat;
                background-size: contain;
                width: 288px;
                height: 288px;
            }
            .bg-image.condom{
                background: url(../img/condom.svg) center no-repeat;
                background-size: contain;
                width: 288px;
                height: 288px;
            }
            .bg-image.pharmacien-vert{
                background: url(../img/pharmacien-fond-vert.svg) center no-repeat;
                background-size: contain;
                width: 100%;
                height: 288px;
            }
            .bg-image.depistage{
                background: url(../img/test-depistage-vph.svg) center no-repeat;
                background-size: contain;
                width: 100%;
                height: 288px;
            }
            .bg-image.succursale{
                background: url(../img/succursale.svg) center no-repeat;
                background-size: contain;
                width: 100%;
                height: 238px;
            }
            .bg-image.app-jeu{
                background: url(../img/carte-application.png) bottom center no-repeat;
                background-size: contain;
                width: 100%;
                height: 370px;
                border-radius: 20px;
                border: 1px solid var(--grey);
                overflow: hidden;
            }
        }
    /* bg-image pour Familifête */
    .bg-image.anniversaire{
        background: url(../img/anniversaire.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 117px;
    }
    .bg-image.offre-perso{
        background: url(../img/offre-perso.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 117px;
    }
    .bg-image.cadeau{
        background: url(../img/cadeau.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 117px;
    }
    .bg-image.prix-membre-icon{
        background: url(../img/prix-membre-icon.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 117px;
    }
    .bg-image.concours-exclusifs{
        background: url(../img/party-popper.svg) center no-repeat;
        background-size: contain;
        width: 100%;
        height: 117px;
    }
        /* Tablette paysage / petit laptop 768-1024 */
            @media screen and (min-width: 768px) {
                .bg-image.anniversaire{
                    background: url(../img/anniversaire.svg) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 176px;
                }
                .bg-image.offre-perso{
                    background: url(../img/offre-perso.svg) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 176px;
                }
                .bg-image.cadeau{
                    background: url(../img/cadeau.svg) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 176px;
                }
                .bg-image.prix-membre-icon{
                    background: url(../img/prix-membre-icon.svg) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 176px;
                }
                .bg-image.concours-exclusifs{
                    background: url(../img/party-popper.svg) center no-repeat;
                    background-size: contain;
                    width: 100%;
                    height: 176px;
                }
            }
		.logo *, .bg-image *, .tag * {
			display: none;}

/* Accordion */
    /* Core styles/functionality */
    .tab {
        position: relative;
    }
    .tab input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }
    .tab__content {
        max-height: 0;
        overflow: hidden;
        transition: all 0.35s;
    }
    .tab input:checked ~ .tab__content {
        max-height: 10rem;
        background-color: var(--light-grey);
    }

    /* Visual styles */
    .accordion {
        color: var(--primary);
        /* border: 2px solid; */
        /* border: 1px solid var(--primary);
        border-radius: 0.5rem; */
        overflow: hidden;
    }
    .tab__label,
    .tab__close {
        display: flex;
        color: var(--primary);
        /* background: var(--custom-primary); */
        border-bottom: 1px inset var(--grey);
        cursor: pointer;
    }
    .tab__label {
        padding: 1rem;
    }
    .tab__label::after {
        content: "\276F";
        width: 1em;
        height: 1em;
        margin-left: auto;
        text-align: center;
        transform: rotate(90deg);
        transition: all 0.35s;
    }
    .tab input:checked + .tab__label::after {
        transform: rotate(270deg);
    }
    .tab__content {
        padding: 0 1rem;
    }
    .tab__close {
        justify-content: flex-end;
        padding: 0.5rem 1rem;
    }
    .accordion--radio {
        --theme: var(--secondary);
    }