/*
Theme Name: MonTheme
Theme URI: http://localhost
Author: VPCE
Author URI: http://localhost
Description: Thème personnalisé VPCE.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montheme
*/





	
/* ===== FOOTER – BASE (desktop/tablette) ===== */
.footer-articles {
  background-color: #4B5320;
  /* Évite les unités en cm (pas adaptées au web) */
  height: auto;                 /* Laisse la hauteur s’adapter au contenu */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  color: #fff;                  /* Tout le texte en blanc par défaut */
}

/* Style des liens du footer (tous états) */
.footer-articles a,
.footer-articles a:link,
.footer-articles a:visited,
.footer-articles a:hover,
.footer-articles a:focus,
.footer-articles a:active {
  color: #fff !important;
  text-decoration: none !important;   /* enlève l’underline */
  border-bottom: 0 !important;        /* au cas où le thème l’utilise comme underline */
  box-shadow: none !important;        /* idem */
  background-image: none !important;  /* idem */
  outline: none;
}

/* Accessibilité : hint discret au clavier/survol */
.footer-articles a:hover,
.footer-articles a:focus-visible {
  text-decoration: underline;   /* petit feedback d’interaction */
}

/* Conteneur des blocs du footer */
.footer-content {
  display: flex;
  gap: 3rem;                    /* Remplace 4cm par une valeur responsive */
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  width: 100%;
  flex-wrap: wrap;              /* Permet de passer à la ligne si besoin */
  text-align: left;
}

/* Blocs individuels */
.footer-bloc {
  max-width: 300px;
  flex: 1 1 260px;              /* grandit/rétrécit avec un minimum */
}

.footer-bloc h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-bloc p {
  margin: 0.3rem 0;
  font-size: 1rem;
}
	
	
	
	
	


/* =========================
   RESET MINIMAL (optionnel)
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ font-family: Arial, sans-serif; }

/* =========================
   HEADER (TOP BAR)
========================= */
.top-bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4cm;
  background-color: #4B5320;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
}

/* Logo */
.top-bar .logo{
  height: 3cm;
  width: auto;
  display:block;
}

/* =========================
   MENU PRINCIPAL (scopé)
========================= */
.top-bar nav ul{
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 0;
  font-size: 1em;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.top-bar nav ul li{
  position: relative;
  display: flex;
  align-items: center;
}

.top-bar nav ul li > a{
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 18px;
  display: block;
  transition: background 0.2s;
}

/* =========================
   SOUS-MENU
========================= */
.top-bar .submenu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #4B5320;
  padding: 10px 0;
  border-radius: 0 0 8px 8px;
  min-width: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 9999;               /* ✅ IMPORTANT */
}

/* Affiche le sous-menu au survol (desktop) */
@media (hover:hover) and (pointer:fine){
  .top-bar nav ul li:hover > .submenu{
    display: block;
  }
}

/* Affiche le sous-menu au clavier / mobile (si focus) */
.top-bar nav ul li:focus-within > .submenu{
  display: block;
}

.top-bar .submenu a{
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}

.top-bar .submenu a:hover{
  background-color: #3d4420;
  color: #a4d041;
}

/* =========================
   TEXTE ANIMÉ (OK)
========================= */
.animated-text{
  background-color: rgba(1,1,1,0.8);
  color:#fff;
  padding: 30px 60px;
  font-size: 2em;
  text-align:center;
  border-radius:15px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  animation: float 2.5s ease-in-out infinite alternate;
}
@keyframes float{
  from{ transform: translateY(0); }
  to  { transform: translateY(-30px); }
}






/* Section avec image de fond + overlay assombri 40% */
.header-background {
  position: relative; /* nécessaire pour le pseudo-élément */
  background-image: url('SOURIS 2.jpg');
  background-size: cover;
  background-position: center;
  height: 18cm;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0cm;
  overflow: hidden;   /* évite tout débordement de l'overlay */
}

/* Overlay noir à 30% d’opacité */
.header-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30); /* assombrissement 30% */
  pointer-events: none;            /* ne bloque pas les clics */
  z-index: 0;                      /* derrière le texte */
}







/* Pour que le contenu reste visible au-dessus de l’overlay */
.bg-fixed-section > * {
  position: relative;
  z-index: 1;
}


/* Bande défilante juste sous la bande verte */
.scrolling-banner {
  margin-top: 1cm; /* Espace entre la bande verte et la bande défilante */
  height: 2cm;
  width: 100vw;
  background-color: #4B5320;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 900;
}

.scrolling-text {
  white-space: nowrap;
  color: white;
  font-size: 1.2em;
  padding-left: 100vw;
  animation: scrollText 15s linear infinite;
}

@keyframes scrollText {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-120vw);
  }
	
	
}
/* Section VOUS ÊTES ? */
.vous-etes-section {
  margin-top: Ocm;
  text-align: center;
  padding: 0 2cm;
}

.section-title {
  font-size: 1.8em;
  margin-bottom: 1cm;
  align-items: center;
}

/* ✅ Texte justifié */
.carte-vous-etes p {
  text-align: justify;
  font-size: 0.95rem;
  line-height: 1.5;
  flex-grow: 1;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centre les cartes horizontalement */
  gap: 1cm; /* espace horizontal et vertical entre les cartes */
}



.card {
  width: 8cm;
  height: 14cm;
  background-color: #f4f4f4;
	  min-width: 260px;
  border: 1px solid #ccc;
  border-bottom: 6px solid #4B5320;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 0.5cm; /* corrigé ici */
  
}

/* Effet flottement */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.card h3 {
  color: #4B5320;
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: center;
}

.card p {
  text-align: justify;
  font-size: 0.95em;
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 10px;
}

/* Bouton */
.cta-button {
  background-color: #4B5320;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
	text-align: center;
}

.cta-button:hover {
  background-color: #3d4420;
}


	
	
	
	
	
	
/* Section Lutte */
.lutte-section {
  margin-top: 1.5cm;
  padding: 0 2cm;
  text-align: center;
}

.lutte-section .section-title {
  font-size: 1.8em;
  margin-bottom: 1cm;
}

.lutte-cards {
  display: flex;
  flex-direction: column;
  gap: 3cm;
}

.lutte-card {
  background-color: #f4f4f4;
  border-bottom: 6px solid #4B5320;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lutte-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.lutte-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.lutte-text {
  flex: 1;
  text-align: center; /* ✅ Centre le titre et le bouton */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lutte-text h3 {
  color: #4B5320;
  margin-bottom: 10px;
}

.lutte-text p {
  text-align: justify; /* ✅ Justifie le texte */
  max-width: 90%;      /* ✅ Pour ne pas toucher les bords */
  margin-bottom: 15px;
}

.lutte-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-left: 20px;
}

.lutte-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Bouton */
.cta-button {
  background-color: #4B5320;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.cta-button:hover {
  background-color: #3d4420;
}

/* Bande verte contact */
.bande-contact {
  margin-top: 1cm;
  height: 3cm;
  width: 100%;
  background-color: #4B5320;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2cm;
  box-sizing: border-box;
  color: white;
}

.bande-gauche img {
  height: 2.2cm;
  display: block;
}

.bande-centre {
  text-align: center;
}

.btn-devis {
  background-color: white;
  color: #4B5320;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  animation: clignote 1s infinite;
  box-shadow: 0 0 5px white;
  transition: transform 0.2s;
  display: inline-block;
}

.btn-devis:hover {
  transform: scale(1.05);
}

/* Animation clignotante */
@keyframes clignote {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.bande-droite {
  font-weight: bold;
  font-size: 1.1em;
}

/* Responsive pour la section lutte */
@media (max-width: 900px) {
  .lutte-cards {
    flex-direction: column;
    gap: 1cm;
  }
  .lutte-card {
    width: 95vw;
    max-width: 100%;
  }
  .lutte-content {
    flex-direction: column;
    padding: 10px;
  }
  .lutte-image {
    padding-left: 0;
    margin-top: 10px;
	  
    justify-content: center;
  }
}

/* Section Nos Experts */
.experts-section {
  margin-top: 1.5cm;
  padding: 0 2cm;
  text-align: center;
}

.experts-section .section-title {
  font-size: 1.8em;
  margin-bottom: 1cm;
}

.expert-card {
  background-color: #f4f4f4;
  border-bottom: 6px solid #4B5320; /* ligne verte militaire */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 auto;
}
.expert-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}
.expert-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.expert-photo {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.expert-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.expert-text {
  flex: 2;
  text-align: justify;
  font-size: 1em;
  min-width: 220px;
}

.expert-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Bouton */
.cta-button {
  background-color: #4B5320;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #3d4420;
}

/* Responsive */
@media (max-width: 900px) {
  .expert-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .expert-text {
    text-align: justify;
    margin-top: 15px;
  }
}

/* Section NUISIBLES */
.nuisibles-section {
  margin-top: 1.5cm;
  padding: 0 2cm;
  text-align: center;
}

.nuisibles-section .section-title {
  font-size: 1.8em;
  margin-bottom: 1cm;
}

.nuisibles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1cm; /* espace entre les cartes */
}

/* Cartes */
.nuisible-card {
  width: 7cm;
  min-width: 260px;
  height: 14cm;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-bottom: 6px solid #4B5320; /* ligne verte */
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.nuisible-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.nuisible-card h3 {
  color: #4B5320;
  font-size: 1.1em;
  margin-bottom: 10px;
}

.nuisible-card img {
  max-width: 100%;
  max-height: 5cm;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
  object-fit: contain;
  background: #e9e9e9;
}

.nuisible-card p {
  text-align: justify;
  font-size: 0.95em;
  margin-bottom: 10px;
  max-width: 90%;
}

/* Flèche clignotante horizontale */
.arrow {
  font-size: 3em;
  color: #4B5320;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Responsive */
@media (max-width: 900px) {
  .nuisibles-section {
    padding: 0 0.5cm;
  }
  .nuisibles-container {
    gap: 0.5cm;
  }
  .nuisible-card {
    width: 95vw;
    min-width: unset;
    height: auto;
    margin-bottom: 1cm;
  }
}



/* === BACKGROUND FIXE === */
.bg-fixed-section {
  background-image: url('IMG-Terrain 20250919-WA0055.jpg'); /* remplace par ton image */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 4rem 2rem;
  color: white;
  text-align: center;
  z-index: 1;
  overflow: hidden;
  margin-top: 1.5cm;
  position: relative;
}

.bg-fixed-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); /* overlay noir */
  z-index: 0;
  pointer-events: none;
}

.bg-fixed-section > * {
  position: relative;
  z-index: 1;
}

/* === CONTAINER === */
.content-container {
  max-width: 1000px;
  margin: auto;
}

/* === TITRE PRINCIPAL === */
.main-title {   
  font-size: 2em;
  margin-top: 1cm;
  margin-bottom: 2cm;
}

/* === PARAGRAPHES === */ 
.paragraphs {
  display: flex;
  flex-direction: column;
  align-items: center;
} 

.paragraphs p {
  text-align: justify;
  line-height: 1.5em;
  font-size: 1.2em;
  margin-bottom: 2cm;
  max-width: 800px;
}

/* === CONTACT : HORIZONTAL === */
.contact-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto 4cm auto;
  padding: 0 1cm;
  gap: 3cm;
}

.phone a,
.email a {
  color: white;
  font-weight: bold;
  background-color: #97a73b;
  padding: 20px 15px;
  border-radius: 15px;
  font-size: 1em;
  text-decoration: none;
  animation: blink 1s infinite;
}

/* === BANDE BLANCHE COMPTEUR === */
.white-strip {
    margin-left: -20cm; /* Ajuste la marge gauche pour centrer */          
  margin-right: -20cm;    
  background-color: white;
  color: #4B5320;
  min-height: 3cm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 4cm;
  padding: 1cm 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.counter-block {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  justify-content: center;
}

.counter {
  font-size: 4em;
  font-weight: bold;
}

.counter-label {
  font-size: 4em;
  font-weight: bold;
}

.under-counter {
  font-size: 1.2em;
  margin-top: 0.5cm;
}

/* === APPEL À L’ACTION FINAL === */
.call-to-action {
  text-align: center;
  line-height: 1.5em;
  margin-bottom: 0;
}

.call-to-action p {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.btn-call {
  background-color: #97a73b;
  color: white;
  padding: 12px 25px;
  border-radius: 15px;
  font-size: 1em;
  font-weight: bold;
  animation: blink 1s infinite;
  display: inline-block;
  margin-top: 1cm;
  transition: transform 0.2s;
  margin-bottom: 3cm;
  text-decoration: none;
}

.btn-call:hover {
  transform: scale(1.05);
}

/* === ANIMATION CLIGNOTEMENT === */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .bg-fixed-section {
    padding: 2rem 0.5rem;
  }
  .content-container {
    max-width: 98vw;
    padding: 0 0.5rem;
  }
  .contact-block {
    flex-direction: column;
    gap: 1.5em;
    padding: 0;
    margin-bottom: 2cm;
  }
  .white-strip {
    min-height: 3cm;
    padding: 1em 0.5em;
    margin-bottom: 2cm;
  }
  .main-title {
    font-size: 1.3em;
    margin-bottom: 1cm;
  }
  .call-to-action p,
  .btn-call {
    font-size: 1.2em;
  }
}

/* Nettoyage des doublons body */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #e9e9e9;
}

/* === STRATEGIE === */
.strategie-wrapper {
  padding-left: 10%;
  padding-right: 10%;
  margin-top: 1.5cm;
  margin-bottom: 2.5em;
}

/* === Carte stratégie === */
.strategie-card {
  width: 100%;
  min-height: 8cm;
  background-color: #f4f4f4;
  border-left: 4px solid #4B5320;
  border-right: 4px solid #4B5320;
  border-top: none;
  border-bottom:none;
  border-radius: 15px;
  padding: 1.2cm;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1cm;
  overflow: visible;
}
.strategie-card h3 {
  font-size: 1.8em;
  margin-bottom: 0.5cm;
  color: #4B5320;
 
}

.strategie-card p {
 font-size: 1em;
  text-align: justify;
  margin: 0;
   margin-top: -1cm; /* Ajout d'une marge en haut */
}

.btn-strategie {
  width: 220px;
  background-color: #4B5320;
  color: white;
  padding: 14px 0;
  text-decoration: none;
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: 600;
  transition: background-color 0.3s, transform 0.2s;
  display: inline-block;
  text-align: center;
  animation: clignote 1s infinite;
  margin: 0 auto;
  margin-top: 1em;
  box-shadow: 0 2px 8px rgba(75, 83, 32, 0.08);
  letter-spacing: 0.5px;
}

.btn-strategie:hover {
  background-color: #3a4218;
  transform: scale(1.04);
}

@keyframes clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Animation au scroll */
.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}

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

/* Responsive */
@media (max-width: 900px) {
  .strategie-wrapper {
    padding-left: 2%;
    padding-right: 2%;
  }
  .strategie-card {
    padding: 1.2em 0.7em;
    min-height: unset;
    gap: 1em;
  }
  .strategie-card h3 {
    font-size: 1.3em;
  }
  .strategie-card p {
    font-size: 1em;
  }
  .btn-strategie {
    width: 100%;
    font-size: 1em;
    padding: 12px 0;
  }
}



/* =========================
   FOOTER HOME (site-footer)
========================= */
.site-footer {
  position: relative;
  background-color: #4B5320;
  color: #fff;
  width: 100%;
  overflow: hidden;
  padding: 0;
  font-size: 1.1em;
}

.footer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background-color: #97a73b;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 1;
}

.footer-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 2.5em 2em;
  gap: 3em;
}

.footer-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  max-height: 190px; /* remplace 5cm */
  max-width: 100%;
  object-fit: contain;
}

.footer-center,
.footer-right {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.footer-center h3,
.footer-right h3 {
  font-size: 1.3em;
  margin-bottom: 0.7em;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.footer-list {
  list-style-type: disc;
  padding-left: 1.2em;
}

.footer-list li {
  margin-bottom: 0.5em;
}

.footer-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.footer-list a:hover {
  color: #a4d041;
}