main {
    padding-top: 0px;
    font-family: var(--fa);
    #home {
        width: 100%;
        height: 100vh;
        background-image: url('https://basse-normandie-kyokushin.fr/assets/img/images/home.JPG'); /* Assurez-vous que l'image est dans le même dossier ou indiquez le chemin correct */
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        .content {
            z-index: 1;
            h1 {
                position: absolute;
                top: 100px;
                left: 50%;
                transform: translate(-50%);
                font-family: var(--ft);
                color: var(--lc);
                text-transform: uppercase;
                color: var(--mc);
                width: 100%;
                opacity: 1;
                transition: opacity 1s ease-in-out;
                .bienvenue {
                    font-size: 50px;
                }
                .name {
                    font-size: 60px;
                }
                .phrase {
                    font-size: 25px;
                }
            }
            .container-links {
                position: absolute;
                bottom: 50px;
                left: 50%;
                transform: translate(-50%);
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .link {
                    text-decoration: none;
                    color: var(--lc);
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 7.5px;
                    -webkit-backdrop-filter: blur(15px);
                    backdrop-filter: blur(15px);
                    padding: 7.5px 0;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    width: 300px;
                    font-family: var(--fm);
                    font-size: 22px;
                    text-transform: uppercase;
                    overflow: hidden; /* Cache le pseudo-élément de soulignement */
                    transition: background 0.3s ease;
                    &::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 0%;
                        height: 2px; /* La hauteur du soulignement */
                        background-color: var(--mc); /* Couleur du soulignement */
                        transition: width 0.3s ease; /* Animation du soulignement */
                    }
                    &:hover {
                        background: var(--lc);
                        color: var(--mc);
                        &::before {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    section {
        .diagonale {
            background-color: var(--mc);
            padding: 30px 0;
            width: 100%;
            margin-bottom: 10px;
            &.left {
                clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0 100%);
            }
            &.right {
                clip-path: polygon(100% 25%, 0% 0%, 0% 75%, 100% 100%);
            }
            h2 {
                font-size: 50px;
                font-family: var(--ft);
                text-align: center;
                color: var(--lc);
            }
        }
        margin-bottom: 10px;
    }
    #stats {
        position: relative;
        padding-top: 25px;
        .container {
            display: flex;
            justify-content: space-between;
            width: 95%;
            flex-wrap: wrap;
            margin: 0 auto;
            .bar {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 18%;
                .progress {
                    --p: 0;
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    background: conic-gradient(var(--mc) calc(var(--p) * 1%), #e6edf3 0);
                    transition: background 0.3s linear;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &::after {
                        content: "";
                        position: absolute;
                        inset: 10%;
                        background: #fff;
                        border-radius: 50%;
                    }
                    .number {
                        position: relative;
                        font-size: 50px;
                        font-family: var(--ft);
                        color: var(--mc);
                        z-index: 1;
                    }
                }
                .label {
                    margin-top: 10px;
                    font-size: 22px;
                    font-family: var(--ft);
                    color: var(--mc);
                    text-align: center;
                    text-transform: uppercase;
                }
            }
        }
    }
    #clubs {
        .container-clubs {
            display: flex;
            flex-wrap: wrap;
            gap: 50px 20px;
            justify-content: space-around;
            align-items: center;
            width: 90%;
            margin: 0 auto;
            .club {
                width: 250px;
                height: 300px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-decoration: none;
                transition: 0.3s;
                .logo {
                    width: 250px;
                    height: 250px;
                    border-radius: 50%;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: var(--lc);
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
                    overflow: hidden;
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    img {
                        width: 200px;
                        height: 200px;
                        object-fit: contain;
                        transition: 0.4s ease;
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        inset: 0;
                        border-radius: 50%;
                        border: 2px solid var(--mc);
                        transform: scale(1);
                        opacity: 0;
                        clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 50%);
                        transition: opacity 0.3s ease, clip-path 1s ease-in-out;
                    }
                }
                .name {
                    text-transform: uppercase;
                    text-align: center;
                    color: var(--mc);
                    font-family: var(--fm);
                    font-weight: bold;
                    font-size: 25px;
                    position: relative;
                    transition: 0.3s;
                    &::after {
                        content: "";
                        position: absolute;
                        bottom: -3px;
                        left: 50%;
                        width: 0;
                        height: 2px;
                        background: var(--mc);
                        transition: all 0.3s ease;
                    }
                }
                &:hover {
                    .logo {
                        transform: scale(1.1);
                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

                        &::after {
                        opacity: 1;
                        clip-path: circle(50%);
                        }
                    }
                    .name::after {
                        width: 100%;
                        left: 0;
                    }
                }
            }
        }
    }
    #news {
        position: relative;
        .container-articles {
            width: 90%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content:space-between;
            .article {
                height: 400px;
                width: 30%;
                display: flex;
                flex-direction: column;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                outline: 1px solid rgba(0, 0, 0, 0.04);
                border-radius: 5px;
                transition: 0.3s ease;
                .picture {
                    position: relative;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(0, 0, 0, 4%);
                    overflow: hidden;
                    img {
                        width: auto;
                        min-width: 0;
                        max-width: 100%;
                        height: 100%;
                        min-height: 0;
                        max-height: 300px;
                        object-fit: contain;
                        transition: 0.3s ease;
                    }
                    .date {
                        position: absolute;
                        right: 10px;
                        top: 5px;
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-transform: uppercase;
                        background: var(--mc);
                        color: var(--lc);
                        font-family: var(--fm);
                        font-weight: bold;
                        span:nth-child(1) {
                            font-size: 20px;
                        }       
                        span:nth-child(2) {
                            font-size: 20px;
                            margin-top: -5px;
                        }                  
                    }
                }
                .infos {
                    height: auto;
                    padding: 0 10px;
                    .title {
                        font-family: var(--fm);
                        text-align: center;
                        color: var(--mc);
                        font-weight: bold;
                        font-size: 22.5px;
                    }
                    .details-container {
                        overflow: hidden;
                        max-height: 1.5em;
                        transition: max-height 0.4s ease;
                    }
                    a {
                        padding: 5px 0;
                        width: 60%;
                        color: var(--lc);
                        outline: 1px solid transparent;
                        background: var(--mc);
                        font-weight: bold;
                        text-align: center;
                        cursor: pointer;
                        text-decoration: none;
                        display: block;
                        border-radius: 5px;
                        margin: 7.5px auto 10px auto;
                        transition: 0.3s ease;
                    }
                }
                &:hover {
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                    border-radius: 10px;
                    .infos a {
                        width: 80%;
                        color: var(--mc);
                        outline: 1px solid var(--mc);
                        background: var(--lc);
                        border-radius: 10px;
                    }
                }
            }
        }
        .all-button {
            position: relative;
            display: inline-block;
            width: 90%;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 0px;
            border-radius: 10px;
            background: none;
            color: var(--mc);
            font-family: var(--fm);
            font-size: 22.5px;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            outline: 1px solid var(--mc);
            overflow: hidden;
            cursor: pointer;
            transition: color 0.4s;
            span {
                position: relative;
                z-index: 1; 
                transition: color 0.4s;
            }
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0; 
                background-color: var(--mc);
                z-index: 0;
                transition: width 0.4s ease;
            }
            &:hover {
                span {
                color: white; 
                }
                &::before {
                    width: 100%; 
                }
            }
        }
    }
    #events {
        .slider-wrapper {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            .slider-box {
                width: 90%;
                overflow: hidden;
                .sliders {
                    display: flex;
                    transition: transform 0.3s linear;
                    scroll-behavior: smooth;
                    .event-card {
                        flex: 0 0 300px;
                        perspective: 1000px;
                        padding: 10px;
                        .event-inner {
                            position: relative;
                            width: 100%;
                            height: 400px;
                            transform-style: preserve-3d;
                            transition: transform 0.5s;
                            .event-front, .event-back {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                backface-visibility: hidden;
                                border-radius: 15px;
                                overflow: hidden;
                            }
                            .event-front img {
                                width: 100%;
                                height: 100%;
                                object-fit:cover;
                                border-radius: 15px;
                            }
                            .event-back {
                                background: #ffffff;
                                color: #333;
                                transform: rotateY(180deg);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                text-align: center;
                                box-shadow: 0 4px 10px rgba(0,0,0,0.2);
                                .event-info {
                                    padding: 15px;
                                    width: 100%;
                                    .flex-text {
                                        display: flex;
                                        align-items: center;
                                        gap: 7.5px;
                                        color: var(--mc);
                                        margin-bottom: 5px;
                                    }
                                    .btn-see {
                                        display: inline-block;
                                        width: 80%;
                                        margin-top: 40px;
                                        padding: 5px 7.5px;
                                        background: var(--mc);
                                        color: var(--lc);
                                        border-radius: 8px;
                                        text-decoration: none;
                                        transition: 0.3s;
                                        outline: 1px solid transparent;
                                        &:hover {
                                            background: var(--lc);
                                            color: var(--mc);
                                            outline: 1px solid var(--mc);
                                        }
                                    }
                                }
                            }
                        }
                        &:hover .event-inner {
                            transform: rotateY(180deg);
                        }
                    }
                }
            }
        }
        .all-button {
            position: relative;
            display: inline-block;
            width: 90%;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 0px;
            border-radius: 10px;
            background: none;
            color: var(--mc);
            font-family: var(--fm);
            font-size: 22.5px;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            outline: 1px solid var(--mc);
            overflow: hidden;
            cursor: pointer;
            transition: color 0.4s;
            span {
                position: relative;
                z-index: 1; 
                transition: color 0.4s;
            }
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0; 
                background-color: var(--mc);
                z-index: 0;
                transition: width 0.4s ease;
            }
            &:hover {
                span {
                color: white; 
                }
                &::before {
                    width: 100%; 
                }
            }
        }
    }
    #team {
        .container-box {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            .box {
                width: 50%;
                display: flex;
                gap: 10px;
                &:nth-child(1) {
                    .content {
                        padding-right: 30px;
                        border-right: 2px solid var(--mc);
                        h3 {
                            text-align: left;
                        }
                    }
                }
                &:nth-child(2) {
                    flex-direction: row-reverse;
                    .content {
                        padding-left: 30px;
                        border-left: 2px solid var(--mc);
                        h3 {
                            text-align: right;
                        }
                    }
                }
                .picture {
                    position: relative;
                    width: 250px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        height: auto;
                        max-height: 350px;
                        width: auto;
                    }
                }
                .content {
                    position: relative;
                    flex: 1;
                    h3 {
                        text-transform: uppercase;
                        font-family: var(--ft);
                        font-size: 18px;
                        color: var(--mc);
                    }
                    .text {
                        text-align: justify;
                    }
                    a {
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%);
                        width: 200px;
                        background: var(--mc);
                        color: var(--lc);
                        outline: 1px solid transparent;
                        padding: 5px 0;
                        border-radius: 10px;
                        text-decoration: none;
                        text-align: center;
                        margin-top: 30px;
                        transition: 0.2s;
                        &:hover {
                            width: 200px;
                            background: var(--lc);
                            color: var(--mc);
                            outline: 1px solid var(--mc);
                            border-radius: 20px;
                        }
                    }
                }
            }
        }
    }
    #sponsors {
       
        .slider-sponsors-wrapper {
            overflow: hidden;
            position: relative;
            background-color: #fff;
            padding: 20px 0;
            margin-top: 30px;
            .slider-sponsors-track {
                display: flex;
                width: fit-content;
                animation: scrollSponsors 90s linear infinite;
                .slider-sponsors {
                    display: flex;
                    gap: 50px;
                    align-items: center;
                    padding-right: 50px;
                    img {
                        height: 100px;
                        width: auto;
                        object-fit: contain;
                        transition: transform 0.3s ease;
                        &:hover {
                            transform: scale(1.1);
                        }
                    }
                }
            }
            
        }
        h2 {
            color: var(--mc);
            text-align: center;
            text-transform: uppercase;
            margin-bottom: 10px;
            margin-top: 20px;
        }
        .sponsors-grid-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem; /* espace entre les liens */
            width: 95%;
            margin: 0 auto;
            a {
                flex: 1 1 auto; /* s’étend pour remplir la ligne */
                min-width: 20%; /* optionnel : évite des boutons trop petits */
                box-sizing: border-box;
                text-align: center;
                text-decoration: none;
                background: var(--mc);
                color: var(--lc);
                outline: 1px solid transparent;
                padding: 7.5px 15px;
                border-radius: 5px;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.2s;
                &:hover {
                    background: var(--lc);
                    color: var(--mc);
                    outline: 1px solid var(--mc);
                }
            }
        }  
    }
}

@media (max-width: 768px) {
    main {
        #home {
            .content {
                h1 {
                    top: 75px;
                    .bienvenue {
                        font-size: 35px;
                    }
                    .name {
                        font-size: 45px;
                    }
                    .phrase {
                        font-size: 20px;
                    }
                }
                .container-links {
                    flex-direction: column;
                    justify-content: center;
                    gap: 20px;
                    .link {
                        width: 80%;
                        font-size: 20px;
                    }
                }
            }
        }
        section {
            .diagonale {
                &.left {
                    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);
                }
                &.right {
                    clip-path: polygon(100% 15%, 0% 0%, 0% 85%, 100% 100%);
                }
                h2 {
                    font-size: 40px;
                }
            }
            margin-bottom: 15px;
        }
        #stats {
            .container {
                flex-direction: column;
                gap: 35px;
                .bar {
                    width: 100%;
                }
            }
        }
        #clubs .container-clubs {
            gap: 30px;
        }
        #news {
            position: relative;
            .container-articles {
                flex-direction: column;
                gap: 30px;
                .article {
                    width: 100%;
                    .picture {
                        .date {
                            right: 7.5px;
                            top: 7.6px;                
                        }
                    }
                }
            }
            margin-bottom: 50px;
        }
        #events {
            .slider-box {
                width: 90%;
                max-width: 90%;
                .sliders {
                    .event-slide {
                        flex-direction: column;
                        .event-picture {
                            width: 100%;
                        }
                        .event-content {
                            width: 100%;
                            padding: 2px 7.5px;
                            .event-title {
                                font-size: 20px;
                                img {
                                    width: 25px;
                                }
                            }
                            .countdown-container {
                                h3 {
                                    font-size: 22.5px;
                                }
                                .countdown-part {
                                    .value {
                                        font-size: 40px;
                                    }
                                    .label {
                                        font-size: 20px;

                                    }
                                }
                            }

                        }
                    }
                }
            }
        }
        #team {
            .container-box {
                width: 90%;
                flex-direction: column;
                gap: 100px;
                .box {
                    width: 100%;
                    flex-direction: column;
                    &:nth-child(1) {
                        .content {
                            padding-right: 0px;
                            border-right: none;
                            h3 {
                                text-align: center;
                            }
                        }
                    }
                    &:nth-child(2) {
                        flex-direction: column;
                        .content {
                            padding-left: 0;
                            border-left: none;
                            h3 {
                                text-align: center;
                            }
                        }
                        margin-bottom: 60px;
                    }
                    .picture {
                        width: 100%;
                    }
                    .content {
                        position: relative;
                        flex: 1;
                        a {
                            width: 80%;
                            margin-top: 30px;
                            &:hover {
                                width: 80%;
                            }
                        }
                    }
                }
            }
        }
    }
}