* {
  box-sizing: border-box;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-weight: bold;
  color: var(--text-dark);
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
}

svg {
  width: auto;
  height: auto;
}


path:hover {
  fill: #cca219;
}


path {
  transition: fill 0.3s ease;
}

text,
.point,
g,
circle {
  pointer-events: none;
}

#LA-VALETTE-DU-VAR,
#OLLIOULES,
#LA-VALETTE-DU-VAR,
#LA-MOLE,
#PUGET-SUR-ARGENS {
  fill: #b9b9b9;
}

#qualimerlogo {
  margin-left: 7rem;
  width: 80%;
}

.zones-list {
  display: block;
  margin-top: 7rem;
  margin-left: 2rem;
  max-width: 23rem;
}

.zones-list a {
  display: block;
  background: rgba(200, 220, 235, 0.6);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.625rem;
  text-decoration: none;
  color: #003b5c;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.zones-list a:hover {
  background: rgba(180, 210, 230, 0.9);
  transform: translateX(0.3125rem);
}

.styleTextAccueil {
  text-align: center;
}

.zones-list a { --tx: 0rem; transform: translateX(var(--tx)); }
.zones-list a:nth-child(1) { --tx: 5rem; }
.zones-list a:nth-child(2) { --tx: 4rem; }
.zones-list a:nth-child(3) { --tx: 3rem; }
.zones-list a:nth-child(4) { --tx: 2rem; }
.zones-list a:nth-child(5) { --tx: 1rem; }
.zones-list a:nth-child(6) { --tx: 0rem; }

.zones-list a:hover,
.zones-list a.hovered {
  background: rgba(180, 210, 230, 0.9);
  transform: translateX(calc(var(--tx) + 0.3125rem));
}

.full-width a {
  display: inline-block;
  background: rgba(200, 220, 235, 0.6);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.625rem;
  text-decoration: none;
  color: #003b5c;
  transition: all 0.2s ease;
}

.full-width {
  margin-top: -3rem;
  text-align: center;
  margin-bottom: 2rem;
  max-width: 37.5rem;
}

.full-width a:hover {
  background: rgba(180, 210, 230, 0.9);
  transform: translateX(0.3125rem);
}

.carte-est svg {
  width: 960px !important;
  height: 559px !important;
  margin-top: -17rem;
  margin-left: 25rem;
  overflow: visible;
}

.carte-ouest svg {
  width: 960px !important;
  height: 559px !important;
  margin-left: 29rem;
  margin-top: -29rem;
  overflow: visible;
}

.carte-golfe svg {
  width: 960px !important;
  height: 559px !important;
  margin-top: -25rem;
  margin-left: 20rem;
  overflow: visible;
}

.carte-toulon-est svg {
  width: -960px !important;
  height: 559px !important;
  margin-top: -30rem;
  margin-left: 34rem;
  overflow: visible;
}

.carte-toulon svg {
  width: 960px !important;
  height: 559px !important;
  margin-top: -25rem;
  margin-left: 30rem;
  overflow: visible;
}

.container, .containerg{
  display: grid;
}

/* Forme SVG */
polygon:hover,
path:hover,
polygon.hovered,
path.hovered {
  fill: #cca219;
}




/* ── Tablette (≤ 900px) ── */

@media (max-width: 900px) {
  #qualimerlogo {
    display: block;
  }

  body{
    height: auto;
    overflow: visible;
  }
  .container {
    grid-template-columns: 1fr;
    padding: 1rem;
    margin-top: -4rem;  
  }
  svg {
    overflow: hidden !important;
  }

  .containerg {
    grid-template-columns: 1fr;
    padding: 1rem;
    margin-top: -1rem;  
  }

  .carte-est,
  .carte-ouest,
  .carte-golfe,
  .carte-toulon-est,
  .carte-toulon { order: 1; }

  .zones-list { order: 2; max-width: 100%; margin-top: 1rem; margin-left: 0; }

  .zones-list a:nth-child(1),
  .zones-list a:nth-child(2),
  .zones-list a:nth-child(3),
  .zones-list a:nth-child(4),
  .zones-list a:nth-child(5),
  .zones-list a:nth-child(6) { transform: translateX(0); }

  .carte-toulon-est svg {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block;
  }

  .carte-ouest svg{
    width: 100% !important;
    height: auto !important;
    margin-top: -2rem !important;
    margin-left: 1rem !important;
    overflow: visible !important;
    margin-bottom: 3rem;
  }

  .carte-est svg {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-top: -3rem !important;
    overflow: visible !important;
    margin-bottom: 2rem !important;
  }

  .carte-golfe svg {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-left: -2rem !important;
    overflow: visible !important;
  }
  .carte-toulon svg{
    width: 100% !important;
    height: auto !important;
    margin-left: 3rem !important;
    margin-top: -7rem !important;
    display: block;
    overflow: visible !important;
  }

  #qualimerlogo {
    width: min(80%, 400px);
    margin: 1.5rem auto 0;
  }

  .full-width {
    margin-top: 0rem;
  }
}

/* ── Mobile (≤ 480px) ── */

@media (max-width: 480px) {
  .zones-list a {
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  .container{
    margin-top: auto;
  }

  .styleTextAccueil {
    font-size: 0.85rem;
    padding: 0.75rem 1rem 0;
  }
  .full-width {
  margin-top: 0rem;
  }
  body{
      height: auto;
      overflow: visible;
    }
  
    svg {
    overflow: hidden !important;
  }

}