/* ========================= */
/* BESOINS CHIEN SECTION */
/* ========================= */
.besoins-chien {
    padding: var(--section-padding);
    background: var(--section-dark-bg);
}


/* ========================= */
/* CONTAINER */
/* ========================= */
.besoins-container {
    width: var(--container-width);
    max-width: 1100px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}


/* ========================= */
/* INTRO LEFT */
/* ========================= */
.besoins-intro {
    flex: 0 1 480px;
}

.besoins-intro span {
    display: block;
    margin-bottom: 14px;
    color: var(--section-dark-hover);
    /*font-size: 0.9rem;*/
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.besoins-intro h2 {
    color: var(--section-dark-text);
    font-family: var(--font-heading);
    /*font-size: 40px;*/
    line-height: 1.05;
    font-weight: 800;
}

/* IMAGE SOUS LE TITRE */
.besoins-intro::after {
    content: "";
    display: block;

    width: min(100%, 420px);
    height: clamp(260px, 34vw, 420px);

    margin-top: 42px;

    border-radius: 28px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
        url("/images/chien_montagne.png") center / cover no-repeat;

    box-shadow: var(--shadow-soft);
}


/* ========================= */
/* LIST RIGHT */
/* ========================= */
.besoins-list {
    flex: 1;
    max-width: 650px;

    display: flex;
    flex-direction: column;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}


/* ========================= */
/* ITEM */
/* ========================= */
.besoin {
    display: flex;
    align-items: flex-start;
    gap: 24px;

    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    transition: var(--transition-flows);
}

.besoin:hover {
    transform: translateX(8px);
}

.besoin > span {
    flex: 0 0 42px;
    color: var(--section-dark-hover);
    font-family: var(--font-heading);
    /*font-size: 1rem;*/
    font-weight: 700;
}

.besoin h3 {
    margin-bottom: 8px;
    color: var(--section-dark-text);
    font-family: var(--font-heading);
    /*font-size: 1.35rem;*/
    font-weight: 700;
}

.besoin p {
    max-width: 520px;
    margin: 0;
    color: var(--section-dark-muted);
    font-family: var(--font-body);
    /*font-size: 1rem;*/
    line-height: 1.7;
}