:root{
  --green:#0b7a3a;
  --green-2:#0f8a45;
  --green-3:#0a6a33;
  --yellow:#f6c400;
  --text:#1e1e1e;
  --muted:#5e5e5e;
  --bg:#f4f6f6;
  --card:#e6f0ea;
  --shadow:0 10px 25px rgba(0,0,0,.12);
  --radius:16px;
  --container:1080px;
  --hero-bg:url("assets/index_banner.png");
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120.98' height='120.98' viewBox='0 0 120.98 120.98'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.88' stroke-miterlimit='10'%3E%3Cpolyline points='6.82,34.44 30.23,7.05 53.64,34.44'/%3E%3Cpolyline points='14.77,34.44 30.23,16.35 45.69,34.44'/%3E%3Cpolyline points='22.7,34.44 30.23,25.64 37.76,34.44'/%3E%3Cpolyline points='113.23,7.05 89.82,34.44 66.41,7.05'/%3E%3Cpolyline points='105.28,7.05 89.82,25.14 74.36,7.05'/%3E%3Cpolyline points='97.35,7.05 89.82,15.86 82.29,7.05'/%3E%3Cpolyline points='6.82,102.94 30.23,75.54 53.64,102.94'/%3E%3Cpolyline points='14.77,102.94 30.23,84.85 45.69,102.94'/%3E%3Cpolyline points='22.7,102.94 30.23,94.13 37.76,102.94'/%3E%3Cpolyline points='113.23,75.54 89.82,102.94 66.41,75.54'/%3E%3Cpolyline points='105.28,75.54 89.82,93.63 74.36,75.54'/%3E%3Cpolyline points='97.35,75.54 89.82,84.35 82.29,75.54'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpolygon points='82.53,114.39 76.41,106.67 70.3,114.39'/%3E%3Cpolygon points='72.11,56.98 73.25,47.2 63.46,48.33'/%3E%3Cpolygon points='8.65,90.51 9.79,80.72 0,81.86'/%3E%3Cpolygon points='129.64,90.51 130.77,80.72 120.98,81.86'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

.page--index{--hero-bg:url("assets/index_banner.png");}
.page--activite{--hero-bg:url("assets/activite_banner.png");}
.page--realisation{--hero-bg:url("assets/realisation_banner.png");}
.page--sous-traitant{--hero-bg:url("assets/sous_traitant_banner.png");}
.page--contacts{--hero-bg:url("assets/contacts_banner.png");}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{
  width:min(var(--container),calc(100% - 48px));
  margin:0 auto;
}

.site-header{
  background:var(--green);
  color:#fff;
}

.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:280px;
}

.brand__badge{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
}

.brand__logo{
  height:40px;
  width:auto;
  margin-right:12px;
  border-radius:8px;
  background:rgba(255,255,255,0.1);
  padding:6px;
  transition:transform 0.3s ease;
}

.brand__logo:hover{
  transform:scale(1.05);
}

.brand__title{
  font-weight:700;
  letter-spacing:.4px;
  font-size:13px;
  text-transform:uppercase;
  color:var(--yellow);
}

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
}

.nav-link{
  position:relative;
  padding:10px 16px;
  opacity:.95;
  color:#fff;
  text-decoration:none;
  transition:all 0.3s ease;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  letter-spacing:0.2px;
  font-size:14px;
}

.nav-link:hover{
  opacity:1;
  background:rgba(255,255,255,0.1);
  transform:translateY(-1px);
}

.nav-link.is-active{
  opacity:1;
  background:rgba(255,255,255,0.15);
}

.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:4px;
  background:var(--yellow);
  border-radius:999px;
}

/* Ensure Bootstrap doesn't hide navigation */
.navbar-nav .nav-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  opacity:.92 !important;
  color:#fff !important;
  text-decoration:none !important;
  transition:all 0.3s ease !important;
  border-radius:8px !important;
  position:relative !important;
  padding:8px 12px !important;
  visibility:visible !important;
  z-index:10 !important;
}

/* Override any Bootstrap nav classes */
.nav .nav-link,
.nav a{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  opacity:.92 !important;
  color:#fff !important;
  text-decoration:none !important;
  transition:all 0.3s ease !important;
  border-radius:8px !important;
  position:relative !important;
  padding:8px 12px !important;
  visibility:visible !important;
  z-index:10 !important;
}

.hero{
  position:relative;
  height:315px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(9, 122, 59, .82) 0%, rgba(9, 122, 59, .45) 56%, rgba(9, 122, 59, .65) 100%),
    radial-gradient(1200px 600px at 65% 10%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(900px 500px at 30% 70%, rgba(0,0,0,.16), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)),
    var(--hero-bg);
  filter:saturate(1.05);
  background-size:auto, auto, auto, auto, cover;
  background-position:0 0, 0 0, 0 0, 0 0, center;
  background-repeat:no-repeat;
}

.hero__content{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap:32px;
}

.hero__text{
  padding:26px 0;
}

.hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.35px;
  text-transform:uppercase;
  opacity:.95;
}

.hero__title{
  margin:14px 0 10px;
  color:#fff;
  font-weight:800;
  line-height:1.02;
  font-size:48px;
  letter-spacing:-0.5px;
}

.hero__subtitle{
  margin:0 0 16px;
  color:rgba(255,255,255,.92);
  max-width:520px;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 18px;
  border-radius:10px;
  font-weight:700;
  font-size:12px;
  border:0;
  cursor:pointer;
}

.btn--primary{
  background:var(--yellow);
  color:#10491f;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  font-size:13px;
  font-weight:800;
  letter-spacing:0.3px;
  transition:transform 0.2s, box-shadow 0.2s;
}

.btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

.hero__mark{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero__mark svg{
  width:min(440px, 100%);
  height:auto;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.25));
}

.page{
  background:#fff;
  position:relative;
}

.page::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--pattern);
  background-size:120.98px 120.98px;
  background-repeat:repeat;
  background-position:0 0;
  opacity:0.04;
  pointer-events:none;
}

.section{
  padding:26px 0 34px;
}

.section__title{
  margin:0 0 1.5rem;
  font-size:32px;
  font-weight:900;
  color:var(--green-3);
  line-height:1.3;
  letter-spacing:-0.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.1);
}

.section__lead{
  margin:0 0 2rem;
  font-size:16px;
  color:#2f2f2f;
  line-height:1.6;
  max-width:800px;
  letter-spacing:0.1px;
}

.card-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
  justify-content:center;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 14px;
}

.service-card{
  text-align:center;
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  transition:transform 0.2s, box-shadow 0.2s;
}

.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.icon{
  width:62px;
  height:62px;
  border-radius:999px;
  background:var(--green-2);
  display:grid;
  place-items:center;
  box-shadow:0 12px 20px rgba(0,0,0,.14);
}

.icon svg{width:34px;height:34px}

.service-card__title{
  margin:0;
  font-size:13px;
  font-weight:800;
  color:var(--green-3);
  line-height:1.3;
}

.service-card__body{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#1f1f1f;
  letter-spacing:0.1px;
}

.footer{
  text-align:center;
  color:#7a7a7a;
  font-size:11px;
  padding:24px 0 32px;
  margin-top:40px;
  border-top:1px solid rgba(0,0,0,.06);
}

.projects{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.project-card{
  overflow:hidden;
  padding:0;
}

.project-card__media{
  height:120px;
  background:
    linear-gradient(130deg, rgba(255,255,255,.24), rgba(0,0,0,.26)),
    radial-gradient(800px 220px at 50% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(15,138,69,.35), rgba(15,138,69,.15));
}

.project-card__inner{
  padding:12px 12px 14px;
}

.project-card__title{
  margin:0 0 6px;
  font-weight:900;
  font-size:11px;
}

.project-card__body{
  margin:0 0 10px;
  font-size:10px;
  color:#3a3a3a;
  line-height:1.35;
}

.btn--ghost{
  background:var(--green);
  color:#fff;
  height:28px;
  font-size:10px;
  border-radius:9px;
  padding:0 14px;
}

.partners{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.partner-card{
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
  padding:22px 18px;
  background:rgba(244,244,244,.55);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 24px rgba(0,0,0,.12);
}

/* Bootstrap Card Enhancements for Partner Cards */
.partner-card .card-img-top{
  height:200px;
  object-fit:contain;
  padding:20px;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.05));
  border-bottom:1px solid rgba(0,0,0,0.125);
}

.partner-card .card-body{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.partner-card .card-title{
  margin:0;
  color:var(--green-3);
  font-weight:900;
  font-size:1.1rem;
}

.partner-card .card-subtitle{
  margin:0;
  color:var(--green-3);
  font-weight:600;
  font-size:0.9rem;
  opacity:0.8;
}

.partner-card .card-text{
  margin:0;
  font-size:0.8rem;
  color:#2f2f2f;
  line-height:1.35;
  flex-grow:1;
}

.partner-card .btn-primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  font-weight:600;
  border-radius:0.375rem;
  padding:0.375rem 0.75rem;
  font-size:0.875rem;
  transition:all 0.15s ease-in-out;
}

.partner-card .btn-primary:hover{
  background:var(--green-4);
  border-color:var(--green-4);
  transform:translateY(-1px);
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

.partner-card__name{
  margin:0 0 4px;
  color:var(--green-3);
  font-weight:900;
  font-size:16px;
}

.partner-card__subtitle{
  margin:0 0 12px;
  color:var(--green-3);
  font-weight:600;
  font-size:14px;
  opacity:0.8;
}

.partner-card__body{
  margin:0;
  font-size:11px;
  color:#2f2f2f;
  line-height:1.35;
}

.contact-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-card{
  padding:20px;
  background:rgba(244,244,244,.55);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 24px rgba(0,0,0,.12);
  border-radius:var(--radius);
  min-height:280px;
}

.contact-card__title{
  margin:0 0 10px;
  font-weight:900;
  font-size:20px;
}

.contact-icons{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-icons .icon{
  background:var(--yellow);
  box-shadow:0 12px 18px rgba(0,0,0,.12);
}

.contact-icons .icon svg path,
.contact-icons .icon svg circle,
.contact-icons .icon svg rect{
  stroke:#0f7b3c;
  fill:none;
  stroke-width:2;
}

.form{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.input, .textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  padding:10px 12px;
  font-size:12px;
  outline:none;
  background:#fff;
}

.textarea{min-height:96px;resize:none}

.form .btn--ghost{height:32px; align-self:center; width:130px}

/* Bootstrap and Font Awesome Enhancements */
.contact-item .icon i{
  font-size:28px;
  color:#0f7b3c;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* Enhanced Hero Sections */
.hero{
  position:relative;
  height:400px;
  overflow:hidden;
  background:transparent;
}

.hero .row{
  min-height:400px;
  align-items:center;
}

.hero__text{
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
  line-height:1.4;
  letter-spacing:0.5px;
}

.hero__title{
  font-weight:900;
  margin-bottom:1.2rem;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  line-height:1.2;
  letter-spacing:0.3px;
}

.hero__subtitle{
  font-size:1.15rem;
  opacity:.95;
  margin-bottom:1.5rem;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
  line-height:1.5;
  letter-spacing:0.2px;
}

.hero__mark img{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.2));
  transition:transform 0.3s ease;
}

.hero__mark img:hover{
  transform:scale(1.05);
}

.hero--contact{
  background:linear-gradient(135deg, rgba(15,122,58,.85) 0%, rgba(11,122,58,.75) 100%);
}

/* Enhanced Bootstrap Components */
.btn{
  transition:all 0.3s ease;
  border:none;
  outline:none;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.form-control{
  border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  padding:12px;
  font-size:14px;
  transition:border-color 0.3s ease;
}

.form-control:focus{
  border-color:var(--green);
  box-shadow:0 0 0 0.25rem rgba(11,122,58,.25);
}

/* Contact Page Styles */
.hero--contact{
  position:relative;
  height:315px;
  overflow:hidden;
}

.hero--contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(9, 122, 59, .82) 0%, rgba(9, 122, 59, .45) 56%, rgba(9, 122, 59, .65) 100%),
    radial-gradient(1200px 600px at 65% 10%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(900px 500px at 30% 70%, rgba(0,0,0,.16), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)),
    var(--hero-bg);
  filter:saturate(1.05);
  background-size:auto, auto, auto, auto, cover;
  background-position:0 0, 0 0, 0 0, 0 0, center;
  background-repeat:no-repeat;
}

.contact-info{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.contact-item .icon{
  background:var(--yellow);
  box-shadow:0 8px 16px rgba(0,0,0,.1);
  flex-shrink:0;
}

.contact-item .icon svg{
  width:28px;
  height:28px;
}

.contact-text{
  font-size:13px;
  line-height:1.4;
  color:#2f2f2f;
}

.contact-text strong{
  color:var(--green-3);
  font-weight:700;
  display:block;
  margin-bottom:4px;
}

.form .btn--primary{
  background:var(--green);
  color:#fff;
  height:36px;
  width:140px;
  font-weight:700;
  border-radius:10px;
  box-shadow:0 8px 16px rgba(0,0,0,.15);
  transition:transform 0.2s, box-shadow 0.2s;
  border:none;
  cursor:pointer;
  font-size:13px;
  letter-spacing:0.3px;
}

.form .btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}

.contact-card{
  padding:24px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 24px rgba(0,0,0,.12);
  border-radius:var(--radius);
  min-height:320px;
}

.contact-card__title{
  margin:0 0 20px;
  font-weight:900;
  font-size:20px;
  color:var(--green-3);
}

@media (max-width: 980px){
  .hero__content{grid-template-columns:1fr; gap:10px}
  .hero{height:360px}
  .hero__mark{justify-content:flex-start}
  .hero__title{font-size:42px}
  .card-grid{grid-template-columns:repeat(2, 1fr)}
  .projects{grid-template-columns:repeat(2, 1fr)}
  .partners{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .brand{min-width:unset}
  .nav{gap:18px}
  .nav a.is-active::after{bottom:-8px}
}

@media (max-width: 560px){
  .topbar{height:auto; padding:12px 0; flex-direction:column; align-items:flex-start}
  .nav{flex-wrap:wrap; row-gap:10px}
  .hero{height:auto; padding-bottom:16px}
  .hero__content{padding-bottom:10px}
  .hero__title{font-size:36px}
  .card-grid{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .section__title{font-size:24px}
}