/* ═══════════════════════════════════════════
   S3A – Responsive CSS
   Breakpoints : tablette ≤ 1024px, mobile ≤ 768px, petit mobile ≤ 480px
═══════════════════════════════════════════ */

/* ── Hamburger : caché sur desktop ── */
#hamburger-btn { display: none !important; }

/* ── Menu mobile ── */
#mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 49;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px 20px;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
#mobile-menu.open { display: flex; }

#mobile-menu a.mob-nav-link {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid #f3f4f6;
  display: block;
  transition: color .2s;
}
#mobile-menu a.mob-nav-link:hover { color: #84bd00; }
#mobile-menu a.mob-nav-link.active { color: #84bd00; }

#mobile-menu .mob-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
#mobile-menu .mob-cta-group a {
  text-align: center;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: block;
}

/* ══════════════════════════════════════
   TABLETTE (≤ 1024px)
══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Cacher nav desktop, montrer hamburger */
  #header-nav,
  #header-cta { display: none !important; }

  #hamburger-btn { display: flex !important; }

  /* Header inner padding réduit */
  .header-inner-wrap {
    padding: 0 20px !important;
  }

  /* Méga-menu désactivé */
  .mega-menu-wrap { display: none !important; }

  /* Section container */
  .s3a-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ══════════════════════════════════════
   MOBILE (≤ 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Héros ── */
  .s3a-hero-title {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
  .s3a-hero-subtitle {
    font-size: 16px !important;
    margin-bottom: 28px !important;
  }
  .s3a-hero-wrap {
    padding: 110px 20px 60px !important;
    min-height: 70vh !important;
  }

  /* ── Flex lignes → colonne ── */
  .s3a-flex-row {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: stretch !important;
  }

  /* ── Grilles 3 colonnes → 1 colonne ── */
  .s3a-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Grilles 4 colonnes → 2 colonnes ── */
  .s3a-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* ── Images section ── */
  .s3a-section-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 280px !important;
    flex-shrink: 1 !important;
  }

  /* ── Titres sections ── */
  .s3a-h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .s3a-h1 {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }

  /* ── Cartes à hauteur fixe ── */
  .s3a-card-tall {
    height: 280px !important;
  }

  /* ── Grille réalisations : réinitialise span (géré par le bloc plus bas) ── */
  #chantiers-grid > div,
  #chantiers-grid > a {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* ── Flèches carrousel ── */
  #dom-prev {
    left: 8px !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
  }
  #dom-next {
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* ── Footer : centrage complet ── */
  .s3a-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  /* Centrer le contenu de chaque cellule du footer */
  footer .s3a-footer-grid > div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  footer .s3a-footer-grid > div ul {
    align-items: center !important;
  }
  footer .s3a-footer-grid > div > div[style*="display:flex"] {
    justify-content: center !important;
  }
  /* Barre du bas */
  .s3a-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .s3a-footer-bottom p,
  .s3a-footer-bottom a {
    text-align: center !important;
  }
  .s3a-footer-bottom > div {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
  }

  /* ── Page hero bannière (sans hero-wrap) ── */
  .s3a-page-hero {
    padding: 100px 20px 50px !important;
  }
  .s3a-page-hero-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  /* ── Sections générales ── */
  .s3a-section-pad { padding: 60px 0 !important; }
  .s3a-pad { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── Réduction du padding des sections héros internes (padding-top:130px etc) ── */
  section[style*="padding:130px"],
  section[style*="padding:120px"] {
    padding-top: 100px !important;
    padding-bottom: 48px !important;
  }

  /* ── Container texte centré dans les sections ── */
  div[style*="max-width:760px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  div[style*="max-width:700px"] {
    max-width: 100% !important;
  }

  /* ── Conteneur principal des pages ── */
  div[style*="max-width:1280px"],
  div[style*="max-width:1200px"],
  div[style*="max-width:1100px"],
  div[style*="max-width:1400px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Grille 2 colonnes → 1 col ── */
  .s3a-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Section métier avec grand padding */
  .s3a-metier-section {
    padding: 48px 0 !important;
    gap: 32px !important;
  }

  /* ── Admin sidebar → toggle ── */
  #admin-sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    transition: left .3s ease !important;
    box-shadow: none !important;
  }
  #admin-sidebar.open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
  }
  #admin-main { min-width: 0 !important; }
  #admin-menu-btn { display: inline-flex !important; }
  #admin-topbar { padding: 14px 16px !important; }
  /* ── Tables admin : scroll horizontal ── */
  .card table { display: block; overflow-x: auto; white-space: nowrap; }
  .card table th,
  .card table td { padding: 10px 12px !important; font-size: 12px !important; }

  /* ── Admin main : padding réduit ── */
  #admin-main main { padding: 16px !important; gap: 14px !important; }

  /* ── Admin pages & formulaires : liste 300px + panneau → colonne ── */
  main[style*="grid-template-columns:300px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Admin logs : barre de filtres ── */
  .search-input { width: 100% !important; }

  /* ── Page login ── */
  #login-main { flex-direction: column !important; }
  #login-deco { width: 100% !important; min-height: 160px !important; padding: 32px 24px !important; }
  #login-deco .blob { display: none; }

  /* ══════════════════════════════════════
     CORRECTIFS RESPONSIVE SPÉCIFIQUES
  ══════════════════════════════════════ */

  /* ── img-zoom blocks (Qui sommes-nous, sections valeurs) ── */
  .img-zoom {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .img-zoom img {
    width: 100% !important;
    height: 240px !important;
  }

  /* ── Flex sans classe avec gap:80px (engagement vert, valeurs, zones intervention) ── */
  [style*="gap:80px"] {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  /* Réordonnancement : image en premier dans DOM → passe après le texte */
  [style*="gap:80px"] > .img-zoom:first-child {
    order: 2 !important;
  }
  [style*="gap:80px"] > div:last-child {
    order: 1 !important;
  }

  /* ── Flex CTA sans classe avec gap:72px (carte qui sommes-nous) ── */
  [style*="gap:72px"] {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  /* ── Conteneurs flex-shrink:0 des cartes Leaflet ── */
  div[style="flex-shrink:0;"],
  [style*="flex-shrink:0;position:relative"] {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* ── Cartes Leaflet — toutes les pages ── */
  #leaflet-map,
  #map-telecom,
  #map-reseaux,
  #map-particuliers {
    width: 100% !important;
    height: 360px !important;
  }

  /* ── Métier réseaux : grilles 2 colonnes inline → 1 colonne ── */
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Images fixes 420px dans les grilles métier réseaux ── */
  img[style*="height:420px"] {
    height: 220px !important;
  }

  /* ── Métier pages : colonne sticky image → normale + ordre après texte ── */
  [style*="position:sticky;top:108px"] {
    position: relative !important;
    top: auto !important;
    padding-right: 0 !important;
    order: 2 !important;
  }

  /* ── Métier pages : colonne texte → passe en premier ── */
  [style*="padding-top:8px;padding-left:64px"] {
    padding-left: 0 !important;
    padding-top: 24px !important;
    order: 1 !important;
  }

  /* ── Image haute 580px (split sticky métier) ── */
  img[style*="height:580px"] {
    height: 260px !important;
  }

  /* ── CTA sections métier (flex space-between gap:48px) → colonne ── */
  [style*="gap:48px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* ── Réalisations : barre filtres wrappable ── */
  .filter-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  div:has(> .filter-btn) {
    flex-wrap: wrap !important;
    border-radius: 14px !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* ── Sections domaines métier réseaux : margin/padding réduits ── */
  [id="eau-potable"],
  [id="vrd"],
  [id="assainissement"],
  [id="ferroviaire"] {
    padding-bottom: 48px !important;
    margin-bottom: 48px !important;
  }

  /* ══════════════════════════════════════
     NOS MÉTIERS : titre → description → photo
  ══════════════════════════════════════ */
  /* Blocs où l'image est en premier dans le DOM (bloc 02 = photo|texte) */
  .s3a-metier-section > img:first-child {
    order: 2 !important;
  }
  .s3a-metier-section > div:last-child {
    order: 1 !important;
  }

  /* ══════════════════════════════════════
     ORGANIGRAMME : layout vertical responsive
  ══════════════════════════════════════ */
  [style*="min-width:900px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ══════════════════════════════════════
     ORGANIGRAMME MOBILE — grille 2×2 avec sections
  ══════════════════════════════════════ */

  /* Conteneur principal : enlever min-width, rester centré */
  [style*="min-width:900px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Masquer les connecteurs horizontaux desktop */
  .org-child-wrap::after { display: none !important; }

  /* Colonne verticale */
  .org-children {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Chaque nœud centré, largeur limitée */
  .org-child-wrap {
    width: 100% !important;
    max-width: 280px !important;
    padding: 0 !important;
  }

  /* Carte : pleine largeur */
  .org-child-wrap > div[style*="width:220px"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Photos réduites */
  .org-child-wrap img[style*="width:70px"] {
    width: 52px !important;
    height: 52px !important;
  }

  /* ══════════════════════════════════════
     RÉALISATIONS : cartes image + texte mobile
  ══════════════════════════════════════ */
  h2[style*="font-size:48px"] {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  /* ── Avis / témoignages : 1 colonne ── */
  .s3a-temoignages-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .s3a-temoignage-card {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  /* ── Réalisations : 1 colonne, style desktop conservé ── */
  #chantiers-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .chantier-item {
    height: 260px !important;
    display: block !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .chantier-item > .img-zoom {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
  .chantier-item .card-overlay {
    position: absolute !important;
    background: transparent !important;
    padding: 16px 20px !important;
  }
  .chantier-item .card-overlay h3,
  .chantier-item .card-title-fixed {
    display: block !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  .chantier-item .card-overlay p.card-desc {
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .chantier-item .card-overlay span[style*="background:#84bd00"] {
    font-size: 10px !important;
  }
  .chantier-item .card-overlay > div[style*="gap:30px"],
  .chantier-item .card-overlay > div[style*="gap:20px"] {
    display: none !important;
  }

  /* ══════════════════════════════════════
     CONTACT : colonne droite pleine largeur
  ══════════════════════════════════════ */
  [style*="width:400px"][style*="flex-shrink:0"] {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* ── Formulaire contact : 2 col → 1 col ── */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Carousel domaines → colonne sur mobile ── */
  #dom-track > div > div {
    flex-direction: column !important;
    min-height: unset !important;
  }
  #dom-track > div > div > div:first-child {
    width: 100% !important;
    height: 220px !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  #dom-track > div > div > div:last-child {
    padding: 28px 20px !important;
  }

  /* ── Grille métiers nos-metiers → 1 colonne ── */
  .s3a-metiers-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Image location engins ── */
  img[style*="width:480px"] {
    width: 100% !important;
    height: 240px !important;
  }
}

/* ══════════════════════════════════════
   TABLETTE PORTRAIT (769px – 1024px)
══════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Hero */
  .s3a-hero-title { font-size: 46px !important; }
  .s3a-hero-subtitle { font-size: 17px !important; }
  .s3a-hero-wrap { padding: 120px 40px 70px !important; }

  /* Titres de section */
  .s3a-h2 { font-size: 32px !important; }
  h2[style*="font-size:48px"] { font-size: 36px !important; }
  h2[style*="font-size:38px"] { font-size: 30px !important; }

  /* Padding global */
  .s3a-pad,
  div[style*="max-width:1280px"],
  div[style*="max-width:1200px"],
  div[style*="max-width:1100px"],
  div[style*="max-width:1400px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Flex rows : gap réduit pour ne pas étouffer */
  [style*="gap:80px"] { gap: 48px !important; }
  [style*="gap:72px"] { gap: 48px !important; }

  /* Organigramme : empêcher le débordement horizontal */
  [style*="min-width:900px"] {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* Footer : 3 colonnes sur tablette */
  .s3a-footer-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Réalisations : 2 colonnes */
  #chantiers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
  }
  #chantiers-grid > div,
  #chantiers-grid > a {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* Page hero interne */
  .s3a-page-hero { padding: 110px 40px 60px !important; }
  .s3a-page-hero-title { font-size: 40px !important; }

  /* Sections padding */
  .s3a-section-pad { padding: 70px 0 !important; }

  /* Carte contact : limiter la largeur fixe de 400px */
  [style*="width:400px"][style*="flex-shrink:0"] {
    width: 320px !important;
  }

  /* ── Admin tablette : liste 300px → colonne ── */
  main[style*="grid-template-columns:300px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #admin-main main { padding: 20px !important; }
  .card table { display: block; overflow-x: auto; white-space: nowrap; }
  .card table th, .card table td { font-size: 13px !important; }

  /* Leaflet maps : hauteur correcte */
  #leaflet-map, #map-telecom, #map-reseaux, #map-particuliers {
    min-height: 300px !important;
  }

  /* Images à droite du texte → en dessous (qui-sommes-nous, métiers) */
  [style*="gap:80px"] {
    flex-direction: column !important;
    gap: 36px !important;
    align-items: stretch !important;
  }
  [style*="gap:80px"] > .img-zoom:first-child { order: 2 !important; }
  [style*="gap:80px"] > div:last-child { order: 1 !important; }
  [style*="gap:72px"] {
    flex-direction: column !important;
    gap: 36px !important;
    align-items: stretch !important;
  }
  .img-zoom { width: 100% !important; flex-shrink: 1 !important; }
  .img-zoom img { width: 100% !important; height: 300px !important; object-fit: cover !important; }

  /* Organigramme tablette : colonne verticale */
  [style*="min-width:900px"] {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: visible !important;
  }
  .org-child-wrap::after { display: none !important; }
  .org-children {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .org-child-wrap {
    width: 100% !important;
    max-width: 320px !important;
    padding: 0 !important;
  }
  .org-child-wrap > div[style*="width:220px"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grille métiers → 2 colonnes sur tablette */
  .s3a-metiers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════
   PETIT MOBILE (≤ 480px)
══════════════════════════════════════ */
@media (max-width: 480px) {
  .s3a-grid-4 { grid-template-columns: 1fr !important; }
  .s3a-footer-grid { grid-template-columns: 1fr !important; }

  /* Réalisations : image pleine hauteur carte */
  .chantier-item > .img-zoom { height: 100% !important; }

  /* Organigramme : images encore plus petites sur très petit écran */
  .org-child-wrap img[style*="width:70px"] { width: 40px !important; height: 40px !important; }
  .org-child-wrap > div[style*="width:220px"] { padding: 8px !important; }

  .s3a-hero-title { font-size: 28px !important; }
  .s3a-hero-wrap { padding: 100px 16px 50px !important; }

  .s3a-h2 { font-size: 24px !important; }

  /* Slide carrousel : hauteur libre (colonne image+texte) */
  #dom-track > div { height: auto !important; }
  #dom-track > div > div > div:first-child { height: 180px !important; }

  .s3a-card-tall { height: 240px !important; }

  /* ── Petit mobile : cartes Leaflet ── */
  #leaflet-map,
  #map-telecom,
  #map-reseaux,
  #map-particuliers {
    height: 300px !important;
  }

  /* ── Images img-zoom réduites ── */
  .img-zoom img { height: 200px !important; }

  /* ── Images fixes dans métier réseaux ── */
  img[style*="height:420px"] { height: 180px !important; }
  img[style*="height:580px"] { height: 220px !important; }
}

/* ══════════════════════════════════════
   TRÈS PETIT ÉCRAN — iPhone SE, etc. (≤ 320px)
══════════════════════════════════════ */
@media (max-width: 320px) {
  .s3a-hero-title { font-size: 24px !important; }
  .s3a-hero-wrap { padding: 100px 12px 44px !important; }
  .s3a-h2 { font-size: 20px !important; }

  .s3a-pad,
  div[style*="max-width:1280px"],
  div[style*="max-width:1200px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .s3a-footer-grid { grid-template-columns: 1fr !important; }

  /* Organigramme très compact */
  .org-child-wrap img[style*="width:70px"] { width: 30px !important; height: 30px !important; }
  .org-child-wrap p[style*="font-size:13px"] { font-size: 8px !important; }
  .org-child-wrap p[style*="font-size:11px"] { font-size: 7.5px !important; }
  .org-child-wrap p[style*="font-size:9px"]  { font-size: 7px !important; }

  #chantiers-grid { gap: 10px !important; }
  .chantier-item > .img-zoom { height: 100% !important; }

  #leaflet-map, #map-telecom, #map-reseaux, #map-particuliers { height: 260px !important; }
}