/* ============================================
   Layout 2 — Univers (3 cards carousel)
   Full-bleed dark background, centered container content
   ============================================ */

.a4w-home-category--layout-2 {
    --a4w-univers-bg: var(--dark-color, #34404B);
    --a4w-univers-text: #ffffff;
    /* Un alias par metier. --a4w-univers-accent les servait tous : la couleur des
       fleches (de l encre), le lisere du CTA (un contour) et le fond du CTA au
       survol (une action). --primary-color etant la couleur d ACTION, un site qui
       lui donne une valeur de fond effacait les fleches et le lisere.
       Le bloc n est pas forcement sombre : le BO pose --a4w-univers-bg en style
       inline, et les sites l eclaircissent. Ces trois roles sont donc traites en
       fond clair. */
    --a4w-univers-ink-accent: var(--accent-ink-color, #FC783D);
    --a4w-univers-outline: var(--btn-secondary-color, #FC783D);
    --a4w-univers-action-bg: var(--btn-primary-bg, #FC783D);
    --a4w-univers-on-action: var(--btn-primary-color, #fff);
    --a4w-univers-card-radius: 0px;
    --a4w-univers-arrow-size: 56px;
    --a4w-univers-arrow-offset: 60px;
    padding: 0;
}

/* Le fond est configuré en BO (styles inline posés par layout-2.tpl) : soit une image, soit un
   aplat de couleur. Sans réglage, le bloc garde l'aplat du thème (--dark-color). */
.a4w-home-category--layout-2 .a4w-home-category__bg {
    background-color: var(--a4w-univers-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 80px 0;
    box-sizing: border-box;
}

/* --a4w-univers-title est posée en style inline par layout-2.tpl quand une couleur de titre est
   configurée en BO ; sans réglage, le titre garde la couleur de texte du bloc. */
.a4w-home-category--layout-2 .a4w-home-category__title {
    color: var(--a4w-univers-title, var(--a4w-univers-text));
    text-align: center;
    margin: 0 0 15px;
    font-family: var(--font-family-title, "BT Widesonik", "Archivo Black", "Impact", sans-serif);
    font-weight: var(--title-font-weight, 800);
    font-size: var(--font-size-h2, 50px);
    line-height: 1.2;
}

.a4w-home-category--layout-2 .a4w-home-category__subtitle {
    color: var(--a4w-univers-text);
    text-align: center;
    margin: 0 0 50px;
    font-family: var(--font-family-base, "Manrope", sans-serif);
    font-weight: 500;
    font-size: var(--font-size-medium, 22px);
    line-height: 1.4;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

/* Carousel wrapper */
.a4w-univers-carousel {
    position: relative;
    width: 100%;
    /* Plafond pour que slidesPerView:3 + spaceBetween:30 donne des cartes ~400px
       (3×400 + 2×30 = 1260) au lieu de cartes étirées par Swiper sur écran large. */
    max-width: 1260px;
    margin: 0 auto;
}
/* ≤1500px : cartes ~350px (3×350 + 2×30 = 1110), comme la maquette */
@media (max-width: 1500px) {
    .a4w-univers-carousel {
        max-width: 1110px;
    }
}
/* ≤1199px (tablette, 2 cartes) : ~360px (2×360 + 20 ≈ 740), centré */
@media (max-width: 1199px) {
    .a4w-univers-carousel {
        max-width: 740px;
    }
}
/* ≤767px (mobile, 1 carte) : image réduite (carte centrée, pas pleine largeur) */
@media (max-width: 767px) {
    .a4w-univers-carousel {
        max-width: 400px;
    }
}

.a4w-univers-carousel__swiper {
    overflow: hidden;
    width: 100%;
}

/* Cards */
.a4w-univers-card {
    position: relative;
}

.a4w-univers-card__link {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Le libellé passe sous l'image (retour gumuchev2, T-0014) : en blanc sur des photos claires il
   était illisible et « Pâtes de fruits » se coupait sur trois lignes. L'image garde son carré. */
.a4w-univers-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--a4w-univers-card-radius);
    transition: opacity 0.3s ease;
}

.a4w-univers-card__link:hover .a4w-univers-card__image {
    opacity: 0.85;
}

.a4w-univers-card__link:hover .a4w-univers-card__name,
.a4w-univers-card__link:focus-visible .a4w-univers-card__name {
    text-decoration: underline;
}

.a4w-univers-card__name {
    color: var(--a4w-univers-title, var(--h2-color, #593322));
    font-weight: 600;
    font-size: var(--font-size-h4, 1.375rem);
    text-align: center;
    line-height: 1.3;
}

/* Navigation arrows — outside the cards */
.a4w-univers-carousel__prev,
.a4w-univers-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--a4w-univers-ink-accent);
    width: var(--a4w-univers-arrow-size);
    height: var(--a4w-univers-arrow-size);
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4w-univers-carousel__prev {
    left: calc(var(--a4w-univers-arrow-offset) * -1);
}

.a4w-univers-carousel__next {
    right: calc(var(--a4w-univers-arrow-offset) * -1);
}

.a4w-univers-carousel__prev:hover,
.a4w-univers-carousel__next:hover {
    opacity: 0.7;
    transform: translateY(-50%);
}

.a4w-univers-carousel__prev[aria-disabled="true"],
.a4w-univers-carousel__next[aria-disabled="true"] {
    opacity: 0.3;
    cursor: default;
}

/* CTA button */
.a4w-univers-cta-wrapper {
    text-align: center;
    margin-top: 50px;
}

.a4w-univers-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    border: 1.5px solid var(--a4w-univers-outline);
    border-radius: var(--radius-full, 999px);
    color: var(--a4w-univers-text);
    text-decoration: none;
    font-family: var(--font-family-base, "Manrope", sans-serif);
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 0;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    background: transparent;
}

/* Au survol le CTA cesse d etre un contour et devient un bouton plein : son encre
   sort du role CTA, et la bordure suit son fond (regle de bordure compagne) —
   sans quoi le lisere de contour resterait en anneau autour du fond d action. */
.a4w-univers-cta:hover {
    background: var(--a4w-univers-action-bg);
    border-color: var(--a4w-univers-action-bg);
    color: var(--a4w-univers-on-action);
    transform: translateY(-2px);
}

.a4w-univers-cta__chevron {
    font-size: 18px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 1199px) {
    .a4w-home-category--layout-2 {
        --a4w-univers-arrow-offset: 40px;
        --a4w-univers-arrow-size: 48px;
    }
    .a4w-univers-carousel__prev,
    .a4w-univers-carousel__next {
        font-size: 50px;
    }
}

@media (max-width: 767px) {
    .a4w-home-category--layout-2 {
        --a4w-univers-arrow-offset: 10px;
        --a4w-univers-arrow-size: 36px;
    }
    .a4w-home-category--layout-2 .a4w-home-category__bg {
        padding: 50px 0;
    }
    /* Tailles de titre/sous-titre laissées au thème (--font-size-h2 / --font-size-medium) : plus
       d'override en dur ici, seul l'espacement reste spécifique au bloc. */
    .a4w-home-category--layout-2 .a4w-home-category__subtitle {
        margin-bottom: 30px;
    }
    .a4w-univers-carousel__prev,
    .a4w-univers-carousel__next {
        font-size: 36px;
    }
    .a4w-univers-card__name {
        font-size: var(--font-size-h5, 1.125rem);
    }
    .a4w-univers-cta-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .a4w-home-category--layout-2 {
        --a4w-univers-arrow-offset: 4px;
        --a4w-univers-arrow-size: 32px;
    }
    .a4w-univers-carousel__prev,
    .a4w-univers-carousel__next {
        font-size: 30px;
    }
}