:root {
    --blackcours: rgb(55, 62, 105);
    --flashcours: rgb(101, 113, 187);
    --pastelcours: rgb(156, 165, 244);
    --lightcours: rgb(237, 238, 255);


    @font-face {
        font-family: 'Sailors';
        src: url('fonts/Sailors-1.eot');
        src: url('fonts/Sailors-1.eot?#iefix') format('embedded-opentype'),
            url('fonts/Sailors-1.woff2') format('woff2'),
            url('fonts/Sailors-1.woff') format('woff'),
            url('fonts/Sailors-1.ttf') format('truetype'),
            url('fonts/Sailors-1.svg#Sailors') format('svg');
    }
}
@media (max-width: 500px) {
.hero {
        margin-bottom: 0;
        max-width: 100%;
        background: var(--pastelcours);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .text {
        
        max-width: 100%;
        padding-left: 1rem;
       }

    .text p {        
        background: var(--blackcours);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-family: 'Mochiy Pop One';
        letter-spacing: 1px;
        text-align: center;
        font-size: 15px;
    }

    .titre {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        padding-right: 1rem;
        
    }
.suit {
    display: flex;
    flex-direction: column;  
}

.contacth {
    width: fit-content;
    border: solid;
    border-radius: 50px;
    font-family: 'Sailors';
    border-color: var(--blackcours);
    background-color: var(--pastelcours);
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin-left: auto;
    margin-right: auto;
    a{
        text-decoration: none;
        color: var(--blackcours);
    }
}
    h1 {
        background: var(--blackcours);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-family: 'Mochiy Pop One';
        letter-spacing: 1px;
        text-align: center;
    }

    .letsdraw {
        height: 20%;
        display: none;
    }
    .photopro {
              margin: auto;
              margin-bottom: 1rem;
              width: 150px;
          }
.active {
    background-color: var(--blackcours);

    a {
        color: white;
    }
}

.contacth:hover {
    background-color: var(--blackcours);

    a {
        color: white;
    }
}


    /*Les cours style*/
        .background {
            margin: 2rem;
            background-color: var(--lightcours);
            border-radius: 50px;
            padding: 1rem;
    
        }
    
        .containercours {
    
            box-sizing: border-box;
            /* Inclut le padding dans les dimensions */
        }
   
    .grid {
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: auto;
        align-items: center;
        justify-items: center;
        row-gap: 1rem;

    }

    #titrecours {
        text-decoration: none;
        margin: 2rem 2rem 2rem 2rem;
        width: fit-content;
        border: solid;
        border-radius: 50px;
        border-color: var(--blackcours);
        background-color: var(--pastelcours);
        padding: 0.5rem 1rem 0.5rem 1rem;
        
        }

    h2 {
        text-decoration: none;
        font-family: 'Mochiy Pop One';
        letter-spacing: 1px;
        text-align: center;
        color: var(--blackcours);
    }

    .textcours {
        width: 30ch;
        padding-top: 1rem;
        font-family: 'Sailors';
        letter-spacing: 1px;
        text-align: center;
        color: var(--blackcours);
        grid-column: 1;
        grid-row: 2;
    }


    .illustgroup {
    grid-column: 1;
        grid-row: 3;

    }

    .textacti {
        width: 30ch;
        padding-top: 1rem;
        font-family: 'Sailors';
        letter-spacing: 1px;
        text-align: center;
        color: var(--blackcours);
        grid-column: 1;
        grid-row: 4;
    }

    .illustacti {
    grid-column: 1;
        grid-row: 5;
    }

    .map {
grid-column: 1;
        grid-row: 7;
    }

    .textmap {
        width: 30ch;
        padding-top: 1rem;
        font-family: 'Sailors';
        letter-spacing: 1px;
        text-align: center;
        color: var(--blackcours);
        grid-row: 6;
    }

    .contact {
        text-decoration: none;
        margin: 2rem 2rem 2rem 2rem;
        width: fit-content;
        border: solid;
        border-radius: 50px;
        border-color: var(--blackcours);
        background-color: var(--pastelcours);
        padding: 0.5rem 1rem 0.5rem 1rem;
        font-family: 'Sailors';
        letter-spacing: 1px;
    }
        .carousel {
            display: flex;
            align-items: center;
            position: relative;
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
    
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
    
        .carousel-item {
            min-width: 100%;
            /* Chaque image prend un tiers de l'espace visible */
        }
    
        .carousel img {
            width: 100%;
            object-fit: cover;
            /* Ajuste l'image pour remplir le conteneur sans déformation */
        }
    
    
        button.prev,
        button.next {
            position: absolute;
            top: 30%;
            transform: translateY(-50%);
            background: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            border: aliceblue;
            cursor: pointer;
            font-size: 2.6rem;
            z-index: 50;
    
        }
    
        button.prev {
            left: 5px;
    
        }
    
        button.next {
            right: 5px;
        }
    
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
/*Portfolio*/
.containerportfolio {
    margin: 2rem 2rem 2rem 2rem;
    background-color: var(--lightcours);
    border-radius: 50px;
    padding: 2rem 2rem 1rem 2rem;
}

.gridportfolio {
    margin-top: 1rem;
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
    row-gap: 1rem;
}

.illustration {
    width: 50%;
}
}