/* ============================================
   NUTRAGILE - Section Pourquoi choisir Nutragile
   À ajouter dans custom-header.css ou fichier dédié
   ============================================ */

.nt-why {
    padding: 0;
    background-color: var(--nutragile-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.nt-why__wrapper {
    display: flex;
    align-items: stretch;
    max-width: 1536px;
    margin: 0 auto;
}

/* ---- Partie gauche : contenu ---- */
.nt-why__content {
    flex: 1;
    min-width: 0;
    padding: 64px 32px 48px 0;
    position: relative;
}

.nt-why__content::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -24px;
    width: 309.6px;
    height: 309.6px;
    background-color: var(--nutragile-light-cream);
    -webkit-mask: url(../img/libellule.svg) no-repeat center / contain;
    mask: url(../img/libellule.svg) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.nt-why__title,
.nt-why__subtitle,
.nt-why__grid {
    position: relative;
    z-index: 1;
}

.nt-why__title {
    font-family: var(--nutragile-font);
    font-weight: 400;
    font-size: 26px;
    color: var(--nutragile-link-dark);
    margin: 0 0 9.6px;
    line-height: 1.3;
}

.nt-why__subtitle {
    font-family: var(--nutragile-font-link);
    font-weight: 300;
    font-size: 14px;
    color: var(--nutragile-link-dark);
    line-height: 22px;
    margin: 0 0 44px;
    max-width: 568px;
}

/* ---- Grille 2×3 arguments ---- */
.nt-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

/* ---- Argument individuel ---- */
.nt-why__item-title {
    font-family: var(--nutragile-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--nutragile-green-bright);
    margin: 0 0 6.4px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4.8px;
}

.nt-why__icon-feuille,
.nt-why__icon-cible,
.nt-why__icon-composition,
.nt-why__icon-fabrication,
.nt-why__icon-interdit,
.nt-why__icon-plante {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    margin-right: 6.4px;
}

.nt-why__icon-feuille {
    mask: url("../img/feuille.svg") no-repeat center / contain;
    -webkit-mask: url('../img/feuille.svg') no-repeat center / contain;
}

.nt-why__icon-cible {
    mask: url("../img/cible.svg") no-repeat center / contain;
    -webkit-mask: url('../img/cible.svg') no-repeat center / contain;
}

.nt-why__icon-composition {
    mask: url("../img/composition.svg") no-repeat center / contain;
    -webkit-mask: url('../img/composition.svg') no-repeat center / contain;
}

.nt-why__icon-fabrication {
    mask: url("../img/fabrication.svg") no-repeat center / contain;
    -webkit-mask: url('../img/fabrication.svg') no-repeat center / contain;
}

.nt-why__icon-interdit {
    mask: url("../img/interdit.svg") no-repeat center / contain;
    -webkit-mask: url('../img/interdit.svg') no-repeat center / contain;
}

.nt-why__icon-plante {
    mask: url("../img/plante.svg") no-repeat center / contain;
    -webkit-mask: url('../img/plante.svg') no-repeat center / contain;
}

.nt-why__item-text {
    font-family: var(--nutragile-font-link);
    font-weight: 300;
    font-size: 14px;
    color: var(--nutragile-text-light);
    line-height: 22px;
    margin: 0;
}

/* ---- Partie droite : 2 images ---- */
.nt-why__images {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-self: stretch;
}

.nt-why__img-block {
    position: relative;
    overflow: hidden;
    display: block;
}

.nt-why__img-block img {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
}

/* ---- Bouton en haut de l'image ---- */
.nt-why__img-btn {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1200px) {
    .nt-why__grid {
        gap: 20px 24px;
    }

    .nt-why__images img {
        max-height: 400px;
    }
}

@media (max-width: 992px) {
    .nt-why__wrapper {
        flex-direction: column;
    }

    .nt-why__content {
        padding: 32px 16px;
    }

    .nt-why__images {
        width: 100%;
        height: 240px;
    }

    .nt-why__img-block img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 600px) {
    .nt-why__title {
        font-size: 18px;
    }

    .nt-why__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nt-why__images {
        height: 176px;
    }

    .nt-why__img-btn {
        font-size: 10px;
    }
}