@use "placeholders";
@use "variables";

.section {
    @extend %contents;
    gap: 4rem;
    padding: 2rem 1rem;
    margin-top: 2rem;

    @media screen and (min-width: variables.$breakpoint) {
        gap: 7rem;
        padding: 0;
        margin-top: 5rem;

        &:not(:first-child) {
            margin-top: 10rem;
        }
    }

    &__list {
        @extend %list;
    }

    & strong {
        font-weight: bold;
    }

    & em {
        font-style: italic;
    }

    & iframe, video {
        height: auto;
        aspect-ratio: 16 / 9;
        border: none;
        border-radius: .5rem;
        width: 100%;

        @media screen and (min-width: variables.$breakpoint) {
            width: 560px;
            height: 315px;
        }
    }

    &__link {
        @extend %link;
    }

    &__image {
        width: 100%;
        border-radius: .5rem;
        margin: auto;

        &:not(:last-child) {
            margin-bottom: 1.5rem;
        }
    }

    &__title {
        @extend %section-title;
    }

    .subsection {

        display: grid;

        &__title {
            @extend %small-title;
        }

        @media screen and (min-width: variables.$breakpoint) {
            &__title-grid {
                grid-column: span 2 / span 2;
                grid-column-start: 1;
                grid-row-start: 1;
            }
        }

        &__quote {
            @extend %quote;
            margin-top: 2rem;

            @media screen and (min-width: variables.$breakpoint) {
                width: 25vw;
                margin-top: 0;
                margin-left: 3rem;
                grid-row: span 1;
                grid-column-start: 2;
                grid-row-start: 2;

                &.left {
                    grid-column-start: 1;
                    margin-left: 0;
                    margin-right: 3rem;
                }
            }
        }

        &__text {
            & a {
                @extend %link;
            }
        }
    }
}

.home {

    &__pilars,
    &__axes {

        &__list {
            display: flex;
            gap: 5rem;
            justify-content: center;
            flex-direction: column;
            width: fit-content;
            margin: auto;

            @media screen and (min-width: variables.$breakpoint) {
                flex-direction: row;
            }
        }

        &__card {
            @extend %card;

            @media screen and (min-width: variables.$breakpoint) {
                flex: 1 1 0;
            }

            &:hover {
                transform: translateY(-10px);
                box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease-in-out;
            }

            & svg,
            .fi {
                width: 3rem;
                height: 3rem;
                margin: 0 auto 1.5rem auto;
                color: #d76942;
            }
        }

        &__link {
            display: flex;
            flex-direction: column;
            max-width: 22rem;
            aspect-ratio: 1.1 / 1;
            padding: 1rem;
            scroll-margin-top: 100px;
        }
    }

    &__counter {
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-direction: column;
        margin: 2rem 0;

        @media screen and (min-width: variables.$breakpoint) {
            flex-direction: row;
            gap: 5rem;
            margin: 5rem 0;
        }

        &__item {
            text-align: center;
        }

        &__icon {
            width: max-content;
            background-color: #f8eee9;
            padding: 1rem;
            border-radius: 1rem;
            margin: 0 auto 1.5rem auto;

            & svg {
                color: #d76942;
                width: 2.5rem;
                height: 2.5rem;
            }
        }

        &__number {
            font-family: variables.$fancy-font;
            font-size: clamp(2.25rem, 2.1rem + 0.75vw, 3rem);
            ;
            font-weight: bold;
            color: #30251d;
            margin: 0 auto 1rem auto;

        }

        &__plus {
            font-size: 3rem;
            color: #d76942;
        }
    }
}

.mission {

    &__header-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        @media screen and (min-width: variables.$breakpoint) {
            flex-direction: row;
            align-items: center;

            & * {
                flex: 1;
            }
        }
    }

    &__quote {

        @media screen and (min-width: variables.$breakpoint) {
            margin-left: 1.5rem;
        }
    }

    &__list {
        @extend %list;
    }
}

.values,
.history {

    &__list {
        @extend %list;
    }
}

.president {
    display: block;
    margin: 0 auto;
    width: 100%;

    & .team__card {
        display: block;
        max-width: 25rem;
        margin: 0 auto;
        aspect-ratio: 1 / 1.5;

        &:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
        }
    }
}


.team {

    &__board {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    &__container {
        display: grid;
        gap: 3rem;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        width: 100%;
    }

    &__card {
        @extend %card;
        width: 100%;
        aspect-ratio: 1 / 1.8;


        & img {
            aspect-ratio: 1 / 1.1;
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: top;
            background-color: #cbb1b2;
        }

        &__text {
            padding: 1rem;
        }

        &__name {
            font-family: variables.$fancy-font;
            font-size: 1.2rem;
            font-weight: bold;
            color: #30251d;
            padding-bottom: 1rem;
        }
    }
}

.eulogy__image {
    width: 100%;
    border-radius: .5rem;

    @media screen and (min-width: variables.$breakpoint) {
        width: 20vw;
        margin-top: 0;
        margin-left: 3rem;
        grid-row: span 1;
        grid-column-start: 2;
        grid-row-start: 2;

        &.left {
            grid-column-start: 1;
            margin-left: 0;
            margin-right: 3rem;
        }
    }
}

.reports {
    &__list {
        position: relative;
        margin: 0 2rem;

        @media screen and (min-width: variables.$breakpoint) {
            width: 70%;
            margin: auto;
        }
    }

    &__list-item {
        margin-bottom: 2rem;
        position: relative;
    }

    &__list-bullet {
        position: relative;
        z-index: 1;
        float: left;
        margin-right: 20px;
        background: #d76942;
        height: 14px;
        width: 14px;
        border-radius: 100px;
    }

    &__list-text {
        display: flex;
        flex-direction: column;
        vertical-align: middle;

        & img {
            width: 7rem;
        }

        @media screen and (min-width: variables.$breakpoint) {
            padding-left: 2rem;
            flex-direction: row;
            gap: 2rem;

            & img {
                width: 10rem;
            }
        }
    }

    & .line {
        background: #e7e0da;
        z-index: 0;
        width: 1px;
        height: 100%;
        position: absolute;
        left: 7px;
    }
}

.actions {

    &__list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    &__speech__list {
        @extend %list;
    }

    &__partners__list {
        @extend %list;

        &>* {
            margin-bottom: 1rem;
        }
    }

    &__item {
        scroll-margin-top: 4rem;

        &:not(:last-child) {
            margin-bottom: 1rem;
        }

        p:not(:last-child) {
            padding-bottom: 1rem;
        }
    }

    &__title {
        color: #d76942;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
    }
}

.training {

    &__presentation,
    &__audience,
    &__goals,
    &__axes {

        &__list {
            @extend %list;
        }
    }

}

.resources {

    &__videos {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;

        @media screen and (min-width: variables.$breakpoint) {
            flex-direction: row;
        }

        & iframe,
        video, .youtube-placeholder {
            height: auto;
            border: none;
            width: 100%;

            @media screen and (min-width: variables.$breakpoint) {
                width: 560px;
                height: 315px;
            }
        }

        & .youtube-placeholder {
            position: relative;
            display: inline-block;
            cursor: pointer;

            img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: .5rem;
                aspect-ratio: 16 / 9;
            }

            &__play {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: 80px;
                height: 80px;
                border: none;
                border-radius: 50%;

                background: transparent;
                // color: white;
                font-size: 2rem;
                cursor: pointer;

                // transition: background-color .2s ease,
                //             transform .2s ease;
            }

            // &:hover &__play {
            //     background: #ff0000; // Rouge YouTube
            //     transform: translate(-50%, -50%) scale(1.1);
            // }
        }
    }

    &__galleries {
        // display: grid;
        // grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    &__gallery {
        border: #d76942 solid 1px;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        position: relative;

        &.collapsed {
            max-height: 300px; // Ajustez cette valeur selon la hauteur de la première ligne
            overflow: hidden;

            & .resources__gallery__toggle {
                position: absolute; // Position absolue pour placer le bouton
                bottom: 1rem; // Place le bouton en bas de la galerie
                left: 50%; // Centre horizontalement
                transform: translateX(-50%); // Ajuste pour centrer parfaitement
                display: inline-block;
                padding: 0.5rem 1rem;
                z-index: 1; // Assure que le bouton est au-dessus de la galerie
                margin: 0;
            }

            &::after {
                background: linear-gradient(to top, #fbfaf8 90%, transparent);
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 4rem;
                width: 100%;
            }
        }

        &__toggle {
            @extend %button;
            padding: 0.5rem 1rem;
            display: block;
            margin: 1rem auto 1rem auto;
        }

        &__title {
            @extend %title;
        }
    }

    .youtube-placeholder__notice {
        margin-bottom: 1rem;
    }

    &__images {

        @media screen and (min-width: variables.$breakpoint) {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(4, minmax(250px, 1fr));
            //   width: 50%;
        }

        & img {
            width: 100%;
            height: auto;
            border-radius: .2rem;
            object-fit: cover;
            object-position: top;
        }
    }

    &__visuals {

        display: flex;
        flex-direction: column;
        margin: 2rem;

        & img {
            width: 100%;
        }

        @media screen and (min-width: variables.$breakpoint) {
            &-content {
                display: grid;
                width: fit-content;
                gap: 1.5rem;
            }

            &-name {
                grid-column: span 2 / span 2;
            }

            &-image {
                width: 20rem;
                grid-row-start: 2;
            }

            &-description {
                grid-row-start: 2;
            }
        }
    }
}

.resources__gallery--expanded .resources__images {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.contact {
    &__info {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        @media screen and (min-width: variables.$breakpoint) {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    &__link {
        @extend %link;
    }
}