@charset "UTF-8";
@import url(main.css);
.row.align-items-center.g-0.bg-sixthColor.rounded-3 { background-color: black; }

.card-body.d-flex.align-items-center.justify-content-center.px-3.px-md-5.py-4.bg-sixthColor.rounded-4 { background-color: black; }

/* Section avec fond */
.servicesGallery-section { background: #f5f5f5; /* ✅ fond gris clair */ padding: 80px 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }

/* Carte */
.servicesGallery-card { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 30px; width: 400px; /* 👉 carré desktop */ height: 400px; /* 👉 carré desktop */ flex: 0 0 auto; }

/* Image à l'intérieur */
.servicesGallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 30px; /* ✅ bords arrondis même sur l'image */ }

/* Traits animés */
.servicesGallery-card::before, .servicesGallery-card::after { content: ''; position: absolute; width: 0; height: 1px; background: white; transition: width 0.3s ease; }

.servicesGallery-card::before { top: 10px; left: 10px; right: 10px; }

.servicesGallery-card::after { bottom: 10px; left: 10px; right: 10px; }

.servicesGallery-card:hover::before, .servicesGallery-card:hover::after { width: calc(100% - 20px); z-index: 99; }

/* Overlay bleu foncé moins sombre */
.servicesGallery-card .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 6, 40, 0.6); /* ✅ opacité réduite */ color: #f5f5f5; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; border-radius: 30px; }

.servicesGallery-card:hover .overlay { opacity: 1; background: rgba(1, 6, 40, 0.6); /* ✅ conserve la même couleur au hover */ }

.servicesGallery-card .overlay-text { text-align: center; font-size: 1.5rem; font-weight: bold; }

/* ---------- Responsive -------- */
@media (max-width: 992px) { .servicesGallery-card { width: 100%; max-width: 350px; aspect-ratio: 1 / 1; /* ✅ carré automatique en responsive */ height: auto; /* géré par aspect-ratio */ } .servicesGallery-card img { height: 100% !important; border-radius: 30px; } /* ✅ Overlay toujours visible sur mobile */ .servicesGallery-card .overlay { opacity: 1 !important; } }

.engagements-section { background-size: cover; background-position: center; background-attachment: fixed; padding: 80px 20px; position: relative; color: white; text-align: center; }

.engagements-section .overlay { padding: 40px 20px; background: rgba(1, 6, 40, 0.6); /* ✅ si tu veux un voile sombre global */ }

.engagements-section .engagements-title { margin-bottom: 100px; font-weight: bold; color: white; }

.engagements-section .engagements-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; }

.engagements-section .card { background-color: rgba(1, 6, 40, 0.8); background-repeat: no-repeat; background-position: center top; background-size: 100px; padding: 100px 20px 30px; box-shadow: 0 0 20px rgba(1, 6, 40, 0.7); width: calc(33.333% - 20px); border-radius: 8px; position: relative; color: white; }

.engagements-section .card h3, .engagements-section .card p { color: white; }

@media (max-width: 992px) { .engagements-section .card { width: calc(50% - 20px); } }

@media (max-width: 600px) { .engagements-section .card { width: 100%; } .engagements-section .engagements-title { margin-bottom: 40px; } }

.websitePageTitle-div { display: none !important; }

.websitePageTitle-title { display: none !important; }

/* Masquer le titre natif de la page */
.page-title, .entry-title, h1.entry-title { display: none !important; }

.hero-service { position: relative; width: 100%; height: 60vh; /* hauteur du hero */ background-size: cover; background-position: center; display: flex; align-items: center; /* centre verticalement */ color: #fff; }

/* Overlay sombre */
.hero-service::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; }

.hero-overlay { position: relative; z-index: 1; text-align: left; /* alignement gauche */ max-width: 1200px; margin-left: 5%; }

.hero-title { font-family: 'Bebas Neue', sans-serif; /* ✅ police importée */ font-size: 4rem; /* grand titre */ font-weight: normal; /* Bebas Neue est déjà bold */ margin: 0; line-height: 1.1; letter-spacing: 1px; }

/* Couleurs spécifiques */
.title-main { color: #f5f5f5; /* gris clair */ }

.title-highlight { color: #df540a; /* orange */ }

/* Responsive */
@media (max-width: 768px) { .hero-service { height: 40vh; /* moins haut sur mobile */ } .hero-title { font-size: 2.5rem; } }

/* Section principale */
.infinite-gallery { width: 100%; overflow: hidden; padding: 40px 0; background: #010628; /* fond clair optionnel */ }

/* Piste qui défile */
.gallery-track { display: flex; gap: 20px; flex-wrap: nowrap; width: max-content; animation: scrollGallery 25s linear infinite; }

/* Carte image */
.gallery-item { flex: 0 0 250px; /* largeur fixe = carré */ height: 250px; border-radius: 20px; overflow: hidden; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; /* coins arrondis */ transition: transform 0.4s ease; }

.gallery-item:hover img { transform: scale(1.08); /* zoom au survol */ }

/* Animation infinie */
@keyframes scrollGallery { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
  /* défile une série complète */ }

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