/* =========================================================
   PATCH — Item multi-secteurs (Automotive / Truck / Ferroviaire)
   À ajouter à la fin de expertise.css
   ========================================================= */

/* ── Couche crossfade ── */
/* Insérée par JS sous l'overlay, ne doit pas intercepter les clics */
.js-fade-layer {
  pointer-events: none;
}

/* ── Titre du détail (js-lighting-title) ─────────────────────────────────────
   En état réduit : invisible — les labels sont portés par c-lighting-sectors__zone.
   En état actif  : visible avec la même animation que les autres items.
   ─────────────────────────────────────────────────────────────────────── */
.c-structured-expertise-extended__item--lighting
  .c-expertise-extended-item__content
  h3.js-lighting-title {
  opacity: 0 !important;
  visibility: hidden !important;
}

.c-structured-expertise-extended__item--lighting.active
  .c-expertise-extended-item__content
  h3.js-lighting-title {
  opacity: 1 !important;
  visibility: visible !important;
  animation: titleAnim 1s cubic-bezier(.5,1,.89,1) forwards !important;
}

/* ── Conteneur des 3 sous-zones (état réduit) ── */
.c-lighting-sectors {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  z-index: 2;
}

/* ── Une sous-zone ── */
.c-lighting-sectors__zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, flex 0.35s ease;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.c-lighting-sectors__zone:last-child {
  border-bottom: none;
}
.c-lighting-sectors__zone:hover {
  background: rgba(255,255,255,0.07);
  flex: 1.4;
}

/* Label de sous-zone (état réduit) */
.c-lighting-sectors__zone h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  color: #fff;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.2s ease, font-size 0.2s ease;
  animation: titleAnim 1s cubic-bezier(.5,1,.89,1) forwards !important;
}

.js-lighting-link {
width: 100%;
}
/* =========================================================
   État ACTIF (expansion)
   ========================================================= */

/* Mini-menu vertical sur le côté gauche */
.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 18rem;
  height: 100%;
  background: rgba(2, 20, 58, 0.55);
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone {
  flex: 1;
  justify-content: flex-start;
  padding-left: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone:last-child {
  border-bottom: none;
}

.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone h3 {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .05rem;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}
.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone:hover h3,
.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone.is-active h3 {
  opacity: 1;
  color: #fff;
}
.c-structured-expertise-extended__item--lighting.active .c-lighting-sectors__zone.is-active {
  background: rgba(255,255,255,0.1);
  border-left: 3px solid var(--accent);
}

/* Décalage du bloc détail pour laisser place au mini-menu */
.c-structured-expertise-extended__item--lighting.active .c-expertise-extended-item__content {
  left: 20rem !important;
}
@media (min-width: 80em) {
  .c-structured-expertise-extended__item--lighting.active .c-expertise-extended-item__content {
    left: 21rem !important;
  }
}

/* ── Forcer la visibilité du texte et du lien ──────────────────────────────
   expertise.css masque p et a avec display:none / opacity:0 / visibility:hidden.
   On les rétablit pour l'item --lighting quand il est actif.
   ─────────────────────────────────────────────────────────────────────── */
.c-structured-expertise-extended__item--lighting.active
  .c-expertise-extended-item__content
  p {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: textOpacity 0.5s cubic-bezier(.5,1,.89,1) forwards !important;
  animation-delay: 0.75s !important;
  /* Repart de 0 à chaque swap de zone */
  margin: 5rem 0 0 0;
  /* max-width: 500px; */
  width: calc(100% - 8rem);
}

.c-structured-expertise-extended__item--lighting.active
  .c-expertise-extended-item__content
  a.btn {
  position: absolute !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: textOpacity 0.5s cubic-bezier(.5,1,.89,1) forwards !important;
  animation-delay: 0.85s !important;
  bottom: 15px;
  max-width: calc(100% - 12rem);
}