@charset "UTF-8";
@import url(main.css);
/*--------------------------Bordure des boutons du site----------------------*/
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: 2px solid; color: #110403; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: 2px solid; color: #110403; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: 2px solid; color: #110403; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: 2px solid; color: #110403; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: 2px solid; color: #110403; }

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

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

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

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

.button { border: 2px solid #110403; /* bordure des boutons du site */ }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border: 2px solid; border-color: #110403; }

img.fondDegradeLogo { width: 200px; }

/*--------------------------Espacements transparent sur le site----------------------*/
.b-bloc-divider { height: 40px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

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

/*-----------Bloc section avec fond--------------*/
.video-section { background: url("ton-image.jpg") center/cover no-repeat; /* ✅ image de fond */ width: 100%; /* occupe toute la largeur */ height: 100vh; /* occupe toute la hauteur de l’écran */ margin: 0; /* aucune marge externe */ padding: 0 5%; /* espace seulement sur les côtés */ display: flex; justify-content: center; align-items: center; }

/* Conteneur en 2 colonnes */
.video-container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; width: 100%; gap: 40px; }

/* Colonne gauche : texte */
.video-text { flex: 1; color: #f5f5f5; padding-right: 60px; /* ✅ Décale un peu le texte à gauche */ }

.video-text p { margin-bottom: 20px; /* espace sous chaque paragraphe */ line-height: 1.6; /* rend le texte plus lisible */ }

.hero-title { font-size: 2.5rem; line-height: 1.2; margin: 0; text-align: left; }

.title-red { color: #fd1717; /* rouge vif */ font-weight: 700; }

.title-white { color: #fefefe; /* blanc */ font-weight: 400; }

.video-description { font-size: 1.2rem; line-height: 1.6; }

/* Colonne droite : vidéo */
.video-wrapper { flex: 1; display: flex; justify-content: center; }

.video { width: 100%; max-width: 800px; border-radius: 20px; /* ✅ bords arrondis */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }

/* Responsive */
@media (max-width: 992px) { .video-section { margin-top: 110px; /* ✅ marge ajoutée seulement sur mobile */ } .video-container { flex-direction: column; text-align: center; } .video-text { margin-bottom: 30px; padding-left: 0; padding-right: 0; /* ✅ on annule le décalage */ text-align: center; /* ✅ texte centré en mobile */ } .hero-title { text-align: center; /* ✅ titre centré sur mobile */ } .video { max-width: 100%; } }

/*--------------------------Cartes de services Custom----------------------*/
.custom-cards-2 { width: 100%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; max-width: 1300px; margin-left: auto; margin-right: auto; }

.card__img { visibility: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; }

.card__img--hover { transition: 0.2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; position: absolute; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; top: 0; }

.custom-card-2 { margin-right: 25px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-color: #fefefe; width: 33.3%; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); }

.custom-card-2:hover { box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); transform: scale(1.1, 1.1); }

.card__info { z-index: 2; background-color: #fefefe; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 16px 24px 24px 24px; }

.card__title { margin-top: 5px; margin-bottom: 10px; }

.custom-card-2:hover .card__img--hover { height: 100%; opacity: 0.3; }

.custom-card-2:hover .card__info { background-color: transparent; position: relative; }

.custom-card-2:hover .card__info-hover { opacity: 1; }

@media (max-width: 1024px) { .custom-cards-2 { flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */ } .custom-card-2 { width: 48%; /* Deux cartes par ligne sur tablette */ margin-bottom: 20px; } }

@media (max-width: 768px) { .custom-card-2 { width: 100%; /* Une carte par ligne sur mobile */ margin-right: 0; /* Supprime les marges */ } }

/*--------------------------Bloc espèces traitées / picto----------------------*/
/* Section avec image de fond modifiable dans le HTML */
.species-section { position: relative; background-size: cover; background-position: center; padding: 80px 20px; color: #fefefe; }

/* Overlay noir transparent */
.species-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 0; }

/* Contenu au-dessus de l’overlay */
.overlay { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; text-align: center; }

/* Titre */
.species-title { font-size: 2rem; margin-bottom: 40px; font-weight: 600; }

.species-title span { color: #fd1717; /* rouge spécifique */ }

/* Grille fixée à 2 rangées (4 colonnes) */
.species-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; justify-items: center; }

/* Élément espèce */
.species-item img { width: 80px; height: auto; margin-bottom: 12px; transition: transform 0.3s ease; }

.species-item img:hover { transform: scale(1.1); }

.species-item p { font-size: 1rem; margin: 0; }

/* ✅ Version responsive mobile */
@media (max-width: 768px) { .species-grid { grid-template-columns: repeat(2, 1fr); } .species-title { font-size: 1.5rem; } .species-item img { width: 60px; } }

/* -------------Bloc pages services------------- */
/* Section générale avec image de fond */
.rodents-section { position: relative; padding: 40px 20px; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F4ajISWmf22Q26n85UbeOvQ210SQ2%2Fimages%2FFond_pourquoi_agir_3_7apb.webp") center/cover no-repeat; color: #fefefe; overflow: hidden; }

/* Overlay sombre par-dessus l’image */
.rodents-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); /* voile noir pour lisibilité */ z-index: 0; }

/* Conteneur au-dessus de l’overlay */
.rodents-container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 40px; }

/* Texte */
.rodents-text { flex: 1; color: #fefefe; text-align: left; }

.rodents-text h2 { font-size: 2rem; margin-bottom: 20px; font-weight: 600; color: #fefefe; }

.rodents-text h2 span { color: #fd1717; }

.rodents-text p { margin-bottom: 20px; line-height: 1.6; color: #fefefe; }

/* Liste avec petits ronds rouges */
.rodents-text ul { list-style: none; padding: 0; margin: 0; color: #fefefe; }

.rodents-text li { position: relative; padding-left: 25px; margin-bottom: 12px; color: #fefefe; }

.rodents-text li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: #fd1717; border-radius: 50%; }

/* Image */
.rodents-image { flex: 1; text-align: right; }

.rodents-image img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

/* Responsive */
@media (max-width: 900px) { .rodents-container { flex-direction: column; text-align: center; } .rodents-image { text-align: center; margin-top: 20px; } }

/* -------------Section méthode--------------- */
.method-section { position: relative; padding: 40px 20px; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F4ajISWmf22Q26n85UbeOvQ210SQ2%2Fimages%2FFond_methode_2_ikc9.webp") center/cover no-repeat; color: #fefefe; overflow: hidden; }

/* Overlay sombre par-dessus l’image */
.method-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); /* voile noir pour lisibilité */ z-index: 0; }

/* Conteneur en 2 colonnes au-dessus de l’overlay */
.method-container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 40px; }

/* Texte */
.method-text { flex: 1; color: #fefefe; text-align: left; }

.method-text h2 { font-size: 2rem; margin-bottom: 20px; font-weight: 600; color: #fefefe; }

.method-text h2 span { color: #fd1717; }

.method-text p { margin-bottom: 20px; line-height: 1.6; color: #fefefe; }

/* Liste avec petits ronds rouges */
.method-text ul { list-style: none; padding: 0; margin: 0; }

.method-text li { position: relative; padding-left: 25px; margin-bottom: 12px; color: #fefefe; text-align: left; }

.method-text li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: #fd1717; border-radius: 50%; }

/* Image */
.method-image { flex: 1; text-align: left; }

.method-image img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

/* ✅ Responsive */
@media (max-width: 900px) { .method-container { flex-direction: column-reverse; /* texte en haut, image en bas */ text-align: left; } .method-text { margin-bottom: 20px; } .method-text h2 { font-size: 1.5rem; } .method-text li { font-size: 0.95rem; padding-left: 20px; } .method-text li::before { width: 8px; height: 8px; top: 7px; } .method-image { text-align: center; } .method-image img { max-width: 90%; } }

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