/* =====================================================================
   SECTION GLOBALE
   =====================================================================*/
.etat-vehicule-section{
  padding:40px 20px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:500;
  color:#000;
}

/* =====================================================================
   SLIDER
   =====================================================================*/
.etat-vehicule-slider .swiper-slide{
  display:flex;justify-content:center;align-items:center;
}
.swiper{width:100%;height:auto;}
.swiper-button-prev,
.swiper-button-next{color:#b0c7ff;z-index:10;width:30px;height:30px;}
.swiper-pagination{display:none;}

/* =====================================================================
   GRILLE PRINCIPALE (desktop / tablette de base)
   =====================================================================*/
.etat-vehicule-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  justify-items:center;
  align-items:center;
}

/* =====================================================================
   COLONNE GAUCHE : image + hotspots
   =====================================================================*/
.etat-left{display:flex;justify-content:center;align-items:center;width:100%;}
.vue-wrapper{display:flex;flex-direction:column;align-items:center;}
.svg-container{position:relative;width:100%;max-width:350px;}
.svg-container img{width:100%;height:auto;object-fit:contain;display:block;margin:0 auto;}

/*  ➜ 2 premières diapos : on réduit le conteneur (image + hotspots) */
#etat-vehicule-slider .small-img-slide .svg-container{
  width:60%!important;max-width:60%!important;margin-inline:auto;
}
/* Hotspots un peu plus grands pour compenser la réduction */
#etat-vehicule-slider .small-img-slide .hotspot svg{width:24px;height:24px;}

/* HOTSPOTS */
.hotspot{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;}
.hotspot svg{width:20px;height:20px;display:block;}
.hotspot-defect-label{margin-top:12px;text-align:center;color:#e53935;font-weight:600;font-size:14px;}

/* =====================================================================
   NAVIGATION GLOBALE SÉPARÉE - VERSION SANS FOND
   =====================================================================*/
.vue-navigation-global {
  margin-top: 30px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.vue-navigation-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto;
}

.vue-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  border: 2px solid #ffffff;
  min-width: 70px;
  box-shadow: none;
  text-align: center;
}

.vue-nav-item:hover {
  background: rgba(227, 242, 253, 0.3);
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(176, 199, 255, 0.2);
}

.vue-nav-item.active {
  background: #b0c6ff;
  border-color: #ffffff;
  color: #2196f3;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.2);
}

.vue-nav-item .defect-warning {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: pulse 2s infinite;
}

.vue-nav-item .defect-warning svg {
  width: 20px;
  height: 20px;
  fill: #ff4444 !important;
}

.vue-nav-item .defect-warning svg path {
  fill: #ff4444 !important;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.vue-nav-item .vue-icon {
  color: inherit;
  margin-bottom: 8px;
  transition: transform 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.vue-nav-item .vue-icon svg,
.vue-nav-item .vue-icon img {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: auto;
}

.vue-nav-item:hover .vue-icon {
  transform: scale(1.1);
}

.vue-nav-item.active .vue-icon {
  color: #2196f3;
}

.vue-nav-item .vue-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  transition: all 0.2s ease;
  width: 100%;
  display: block;
}

.vue-nav-item.active .vue-label {
  color: #ffffff;
  font-weight: 700;
}

/* =====================================================================
   COLONNE DROITE : liste des éléments
   =====================================================================*/
.etat-right ul{
  list-style:none;padding:0;
  display:grid;
  grid-template-columns:repeat(2,auto);
  gap:8px 24px;
  justify-content:center;
}
.etat-right li{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;color:#000;
  display:flex;align-items:center;
}
.etat-right li::before{content:'✔️';margin-right:8px;color:#b0c6ff;}
.etat-right li.has-defect::before{content:'❌';color:red;}

/* =====================================================================
   BREAKPOINT ≥ 1024 px
   =====================================================================*/
@media (min-width:1024px){
  .etat-vehicule-grid{
    grid-template-columns:45% 55%;
    column-gap:60px;
    padding-inline:30px;
  }
  .etat-vehicule-section{padding-block:60px;}
  
  .vue-navigation-container {
    gap: 20px;
  }
  
  .vue-nav-item {
    padding: 18px 15px;
    min-width: 80px;
  }
  
  .vue-nav-item .vue-label {
    font-size: 12px;
  }
  
  .vue-nav-item .vue-icon svg,
  .vue-nav-item .vue-icon img {
    width: 70px;
  }
}

/* =====================================================================
   BREAKPOINT < 768 px
   =====================================================================*/
@media (max-width:767.98px){
  .etat-vehicule-grid{
    display:flex;flex-direction:column;gap:30px;align-items:center;
  }

  .etat-right{width:100%;display:flex;justify-content:center;}
  .etat-right ul{
    grid-template-columns:repeat(2,minmax(120px,1fr));
    margin:0 auto;justify-content:center;gap:10px 16px;
  }

  .swiper-button-prev,
  .swiper-button-next{top:30%;transform:translateY(-30%);width:30px;height:30px;}
  
  .vue-navigation-global {
    margin-top: 20px;
    padding: 0;
  }
  
  .vue-navigation-container {
    gap: 10px;
    overflow-x: auto;
    padding: 5px;
    justify-content: center;
    min-height: auto;
  }
  
  .vue-nav-item {
    padding: 12px 8px;
    min-width: 55px;
    flex-shrink: 0;
  }
  
  .vue-nav-item .vue-label {
    font-size: 10px;
  }
  
  .vue-nav-item .vue-icon svg,
  .vue-nav-item .vue-icon img {
    width: 50px;
  }
  
  .vue-nav-item .defect-warning {
    width: 18px;
    height: 18px;
    top: -3px;
    right: -3px;
  }
  
  .vue-nav-item .defect-warning svg {
    width: 18px;
    height: 18px;
  }
  
  .vue-nav-item .defect-warning svg path {
    fill: #ff4444 !important;
  }
}

/* =====================================================================
   LIGHTBOX
   =====================================================================*/
.fancybox__container,
.glightbox-container{background-color:rgba(0,0,0,0)!important;}