@charset "UTF-8";
@import url(main.css);
/************************************************AJUSTEMENTS SEO**********************************************/
#navbarSupportedContent > ul > li.dropdown.px-4 > div > a:nth-child(1) { font-size: 0.8em !important; }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > ul a { transition: all 0.5s ease; }

.first-banner-seo-page .background-image-div-opacity { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FXwc5EZ4yjVcxfYW6ArNDDxD32k43%2Fimages%2Fab264eaf-5acc-445c-92bd-939953bd14b7_079j_xb7j.webp?alt=media&token=f38be247-9934-4c1f-b096-5b70e169595e) !important; }

.bandeau { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FXwc5EZ4yjVcxfYW6ArNDDxD32k43%2Fimages%2Fab264eaf-5acc-445c-92bd-939953bd14b7_079j_xb7j.webp?alt=media&token=f38be247-9934-4c1f-b096-5b70e169595e) !important; background-position: center; }

.bandeau h1 { font-weight: 300 !important; text-transform: uppercase; width: fit-content; max-width: 60%; background-color: #17253e; color: white !important; padding: 10px 20px; border-radius: 40px 40px 40px 0; }

#bandeau-title-seo .titles { font-weight: 300 !important; text-transform: uppercase; }

#photo-text-seo-page h2.titles, #seo-text-images h2.titles { font-weight: 300 !important; text-transform: uppercase; }

.first-banner-seo-page-title h1 { font-weight: 300 !important; text-transform: uppercase; width: 70%; margin: 0 auto 50px !important; }

.first-activity-div p, .second-activity-div p, .third-activity-div p { color: white !important; }

/******************************************************* CUSTOM BLOC SEO ************************************************************/
.mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative, .mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative, .mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { margin-top: 70px !important; margin-bottom: 70px !important; padding: 50px 20px !important; box-shadow: none !important; }

.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { border-radius: 4px !important; border: none; }

.black-screen { display: none; }

div:has(> .first-activity-div) { padding: 50px 0 100px 0; }

/****************************************************************CTA************************************************************/
div.cta_banner { padding-top: 5rem !important; padding-bottom: 5rem !important; }

div.cta_banner .background-image-div-opacity { background-attachment: scroll !important; opacity: 0.7; }

div.cta_banner .titles { text-transform: uppercase; }

div.cta_banner p { font-weight: 500 !important; }

div.cta_banner .content { width: 70%; }

div.cta_banner h3 { margin-top: 30px; }

@media (max-width: 840px) { div.cta_banner .content { width: 95%; } }

/******************************************************* ÉTIQUETTE CENTRÉE IMAGE *******************************************************/
.fond-plat, .fond-incline, .mini-piscine, .plage, .ronde { position: relative; }

.pool-label { position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%); width: 90%; max-width: 640px; padding: 26px 30px; border-radius: 28px; background: rgba(23, 37, 62, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); text-align: center; color: #fff; }

.pool-label__eyebrow { display: inline-block; margin-bottom: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(53, 188, 238, 0.14); border: 1px solid rgba(53, 188, 238, 0.24); color: var(--color-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.pool-label__title { margin: 0 0 14px; font-size: 1.8rem; line-height: 1.08; font-weight: 900; color: #fff; text-transform: uppercase; }

.pool-label__title span { color: var(--color-blue); }

.pool-label__desc { margin: 0 auto; max-width: 560px; font-size: 0.9rem; line-height: 1.75; color: rgba(255, 255, 255, 0.88); }

@media (max-width: 768px) { .pool-label { width: 88%; max-width: none; padding: 20px 18px; border-radius: 22px; } .pool-label__title { font-size: 1.4rem; } .pool-label__desc { font-size: 0.92rem; line-height: 1.6; } }

/********************************************************CONTACT**************************************************/
#contact.bg-sixthColor { width: 90vw !important; margin: 50px 0 0 auto; max-width: 1700px; border-radius: 40px 0 0 0; }

#contact .col-lg-6 { display: none; }

#contact .col-md-10 { width: 100%; }

@media (max-width: 840px) { #contact.bg-sixthColor { width: 100vw !important; } }

/******************************************************MACARON GARANTIE***************************************/
.hero-garantie { position: absolute; bottom: 150px; right: 70px; z-index: 999; }

.hero-garantie img { max-height: 200px; }

@media (max-width: 910px) { .hero-garantie img { max-height: 150px; } }

@media (max-width: 573px) { .hero-garantie { bottom: 50px; right: 10px; } .hero-garantie img { max-height: 110px; } }

/********************************************************BADGE*******************************************************/
@media (max-width: 968px) { .hero-badge { display: none !important; } }

.hero-badge { position: absolute; z-index: 5; right: 40px; bottom: 70px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; background: rgba(23, 37, 62, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }

.hero-badge__stars { display: flex; align-items: center; gap: 2px; color: var(--color-gold); font-size: 0.95rem; line-height: 1; letter-spacing: 1px; flex-shrink: 0; }

.hero-badge__star--half { position: relative; color: rgba(255, 215, 0, 0.28); }

.hero-badge__star--half::after { content: "★"; position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; color: var(--color-gold); }

.hero-badge__text { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #fff; font-size: 0.9rem; line-height: 1.2; }

.hero-badge__text strong { font-size: 0.98rem; font-weight: 800; color: #fff; }

.hero-badge__text span { color: rgba(255, 255, 255, 0.82); font-weight: 500; }

@media (max-width: 768px) { .hero-badge { right: 20px; left: 20px; bottom: 105px; justify-content: center; border-radius: 18px; padding: 12px 14px; } .hero-badge__text { justify-content: center; text-align: center; } }

/*******************************************************bloc d'intro**********************************************************/
.intro-block { position: relative; background: #17253E; padding: 110px 6vw 130px; overflow: hidden; border-radius: 0 40px 0 0; width: 90vw !important; max-width: 1700px; margin: 50px auto 50px 0; }

@media (max-width: 968px) { .intro-block { width: 100vw !important; } }

.intro-block.etape { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FXwc5EZ4yjVcxfYW6ArNDDxD32k43%2Fimages%2FGalaxite-86-2-scaled_8b26.webp?alt=media&token=aba01be6-bad4-4442-997b-413bb93c9f84"); background-size: cover; background-position: center; background-repeat: no-repeat; }

.intro-block__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px; align-items: center; }

.intro-block__content { color: #fff; max-width: 720px; }

.intro-block__eyebrow { display: inline-block; margin-bottom: 1rem; padding: 8px 14px; border-radius: 999px; background: rgba(53, 188, 238, 0.12); border: 1px solid rgba(53, 188, 238, 0.28); color: var(--color-blue); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.intro-block__title { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 900; margin: 0 0 1.4rem; color: #fff; text-transform: uppercase; }

.intro-block__title-accent { display: block; color: var(--color-blue); }

.intro-block__text p { margin: 0 0 1.15rem; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.85; color: rgba(255, 255, 255, 0.86); }

/* ========================================================= MEDIA / CARROUSEL ========================================================= */
.intro-block__media { position: relative; min-height: 560px; border-radius: 30px; overflow: hidden; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28); background: rgba(255, 255, 255, 0.04); }

.intro-block__slider { position: absolute; inset: 0; z-index: 0; }

.intro-block__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; }

.intro-block__slide--active { opacity: 1; }

.intro-block__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(23, 37, 62, 0.5) 0%, rgba(23, 37, 62, 0.12) 45%, rgba(23, 37, 62, 0.04) 100%); pointer-events: none; }

.intro-block__badge { position: absolute; left: 22px; bottom: 24px; z-index: 2; display: inline-flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 18px; background: rgba(23, 37, 62, 0.68); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }

.intro-block__badge-label { color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; line-height: 1.4; }

.intro-block__dots { bottom: 22px; left: auto; right: 22px; transform: none; z-index: 3; }

/* ========================================================= VAGUE BASSE ========================================================= */
.intro-block__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; }

.intro-block__wave svg { display: block; width: 100%; height: 85px; }

/* ========================================================= RESPONSIVE ========================================================= */
@media (max-width: 1080px) { .intro-block__inner { grid-template-columns: 1fr; } .intro-block__media { min-height: 480px; } }

@media (max-width: 768px) { .intro-block { padding: 80px 20px 110px; border-radius: 26px; } .intro-block__media { min-height: 360px; border-radius: 22px; } .intro-block__badge { left: 14px; right: 14px; bottom: 52px; } .intro-block__dots { right: 50%; transform: translateX(50%); bottom: 18px; } }

/*******************************************************Bannière d'accueil**************************************/
:root { --color-navy: #17253E; --color-blue: #35BCEE; --color-red:  #FF5050; --color-gold: #FFD700; }

/* ============================================ HERO WRAPPER ============================================ */
.hero { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; }

/* ============================================ SLIDER ============================================ */
.hero__slider { position: absolute; inset: 0; z-index: 0; }

.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }

.hero__slide--active { opacity: 1; }

/* ============================================ OVERLAY ============================================ */
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(23, 37, 62, 0.9) 0%, rgba(23, 37, 62, 0.65) 55%, rgba(23, 37, 62, 0.22) 100%); }

/* ============================================ CONTENU ============================================ */
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding: 0 6vw; }

.hero__inner { color: #fff; }

.hero__logo { height: 50px; margin-bottom: 2rem; display: block; }

.hero__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1.15; margin: 0 0 1.25rem; color: #fff; text-transform: uppercase; }

.hero__title-accent { color: var(--color-blue); }

.hero__subtitle { font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.75; margin: 0 0 1.35rem; color: rgba(255, 255, 255, 0.88); max-width: 720px; }

/* ============================================ ARGUMENTS ============================================ */
.hero__args { list-style: none; padding: 0; margin: 0 0 2.25rem; display: flex; flex-direction: column; gap: 0.15rem; }

.hero__args li { display: flex; align-items: center; gap: 10px; font-size: clamp(0.88rem, 1.2vw, 0.98rem); color: rgba(255, 255, 255, 0.93); }

.hero__check { color: var(--color-blue); font-weight: 800; font-size: 1.1em; flex-shrink: 0; }

/* ============================================ BOUTONS CTA ============================================ */
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 50px 0; }

.custom-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 26px !important; border-radius: 4px; font-weight: 700; font-size: clamp(0.78rem, 1.1vw, 0.9rem); letter-spacing: 0.3px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s; box-shadow: 6px 6px 0 #17253e; }

.btn--primary { background: var(--color-red); color: #fff; border: none; }

.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 80, 80, 0.45); }

.btn--primary:hover .btn__shine { animation: shine 0.7s ease forwards; }

.btn__shine { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-20deg); pointer-events: none; }

.btn--secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border: 2px solid rgba(53, 188, 238, 0.6); backdrop-filter: blur(4px); font-weight: 600; }

.btn--secondary:hover { transform: translateY(-2px); border-color: var(--color-blue); background: rgba(53, 188, 238, 0.12); }

/* ============================================ ICÔNES BOUTONS ============================================ */
.btn__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

.btn__icon--red { background: rgba(255, 255, 255, 0.2); }

.btn__icon--blue { background: rgba(53, 188, 238, 0.25); }

.btn--primary:hover .icon-wave { animation: wave-icon 0.6s ease infinite; }

.btn--secondary:hover .icon-pool { animation: pool-dive 0.5s ease infinite; }

.ripple-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(53, 188, 238, 0.7); animation: ripple 1.8s ease-out infinite; }

.ripple-ring--delay { animation-delay: 0.9s; }

/* ============================================ SÉPARATEUR VAGUE ============================================ */
.hero__wave { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; line-height: 0; }

.hero__wave svg { display: block; width: 100%; height: 80px; }

/* ============================================ DOTS NAVIGATION ============================================ */
.hero__dots { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }

.hero__dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; opacity: 0.45; border: none; padding: 0; transition: opacity 0.3s, background 0.3s; }

.hero__dot--active { background: var(--color-blue); opacity: 1; }

/* ============================================ ANIMATIONS ============================================ */
@keyframes wave-icon { 0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-4px) rotate(8deg); } }

@keyframes pool-dive { 0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(3px) scale(0.9); } }

@keyframes shine { 0% { left: -100%; }
  60%, 100% { left: 130%; } }

@keyframes ripple { 0% { transform: scale(1);
    opacity: 0.6; }
  100% { transform: scale(2.2);
    opacity: 0; } }

/* ========================================================= LIGNE MODÈLES ========================================================= */
.intro-block__models { position: relative; z-index: 2; margin-top: 42px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

.intro-block__models-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.intro-block__model { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 12px; padding: 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }

.intro-block__model-icon { width: 56px; height: 56px; color: #fff; opacity: 0.95; flex-shrink: 0; }

.intro-block__model-icon.etape { width: 100px; height: 100px; }

.intro-block__model span { color: rgba(255, 255, 255, 0.88); font-size: 0.92rem; line-height: 1.45; font-weight: 600; text-wrap: balance; }

/* ========================================================= RESPONSIVE ========================================================= */
@media (max-width: 1300px) { .intro-block__models-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

@media (max-width: 968px) { .intro-block__models { margin-top: 32px; padding-top: 22px; } .intro-block__models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } .intro-block__model { padding: 14px 10px; border-radius: 16px; } .intro-block__model-icon { width: 48px; height: 48px; } .intro-block__model span { font-size: 0.88rem; } }

/*******************************************************MAPS**************************************************/
.info-ss { --ad-dark: #17253E; --ad-green-dark: white; --ad-green: #17253E; --ad-green-soft: #35BCEE; --ad-light: #f1f1f1; --ad-white: #ffffff; position: relative; padding: 100px 0; overflow: hidden; font-family: "Inter", sans-serif; }

/* ── Conteneur principal ── */
.info-ss__container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 5%; }

/* ── Section horaires ── */
.info-ss__horaires { animation: info-fadeInLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

.info-ss__horaires-card { background: var(--ad-white); border: 1px solid var(--ad-green); border-radius: 4px; box-shadow: 10px 10px 0 var(--ad-green); padding: 36px 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; }

/* ── Header ── */
.info-ss__header, .info-ss__map-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }

.info-ss__icon-wrapper { background: var(--ad-green-soft); border: 1px solid var(--ad-green-dark); width: 48px; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.info-ss__icon { width: 22px; height: 22px; color: var(--ad-green-dark); }

.info-ss__title { font-size: 1.8rem; line-height: 1.1; color: var(--ad-dark); margin: 0; text-transform: uppercase; font-weight: 600 !important; letter-spacing: 0.08rem; }

/* ── Schedule ── */
.info-ss__schedule { display: flex; flex-direction: column; gap: 10px; }

.info-ss__day-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #5e88a324; border-radius: 4px; background: #809ba629; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }

.info-ss__day-row:hover { background: #a2d2e54d; border-color: rgba(74, 102, 29, 0.3); }

.info-ss__day-row.today { background: #35bcee57; border-color: var(--ad-green-dark); }

.info-ss__day-name { font-size: 0.95rem; color: var(--ad-dark); font-weight: 600 !important; }

.info-ss__hours { font-size: 0.95rem; font-weight: 600 !important; color: #FF5050; }

.info-ss__hours.closed { color: var(--ad-dark); opacity: 0.55; }

.info-ss__today-badge { font-size: 0.75rem; font-weight: 600; opacity: 0.85; margin-left: 8px; color: var(--ad-green-dark); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Section map ── */
.info-ss__map-wrapper { animation: info-fadeInRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

.info-ss__map-header { margin-bottom: 24px; }

.info-ss__map { width: 100%; min-height: 420px; border: 1px solid var(--ad-green); border-radius: 4px; overflow: hidden; box-shadow: 10px 10px 0 var(--ad-green); background: var(--ad-white); }

.info-ss__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* ── Adresse si besoin ── */
.info-ss__address-text { margin-top: 16px; font-size: 0.95rem; line-height: 1.7; color: rgba(36, 36, 35, 0.72); }

/* ── Animations ── */
@keyframes info-fadeInLeft { from { opacity: 0;
    transform: translateX(-40px); }
  to { opacity: 1;
    transform: translateX(0); } }

@keyframes info-fadeInRight { from { opacity: 0;
    transform: translateX(40px); }
  to { opacity: 1;
    transform: translateX(0); } }

/* ── Responsive ── */
@media (max-width: 1024px) { .info-ss__container { grid-template-columns: 1fr; gap: 48px; } .info-ss__map, .info-ss__map iframe { min-height: 350px; } }

@media (max-width: 840px) { .info-ss { padding: 60px 0; } .info-ss__container { gap: 32px; padding: 0; } .info-ss__horaires-card { padding: 28px 24px; box-shadow: 7px 7px 0 var(--ad-green-dark); max-width: 100vw; } .info-ss__title { font-size: 1.45rem; } .info-ss__map { box-shadow: 7px 7px 0 var(--ad-green-dark); } .info-ss__map-wrapper { max-width: 100vw; } .info-ss__map, .info-ss__map iframe { min-height: 280px; } .info-ss__day-name, .info-ss__hours { font-size: 0.9rem; } .info-ss__address-text { font-size: 0.9rem; } }

/********************************************************TOUS LES BOUTONS*************************************/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; padding: 10px 26px !important; border-radius: 4px !important; font-weight: 700 !important; font-size: clamp(0.78rem, 1.1vw, 0.9rem) !important; letter-spacing: 0.3px !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s !important; box-shadow: 6px 6px 0 #17253e !important; background: var(--color-red) !important; color: #fff !important; border: none !important; }

a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(255, 80, 80, 0.45) !important; }

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