.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);


    .header {
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        max-width: 70%;
        text-align: center;
        margin-top: 5%;
    }


}


.content-section {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    align-items: stretch;
    /* border: 2px solid palevioletred; */
    padding: var(--space-6);
    gap: var(--space-8);
    width: 90%;

    .bigCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        flex: 1;
        /* permet à toutes les cartes de s'étirer de façon égale */
        /* border: 2px solid green; */
        padding: var(--space-6);
        /* max-width: 40%; */
        max-width: 500px;
        width: 100%;
        height: auto;
        gap: var(--space-2);
        z-index: 10;

        h3,
        h4 {
            line-height: var(--line-tight);
            color: var(--gray-800);
        }

        p {
            font-size: var(--font-size-small);
        }

        img {
            object-fit: contain;
            width: 100%;
        }
    }
}

/* ---------------- SECTION TWO COL - CONTAINER RESSOURCES ------------------- */

.section-content-two-col {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
    /* box-sizing: border-box; */
    /* border: 2px blue solid; */
}

.col-right {
    flex: 3;

    /* Avec toutes les cartes et ressources */
    .containerCards {
        display: flex;
        /* align-items: center; */
        align-items: stretch;
        justify-content: space-evenly;
        gap: var(--space-4);
        flex-wrap: wrap;
        /* border: 2px gold solid; */

        .card {
            background: white;
            border-radius: var(--radius-sm);
            padding-right: var(--space-2);
            padding-left: var(--space-2);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            /* Taille fixe */
            /* width: 30%; */
            /* height: 35%; */
            width: 30%;
            max-width: 350px;
            /* limite pour éviter qu'elles s’étirent trop */
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            text-align: center;
            gap: var(--space-0-5);
            z-index: 10;

            img {
                max-width: 100%;
                /* pour garder l'image dans le carré */
                max-height: 60px;
                object-fit: contain;
                border-radius: 0%;
                filter: grayscale(100%) contrast(1.1);
                /* filter: hue-rotate(90deg);  */
            }

            p {
                font-size: 0.9rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                /* limite à 3 lignes */
                -webkit-box-orient: vertical;
                font-size: var(--font-size-extra-small);
                font-weight: var(--weight-light);
                line-height: var(--line-tight);
            }

            &:hover,
            &:focus {
                transform: translateY(-4px);
                box-shadow: var(--shadow-sm);
                outline: 2px solid var(--primary-500);
            }
        }
    }
}

.col-left {
    flex: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* border: 1px greenyellow solid; */
    gap: var(--space-1);
    padding: var(--space-4);


    /* Avec champs de recherches */
    .heading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-4);
        /* width: 30%;  */
        /* border: 2px green solid; */

        h2 {
            line-height: var(--line-tight);
        }
    }

    .text-container {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: flex-start;
        gap: var(--space-2);
        max-width: 90%;
        /* padding-left: 6%;  */

        .search-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: var(--space-0-5);
            /* Espace entre l'icône et l'input */
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-xs);
            padding: var(--space-0-5) var(--space-0-5);
            background-color: var(--white);

            /* width: 90%; */


            label {

                display: flex;
                align-items: center;
                gap: 0.3rem;
                font-size: var(--font-size-extra-small);

                i {
                    /* icone Font Awesome */
                    color: var(--gray);
                    font-size: var(--font-size-extra-small);
                }

                .sr-only {
                    border: 0 !important;
                    clip: rect(1px, 1px, 1px, 1px) !important;
                    /* pour les anciens navigateurs */
                    -webkit-clip-path: inset(50%) !important;
                    clip-path: inset(50%) !important;
                    height: 1px !important;
                    margin: -1px !important;
                    overflow: hidden !important;
                    padding: 0 !important;
                    position: absolute !important;
                    width: 1px !important;
                    white-space: nowrap !important;
                }

            }

            input {
                /* display: block;  */
                border: none;
                outline: none;
                background-color: var(--white);
                font-size: var(--font-size-extra-small);
                flex: 1;
                min-width: 0;
                /* 💡 CORRECTION DU DÉBORDEMENT DANS FLEXBOX */

                /* Prend toute la largeur disponible */
                &::placeholder {
                    color: var(--gray-400);
                    font-size: var(--font-size-extra-small);
                }
            }
        }
    }

    .filter-labels {
        /* max-width: 90%; */
        display: flex;
        flex-wrap: wrap;
        /* border: 1px pink solid; */
        gap: var(--space-1)
    }
}




/* -------------- MEDIA QUERIES --------------------- */

/* ---------- MOBILE : max 768px ---------- */

@media (max-width: 768px) {
    .sticky-img {
        display: none;
    }

    .main-container {
        padding: var(--space-4);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-4);
        z-index: 10;
        background-color: var(--background);

        p {
            text-align: center;
        }

        a {
            font-size: var(--font-size-extra-small);
        }



        /* Contenu en colonne */
        .content-section {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-2);

            .bigCard {
                max-width: 100%;
                padding: 0;
                text-align: center;

                p {
                    font-size: var(--font-size-extra-small);
                }

                a {
                    font-size: var(--font-size-extra-small);
                }
            }
        }



        /* Deux colonnes → deviennent une seule */
        .section-content-two-col {
            flex-direction: column;
            gap: var(--space-2);
        }

        .col-left,
        .col-right {
            width: 100%;
            max-width: 100%;
            height: 100%;
            margin: 0;
            /* au cas où */
        }


        .containerCards {
            flex-direction: column;
            align-items: stretch;
            /* pour que les cartes prennent toute la largeur */
            /* gap: var(--space-2); */
            justify-content: flex-start;
            /* gap: var(--space-4); */

        }

        /* Cartes de ressources : 100% largeur */
        .containerCards .card {
            justify-content: flex-start;
            /* au lieu de space-evenly */
            gap: var(--space-4);
            width: 100%;
            height: 100%;
            min-width: 90%;


        }

        /* Menu mobile */
        .topnav #myLinks {
            display: none;
            /* caché par défaut */
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            padding: 1rem 0;
        }

        .filter-labels {
            display: none;
        }
    }
}