body {background-color: #FBF6F1;}
.home-intro-container .side-container{
background: #f0ecf0;
}
.main,
.top-container{
color: #000000;
}
body.page-beauty .block-color{
background-color:inherit;}
/*Jumbotron*/
.page-beauty .jumbotron.jumbotron-bg-right {
background-position-x: 76%;
background-position-y: top;
background-size: auto 92%;
}
.page-beauty .jumbotron .content-container{
max-width: 600px;
}
.page-beauty .content-container h1.hero-title{margin-top: 10px;}
.page-beauty .content-container h1.hero-title {
font-size: 50px;
line-height: 56px;
}
.page-beauty .jumbotron .content-container .hero-description{
font-size: 20px;
line-height: 28px;
margin-top: 36px;
max-width: 60rem;
letter-spacing: normal;
}
.ancres-jumbo {
margin-top:40px;
}
.ancres-jumbo a{
font-size: 1.5rem;
display: inline-table;
border-radius: 25px;
background: #E8F4FC;
padding: 6px 16px;
height: 13px;
text-decoration: none;
color:#32414B;
text-align:center;
}
.ancres-jumbo a:first-child{
margin-right:40px;
}
.ancres-jumbo a:hover{
background:#aedcf3;
}
@media (max-width: 767px){
.jumbotron-gradient{background-image: none;}
}
@media (max-width: 490px) {
.ancres-jumbo{
display: table;
margin-bottom: 8px;
}
.jumbotron.jumbotron-bg-right{
background-position-y: bottom;
background-size: auto 55%;
}
}
.page-beauty .jumbo-mobile{
display: none;
}
@media (max-width: 1570px) {
.page-beauty .jumbotron.jumbotron-bg-right{
background-position-x: 90%;
}
}
@media (max-width: 1300px) {
.page-beauty .jumbotron.jumbotron-bg-right{
background-position-x: 100%;
}
}
@media (max-width: 1200px) {
.page-beauty .jumbotron .container{
width: 100%;
}
.page-beauty .jumbotron .content{padding-left: 25px;}
}
@media (max-width: 1000px) {
.page-beauty .jumbotron.jumbotron-bg-right{
background-size: auto 86%;
}
.page-beauty .jumbotron .content-container .hero-description{max-width: 47rem;}
}
@media (max-width: 875px) {
.page-beauty .jumbotron .content-container .hero-description{max-width: 45rem;}
.page-beauty .jumbotron .content-container .hero-description{
max-width: 100%;
font-size: 18px;
line-height: 26px;}
.page-beauty .jumbotron.jumbotron-bg-right{
background-size: auto 80%;
}
.page-beauty .content-container h1.hero-title{
font-size: 40px;
line-height: 48px;
}
}
@media (max-width: 767px) {
.page-beauty .jumbotron.jumbotron-standard.jumbotron-white.jumbotron-with-bgcolor.jumbotron-bg-right{
height: auto;
background-image: none !important;
padding-top:0px;
}
.page-beauty .jumbo-mobile{
display: block;
width: 100%;
margin-bottom:20px;
}
.page-beauty .jumbotron .content-container{
width: 94%;
max-width: 730px;
margin: 0;
}
.page-beauty .content-container h1.hero-title{margin-top: 0px;}
.page-beauty .jumbotron .content-container .hero-description{
margin-top: 23px;
}
.ancres-jumbo a:first-child{margin-right:30px;}
}
@media (max-width: 400px) {
.page-beauty .jumbo-mobile{
margin-bottom:8px;
}
.ancres-jumbo a:first-child{margin-right:20px;}
}
@media (max-width: 365px) {
.page-beauty .jumbo-mobile{
margin-bottom:5px;
}
.ancres-jumbo a{padding:6px 10px;}
.ancres-jumbo a:first-child{margin-right:10px;}
}
/* CSS - FIN JUMBOTRON */
.grid-articles-promotions{
margin-top:120px;
}
/*Bloc Article Simple - Conseil/Service */
.page-beauty .bloc-simple-img-txt{
margin-top: 90px;
margin-bottom: 140px;
}
.page-beauty .bloc-simple-img-txt .articles-img-container {
text-align:right;
}
.page-beauty .bloc-simple-img-txt .articles-img-container img{
max-height:401px;
width:auto;
}
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 6% 4% 4%;
}
.page-beauty .bloc-simple-img-txt h1{
text-transform: none;
text-align: left;
margin-bottom: 26px;
line-height: 48px;
letter-spacing: normal;
}
.page-beauty .bloc-simple-img-txt p{
line-height: 28px;
letter-spacing: normal;
text-align: left;
padding: 0px 0 3rem;
font-size:20px;
}
.page-beauty .bloc-simple-img-txt p a{
text-decoration: underline;
color:#212121;
font-weight:bold;
font-size:18px;
line-height: 25px;
display:block;
}
.page-beauty .bloc-simple-img-txt p a:hover{
text-decoration: none;
}
@media (max-width: 1023px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 5% 4% 3% 0%;
}
}
@media (max-width: 995px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 5% 4% 3% 2%;
}
}
@media (max-width: 990px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 5% 0% 0%;
}
.page-beauty .bloc-simple-img-txt .articles-img-container{padding-right: 2%;}
}
@media (max-width: 767px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 5% 2% 0%;
}
}
@media (max-width: 740px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{padding-top: 17px;}
.page-beauty .bloc-simple-img-txt h1{ font-size: 34px; line-height:44px ;}
.page-beauty .bloc-simple-img-txt{
margin-bottom: 85px;
margin-top: 40px;}
}
@media (max-width: 475px) {
.page-beauty .bloc-simple-img-txt .articles-text-container{
padding: 5% 4% 0%;
}
.page-beauty .bloc-simple-img-txt .articles-img-container{padding: 0px 2%;}
}
/*Bloc Article Simple - Conseil/Service*/
/*Bloc Quand consulter votre pharmacien(ne)? id=bloc-consulter */
#bloc-consulter
{background-color:#ffffff;}
#bloc-consulter .block-color{
padding-bottom: 130px;}
#bloc-consulter .block-color p,
#bloc-soins-peau .block-color p,
#types-de-peau .block-color p {
max-width: 90rem;
padding-bottom:3rem;
}
#bloc-consulter .col-md-6.div_consulter {
border-radius:16px;
border:1px solid #E2E2E2;
padding:27px 24px 32px;
margin: 0 10px;
width: 48%;
min-height:350px;
position:relative;
}
#bloc-consulter .div_consulter .title-side h3{
font-size:32px;
line-height:38px;
margin-top: 0;
margin-bottom:21px;
letter-spacing:normal;
font-family: 'Figtree';
}
#bloc-consulter .div_consulter#side2 .title-side h3{max-width: 365px;}
#bloc-consulter .bloc-anglais .div_consulter#side2 .title-side h3{max-width: 290px;}
#bloc-consulter .div_consulter .title-side .icon{
border-radius: 16px;
background:#008ED0;
position:relative;
width:64px;
height:64px;
float: left;
margin: 5px 16px 0 0;
}
#bloc-consulter .div_consulter .title-side .icon img{
position:absolute;
top: 18%;
left: 19%;
}
#bloc-consulter .col-md-6.div_consulter ul {
padding-left:28px;
}
#bloc-consulter .col-md-6.div_consulter .btn-container{
position: absolute;
bottom: 32px;
}
@media (max-width: 1200px) {
#bloc-consulter .col-md-6.div_consulter{
margin:0 6px 30px;
min-height:372px;
}
#bloc-consulter .div_consulter .title-side h3{font-size:30px; line-height:36px;}
#bloc-consulter .div_consulter .title-side .icon{margin:5px 12px 15px 0;}
}
@media (max-width: 990px) {
#bloc-consulter .col-md-6.div_consulter{
width:auto;
margin:0 0 30px;
}
#bloc-consulter .div_consulter .title-side .icon{margin:0 0 20px;float: none;}
#bloc-consulter .col-md-6.div_consulter .btn-container{
position: initial;
}
}
@media (max-width: 767px) {
#bloc-consulter .col-md-6.div_consulter{
margin:0 2% 30px;
}
}
/*Balado*/
#pagehome_balado .block-color{
margin-top: -40px;
}
/*3 Conseils*/
#conseils{
background-color:#FBF6F1;
margin-top: -15px;
}
.block-color #conseils .text-left p {
max-width: 90rem;
padding-bottom:3rem;
}
#conseils .block-button-div{
background-color: #FBF6F1;
padding-top:40px;
padding-bottom:30px;
margin-top:0;
}
#conseils .container-title {margin-top:0px;}
/* CSS Nicholas */
.conteneur-circonstances{
display: flex;
justify-content: center;
align-items: flex-end;
gap: var(--spacing-spacing-15, 15px);
align-self: stretch;
border-bottom: 1px solid #08638D;
max-width: 1200px;
width: 1160px;
margin: 0 auto;
}
.circonstance{
display: flex;
padding-bottom: var(--spacing-spacing-10, 10px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
}
.circonstance img{
}
.circonstance p{
color: var(--color-text-text-primary, #212121);
/* Body/Body 1 */
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */
margin: 0 auto;
padding: 0;
}
.conteneur-circonstances{
}
.conteneur-circonstances .circonstance{
}
.conteneur-circonstances .circonstance img{
}
.conteneur-circonstances .circonstance p{
}
.circonstance-descriptions{
display: flex;
min-height: 1px;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
margin: 0 auto;
width: 100%;
max-width: 1200px;
}
.circonstance-descriptions .conteneur-description{
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
padding: 32px 0 64px;
/*gap: 1px;*/
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.circonstance-descriptions .conteneur-description img{
width: 50%;
height: 360px;
border-radius: 16px;
}
.conteneur-description .description-bloc-droite{
display: flex;
height: 360px;
padding: var(--spacing-spacing-32, 29px) var(--spacing-spacing-50, 50px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-spacing-30, 30px);
flex: 1 0 0;
}
.conteneur-description .description-bloc-droite h3{
color: var(--color-text-text-primary, #212121);
/* Heading/Desktop/H3 */
font-family: Figtree Light;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 118.75% */
padding: 0;
margin: 0;
}
#bloc-soins-peau .conteneur-description .description-bloc-droite p,
#types-de-peau .conteneur-description-type .description-bloc-droite p{
color: var(--color-text-text-primary, #212121);
/* Subtitle/Desktop/Subtitle 2 */
/* font-family: FigtreeBook; */
font-size: 16px;
font-style: normal;
font-weight: 400;
text-align: left;
line-height: 24px; /* 150% */
margin: 0;
padding: 0 0 6px 0;
}
.description-bloc-droite .description-encadre{
display: flex;
padding: 6px 8px;
align-items: center;
gap: 16px;
border-radius: 8px;
border: 1px solid var(--color-border-border-primary, #008ED0);
background: var(--color-background-bg-white, #FFF);
}
.description-bloc-droite .description-encadre .txt-encadre p{
color: var(--color-text-text-primary, #212121);
/* Body/Body 1 Bold */
font-family: Roboto;
font-size: 16px;
font-style: normal;
max-width:none;
padding:0 0 5px 0;
font-weight: 700;
line-height: 25px; /* 156.25% */
}
.description-bloc-droite .description-encadre .txt-encadre a{
color: var(--color-text-text-action-accent, #0A6E9D);
/* Link/Link Body 2 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px; /* 150% */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.description-bloc-droite .description-encadre img{
width: inherit;
height: inherit;
}
.conteneur-description .description-bloc-droite .button-rdv{
display: flex;
min-height: 56px;
padding: 0 var(--button-large-padding, 30px);
justify-content: center;
align-items: center;
gap: 8px;
border-radius: var(--radius-radius-round, 1000px);
background: var(--color-background-bg-primary-500, #008ED0);
border: none;
}
.circonstance-descriptions {
display: none;
}
.circonstance-descriptions.active {
display: block;
max-width: 1200px;
width: 100%;
}
.circonstance:hover{
}
.circonstance:hover img{
border-radius:36px;
margin-bottom:6px;
}
.circonstance:hover p{
color: var(--color-text-text-primary, #212121);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 25px;
}
.circonstance:hover{
box-shadow: inset 0 -3px #0072ce;
}
.circonstance.active {
box-shadow: inset 0 -3px #0072ce;
}
.circonstance.active img{
border-radius:36px;
margin-bottom:6px;
}
.circonstance.active p{
color: var(--color-text-text-primary, #212121);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 25px;
}
.conteneur-circonstances {
display: flex;
overflow-x: auto; /* scroll horizontal */
-webkit-overflow-scrolling: touch; /* défilement fluide iOS */
scroll-snap-type: x mandatory;
gap: 1rem;
width: 100%; /* garde la largeur de la page */
box-sizing: border-box; /* inclut le padding */
justify-content: space-between;
}
.conteneur-circonstances::-webkit-scrollbar { display: none; }
.conteneur-circonstances { -ms-overflow-style: none; scrollbar-width: none; }
.circonstance {
flex: 0 0 auto; /* chaque onglet garde sa largeur */
scroll-snap-align: start;
cursor: pointer;
min-width: 100px; /* ou la largeur souhaitée */
}
@media (max-width: 767px) {
.circonstance-descriptions .conteneur-description img {
width: 100%;
}
}
.bloc-types-peau{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-spacing-40, 40px);
align-self: stretch;
width: 1200px;
margin: 0 auto;
}
.logo-top{
text-align: center;
margin-bottom: 40px;
}
.conteneur-types{
display: flex;
align-items: flex-start;
gap: var(--spacing-spacing-20, 20px);
align-self: stretch;
}
#types-de-peau{
background: var(--color-background-bg-beige, #EDE5D8);
}
.types-peau{
display: flex;
height: 450px;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
border-radius: 16px;
background: #FBF6F1;
position: relative;
overflow: hidden;
box-sizing: border-box;
border: 4px solid transparent;
}
.types-peau.active,
.types-peau:hover {
border-radius: 16px;
border-color: var(--color-border-border-neutral-dark, #525255);
background: var(--color-background-bg-peche, #F5D4C2);
}
.types-peau:hover{cursor: pointer;}
.types-peau.active{cursor: default;}
.radio-types {
width: 37px;
height: 36px;
flex-shrink: 0;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
transition: background 0.3s;
}
.types-peau.active .radio-types {
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.types-peau .type-description h6 {
display: none; /* caché par défaut */
font-family: Figtree;
}
.types-peau.active .type-description h6 {
display: block; /* visible quand actif */
}
.type-description{
display: flex;
flex-direction: column;
gap: 15px;
}
.type-description h6{
color: var(--color-text-text-primary, #212121);
/* Heading/Desktop/H6 */
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 140% */
margin: 0;
}
.type-description p{
color: var(--color-text-text-primary, #212121);
/* Subtitle/Desktop/Subtitle 2 */
font-family: Figtree;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
padding: 0;
text-align: left;
}
.type-image{
position: absolute;
left: -76px;
bottom: -81px;
width: 376px;
height: 248px;
z-index: 0;
border-radius: 1000px 1000px 0 0;
transition: bottom 0.3s ease;
}
.types-peau.active .type-image {
bottom: -148px; /* descend de 23px */
}
.type-image.active{
position: absolute;
bottom: -108px;
left: -76px;
width: 376px;
height: 248px;
z-index: 0;
border-radius: 1000px 1000px 0 0;
}
.type-image.peau-grasse{
background: url('/globalassets/beaute/conseils-soins-beaute/peau/2025/peau-grasse.jpg') lightgray -59.879px -55.248px / 121.976% 123.303% no-repeat;
}
.type-image.peau-rougeurs{
background: url('/globalassets/beaute/conseils-soins-beaute/peau/2025/rougeurs.jpg') lightgray 19.614px -2px / 89.567% 79.435% no-repeat;
}
.type-image.peau-luisant{
background: url('/globalassets/beaute/conseils-soins-beaute/peau/2025/luisant.jpg') lightgray -36.488px -50.453px / 136.19% 136.915% no-repeat;
}
.type-image.peau-lisse{
background: url('/globalassets/beaute/conseils-soins-beaute/peau/2025/lisse.jpg') lightgray 73.9px -49.696px / 60.802% 124.246% no-repeat;
}
.type-image.peau-reaction{
background: url('/globalassets/beaute/conseils-soins-beaute/peau/2025/reactions.jpg') lightgray -144.548px -104.629px / 169.974% 172.011% no-repeat;
}
.type-description,
.radio-types {
position: relative;
z-index: 1; /* garde le contenu par-dessus l’image */
}
.conteneur-typespeaux{
display: flex;
max-width: 1200px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.types-peau-descriptions {
display: none;
transition: opacity 0.3s ease;
gap:59px;
}
.types-peau-descriptions.active {
display: flex !important;
opacity: 1;
}
.conteneur-description-type{
display: flex;
align-items: flex-start;
gap: 55px;
flex-wrap: wrap;
}
.description-bloc-gauche{
display: flex;
flex: 1;
gap: 20px;
padding: 24px;
border-radius: 16px;
background: var(--color-background-bg-peche, #F5D4C2);
flex-wrap: wrap;
}
.description-bloc-gauche ul{
padding: 0 20px;
}
.description-sous-bloc-gauche{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-spacing-15, 15px);
align-self: stretch;
border-right: 2px solid #FBF6F1;
padding-right: 20px;
}
.description-sous-bloc-droite{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-spacing-15, 15px);
align-self: stretch;
padding-left: 20px;
}
.description-sous-bloc-gauche h6{
color: var(--color-text-text-primary, #212121);
font-size: 20px;
font-style: normal;
font-weight: 700;
margin: 0;
line-height: 28px; /* 140% */
}
.description-sous-bloc-gauche li{
color: var(--color-text-text-secondary, #525255);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */
}
.description-sous-bloc-droite h6{
color: var(--color-text-text-primary, #212121);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 140% */
margin: 0;
}
.description-sous-bloc-droite li{
color: var(--color-text-text-secondary, #525255);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */
}
.conteneur-typespeaux .description-bloc-droite{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
/*width: 418px;*/
flex-shrink: 0;
}
.description-sous-bloc-gauche,
.description-sous-bloc-droite {
display: flex;
flex-direction: column;
flex: 1;
gap: 15px;
align-self: stretch;
}
#types-de-peau .description-bloc-droite .description-encadre{min-width:418px;}
/*
.conteneur-typespeaux .description-encadre{
display: flex;
padding: 8px;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-border-border-primary, #008ED0);
background: var(--color-background-bg-white, #FFF);
}
.conteneur-typespeaux .description-encadre img{
}
.conteneur-typespeaux .description-encadre .txt-encadre{
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-spacing-5, 5px);
flex: 1 0 0;
}
.conteneur-typespeaux .description-encadre .txt-encadre p{
color: var(--color-text-text-primary, #212121);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 25px;
margin: 0;
padding: 0;
}
.conteneur-typespeaux .description-encadre .txt-encadre a{
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--color-text-text-action-accent, #0A6E9D);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
align-self: stretch;
}
*/
.conteneur-typespeaux .button-rdv{
display: flex;
min-height: 56px;
padding: 0 var(--button-large-padding, 30px);
justify-content: center;
align-items: center;
gap: 8px;
border-radius: var(--radius-radius-round, 1000px);
background: var(--color-background-bg-primary-500, #008ED0);
}
.conteneur-doute-succursale{
display: flex;
max-width: 1200px;
padding: var(--spacing-spacing-30, 30px) 0;
justify-content: center;
align-items: center;
gap: 64px;
border-radius: 64px 64px 0 0;
background: var(--color-background-bg-latte, #E09E85);
width: 100%;
margin: 50px auto 0;
}
.conteneur-doute-succursale .bloc_succursale{
display: flex;
flex-direction: column;
gap: 16px;
}
.conteneur-doute-succursale .bloc_succursale h4{
color: #212121;
text-align: center;
/* Heading/Desktop/H4 */
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
margin: 0px 0 0;
}
#types-de-peau .conteneur-doute-succursale .bloc_succursale p{
color: var(--color-text-text-primary, #212121);
text-align: center;
/* Subtitle/Desktop/Subtitle 2 */
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
padding: 0;
}
.conteneur-doute-succursale .bloc_succursale a{
background: var(--color-background-bg-primary-200, #E8F4FC);
color: var(--color-text-text-action-primary, #212121);
margin: 0 auto;
/*
display: flex;
min-height: 56px;
padding: 0 var(--button-large-padding, 30px);
justify-content: center;
align-items: center;
gap: 8px;
border-radius: var(--radius-radius-round, 1000px);
text-align: center;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 21px;
width: fit-content;
*/
}
.conteneur-doute-succursale .bloc_succursale a:hover{background: #aedcf3;}
@media (max-width: 768px) {
body {
overflow-x: hidden; /* empêche scroll global */
}
/* Scroll horizontal uniquement ici */
.bloc-types-peau {
width: 100%;
margin: 0 auto 40px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
/* display: block; */
}
.bloc-types-peau::-webkit-scrollbar {
display: none;
}
.conteneur-types {
display: flex;
flex-wrap: nowrap;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
width: 100%;
box-sizing: border-box;
justify-content: space-between;
}
.types-peau {
flex: 0 0 320px; /* largeur fixe */
scroll-snap-align: start;
min-height: 420px;
overflow: hidden; /* empêche scroll interne horizontal */
position: relative;
}
.type-image {
position: absolute;
/* bottom: -20px; */
left: 50%;
transform: translateX(-50%);
/* width: 320px; */
/* height: auto; */
z-index: 0;
border-radius: 1000px 1000px 0 0;
transition: bottom 0.3s ease;
}
.type-image.peau-lisse {
background: url(/globalassets/beaute/conseils-soins-beaute/peau/2025/lisse.jpg) lightgray 31.9px -49.696px / 90.802% 164.246% no-repeat;
}
.conteneur-typespeaux,
.types-peau-descriptions,
.conteneur-description-type,
.description-bloc-gauche,
.description-bloc-droite {
overflow-x: hidden !important;
width: 100%;
max-width: 768px;
box-sizing: border-box;
}
.conteneur-description-type {
flex-direction: column;
gap: 20px;
}
.description-bloc-gauche,
.description-bloc-droite {
width: 100%;
flex: unset;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;
}
.description-sous-bloc-gauche,
.description-sous-bloc-droite {
padding: 0;
margin: 0;
border: none;
}
.description-sous-bloc-gauche {
border-bottom: 2px solid #FBF6F1;
padding-bottom: 20px;
margin-bottom: 20px;
}
}