@charset "UTF-8";
@import url(main.css);
@import url("https://fonts.googleapis.com/css2?family=Concert+One&display=swap");
h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: black !important; }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: black; }

i.bi.bi-telephone.fs-6 { display: none; }

.black-screen { display: none; }

.text-color-fourth { color: #f5f5f7 !important; }

.row.row-cols-1.row-cols-lg-5.d-flex.g-3.px-3.my-5.position-relative.justify-content-center { margin-top: 0px !important; margin-bottom: 0px !important; }

.bandeau.border-bottom-1.row.websitePageTitle-div { display: none; }

/* -------------Taille du logo sur la page d'accueil------------ */
img.fondDegradeLogo { width: 320px; }

/* -------------Navbar affichée------------ */
#navigation-bar-hide { position: fixed !important; top: 0 !important; opacity: 1 !important; transition: none !important; }

/* --- Suppression du zoom et de l’ombre sur le Hero --- */
.carousel-item-homepage img, .first-carousel-img { transform: none !important; /* ✅ retire tout effet de zoom ou scale */ transition: none !important; /* ✅ empêche les animations au chargement */ box-shadow: none !important; /* ✅ supprime toute ombre */ filter: none !important; /* ✅ retire les filtres type fondu sombre */ opacity: 1 !important; /* ✅ garantit la pleine luminosité */ }

/* -----------------Polices----------------- */
h1, h2, h3 { font-family: 'Concert One', sans-serif !important; font-weight: 400; letter-spacing: 0.5px; }

/* -----------------Bloc Services--------------- */
.services { text-align: center; padding: 80px 20px; background: linear-gradient(to bottom, #f7f7f5 50%, #003049 50%); overflow: visible; /* ✅ pour éviter de masquer le Hero */ }

/* ----- En-tête ----- */
.services-header .subtitle { color: #c1121f; font-weight: 600; font-size: 14px; text-transform: uppercase; }

.services-header h2 { font-size: 2rem; color: #003049; margin: 10px 0 40px 0; }

/* ----- Grille de services ----- */
.services-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

/* ----- Carte de service ----- */
.service-card { display: block; background: #f5f5f5; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; overflow: visible; padding-bottom: 60px; position: relative; color: inherit; text-decoration: none; transition: transform 0.3s ease; cursor: pointer; }

.service-card:hover { transform: translateY(-8px); }

/* ----- Contenu des cartes ----- */
.service-card img { width: 100%; height: auto; object-fit: contain; background: #fff; }

.service-card h3 { margin: 20px 0 10px; color: #003049; font-size: 1.3rem; }

.service-card p { color: #444; font-size: 0.95rem; padding: 0 15px; }

/* ----- Icônes en bas ----- */
.service-card .icon { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: #c1121f; border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }

.service-card .icon img { width: 48px; height: 48px; background: transparent; filter: none; }

/* -----------------Responsive----------------- */
@media (max-width: 992px) { .service-card { width: 45%; } }

@media (max-width: 600px) { .service-card { width: 100%; } .services { padding: 60px 15px; } .services-header h2 { font-size: 1.6rem; } }

/* -----------------Bloc Pourquoi nous choisir--------------- */
.why-us { background: #f8f7f5; padding: 60px 20px; }

.why-us-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; }

.why-us-image { flex: 1 1 45%; max-width: 500px; }

.why-us-image img { width: 100%; height: auto; display: block; border-radius: 4px; }

.why-us-content { flex: 1 1 50%; color: #003049; }

.why-us-content .subtitle { color: #c1121f; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

.why-us-content h2 { font-size: 2rem; margin: 15px 0; color: #003049; }

.why-us-content p { font-size: 1.1rem; color: #444; line-height: 1.6; margin-bottom: 30px; }

.why-us-content .advantages { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 30px; }

.why-us-content .advantages li { position: relative; padding-left: 38px; font-size: 1rem; color: #003049; font-weight: 400; line-height: 1.5; }

.why-us-content .advantages li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: url("https://cdn-icons-png.flaticon.com/512/190/190411.png") no-repeat center center; background-size: contain; filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(5032%) hue-rotate(341deg) brightness(90%) contrast(95%); }

@media (max-width: 992px) { .why-us-container { flex-direction: column-reverse; text-align: left; } .why-us-content { width: 100%; } .why-us-image { max-width: 100%; margin-top: 40px; } .why-us-content .advantages { grid-template-columns: 1fr; } }

/* -----------------Bloc Partenaires (nouvelle classe)--------------- */
.bloc-partenaires { background: #f8f7f5; padding: 60px 20px 20px; text-align: center; overflow: visible; position: relative; }

/* Titre */
.bloc-partenaires-header .subtitle { color: #c1121f; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; display: block; margin-bottom: 10px; }

.bloc-partenaires-header h2 { font-family: 'Concert One', sans-serif; font-size: 2rem; color: #003049; margin-bottom: 50px; }

/* --- Slider --- */
.bloc-partenaires-slider { height: 150px; position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.bloc-partenaires-track { display: flex; width: calc(250px * 16); animation: partenaires-scroll 40s linear infinite; }

/* --- Items (logos) --- */
.bloc-partenaires-item { width: 250px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; }

.bloc-partenaires-item img { width: 200px; height: auto; object-fit: contain; opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease; }

.bloc-partenaires-item img:hover { transform: scale(1.08); opacity: 0.9; }

/* --- Animation fluide --- */
@keyframes partenaires-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } }

/* --- Responsive --- */
@media (max-width: 768px) { .bloc-partenaires-header h2 { font-size: 1.8rem; } .bloc-partenaires-item img { width: 150px; } .bloc-partenaires-slider { height: 120px; } }

/* -----------------Bloc Prestations--------------- */
.prestations { position: relative; background-color: #003049; /* 🔵 fond tout bleu */ padding: 60px 20px; text-align: center; overflow: hidden; z-index: 0; /* nécessaire pour gérer les couches */ }

/* 👉 Image décorative entre le fond bleu et le contenu */
.prestations::before { content: ""; position: absolute; inset: 0; background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FrGPjdMpdBBh7UWjhKFNGlRhj4i23%2Fimages%2FHero_page_daccueil_7_agwn.webp?alt=media&token=a49073e5-d5b9-4ea4-b0d1-5a9d98d58620") no-repeat center; background-size: cover; /* ou "cover" selon l’effet que tu veux */ opacity: 1; /* ajuste entre 0.3 et 1 pour la transparence */ z-index: -1; /* ✅ sous le contenu, mais au-dessus du fond bleu */ pointer-events: none; /* ne bloque pas les clics */ }

.prestations-header .subtitle { color: #c1121f; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; display: block; margin-bottom: 10px; }

.prestations-header h2 { font-family: 'Concert One', sans-serif; font-size: 2rem; color: #003049; margin-bottom: 60px; }

/* Grille principale : 3 cartes par ligne */
.prestations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }

/* Carte prestation */
.prestation-card { background: #fff; border-radius: 10px; padding: 40px 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.prestation-card:hover { transform: translateY(-8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }

/* Icônes rouges avec pictos blancs */
.prestation-card .icon { background: #c1121f; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }

.prestation-card .icon img { width: 36px; height: 36px; filter: brightness(0) invert(1); /* ✅ rend les icônes totalement blanches */ }

.prestation-card h3 { color: #003049; font-size: 1.3rem; margin: 15px 0 10px; font-family: 'Montserrat', sans-serif; }

.prestation-card p { color: #444; font-size: 1rem; line-height: 1.6; font-family: 'Montserrat', sans-serif; }

/* --- Responsive --- */
@media (max-width: 992px) { .prestations-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

@media (max-width: 600px) { .prestations-grid { grid-template-columns: 1fr; } .prestations-header h2 { font-size: 1.8rem; margin-bottom: 40px; } }

/* ------------------ Bloc Hero Vidéo Services ------------------ */
.hero { position: relative; height: 50vh; /* moitié de l'écran */ display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; /* ✅ cache la vidéo qui dépasse */ background-color: #000; /* ✅ fond de secours si la vidéo ne charge pas */ }

/* --- Vidéo en arrière-plan --- */
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* ✅ remplit le bloc sans déformation */ z-index: 0; }

/* --- Titre au centre --- */
.hero-title { position: relative; z-index: 1; /* ✅ au-dessus de la vidéo */ font-size: 3.5rem; color: #f8f7f5; /* ton beige clair */ margin: 0; font-weight: 600; font-family: 'Montserrat Alternates', sans-serif; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* ✅ améliore la lisibilité sans overlay */ }

/* --- Responsive --- */
@media (max-width: 992px) { .hero { height: 45vh; padding: 30px 15px; } .hero-title { font-size: 2.4rem; } }

@media (max-width: 600px) { .hero { height: 40vh; } .hero-title { font-size: 1.8rem; } }

/* -----------------Bloc Introduction Services--------------- */
.intro-depannage.original { background: #f8f7f5; position: relative; padding: 80px 0px 20px; overflow: hidden; }

/* --- Conteneur général --- */
.intro-wrapper { display: flex; align-items: center; justify-content: center; gap: 50px; max-width: 1100px; margin: 0 auto; position: relative; padding: 0 30px; }

/* --- Bande rouge à gauche --- */
.intro-accent { width: 6px; height: 220px; background: #c1121f; border-radius: 3px; flex-shrink: 0; }

/* --- Contenu texte --- */
.intro-content { flex: 1; position: relative; }

/* Sous-titre */
.intro-content .intro-subtitle { color: #c1121f; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; display: inline-block; margin-bottom: 8px; }

/* Titre principal */
.intro-content h2 { font-family: 'Concert One', sans-serif; font-size: 2.4rem; color: #003049; margin-bottom: 25px; line-height: 1.3; position: relative; }

/* Texte */
.intro-content p { font-family: 'Montserrat', sans-serif; color: #444; font-size: 1.05rem; line-height: 1.8; margin-bottom: 20px; }

/* Accent sur mots-clés */
.intro-content strong { color: #003049; font-weight: 600; }

/* --- Décoratif : icône floutée en fond (facultatif) --- */
.intro-depannage.original::after { content: ""; position: absolute; top: 20%; right: 5%; width: 200px; height: 200px; background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FrGPjdMpdBBh7UWjhKFNGlRhj4i23%2Fimages%2Flogo_sans_fond_1_rh17.webp?alt=media&token=d9617e1b-f6bd-477a-80ba-5227122eaed8") no-repeat center; background-size: contain; pointer-events: none; }

/* --- Responsive --- */
@media (max-width: 992px) { .intro-wrapper { flex-direction: column; align-items: flex-start; } .intro-accent { width: 50px; height: 5px; margin-bottom: 20px; } .intro-content h2 { font-size: 2rem; } .intro-content p { font-size: 1rem; } .intro-depannage.original::after { display: none; } }

@media (max-width: 600px) { .intro-content h2 { font-size: 1.6rem; } }

/* ---------------- Bloc Présentation Accueil (version isolée) ---------------- */
.about-home { background: #f7f7f5; padding: 10px 0 20px; display: flex; justify-content: center; align-items: center; }

.about-container { background: #003049; color: #f7f7f5; border-radius: 25px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1400px; padding: 60px 80px; gap: 80px; position: relative; overflow: hidden; animation: fadeInUp 1s ease forwards; }

/* Bande rouge décorative */
.about-container::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background: #c1121f; border-radius: 8px 0 0 8px; }

/* Image */
.about-image { flex: 1 1 45%; position: relative; z-index: 2; }

.about-image img { width: 100%; border-radius: 15px; display: block; transition: transform 0.5s ease; }

/* Contenu texte */
.about-content { flex: 1 1 55%; z-index: 2; }

.about-content .about-subtitle { color: #c1121f; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; font-size: 14px; }

.about-content h2 { font-family: 'Concert One', sans-serif; font-size: 2.6rem; margin: 15px 0 25px 0; color: #f7f7f5; }

.about-content p { line-height: 1.7; font-size: 1.05rem; margin-bottom: 20px; color: #f7f7f5; }

/* Animation d'apparition */
@keyframes fadeInUp { from { opacity: 0;
    transform: translateY(40px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* Responsive */
@media (max-width: 992px) { .about-container { flex-direction: column; padding: 40px 30px; text-align: center; width: 95%; } .about-image { order: 2; } .about-content { order: 1; } }

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