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

p, div.lead, div.fs-5, p.fs-5, p.lead, strong { font-size: 1.15rem !important; }

#myGallery > img { border-radius: 20px !important; }

/*------------------------------------------------------------------------Ajustements SEO------------------------------------------*/
.first-activity-div .card-cover a, .second-activity-div .card-cover a, .third-activity-div .card-cover a { font-weight: 300 !important; }

.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fm5EaKZfXYmbjQ67PiFM2VHQHIH63%2Fimages%2FInstallation_de_portillons_automatiques_4bty.webp?alt=media&token=35dbd05b-4a25-488f-a733-2a9dd07b4c09") !important; }

.first-banner-seo-page h1 { width: 80%; margin: auto; }

#bandeau-title-seo .titles, .bandeauTitre { font-weight: 300 !important; }

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

/*----------------------------------------------Zone d'intervention-------------------------------------*/
.acml-zone__map-wrapper div.i4ewOd-pzNkMb-haAclf { display: none !important; }

/*-----------------------------------------Ajustements SEO-----------------------------------------------------------------*/
div:has(> .first-activity-div) { background: linear-gradient(180deg, #ebebeb 0%, rgba(0, 128, 144, 0.06) 50%, #ebebeb 100%); padding: 100px 0; }

.first-activity-div, .second-activity-div, .third-activity-div { background-color: transparent !important; }

.first-activity-div .card-cover, .second-activity-div .card-cover, .third-activity-div .card-cover { min-height: 350px; }

/*---------------------------Barre de navigation--------------------*/
nav.navbar { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

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

/*------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/*-----------------------------------------SLIDER LOGOS CLIENTS-----------------------------------------------*/
.logo-slider { overflow: hidden; width: 100%; position: relative; }

.logo-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: scroll 35s linear infinite; }

.logo-track img { height: 80px !important; width: auto !important; object-fit: contain !important; display: block; }

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

/* Pause au survol */
.logo-slider:hover .logo-track { animation-play-state: paused; }

/*--------------------------------Formulaire de contact----------------------------------------------------*/
@media (min-width: 992px) { #contact .col-lg-6 { width: 100% !important; } }

#contact { background: linear-gradient(180deg, #ffffff 0%, rgba(0, 128, 144, 0.06) 50%, #ffffff 100%); padding-top: 70px !important; padding-bottom: 70px !important; }

/* Colonne texte */
#contact .titles h2 { color: #152c32; }

#contact .titles p { color: rgba(21, 44, 50, 0.85); }

#contact .titles a { color: #008090; font-weight: 600; text-decoration: none; }

#contact .titles a:hover { text-decoration: underline; }

/* ===== FORM CARD ===== */
#contact form { border-radius: 24px !important; border: 1px solid rgba(21, 44, 50, 0.08) !important; box-shadow: 0 25px 60px rgba(21, 44, 50, 0.08); background: #ffffff !important; }

/* Inputs */
#contact .form-control { border-radius: 14px; border: 1px solid rgba(21, 44, 50, 0.15); padding: 14px 14px; box-shadow: none; transition: all 0.25s ease; }

#contact .form-control:focus { border-color: #008090; box-shadow: 0 0 0 3px rgba(0, 128, 144, 0.15); }

/* Floating labels */
#contact .form-floating > label { color: rgba(21, 44, 50, 0.6); }

/* Textarea */
#contact textarea.form-control { border-radius: 18px; }

/* File input */
#contact #attachments { border-radius: 14px; }

#contact #erase-file { border-radius: 14px; }

/* Checkbox */
#contact .checkbox label { color: rgba(21, 44, 50, 0.85); }

#contact .checkbox a { color: #008090; font-weight: 600; text-decoration: none; }

#contact .checkbox a:hover { text-decoration: underline; }

/* ===== BOUTON PRINCIPAL ===== */
#contact button[type="submit"] { background: linear-gradient(135deg, #008090, #00a5b8) !important; border: none !important; color: #ffffff !important; border-radius: 16px !important; padding: 14px 18px !important; box-shadow: 0 18px 35px rgba(0, 128, 144, 0.25); transition: all 0.25s ease; }

#contact button[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 22px 45px rgba(0, 128, 144, 0.35); }

/* ===== MODALS ===== */
#contact .modal-content { border-radius: 20px; border: 1px solid rgba(21, 44, 50, 0.08); box-shadow: 0 30px 60px rgba(21, 44, 50, 0.12); }

#successModal .modal-header { background: rgba(0, 128, 144, 0.08); }

#successModal .modal-title { color: #152c32; }

#successModal .btn-success { background: #008090; border: none; }

#errorModal .modal-header { background: rgba(21, 44, 50, 0.08); }

#errorModal .modal-title { color: #152c32; }

/* Responsive */
@media (max-width: 768px) { #contact { padding-top: 50px; padding-bottom: 50px; } #contact form { padding: 30px 20px !important; } }

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

/*----------------------------------------------------FOIRE AUX QUESTIONS-----------------------------------*/
.faq-main-title { position: relative; width: fit-content; background-color: #ffffff9e; padding: 5px 20px !important; border-radius: 20px; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }

.faq-main-title::before { content: ""; position: absolute; inset: -1px -1px; border: 3px solid #008090; border-radius: 20px; transform: rotate(-1.5deg); z-index: 0; transition: transform 0.3s ease; pointer-events: none; }

.faq-question { background-color: white; }

.faq-question h3 { font-size: 1.4em !important; }

.faq-item .faq-answer { background-color: white; }

.faq-item p { font-size: 1rem !important; }

@media (min-width: 1302px) { section.faq-section.position-relative.py-5.bg-primaryColor.text-color-primary > div.container.position-relative.z-1 > div > div { width: 60%; } }

/*------------------------------------------------------- Bandeau séparation ACML (bulles flottantes)-------------------------------- */
.acml-separator { padding: 30px 0; background: linear-gradient(180deg, #ffffff 0%, rgba(0, 128, 144, 0.08) 50%, #ffffff 100%); }

.acml-separator__wrap { width: 92%; max-width: 1100px; margin: 0 auto; position: relative; height: 120px; }

.acml-separator__line { position: absolute; left: 0; right: 0; top: 60px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(21, 44, 50, 0), rgba(0, 128, 144, 0.6), rgba(21, 44, 50, 0)); }

/* Wrapper que le JS va déplacer (parallax) */
.acml-bubble { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 128, 144, 0.4); box-shadow: 0 10px 20px rgba(21, 44, 50, 0.15); pointer-events: none; will-change: transform; display: flex; align-items: center; justify-content: center; }

/* Inner qui flotte en continu (CSS) */
.acml-bubble__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; animation: acmlFloat 3.6s ease-in-out infinite; }

.acml-bubble i { font-size: 20px; color: #008090; }

/* Variations de flottement */
.acml-b1 .acml-bubble__inner { animation-duration: 3.2s; animation-delay: -0.4s; }

.acml-b2 .acml-bubble__inner { animation-duration: 4.0s; animation-delay: -1.1s; }

.acml-b3 .acml-bubble__inner { animation-duration: 3.5s; animation-delay: -0.8s; }

.acml-b4 .acml-bubble__inner { animation-duration: 4.3s; animation-delay: -1.6s; }

.acml-b5 .acml-bubble__inner { animation-duration: 3.1s; animation-delay: -0.2s; }

.acml-b6 .acml-bubble__inner { animation-duration: 4.6s; animation-delay: -1.9s; }

.acml-b7 .acml-bubble__inner { animation-duration: 3.7s; animation-delay: -1.3s; }

@keyframes acmlFloat { 0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); } }

/* Positions libres (pas alignées) */
.acml-b1 { left: 5%; top: 10px; }

.acml-b2 { left: 20%; top: 70px; }

.acml-b3 { left: 35%; top: 12px; }

.acml-b4 { left: 50%; top: 78px; }

.acml-b5 { left: 65%; top: 18px; }

.acml-b6 { left: 80%; top: 68px; }

.acml-b7 { right: 0; top: 26px; }

@media (max-width: 600px) { .acml-separator__wrap { height: 100px; } .acml-bubble { width: 44px; height: 44px; } .acml-bubble i { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) { .acml-bubble__inner { animation: none; } }

/*-----------------------------------------------Paragraphes--------------------------------------------*/
div.shadow-lg { box-shadow: none !important; }

div.order-xl-2.order-xxl-2 { position: relative; }

/* l'image */
div.order-xl-2.order-xxl-2 > img { display: block; /* évite les petits espaces baseline */ width: 100%; min-height: 500px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; position: relative; z-index: 1; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; }

/* le cadre */
div.order-xl-2.order-xxl-2::before { content: ""; position: absolute; inset: -1px -1px; border: 3px solid #008090; border-radius: 20px; transform: rotate(-1.5deg); z-index: 0; transition: transform 0.3s ease; pointer-events: none; }

/*-----------------------------------------------------------------Cards services--------------------------------------------*/
.acml-prestations { background: linear-gradient(180deg, #ffffff 0%, rgba(0, 128, 144, 0.06) 50%, #ffffff 100%); padding: 60px 0; }

.acml-prestations__container { width: 92%; max-width: 1100px; margin: 0 auto; }

.acml-prestations__header { text-align: center; margin-bottom: 50px; }

.acml-prestations__label { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(0, 128, 144, 0.12); color: #008090; border: 1px solid rgba(0, 128, 144, 0.25); }

.acml-prestations__heading { margin-top: 18px; color: #152c32; }

/* GRID */
.acml-prestations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

@media (max-width: 940px) { .acml-prestations__grid { grid-template-columns: repeat(1, 1fr) !important; } }

/* CARD */
.acml-prestation-card { background: #ffffff; border-radius: 20px; padding: 40px 30px; border: 1px solid rgba(21, 44, 50, 0.08); box-shadow: 0 20px 45px rgba(21, 44, 50, 0.08); transition: transform 0.3s ease; position: relative; z-index: 1; }

/* le cadre */
.acml-prestation-card::before { content: ""; position: absolute; inset: -1px -1px; border: 3px solid #008090; border-radius: 20px; transform: rotate(-1.5deg); z-index: 0; transition: transform 0.3s ease; pointer-events: none; }

.acml-prestation-card__content { display: flex; flex-direction: column; gap: 20px; height: 100%; }

/* Icon */
.acml-prestation-card__icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(0, 128, 144, 0.12); display: flex; align-items: center; justify-content: center; }

.acml-prestation-card__icon i { color: #008090; }

/* Title */
.acml-prestation-card__title { margin: 0; color: #152c32; }

/* Text */
.acml-prestation-card__text { margin: 0; color: rgba(21, 44, 50, 0.85); }

/* Button */
.acml-prestation-card__btn { color: white !important; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #008090; text-decoration: none; transition: all 0.5s ease; }

.acml-prestation-card__btn i { color: #ffffff; }

.acml-prestation-card__btn:hover { background: #006c79; transform: rotate(-2deg); }

/* Responsive */
@media (max-width: 992px) { .acml-prestations__grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .acml-prestations__grid { grid-template-columns: 1fr; } .acml-prestation-card { padding: 30px 22px; } }

/*---------------------------------------------------------------------AVIS----------------------------------------*/
#google-reviews-widget { padding: 60px 0; background: linear-gradient(180deg, #ffffff 0%, rgba(0, 128, 144, 0.06) 50%, #ffffff 100%); }

/* Centrage / spacing des slides */
#google-reviews-widget .owl-item { display: flex; justify-content: center; }

/* Carte */
#google-reviews-widget .card { width: 100%; display: flex; flex-direction: column; border: 1px solid rgba(21, 44, 50, 0.08); border-radius: 20px; box-shadow: 0 20px 45px rgba(21, 44, 50, 0.08); overflow: hidden; background: #ffffff; }

/* Header reviewer */
#google-reviews-widget .card .d-flex { padding-top: 18px; }

/* Avatar */
#google-reviews-widget .avatar-google-reviews { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: rgba(0, 128, 144, 0.08); padding: 8px; }

/* Nom */
#google-reviews-widget .card .mx-2 > div:first-child { color: #152c32; font-weight: 600; }

/* Date */
#google-reviews-widget .text-muted { color: rgba(21, 44, 50, 0.6) !important; }

/* Body */
#google-reviews-widget .card-body { padding: 22px 24px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }

/* Étoiles */
#google-reviews-widget .star { color: #008090; margin-right: 3px; }

/* Texte avis : égalise la hauteur via clamp + min-height */
#google-reviews-widget .card-text { color: rgba(21, 44, 50, 0.85); line-height: 1.6; margin-top: 12px; /* 1) même nb de lignes */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* <= ajuste (4, 5, 6...) */ overflow: hidden; /* 2) même hauteur réservée (5 lignes * 1.6 = 8em) */ min-height: 8em; }

/* Navigation Owl (si activée) */
#google-reviews-widget .owl-nav button { background: #008090; color: #ffffff; border-radius: 12px; width: 40px; height: 40px; }

#google-reviews-widget .owl-nav button:hover { background: #006c79; }

/* Dots */
#google-reviews-widget .owl-dots .owl-dot span { background: rgba(21, 44, 50, 0.25); }

#google-reviews-widget .owl-dots .owl-dot.active span { background: #008090; }

/*------------------------------------------------------------------------Pages secondaires-----------------------------------------------------*/
.acml-hero-secondary { position: relative; padding: 120px 0 100px; background-size: cover; background-position: center; overflow: hidden; color: #ffffff; }

/* Overlay signature ACML */
.acml-hero-secondary__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(21, 44, 50, 0.88) 0%, rgba(21, 44, 50, 0.75) 40%, rgba(0, 128, 144, 0.65) 100%); }

/* Container */
.acml-hero-secondary__container { width: 92%; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }

/* Content */
.acml-hero-secondary__content { max-width: 820px; }

/* Badge */
.acml-hero-secondary__badge { display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); }

/* Title */
.acml-hero-secondary__title { margin-top: 24px; margin-bottom: 24px; line-height: 1.2; }

/* Intro */
.acml-hero-secondary__intro { color: rgba(255, 255, 255, 0.92); line-height: 1.7; max-width: 720px; }

/* Responsive */
@media (max-width: 768px) { .acml-hero-secondary { padding: 90px 0 70px; } .acml-hero-secondary__content { max-width: 100%; } }

/* ============================================ HERO O'CANAL ================================================= */
.hero-ocanal { position: relative; min-height: 100vh; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fm5EaKZfXYmbjQ67PiFM2VHQHIH63%2Fimages%2Fdesign-sans-titre-3-high-k0ii3m_rd9i.webp"); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff; overflow: hidden; z-index: 9; }

/* Overlay bleu canal */
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(#0080901c, #18282c); z-index: 1; }

/* Contenu */
.hero-content { position: relative; z-index: 2; max-width: 1250px; padding: 0 20px; }

/* Logo */
.hero-logo { max-width: 250px; margin-bottom: 30px; margin-bottom: 30px; border-radius: 25px; }

/* Titre principal */
.hero-content h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 50px; margin-top: 50px; line-height: 2.5rem; }

/* ========================== BOUTONS HERO – HANDDRAWN ========================== */
.hero-actions { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

.hero-actions .btn { position: relative; padding: 16px 20px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: transparent; border-radius: 999px; z-index: 1; transition: color 0.3s ease; }

/* Bouton principal */
.hero-actions .btn-primary::after { content: ""; position: absolute; inset: -6px -10px; background: #008090; border-radius: 46px 38px 44px 36px; z-index: -2; }

.hero-actions .btn-primary::before { content: ""; position: absolute; inset: -12px -16px; border: 3px solid #152c32; border-radius: 52px 44px 48px 40px; transform: rotate(-1.5deg); z-index: -1; transition: transform 0.3s ease; }

.hero-actions .btn-primary:hover::before { transform: rotate(1deg); }

/* Bouton secondaire */
.hero-actions .btn-outline::before { content: ""; position: absolute; inset: -10px -14px; border: 3px solid #ffffff; border-radius: 50px 42px 48px 40px; transform: rotate(1deg); z-index: -1; transition: transform 0.3s ease; }

.hero-actions .btn-outline:hover::before { transform: rotate(-1deg); }

.hero-actions .btn-outline:hover { background-color: transparent; border: none; }

/* ========================== SCROLL INDICATOR ========================== */
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; animation: bounce 2s infinite; cursor: pointer; }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); } }

.scroll-indicator:hover { animation-play-state: paused; }

.scroll-indicator svg { filter: brightness(2); }

/* ========================== RESPONSIVE ========================== */
@media (max-width: 1537px) { .hero-logo { max-width: 180px; margin-bottom: 0px; } .hero-content h1 { font-size: 2.7rem; line-height: 2rem; } }

@media (max-width: 768px) { .hero-logo { max-width: 200px; } .hero-surtitre { font-size: 1rem; margin-top: 20px; } .hero-content h1 { letter-spacing: 0.08em; font-size: 2rem; margin-bottom: 30px; } }

/*-------------------------------------------Autres boutons du site -------------------------------------*/
/* ========================= */
/* Boutons globaux personnalisés */
/* ========================= */
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen { position: relative; display: inline-block; z-index: 0; text-transform: uppercase; padding: 3px 5px !important; }

/* ========================= */
/* Effet fond organique */
/* ========================= */
a.button_header::after, a.button_homepageScreen::after, a.button_homepageDoubleScreen::after { content: ""; position: absolute; inset: -6px -10px; background: #008090; border-radius: 46px 38px 44px 36px; z-index: -2; }

/* ========================= */
/* Contour irrégulier animé */
/* ========================= */
a.button_header::before, a.button_homepageScreen::before, a.button_homepageDoubleScreen::before { content: ""; position: absolute; inset: -12px -16px; border: 2px solid #152c32; border-radius: 52px 44px 48px 40px; transform: rotate(-1.5deg); z-index: -1; transition: transform 0.3s ease; }

a.button_header:hover::before, a.button_homepageScreen:hover::before, a.button_homepageDoubleScreen:hover::before { transform: rotate(1deg); }

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