/* Carrousel catégorie vtjcatslider — bloc hero */
.vtjcatslider {
    position: relative;
    width: 100%;
    margin: 0 0 1.5rem;
    overflow: hidden;
}

.vtjcatslider__viewport {
    overflow: hidden;
    width: 100%;
}

.vtjcatslider__track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}

.vtjcatslider__slide {
    flex: 0 0 100%;
    min-width: 100%;
}

/* Effet « fondu » : tous les slides sont empilés dans la même cellule de
   grille. La grille se cale sur le slide le plus haut (comme le mode
   glissement), ce qui évite les sauts de hauteur. */
.vtjcatslider--fade .vtjcatslider__track {
    display: grid;
    transform: none !important;
}

.vtjcatslider--fade .vtjcatslider__slide {
    grid-area: 1 / 1; /* tous les slides superposés au même endroit */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.vtjcatslider--fade .vtjcatslider__slide.is-active {
    opacity: 1;
    z-index: 1;
}

/* Premier affichage sans animation (slide visible instantanément au chargement). */
.vtjcatslider--no-anim .vtjcatslider__slide,
.vtjcatslider--no-anim .vtjcatslider__track {
    transition: none !important;
}

.vtjcatslider__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vtjcatslider__media {
    position: relative;
    /* Ratio calé sur les images de catégorie (2400×951 ≈ 2,52:1) pour une
       hauteur de bandeau stable quelle que soit l'image fournie. */
    aspect-ratio: 2400 / 951;
    overflow: hidden;
}

.vtjcatslider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texte superposé (titre + description) — au-dessus du voile (::before z-index 1) */
.vtjcatslider__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.vtjcatslider__content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    color: #fff;
}

.vtjcatslider__title {
    margin: 0 0 0.5rem;
    font-size: 2.8rem;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
}

.vtjcatslider__desc {
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.vtjcatslider__desc p {
    margin: 0 0 0.5rem;
}

.vtjcatslider__desc p:last-child {
    margin-bottom: 0;
}

/* Alignement du titre (réglable par slide). Desktop par défaut. */
.vtjcatslider__title--align-left {
    text-align: left;
}

.vtjcatslider__title--align-center {
    text-align: center;
}

.vtjcatslider__title--align-right {
    text-align: right;
}

/* Alignement mobile spécifique (n'est présent que s'il diffère du desktop) ;
   placé après les règles desktop pour l'emporter en dessous de 768px. */
@media (max-width: 767px) {
    .vtjcatslider__title--malign-left {
        text-align: left;
    }

    .vtjcatslider__title--malign-center {
        text-align: center;
    }

    .vtjcatslider__title--malign-right {
        text-align: right;
    }
}

/* Flèches */
.vtjcatslider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.vtjcatslider__nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Pas de contour au clic/tap (on conserve l'outline clavier via :focus-visible). */
.vtjcatslider__nav,
.vtjcatslider__dot {
    -webkit-tap-highlight-color: transparent;
}

.vtjcatslider__nav:focus,
.vtjcatslider__dot:focus {
    outline: none;
}

.vtjcatslider__nav:focus:not(:focus-visible),
.vtjcatslider__dot:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.vtjcatslider__nav:focus-visible,
.vtjcatslider__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.vtjcatslider__nav--prev {
    left: 12px;
}

.vtjcatslider__nav--next {
    right: 12px;
}

/* Pagination (dots) */
.vtjcatslider__dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.vtjcatslider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s ease;
}

.vtjcatslider__dot--active {
    background: #fff;
}

@media (max-width: 991px) {
    .vtjcatslider__title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .vtjcatslider__content {
        padding: 0 20px;
    }

    .vtjcatslider__title {
        font-size: 1.5rem;
    }

    .vtjcatslider__desc {
        font-size: 0.95rem;
    }

    .vtjcatslider__nav {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

}

/* Quand Swiper du thème prend le relais */
.vtjcatslider.swiper .vtjcatslider__track {
    transition: none;
}

/* ------------------------------------------------------------------
 * Intégration thème PLM (child_TheStyle) — BANDEAU TOTAL.
 * Le carrousel devient le fond de TOUT le #header (comme l'image de la
 * page d'accueil) : positionné en absolu, il couvre le header entier ;
 * le contenu (logo, menu, fil d'ariane) repasse au-dessus grâce à un
 * z-index négatif sur le carrousel. Ces règles ne ciblent que ce thème
 * (#category #header) ; ailleurs ces sélecteurs n'existent pas → aucun
 * effet de bord.
 * ------------------------------------------------------------------ */

/* #header devient le contexte d'empilement + de positionnement du carrousel. */
#category #header {
    position: relative;
    z-index: 0;
}

/* Le carrousel couvre tout le header, DERRIÈRE le contenu (z-index négatif :
   il passe au-dessus du fond du #header mais sous le logo/menu/fil d'ariane). */
#category #header .vtjcatslider--full {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: -1;
}

/* Les slides remplissent toute la hauteur du header (min-height du thème),
   au lieu du ratio 2400/951 utilisé en rendu autonome. */
#category #header .vtjcatslider--full .vtjcatslider__viewport,
#category #header .vtjcatslider--full .vtjcatslider__track,
#category #header .vtjcatslider--full .vtjcatslider__slide,
#category #header .vtjcatslider--full .vtjcatslider__link,
#category #header .vtjcatslider--full .vtjcatslider__media {
    height: 100%;
}

#category #header .vtjcatslider--full .vtjcatslider__media {
    aspect-ratio: auto;
}

/* Fil d'ariane / description d'origine vides : masqués (repli géré côté hook).
   Conservés s'ils contiennent des boutons (catégories Location / Réparation). */
#category #header .page-description:not(:has(a)):not(:has(button)) {
    display: none;
}