/* ============================================
   APN NIVELLES — INDEX.PHP — CSS 2025
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --dark:#111827;
  --dark2:#1f2937;
  --dark3:#0a0f1a;
  --gold:#f0b429;
  --gold-dark:#d9a020;
  --light:#f4f4f0;
  --text:#1a1a1a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --garage:#1A5FA8;
  --garage-dk:#0C3F72;
  --caisserie:#6B3A2A;
  --caisserie-dk:#3d1a0e;
  --cond:#1A7A4A;
  --cond-dk:#063320;
  --imp:#8B1A6B;
  --imp-dk:#3d0a30;
  --apnbois:#855f13;
  --apnbois-dk:#4b3410;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fff;
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:'Roboto Slab',serif;
  font-weight:700;
  line-height:1.2;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-bar{
  background:var(--dark2);
  padding:0.6rem 2rem;
}
.breadcrumb-bar ol{
  display:flex;
  flex-wrap:wrap;
  row-gap:0.25rem;
  gap:0.5rem;
  list-style:none;
  max-width:1620px;margin:0 auto;
  font-size:0.8rem;color:#9ca3af;
}
.breadcrumb-bar li+li::before{content:"›";margin-right:0.5rem;}
.breadcrumb-bar a{color:#9ca3af;text-decoration:none;}
.breadcrumb-bar a:hover{color:var(--gold);}
.breadcrumb-bar li:last-child{color:#d1d5db;}

/* ============================================
   HERO SECTION
   La hauteur est désormais garantie par min-height (pas par le ratio
   de l'image), pour que le texte ait toujours la place de s'afficher,
   y compris sur mobile où l'image seule serait trop basse.
   ============================================ */
.hero-section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.hero-image-wrap{
  position:relative;
  width:100%;
  min-height:640px;
  display:block;
}

.hero-image-wrap picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.hero-image-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(17,24,39,0.85) 0%,
    rgba(17,24,39,0.60) 50%,
    rgba(17,24,39,0.40) 100%
  );
  z-index:1;
}

.hero-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
}

.hero-badge{
  display:inline-block;
  background:rgba(255,255,255,0.1);
  color:#e5e7eb;
  font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;margin-bottom:1.2rem;
  border:1px solid rgba(255,255,255,0.2);
}

.hero-title{
  font-family:'Roboto Slab',serif;
  font-size:clamp(1.8rem,4vw,3rem);
  color:#fff;line-height:1.15;margin-bottom:0.9rem;
  text-shadow:0 2px 16px rgba(0,0,0,0.7);
}
.hero-title span{color:var(--gold);}

.hero-desc{
  color:#e5e7eb;
  font-size:1.125rem;
  line-height:1.8;margin-bottom:1.4rem;
  max-width:620px;
  text-shadow:0 1px 8px rgba(0,0,0,0.6);
}

.stats-row{
  display:flex;justify-content:center;
  gap:2rem;flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.stat-item .num{
  font-family:'Roboto Slab',serif;
  font-size:1.9rem;font-weight:700;
  color:var(--gold);line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.stat-item .lbl{
  font-size:1.125rem;color:#d1d5db;
  text-transform:uppercase;letter-spacing:0.06em;
  margin-top:3px;
}

.btn-hero{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:#111;
  padding:13px 30px;border-radius:8px;
  text-decoration:none;font-weight:700;font-size:0.95rem;
  transition:all 0.2s;
}
.btn-hero:hover{background:var(--gold-dark);transform:translateY(-2px);}
.btn-hero svg{stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}

.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.btn-hero-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.12);
  color:#fff;
  padding:13px 26px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid rgba(255,255,255,0.35);
  transition:all 0.2s;
}

.btn-hero-secondary:hover{
  background:rgba(255,255,255,0.24);
  transform:translateY(-2px);
}

/* ============================================
   SECTIONS COMMUNES
   ============================================ */
.section-pad{padding:5rem 2rem;}
.section-pad-sm{padding:4rem 2rem;}
.bg-light{background:var(--light);}
.bg-white{background:#fff;}
.bg-dark{background:var(--dark);}

.sect-title{text-align:center;margin-bottom:3rem;}
.sect-title h2{font-size:1.9rem;color:var(--dark);margin-bottom:0.5rem;}
.sect-title p{color:var(--muted);font-size:1.125rem;line-height:1.8;max-width:600px;margin:0 auto;}
.sect-title.light h2{color:#fff;}
.sect-title.light p{color:#9ca3af;}

.container{max-width:1100px;margin:0 auto;}

/* ============================================
   ACTIVITÉS — IMAGES CLIQUABLES SANS BORD
   ============================================ */

.activities-images-container{
  max-width:1400px;
}

.activity-image-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem;
}

.activity-image-card,
.activity-image-card-map{
  display:block;
  position:relative;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:0 !important;
  font-size:0;
  border-radius:24px;
}

.activity-main-link{
  display:block;
  position:relative;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:0 !important;
  font-size:0;
  border-radius:24px;
  color:inherit;
}

.activity-image-card img,
.activity-image-card-map img,
.activity-main-link img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  border-radius:24px;
}

.activity-image-card:hover,
.activity-image-card-map:hover{
  transform:translateY(-4px);
}

.activity-image-card:hover img,
.activity-image-card-map:hover img,
.activity-main-link:hover img{
  filter:saturate(1.05) contrast(1.03);
}

.activity-image-card:focus-visible,
.activity-main-link:focus-visible,
.apnbois-hotspot:focus-visible{
  outline:3px solid var(--gold) !important;
  outline-offset:4px;
}

/* Zone cliquable APNBois sur l'image Caisserie */
.apnbois-hotspot{
  position:absolute;
  left:5%;
  bottom:6%;
  width:90%;
  height:23%;
  z-index:5;
  border-radius:18px;
  cursor:pointer;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

.apnbois-hotspot:hover{
  background:rgba(133,95,19,0.40);
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 0 2px rgba(133,95,19,0.75) inset;
}

/* Bouton visible vers APNBois.be */
.apnbois-cta{
  position:absolute;
  right:1rem;
  bottom:1rem;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.62rem 1rem;
  border-radius:999px;
  background:rgba(133,95,19,0.96);
  color:#fff;
  font-size:0.82rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.48);
  transition:all 0.2s ease;
}

.apnbois-hotspot:hover .apnbois-cta{
  background:rgba(75,52,16,0.98);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.42);
}

.activities-note{
  margin:1.8rem auto 0;
  max-width:900px;
  color:var(--muted);
  font-size:0.92rem;
  line-height:1.7;
  text-align:center;
}

/* ============================================
   MISSION SOCIALE ETA
   ============================================ */
.eta-section{
  background:linear-gradient(135deg,#ffffff 0%,#f4f4f0 100%);
  padding:4.5rem 2rem;
  border-bottom:1px solid var(--border);
}

.eta-inner{
  display:grid;
  grid-template-columns:1.25fr 0.95fr;
  gap:2.5rem;
  align-items:center;
}

.eta-kicker{
  display:inline-block;
  color:var(--cond);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:0.8rem;
}

.eta-text h2{
  font-size:2rem;
  color:var(--dark);
  margin-bottom:1rem;
}

.eta-text p{
  color:#374151;
  font-size:1.125rem;
  line-height:1.8;
  margin-bottom:0.9rem;
}

.eta-text strong{color:var(--dark);}

.eta-link{
  display:inline-flex;
  margin-top:1rem;
  background:var(--dark);
  color:#fff;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  font-size:1.25rem;
  transition:all 0.2s;
}

.eta-link:hover{
  background:var(--dark2);
  transform:translateY(-2px);
}

.eta-card{
  background:linear-gradient(145deg,var(--dark),var(--dark2));
  color:#fff;
  padding:2rem;
  border-radius:18px;
  box-shadow:0 14px 35px rgba(0,0,0,0.18);
  border-top:5px solid var(--gold);
}

.eta-card h3{
  font-size:1.25rem;
  margin-bottom:1rem;
  color:#fff;
}

.eta-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.eta-card li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:0.8rem;
  color:#e5e7eb;
  font-size:0.94rem;
  line-height:1.55;
}

.eta-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--gold);
  font-weight:700;
}

.eta-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.7rem;
  margin-top:1.2rem;
}

.eta-mini div{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0.9rem;
  box-shadow:0 5px 16px rgba(0,0,0,0.05);
}

.eta-mini strong{
  display:block;
  color:var(--cond);
  font-family:'Roboto Slab',serif;
  font-size:1.25rem;
  margin-bottom:0.25rem;
}

.eta-mini span{
  display:block;
  color:var(--muted);
  font-size:1.125rem;
  line-height:1.35;
}

/* ============================================
   POINTS FORTS
   ============================================ */
.str-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}

.str-item{text-align:center;padding:1.2rem 0.8rem;}
.str-ico{
  width:50px;height:50px;
  margin:0 auto 0.9rem;
  background:var(--light);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.str-ico svg{
  width:22px;height:22px;
  stroke:var(--dark);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.str-item h4{
  font-family:'Roboto Slab',serif;
  font-size:1.25rem;color:var(--dark);
  margin-bottom:0.35rem;
}
.str-item p{font-size:1.125rem;color:var(--muted);line-height:1.8;}

/* ============================================
   AVIS CLIENTS
   ============================================ */
.rev-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-bottom:2rem;
}

.rev-card{
  background:#fff;border-radius:13px;
  padding:1.4rem;
  border:1px solid var(--border);
  position:relative;
  transition:transform 0.25s,box-shadow 0.25s;
}
.rev-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,0.09);}

.rev-badge{
  position:absolute;top:1rem;right:1rem;
  font-size:0.68rem;padding:3px 9px;
  border-radius:10px;font-weight:700;
}
.badge-google{background:#E8F0FE;color:#1A73E8;}
.badge-fb{background:#E8F0FF;color:#1877F2;}

.rev-stars{color:var(--gold);font-size:1rem;letter-spacing:2px;margin-bottom:0.7rem;}
.rev-text{
  font-size:1.125rem;color:#374151;
  line-height:1.8;margin-bottom:0.9rem;
  font-style:italic;
}
.rev-author{display:flex;align-items:center;gap:9px;}
.rev-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.8rem;color:#fff;
  flex-shrink:0;
}
.rev-name{font-weight:700;font-size:0.85rem;color:var(--dark);}
.rev-svc{font-size:0.72rem;color:#9ca3af;}

.rev-summary{
  background:var(--dark);border-radius:14px;
  padding:1.8rem 2rem;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}

.rs-big{
  font-family:'Roboto Slab',serif;
  font-size:3rem;color:var(--gold);line-height:1;
}
.rs-stars{color:var(--gold);font-size:1.1rem;}
.rs-cnt{color:#9ca3af;font-size:0.82rem;margin-top:3px;}

.rs-bars{flex:1;min-width:160px;}
.bar-row{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.bar-lbl{font-size:0.78rem;color:#9ca3af;width:11px;}
.bar-track{
  flex:1;height:5px;
  background:rgba(255,255,255,0.1);
  border-radius:3px;overflow:hidden;
}
.bar-fill{height:100%;border-radius:3px;background:var(--gold);}
.bar-pct{font-size:0.76rem;color:#9ca3af;width:30px;text-align:right;}

.rs-right{text-align:center;}
.rs-right p{color:#d1d5db;font-size:1.125rem;line-height:1.8;max-width:200px;}
.btn-review{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:0.8rem;
  background:var(--gold);color:#111;
  padding:9px 20px;border-radius:7px;
  text-decoration:none;font-weight:700;font-size:0.84rem;
  transition:background 0.2s;
}
.btn-review:hover{background:var(--gold-dark);}
.btn-review svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}

/* ============================================
   FAQ
   ============================================ */
.faq-inner{max-width:800px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}

.faq-q{
  width:100%;background:none;border:none;
  text-align:left;padding:1.15rem 0;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;
}
.faq-q span.faq-label{
  font-family:'Roboto Slab',serif;
  font-size:1.25rem;font-weight:700;
  color:var(--dark);line-height:1.4;
}
.faq-ico{
  width:26px;height:26px;border-radius:50%;
  background:var(--light);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background 0.2s;
}
.faq-ico svg{
  width:13px;height:13px;
  stroke:var(--dark);fill:none;stroke-width:2.5;
  transition:transform 0.3s;
}

.faq-item.open .faq-ico{background:var(--gold);}
.faq-item.open .faq-ico svg{transform:rotate(45deg);}

.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.faq-a p{
  font-size:1.125rem;color:#4b5563;
  line-height:1.8;padding-bottom:1.1rem;
}
.faq-a strong{color:var(--dark);}
.faq-item.open .faq-a{max-height:280px;}

.faq-bottom{text-align:center;margin-top:2.2rem;}
.faq-bottom p{color:var(--muted);font-size:1.125rem;line-height:1.8;margin-bottom:0.8rem;}
.btn-dark{
  background:var(--dark);color:#fff;
  padding:11px 26px;border-radius:8px;
  text-decoration:none;font-weight:700;font-size:0.88rem;
  transition:background 0.2s;
}
.btn-dark:hover{background:var(--dark2);}

/* ============================================
   ZONE GÉOGRAPHIQUE
   ============================================ */
.geo-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.geo-text h2{font-size:1.7rem;color:#fff;margin-bottom:0.9rem;}
.geo-text p{color:#9ca3af;font-size:1.125rem;line-height:1.8;margin-bottom:0.6rem;}
.geo-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:1rem;}
.geo-tags span{
  background:rgba(255,255,255,0.09);
  color:#d1d5db;font-size:0.78rem;
  padding:4px 13px;border-radius:18px;
  border:1px solid rgba(255,255,255,0.13);
}
.geo-map{
  border-radius:13px;overflow:hidden;
  height:240px;
  border:1px solid rgba(255,255,255,0.1);
}
.geo-map iframe{width:100%;height:100%;border:0;filter:grayscale(15%);}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .eta-inner{grid-template-columns:1fr;}
  .eta-mini{grid-template-columns:1fr;}
  .grid2x2{grid-template-columns:repeat(2,1fr);}
  .rev-grid{grid-template-columns:1fr;}
  .str-grid{grid-template-columns:repeat(2,1fr);}
  .geo-inner{grid-template-columns:1fr;}
  .activity-image-grid{grid-template-columns:1fr;}
  .hero-image-wrap{min-height:600px;}
  .hero-content{padding:1.5rem;}
}

@media(max-width:600px){
  .breadcrumb-bar{padding:0.5rem 1rem;}
  .breadcrumb-bar ol{font-size:0.72rem;}

  .hero-image-wrap{min-height:560px;}
  .hero-badge{font-size:0.68rem;padding:4px 12px;margin-bottom:0.9rem;}
  .hero-title{margin-bottom:0.7rem;}
  .hero-desc{margin-bottom:1.1rem;}

  .stats-row{gap:1.2rem;margin-bottom:1.4rem;}
  .stat-item .num{font-size:1.5rem;}

  .str-grid{grid-template-columns:1fr 1fr;}
  .rev-summary{flex-direction:column;text-align:center;}
  .rs-right p{max-width:none;}
  .activity-image-grid{gap:1.2rem;}

  .activity-image-card,
  .activity-image-card-map,
  .activity-main-link,
  .activity-image-card img,
  .activity-image-card-map img,
  .activity-main-link img{
    border-radius:18px;
  }

  .apnbois-hotspot{
    left:5%;
    bottom:5%;
    width:90%;
    height:20%;
    border-radius:14px;
  }

  .apnbois-cta{
    font-size:0.72rem;
    padding:0.5rem 0.72rem;
    right:0.7rem;
    bottom:0.7rem;
  }
}

@media(max-width:400px){
  .hero-image-wrap{min-height:600px;}
  .stats-row{gap:0.9rem;}
}