.arguments-section {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 800px;
  padding: 80px 0;
  font-family: Inter, sans-serif;
  background: #fff;
}

.arguments-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* TITRE PLEINE LARGEUR */
.arguments-header {
    /* max-width: 900px; */
    /* margin: 0 auto 50px; */
    text-align: left;
}

.arguments-title {
    margin-bottom: 15px;
    color: #1B1F1F;
    /* Police */
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 40px;
    font-weight: 700;
}

.arguments-subtitle {
    line-height: 1.5;
    color: #1B1F1F;
    /* Police */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* CONTENU */
.arguments-container {
    display: flex;
    gap: 120px;
    max-width: 1100px;
    margin: 0 auto;
}

/* IMAGE */
.arguments-image {
    position: relative;
    transition: opacity 1.5s ease;
    flex: 1;
    margin: 10px 0px;
}

.arguments-gif-layer {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1; 
    z-index: 1;
    pointer-events: none; */

    position: absolute;
    top: 50%;
    left: 0;
    width: 90%;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

.arguments-image img {
    width: 100%;
    /* max-width: 500px; */
    /* padding-top: 30px; */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* LISTE DES PARAGRAPHES */
.arguments-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gap: 25px; */
}

/* PARAGRAPHE : minimaliste */
.arguments-tab {
    display: flex;
    gap: 15px;
    cursor: pointer;
    padding: 5px 0;
    color: #A0ADAB;
    transition: color 0.25s ease;
    border-left: 3px solid transparent;
}

.arguments-tab i {
    font-size: 20px;
    margin-right: 5px;
    color: #A0ADAB;
}

.arguments-tab:hover i {
    color: #1B1F1F;
}

.arguments-tab.active i {
    color: #1B1F1F;
}


/* TITRE */
.arguments-tab h3 {
    margin-bottom: 4px;
    /* Police */
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 500;
}

/* Texte */
.arguments-tab p {
    opacity: 0.7;
    transition: opacity .25s ease;
    color: #1B1F1F;
    /* Police */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* SURVOL */
.arguments-tab:hover {
    color: #1B1F1F;
}

.arguments-tab:hover p {
    opacity: 1;
}

/* ACTIF (noir) */
.arguments-tab.active {
    color: #1B1F1F;
    /* border-left: 3px solid #000; */
}

.arguments-tab.active p {
    opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 1050px) {
    .arguments-section {
        height: auto;             /* ne plus forcer 800px */
        padding: 60px 0;
    }

    .arguments-container {
        flex-direction: column;   /* image + texte l’un sous l’autre */
        gap: 50px;
        /* text-align: left; */
    }

    .arguments-image {
        position: relative;
        width: 100%;
        max-width: 480px;
        margin: auto;
        min-height: 420px;
    }

    .arguments-gif-layer {
        position: absolute;       /* superposition pour crossfade */
        top: 0;
        left: 50%;                /* centre horizontalement */
        transform: translateX(-50%);
        width: 100%;
        /* opacity: 0; */
        z-index: 1;
        pointer-events: none;
    }

    .arguments-image img {
        max-width: 480px;
        width: 90%;
        height: auto;
    }

    .arguments-tabs {
        width: 100%;
    }

    .arguments-title {
        font-size: 28px;
    }

    .arguments-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .arguments-tab h3 {
        font-size: 18px;
    }

    .arguments-tab p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .arguments-section {
        height: auto;
        padding: 40px 0;
    }

    .arguments-image {
        min-height: 400px;
    }

    .arguments-wrapper {
        width: 92%;
    }

    .arguments-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .arguments-subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .arguments-container {
        gap: 35px;
    }

    .arguments-image img {
        max-width: 100%;
        border-radius: 20px;
    }

    .arguments-tab {
        gap: 10px;
        padding: 8px 0;
    }

    .arguments-tab h3 {
        font-size: 16px;
        line-height: 1.3;
    }

    .arguments-tab p {
        font-size: 14px;
    }

    .arguments-tab i {
        font-size: 18px;
    }
}

@media (max-width: 400px) {
    .arguments-image {
        min-height: 310px;
    }
}

@media (max-width: 340px) {
    .arguments-image {
        min-height: 250px;
    }
}