@charset "UTF-8";
@import url(main.css);
#accueil { display: none; }

p strong { font-weight: normal !important; background-color: #e2e2e2; padding: 0.1em 0.3em; border-radius: 10px; display: inline-block; margin: 2px; }

div.photoTitleText { text-align: center !important; padding: 3% !important; margin-bottom: 0 !important; }

/*----------------------------------------------------------Responsive---------------------------------------------*/
@media (max-width: 1000px) { .lead { font-size: 1rem !important; } .map-wrap .photoTitleText { display: none; } }

/*-----------------------------Barre de navigation-----------------------------------*/
nav a { text-decoration: none !important; }

/*--------------------------------------------------Formulaire de contact--------------------------*/
#contact .titles { font-size: 1.45rem !important; line-height: 1.5 !important; }

#contact .titles::before { content: ''; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2Flogo_nav_e7bu.webp?alt=media&token=ebb42523-5013-4b9d-adbd-cb2666fd768d); width: 50%; height: 200px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; }

/* -------------Bloc Espacement-----------------*/
.b-bloc-divider { height: 150px !important; border: none !important; box-shadow: none !important; }

#divider-lg { height: 200px !important; }

/*-------------------------------------------------------------------------------Bannière vidéo----------------------------------*/
.video-background-overlay { background-color: #313A40 !important; opacity: 0.6 !important; }

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

.videoTitle { width: 80% !important; }

@media (min-width: 320px) and (max-width: 991px) { .image-video-logo { width: 30% !important; } }

.video-background-holder .h1, .video-background-holder h1 { font-size: calc(1rem + 1.2vw) !important; }

@media (min-width: 1200px) { .video-background-holder .h1, .video-background-holder h1 { font-size: 1.5rem !important; } }

/*--------------------------------------------------Boutons-------------------------------------------------*/
a.button_header { font-size: 0.9rem; background-color: #313A40; border-radius: 0.4rem !important; padding: 0.7rem 1rem !important; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); width: fit-content; height: 52px; white-space: nowrap; text-overflow: ellipsis; align-content: center; }

/*-----------------------------------------------------------TAGS------------------------------------------------------------*/
.app { display: flex; align-items: center; justify-content: center; flex-direction: column; }

@media (min-width: 950px) { .tag-list { width: 50% !important; } }

.tag-list { width: 80%; max-width: 90vw; display: flex; flex-shrink: 0; flex-direction: column; gap: 1rem 0; position: relative; padding: 1.5rem 0; overflow: hidden; }

.loop-slider .inner { display: flex; width: fit-content; animation-name: loop; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: var(--direction); animation-duration: var(--duration); }

.tag { display: flex; align-items: center; gap: 0 0.2rem; color: #313a40; font-size: 1.2rem; background-color: #f0f0f0; border-radius: 0.4rem; padding: 0.7rem 1rem; margin-right: 1rem; /* important pour le loop */ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); width: fit-content; height: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag span { font-size: 1.2rem; color: #64748b; }

.fade { pointer-events: none; background: linear-gradient(90deg, #1e293b, transparent 30%, transparent 70%, #1e293b); position: absolute; inset: 0; }

@keyframes loop { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } }

/*------------------------------------------------- bannière PARTENAIRES----------------------------------------------------------------------*/
.partners-banner { width: 100%; padding: 150px 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fs6QoTIEjZTOOHKyRNhfO1yIoLp92%2Fimages%2FImages_3_god6.webp?alt=media&token=c0ff3228-9dec-48d1-9c82-95e0ab4d4278"); background-size: cover; background-attachment: fixed; /* effet de scroll */ background-position: center; display: flex; justify-content: center; align-items: center; }

.partners-cards-container { display: flex; flex-direction: column; gap: 60px; align-items: center; }

.partners-card-row { display: flex; gap: 60px; justify-content: center; flex-wrap: wrap; }

.partners-card { display: flex; justify-content: center; align-items: center; padding: 30px; transition: transform 0.3s ease; }

.partners-card:hover { transform: scale(1.25); }

.partners-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

.partners-link { text-decoration: none; display: inline-block; transition: transform 0.3s ease; }

/*---------------------------------------------------------------------------------Blocs CTA----------------------------------------*/
.cta_banner p { width: 80%; margin-left: auto; margin-right: auto; }

@media (max-width: 819px) { .cta_banner p { width: 100%; } }

.cta_banner span[style*="CHAP"] { position: relative; display: inline-flex; align-items: center; gap: 6px; /* espace entre logo et texte */ }

.cta_banner span[style*="CHAP"]::before { content: ""; display: inline-block; width: 1.2em; /* taille relative à la police */ height: 1.2em; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2FLogo_Chapanhy_iptn.webp") no-repeat center/contain; }

/*----------------------------------------------------------------------Bloc chapes----------------------------------------------------*/
.bloc-chapes { position: relative; padding: 120px 0; overflow: hidden; background: transparent !important; }

/* Vidéo en arrière-plan */
.bloc-chapes-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Overlay sombre */
.bloc-chapes-overlay { position: absolute; inset: 0; background: rgba(49, 58, 64, 0.6); z-index: 0; }

.bloc-chapes .titles { margin-bottom: 3rem !important; text-align: center; }

.bloc-chapes-cards { display: flex; flex-wrap: wrap; align-items: stretch; flex-direction: row; justify-content: center; gap: 4rem; width: 80%; margin-left: auto; margin-right: auto; }

@media (max-width: 1050px) { .bloc-chapes-cards { flex-direction: column; align-items: center; } }

.bloc-chapes-card { display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 0.75rem; width: 40%; padding: 2rem; border-radius: 1rem; background-color: white; box-shadow: -0.5rem 0.5rem 0 0 #F95101; text-align: left; }

@media (max-width: 1050px) { .bloc-chapes-card { width: 80%; } }

.bloc-chapes-line { height: 2px; width: 50%; background-color: #313a40; }

.bloc-chapes-address { display: flex; flex-direction: column; gap: 0.5rem !important; }

.bloc-chapes-card p { margin-bottom: 0rem !important; }

.bloc-chapes-link { display: flex; align-items: center; justify-content: start; color: #313a40; text-decoration: none; transition: all 0.3s ease; font-weight: 600; }

.bloc-chapes-icon { height: 1rem; padding-right: 0.5rem; }

.bloc-chapes-title { color: #313a40; font-size: 1.3em; font-weight: 700; }

.bloc-chapes-name { color: #313a40; font-weight: 600; }

.bloc-chapes-text { color: #313a40; position: relative; padding-left: 40px; display: inline-block; }

.bloc-chapes-text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2FLogo_Chapanhy_iptn.webp") no-repeat center; background-size: contain; }

/* Fallback mobile (optionnel recommandé) */
@media (max-width: 768px) { .bloc-chapes-video { display: none; } .bloc-chapes { background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2FST2_4722-1920w_dotz.webp?alt=media&token=676df7be-db65-4d2a-8104-433bfe082015") center/cover no-repeat; } }

.bloc-chapes > *:not(.bloc-chapes-video):not(.bloc-chapes-overlay) { position: relative; z-index: 2; }

/*--------------------------------------------------------------------------Timeline icones--------------------------------*/
.timeline-icones-chape { padding: 60px 20px; }

.timeline-container { display: flex; align-items: stretch; justify-content: space-between; max-width: 1400px; margin: 0 auto; position: relative; }

.timeline-item { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; flex: 1; opacity: 0; transform: translateY(30px); transition: all 1s ease; }

.timeline-item.visible { opacity: 1; transform: translateY(0); }

.icon-wrapper { width: 80px; height: 80px; margin: 0 auto 15px auto; }

.icon-wrapper img { width: 100%; height: auto; display: block; }

.timeline-item p { font-size: 1.5rem; font-weight: 600; color: white; margin: 0 auto; }

.timeline-line { align-self: center; flex: 0 0 80px; height: 4px; background: #f95101; margin: 0 10px; border-radius: 2px; }

/* Responsive */
@media (max-width: 768px) { .timeline-container { flex-direction: column; } .timeline-line { width: 4px; height: 60px; margin: 20px auto; } }

/*---------------------------------------------------------------------------------Slider magasins----------------------------------------*/
.section-slider { position: relative; margin: 10px 0 120px 0; height: 600px; }

.section-slider .titles { text-align: center; }

@media (max-width: 819px) { .section-slider { height: 700px; } }

.container-franchise { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 600px; width: 80vw; max-width: 1200px; background: #f5f5f5; box-shadow: 0 30px 50px #dbdbdb; border-radius: 20px; }

@media (max-width: 819px) { .container-franchise { height: 700px; } }

.container-franchise .slide { border-radius: 20px; }

.container-franchise .slide .item { width: 200px; height: 250px; position: absolute; top: 50%; transform: translate(0, -50%); border-radius: 20px; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); background-position: 50% 50%; background-size: cover; display: inline-block; transition: all 0.5s; }

.slide .item:nth-child(1), .slide .item:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; border-radius: 20px; transition: all .5s; }

.slide .item:nth-child(3) { left: 50%; }

.slide .item:nth-child(4) { left: calc(50% + 220px); }

.slide .item:nth-child(5) { left: calc(50% + 440px); }

.slide .item:nth-child(n + 6) { left: calc(50% + 660px); opacity: 0; }

.item .content { position: absolute; top: 50%; left: 100px; width: 40%; text-align: center; color: #eee; transform: translate(0, -50%); display: none; }

@media (max-width: 1450px) { .item .content { width: 90%; left: 20px; } .slide .item:nth-child(3) { display: none; } .slide .item:nth-child(4) { display: none; } }

.slide .item:nth-child(2) .content { display: block; }

.content .name { text-align: left; opacity: 0; animation: animate 1s ease-in-out 1 forwards; }

.content .des { text-align: left; margin-top: 10px; margin-bottom: 20px; opacity: 0; animation: animate 1s ease-in-out 0.3s 1 forwards; font-size: 1.15rem; }

.content button { color: #e2e8f0; font-size: 0.9rem; background-color: #313A40; border-radius: 0.4rem; padding: 0.7rem 1rem; border: none; cursor: pointer; opacity: 0; transition: all 0.5s; animation: animate 1s ease-in-out 0.6s 1 forwards; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); }

.content button:hover { background-color: #F95101 !important; }

@keyframes animate { from { opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px); }
  to { opacity: 1;
    transform: translate(0);
    filter: blur(0); } }

.button { display: flex; flex-direction: row; gap: 20px; left: 45%; right: 50%; width: 100%; align-items: center; text-align: center; position: absolute; bottom: 20px; }

.button button { width: 40px; height: 35px; border-radius: 8px; border: none; cursor: pointer; margin: 0 5px; border: 2px solid #000000bd; transition: 0.3s; background: rgba(255, 255, 255, 0.578); }

.button button:hover { color: #000000; border: 2px solid #ffffffbd; transform: scale(1.1); }

.button button:focus { transform: scale(1.1); background: #ffffff; border: 2px solid #ffffffbd; }

.button button:active { transform: scale(1.02); }

.next { padding: 0 0 0 3px; }

.prev { padding: 0 3px 0 0; }

/* Ajout d’un overlay foncé sur l’item actif */
.slide .item:nth-child(2)::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: rgba(49, 58, 64, 0.8); z-index: 1; /* au-dessus de l'image */ }

/* S'assurer que le texte passe par-dessus l’overlay */
.slide .item:nth-child(2) .content { position: relative; z-index: 2; }

/*---------------------------------------Bloc Maps--------------------------------------------*/
.maps-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; min-height: 90vh; padding: 0 7rem; align-content: center; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2Fbannieres_1_gy0q.webp); background-size: cover; background-position: center; background-attachment: fixed; }

@media (max-width: 1024px) { .maps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) { .maps-grid { grid-template-columns: 1fr; } }

.card { background: #ffffff; border-radius: 1rem; box-shadow: -0.5rem 0.5rem 0 0 #F95101; overflow: hidden; }

.map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #ddd; }

.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.card-caption { padding: 0.75rem 1rem 1rem; color: #2d3436; font-size: 0.95rem; }

/* --------------------------------------------------------------------Pop up----------------------------------------------*/
:root { --popup-chape-w: 300px; --popup-chape-h: 180px; --popup-chape-brand: #313a40; --popup-chape-black: #121315; --popup-chape-white: #fff; --popup-chape-muted: #cdcdcd; --popup-chape-radius: 10px; --popup-chape-anim-dur: 1000ms; }

.popup-chape { visibility: hidden; opacity: 0; transition: opacity .2s ease; position: fixed; bottom: 20px; left: 20px; width: var(--popup-chape-w); height: var(--popup-chape-h); overflow: hidden; border-radius: var(--popup-chape-radius); box-shadow: -0.5rem 0.5rem 0 0 white; isolation: isolate; background: #000; color: var(--popup-chape-white); z-index: 9999; }

@media (max-width: 819px) { .popup-chape { width: 50vw; height: 180px; } }

.popup-chape__bg { position: absolute; inset: 0; background: center/cover no-repeat url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2Fbannieres_bch4.webp"); z-index: 1; }

.popup-chape__content { position: absolute; inset: 0; padding: 16px; z-index: 3; display: grid; align-content: center; gap: 8px; }

.popup-chape__eyebrow { text-transform: uppercase; font-size: 20px; }

@media (max-width: 819px) { .popup-chape__eyebrow { font-size: 16px; } }

.popup-chape__title { font-size: 16px; line-height: 1.2; margin: 0; }

@media (max-width: 819px) { .popup-chape__title { font-size: 15px; } }

.popup-chape__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.popup-chape__btn { font-size: 0.9rem; background-color: #313A40; border-radius: 0.4rem !important; padding: 0.7rem 1rem !important; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); width: fit-content; height: 52px; white-space: nowrap; text-overflow: ellipsis; align-content: center; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease; /* pour un hover fluide */ text-decoration: none; }

@media (max-width: 819px) { .popup-chape__btn { padding: 0.6rem 0.3rem !important; height: 45px; font-size: 0.7rem; } }

.popup-chape__btn--primary { background: var(--popup-chape-white); color: #313a40 !important; }

.popup-chape__btn--ghost { background: var(--popup-chape-brand); color: var(--popup-chape-white); }

.popup-chape__btn--primary:hover { color: #313a40 !important; }

.popup-chape__btn:hover { transform: translateY(-1px); }

.popup-chape__btn:active { transform: translateY(0); }

/* Effet wipe */
.popup-chape__wipe { position: absolute; inset: 0; background: var(--popup-chape-white); z-index: 4; transform-origin: right center; will-change: transform; }

.popup-chape__wipe.animate { animation: popup-chape-wipe var(--popup-chape-anim-dur) ease forwards; }

@keyframes popup-chape-wipe { 0% { transform: scaleX(0); }
  40% { transform: scaleX(1); }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(0);
    transform-origin: left center; } }

/* Apparition du contenu */
.popup-chape.is-visible { visibility: visible; opacity: 1; }

[data-popup-chape-anim] { opacity: 0; transform: translateY(10px); }

.popup-chape__appear { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 0.6s; }

.popup-chape__appear-2 { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 0.8s; }

.popup-chape__appear-3 { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 1s; }

@keyframes popup-chape-fadeIn { to { opacity: 1;
    transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .popup-chape__wipe.animate { animation: none; } [data-popup-chape-anim] { opacity: 1; transform: none; } }

/*-------------------------------------------------AVIS GOOGLE------------------------------------*/
#avis-google + .photoTitleText { background: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2FST2_4722-1920w_dotz.webp?alt=media&token=676df7be-db65-4d2a-8104-433bfe082015), rgba(49, 58, 64, 0.5); background-size: cover; background-blend-mode: darken; background-attachment: fixed; background-position: center; }

div.googleReviews-div { background: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FZ3nYhnaGumPTZAKptdaXlmPFYBr1%2Fimages%2FST2_4722-1920w_dotz.webp?alt=media&token=676df7be-db65-4d2a-8104-433bfe082015), rgba(49, 58, 64, 0.5); background-size: cover; background-blend-mode: darken; background-attachment: fixed; background-position: center; padding: 5px 0 150px 0 !important; margin-bottom: 0 !important; }

div.googleReviews-div .owl-stage-outer { overflow: visible !important; }

div.googleReviews-div .container .card { box-shadow: -0.5rem 0.5rem 0 0 #F95101 !important; }

/*-----------------------------------Bloc partenaires---------------------------------*/
.partners-block .partners-logos { gap: 2rem; /* espace uniforme entre les logos */ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }

.partners-block .partners-logos .logo { flex: 0 1 240px; /* chaque logo prend le même espace */ display: flex; flex-direction: column; /* logo + texte dessous */ align-items: center; justify-content: flex-start; text-align: center; }

/* Images des logos */
.partners-block .partners-logos .logo img { height: 180px; /* même hauteur pour tous les logos */ width: auto; object-fit: contain; display: block; margin: 0 auto 10px; filter: grayscale(100%); opacity: .75; transition: filter .25s ease, opacity .25s ease, transform .2s ease; user-select: none; }

/* Effet au survol */
.partners-block .partners-logos .logo img:hover { filter: grayscale(0%) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6)); opacity: 1; transform: translateY(-2px); }

/* Texte sous les logos (caché par défaut) */
.partners-block .partners-logos .logo-text { font-size: 1rem; color: #ddd; /* couleur discrète */ margin: 20px 0 0; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; /* pas cliquable quand caché */ }

/* Affichage du texte uniquement au survol */
.partners-block .partners-logos .logo:hover .logo-text { opacity: 1; transform: translateY(0); }

/* Responsive : logos plus petits sur mobile */
@media (max-width: 768px) { .partners-block .partners-logos .logo img { height: 120px; } }

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