@charset "UTF-8";
@import url(main.css);
lottie-player.lottie-scroll { display: none; }

#accueil, #nos-soins, #rendez-vous { height: 0 !important; }

/*----------------Boutons--------------------------*/
a.button_header, a.button_homepageScreen { border-radius: 0 !important; transition: all 0.5s ease; }

/*-----------------------Ajustements SEO--------------------*/
div.first-activity-div { margin-top: 150px !important; }

.first-activity-div div.card, .second-activity-div div.card, .third-activity-div div.card { width: 100%; }

.first-activity-div h2, .second-activity-div h2, .third-activity-div h2 { text-transform: uppercase; font-size: 1.5rem; width: 70%; color: #ab0033; }

.first-activity-div h2:after, .second-activity-div h2:after, .third-activity-div h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px 0; border: 0; background: #ab0033; transition: all 0.2s; }

.first-banner-seo-page .background-image-div-opacity { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FBannieres_7_9d8f.webp?alt=media&token=84b6f07e-da0a-4b0f-9ad5-7b4a6552096f) !important; }

a.first-banner-seo-page-button { border-radius: 0 !important; font-weight: normal !important; transition: all 0.5s ease; }

#double-images-text-seo .card { width: 100%; }

div#bandeau-title-seo h2.titles { color: #ab0033; font-weight: normal !important; font-family: 'Creato Display'; }

#photo-text-seo-page .titles, #seo-text-images .titles, #contact .text-center { font-family: 'Creato Display'; font-weight: normal !important; color: #ab0033; }

.first-banner-seo-page-title h1 { font-family: 'Creato Display'; }

#button-seo-page-homepage a.button_homepageDoubleScreen { border-radius: 0 !important; font-weight: normal !important; transition: all 0.5s ease; }

.first-banner-seo-page img.logo-seo-page { background-color: transparent !important; }

img.logo-seo-page { background-color: #ab0033; }

.bandeau:not(.websitePageTitle-div) { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FBannieres_8_02dx.webp?alt=media&token=66051268-6784-4c75-8025-2523611722fa); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }

div#custom-cards .logo_nav { content: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FRitual_Beaute_v0bb.webp?alt=media&token=65c92640-74e6-493d-b6d7-b2435f9c1d5b") !important; }

/*------------------------------Horaires----------------*/
.horaires-card { background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 32px; max-width: 450px; width: 100%; transition: box-shadow 0.3s ease; margin-left: auto; margin-right: auto; }

.horaires-card:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }

.horaires-card .header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

.horaires-card .icon-wrapper { background: #ab0033; padding: 10px; }

.horaires-card .icon { width: 24px; height: 24px; color: #fff; }

.horaires-card h2 { font-size: 24px; font-weight: 700; color: black; }

.horaires-card .schedule { display: flex; flex-direction: column; gap: 8px; }

.horaires-card .day-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 8px; transition: all 0.2s ease; }

.horaires-card .day-row:hover { background: #f1f5f9; }

.horaires-card .day-row.today { background: #fef3c7; font-weight: 600; }

.horaires-card .day-name { font-size: 16px; color: #334155; }

.horaires-card .today-badge { font-size: 12px; font-weight: 400; opacity: 0.75; margin-left: 8px; }

.horaires-card .hours { font-size: 16px; font-weight: 500; color: #334155; }

.horaires-card .hours.closed { color: #64748b; }

@media (max-width: 480px) { .horaires-card .card { padding: 24px; } .horaires-card h2 { font-size: 20px; } .horaires-card .day-row { padding: 10px 12px; } .horaires-card .day-name, .horaires-card .hours { font-size: 14px; } }

@media only screen and (max-width: 1000px) { #horaires { margin-top: 50vh; } }

/*----------------Arrière plan--------------------------*/
.bg-skincare { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FBannieres_2_zm0w.webp); background-size: contain; background-repeat: no-repeat; background-position: center; padding: 150px 0 !important; }

/*-------------------BARRE DE NAVIGATION-----------------------*/
.logo_nav:hover { transform: scale3d(1.2, 1.2, 1.2); transition: all 0.3s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

#navigation-bar-hide { opacity: 1 !important; top: 0 !important; }

.animated-border-button { background-color: transparent !important; transition: background-color 0.3s ease; color: white !important; text-transform: uppercase; }

.animated-border-button.scrolled { color: #AB0033 !important; }

.navbar { background-color: transparent !important; transition: background-color 0.3s ease; }

.navbar.scrolled { background-color: white !important; }

.navbar-brand { width: unset; }

.logo_scrolled { content: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FRitual_Beaute_v0bb.webp"); }

@media only screen and (max-width: 768px) { .navbar-nav { background-color: white; } .animated-border-button { color: #536535 !important; } }

@media only screen and (max-width: 1172px) { h1 { font-size: calc(1rem + 1.5vw) !important; } }

.animated-border-button.scrolled:after { background-color: #AB0033; }

/*--------------------------------------------------------Grille-------------------------*/
.grid { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FBannieres_2_zm0w.webp); background-size: contain; background-repeat: no-repeat; background-position: center; padding: 150px 20px; }

/* --------- Card Animation ---------- */
.grid .card:not(:empty):hover, .grid .card:not(:empty):focus { z-index: 1; color: #fff; transform: translateY(-10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); cursor: pointer; }

.grid .card:not(:empty):hover:after, .grid .card:not(:empty):focus:after { opacity: 1; }

.grid .card:not(:empty):hover:before, .grid .card:not(:empty):focus:before { opacity: 0; }

.grid .card:empty { box-shadow: none; }

.grid .card:empty:hover { transform: none; box-shadow: none; }

.grid .card { padding: 10px; border-radius: .7em; border: 0px !important; display: flex; justify-content: flex-start; align-items: flex-end; background-color: #8f326129 !important; transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1); transition-property: background, transform, color, opacity; }

.grid .card:not(:empty):before { box-shadow: -2px 2px 8px 2px rgba(0, 0, 0, 0.2); }

.grid .card:before, .grid .card:after { content: ""; position: absolute; border-radius: .7em; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1); }

.grid .card:after { box-shadow: -20px 20px 12px 6px rgba(0, 0, 0, 0.2); opacity: 0; }

/* --------- Grid ---------- */
.grid { width: 100%; height: 100%; display: grid; overflow: hidden; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 20px; }

.grid h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px 0; border: 0; background: #ab0033; transition: all 0.2s; }

.grid .p-custom { font-size: 0.9rem; text-transform: none !important; letter-spacing: normal !important; position: absolute; bottom: 10px; left: 0; right: 0; text-align: left; padding: 10px; background-color: #ab003378; color: white; margin: 20px; border-radius: 5px; }

.item1 { grid-area: 1 / 1 / 3 / 3; color: #ab0033; }

.item1 p { width: 80%; }

.item2 { grid-area: 3 / 3 / 4 / 4; }

.item2.card:hover, .item2.card:focus { background: #00005c; }

.item3 { grid-area: 4 / 1 / 5 / 4; }

.item4 { grid-area: 1 / 3 / 2 / 5; }

.item5 { grid-area: 2 / 4 / 3 / 5; }

.item6 { grid-area: 3 / 4 / 4 / 5; }

.item7 { grid-area: 3 / 4 / 5 / 5; }

.item8 { grid-area: 1 / 5 / 2 / 6; }

.item8.card:hover, .item8.card:focus { background: #f57b51; }

.item9 { grid-area: 2 / 5 / 3 / 6; }

.item10 { grid-area: 3 / 5 / 4 / 6; }

.item11 { grid-area: 4 / 5 / 5 / 6; }

.item11.card:hover, .item11.card:focus { background: #00a8cc; }

.grid .content { display: flex; flex-direction: column; justify-content: center; }

/* --------- Responsive ---------- */
@media only screen and (max-width: 1300px) { .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, minmax(auto, 100px)); overflow-y: scroll; } .item1 { grid-area: 1 / 1 / 2 / 3; } .grid .card { grid-area: auto; text-align: left; height: 220px !important; } .grid .card { width: 100%; } #nos-prestations .item1 { height: 30vh; } }

/*------------------Maps------------------------------*/
#maps { height: 80vh; align-content: center; background-position: center; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2FBannieres_8_02dx.webp); background-size: cover; background-attachment: fixed; margin-bottom: 100px; }

#maps .row { padding: 50px; }

#maps .content { background-color: #ffffffa6 !important; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; color: #ab0033 !important; padding: 20px; }

#maps h2 { text-transform: uppercase; text-align: left; font-size: 1.5rem; letter-spacing: 1.8px; margin-bottom: 20px; }

#maps p { font-size: 1.1rem; text-align: left; line-height: 1.5rem; }

#maps iframe { border-radius: 10px; }

#maps h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px 0; border: 0; background: #fff; transition: all 0.2s; }

@media only screen and (max-width: 1000px) { #maps .content { margin-bottom: 50px; } #maps .row { padding: 0; } }

/*----------------------------------Vidéo Excellence Guinot-----------------------*/
.guinot { height: 80vh !important; }

.guinot .videoTitle { width: 50% !important; margin-left: 0; background-color: #ffffff4f !important; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 10px 20px !important; }

.guinot p { text-transform: none !important; line-height: initial !important; letter-spacing: initial !important; font-size: 1.2rem; }

#fullHeight .titles h1:after, .guinot .titles h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px 0; border: 0; background: #fff; transition: all 0.2s; }

.guinot p:nth-child(3) { font-size: 0.9rem; padding: 10px 10px 10px 40px; background-color: #ab0033; color: white; margin: 20px; border-radius: 5px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2Floc_fiqe.webp); background-size: 30px; background-repeat: no-repeat; background-position: 5px center; }

@media (max-width: 1000px) { .guinot .videoTitle { width: 100% !important; padding: 0 !important; } }

/*-------------------------Bannière vidéo---------------------------------*/
.videoTitle { width: 100% !important; }

.image-video-logo { width: 30% !important; }

@media (max-width: 780px) { .image-video-logo { display: none; } }

#fullHeight .titles { text-transform: uppercase; text-align: left !important; }

#fullHeight .titles h1 { font-size: 1.3rem !important; }

#fullHeight .titles h2 { font-size: 1.7rem !important; }

#fullHeight .titles h1:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px 0; border: 0; background: #fff; transition: all 0.2s; }

@media (max-width: 600px) { #accueil + style + #fullHeight h2 { text-align: center; } }

/*-------------------Services--------------------------*/
/* 🌿 RESET */
.services-poree * { margin: 0; padding: 0; box-sizing: border-box; }

.services-poree .container { max-width: 1300px; margin: 0 auto; }

/* 🏷️ Titre principal */
.services-poree .header { text-align: center; margin-bottom: 60px; }

.services-poree h2 { font-size: 52px; font-weight: 400; letter-spacing: 10px; margin-bottom: 25px; color: #ffffff; text-transform: uppercase; }

.services-poree h2.h2-custom { font-size: 0.9rem; text-transform: none !important; letter-spacing: normal !important; position: absolute; bottom: 20px; left: 0; right: 0; text-align: left; padding: 10px 10px 10px 40px; background-color: #ab0033; color: white; margin: 20px; border-radius: 5px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHTTl2A6aR5PEZmlFVkgQHHP3QI52%2Fimages%2Floc_fiqe.webp); background-size: 30px; background-repeat: no-repeat; background-position: 5px center; }

.services-poree .subtitle { font-size: 19px; line-height: 28px; color: #ffffff; max-width: 820px; margin: 0 auto; letter-spacing: 0.5px; }

/* 🧱 Grille cartes */
.cards-container.single-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin-top: 60px; }

/* 🪵 Carte */
.card { position: relative; border-radius: 8px; overflow: hidden; width: 17vw; height: 150px !important; background-color: #ffffff4f !important; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; }

.card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }

/* 🖼️ Image */
.card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.card:hover .card-image { transform: scale(1.05); }

/* 🌑 Overlay sombre */
.card-overlay { position: absolute; top: 0; left: 0; right: 0; color: white; }

/* ✍️ Bloc bas : titre + flèche */
.card-bottom { display: flex; align-items: center; padding: 10px; justify-content: space-between; }

/* ✍️ Titre */
.card-title-custom { font-size: 0.8rem; font-weight: 500; color: #fff; text-transform: uppercase; line-height: 1.2; justify-content: end !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); height: 100% !important; margin-bottom: 0 !important; }

/* ➡️ Flèche ronde */
.card-arrow { width: 30px; height: 30px; background-color: #ab0033; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; }

.card-arrow::after { content: '→'; font-size: 20px; color: #fff; }

.card:hover .card-arrow { background-color: #cf1342; transform: rotate(45deg) scale(1.1); }

.card:hover .card-arrow::after { color: white; }

/* 📱 Responsive */
@media (max-width: 1024px) { .cards-container.single-row { grid-template-columns: repeat(2, 1fr); gap: 25px; } .services-poree h2 { font-size: 40px; letter-spacing: 6px; } }

@media (max-width: 640px) { .cards-container.single-row { grid-template-columns: 1fr; } .card { height: 350px; } .card-title { font-size: 22px; } .card-arrow { width: 38px; height: 38px; } }

@media (max-width: 1490px) { .services-poree h2.h2-custom { font-size: 0.8rem; margin: 10px; } }

@media (max-width: 1248px) { .card { width: 22vw; } }

@media (max-width: 770px) { .card { width: 50%; } .services-poree h2.h2-custom { bottom: 10px; } .cards-container.single-row { margin-top: 0; } #fullHeight a:nth-child(1), #fullHeight a:nth-child(2) { height: 60px !important; } #fullHeight a:nth-child(3) { height: 150px !important; } }

/*------------------------------Blog card-------------------------------------*/
.blog-card { max-width: 50vw; width: 100%; height: 500px; position: relative; color: #fff; top: 20%; right: 0; left: 0; margin: 50px auto; overflow: hidden; border-radius: 10px; box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5) !important; text-align: center; transition: all 0.4s; background-size: 100% !important; }

.blog-card a { color: #fff; text-decoration: none; transition: all 0.2s; }

.blog-card .color-overlay { background: rgba(28, 8, 16, 0.76); width: 50vw; height: 500px; position: absolute; z-index: 10; top: 0; left: 0; transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }

.blog-card .gradient-overlay { background-image: linear-gradient(transparent, rgba(79, 57, 35, 0.6)); width: 50vw; height: 500px; position: absolute; top: 350px; left: 0; z-index: 15; }

/* HOVER + HOVER JS */
.blog-card:hover, .blog-card.is-hover { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); }

.blog-card:hover .card-info, .blog-card.is-hover .card-info { opacity: 1; bottom: 100px; }

.blog-card:hover .color-overlay, .blog-card.is-hover .color-overlay { background: rgba(59, 52, 43, 0.8); }

.blog-card:hover .title-content, .blog-card.is-hover .title-content { margin-top: 70px; }

.title-content { text-align: center; margin: 170px 0 0 0; position: absolute; z-index: 20; width: 100%; top: 0; left: 0; transition: all 0.6s; }

.blog-card h3, h1 { font-size: 1.9em; font-weight: 400; letter-spacing: 1px; margin-bottom: 0; display: inline-block; }

.blog-card h2 { font-family: 'Creato Display'; font-size: 4rem; }

.blog-card h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px auto; border: 0; background: #fff; transition: all 0.2s; }

@keyframes changeLetter { 0% { width: 10%; }
  100% { width: 80%; } }

.intro { width: 100%; margin: 0 auto; color: #ddd; font-style: italic; line-height: 18px; }

.intro a { color: #ddd; pointer-events: none; }

.card-info { box-sizing: border-box; padding: 0; width: 100%; position: absolute; bottom: -40px; left: 0; margin: 0 auto; padding: 0 50px; line-height: 1.5; z-index: 20; opacity: 0; transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1); }

.card-info a { display: block; width: fit-content; margin-left: auto !important; margin-right: auto !important; margin-top: 30px; font-size: 0.6em; text-transform: uppercase; }

.card-info a:hover { color: #fff; }

.card-info a:hover span { filter: brightness(10); opacity: 1; }

.utility-info { position: absolute; bottom: 0px; left: 0; z-index: 20; width: 100%; text-align: left; }

.utility-info:after { content: " "; background: url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg) center no-repeat; background-size: 30px auto; display: block; opacity: 0.4; position: absolute; bottom: 25px; right: 15px; width: 30px; height: 15px; }

.utility-info a:hover { text-decoration: underline; }

.utility-list { list-style-type: none; margin: 0 0 10px 20px; padding: 0; width: 100%; }

.utility-list li { margin: 0 5px 0 0; padding: 3px 0 15px 0px; display: inline-block; font-size: 0.8em; }

ul.utility-list a { text-decoration: none !important; pointer-events: none; }

.licon { position: relative; width: 23px; height: 15px; display: inline-block; vertical-align: middle; }

.licon:before { content: ""; background: url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg?) -2px -6px no-repeat; background-size: 250px; width: 26px; height: 20px; display: inline-block; vertical-align: middle; position: absolute; top: -3px; left: 0; }

.icon-tag:before { background-position: -33px -6px; }

/*--------------------RESPONSIVE----------------------------*/
@media (max-width: 800px) { .blog-card { height: 700px; background-size: cover !important; } .blog-card .color-overlay { height: 700px; } }

@media (max-width: 1400px) { .blog-card { max-width: 70vw; } .blog-card .color-overlay { width: 70vw; } .blog-card .gradient-overlay { width: 70vw; } }

@media (max-width: 1050px) { .blog-card { max-width: 100vw; } .blog-card .color-overlay { width: 100vw; } .blog-card .gradient-overlay { width: 100vw; } .blog-card { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); } .blog-card .card-info { opacity: 1; bottom: 100px; } .blog-card .color-overlay { background: rgba(64, 64, 70, 0.8); } .blog-card .title-content { margin-top: 70px; } }

/*# sourceMappingURL=custom.css.map */