: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');
    }
}

/*HERO style*/
@media screen  and (min-width : 1000px){
.hero {
    max-width: 100%;
    height: 100%;
    background: var(--pastelcours);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}
.logo{
    display: block;
    position: absolute;
    top:2.5rem;
    left: 5rem;
}

.text {
    max-width: 100%;
    padding-left: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;  
}
.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: 25px;
        width: 45ch;
        margin-top: 8rem;
        margin-bottom: 1rem;
    }

.titre {
    width: 100%;
    padding-top: 1%;
    margin-right: 3rem;
    
    
}
.photopro{
    margin: auto;
    margin-bottom: 1rem;
    
}

h1{
        background: var(--blackcours);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-family: 'Mochiy Pop One';
            letter-spacing: 1px;
            text-align: center;
            margin-bottom: 1rem;
}

.letsdraw{
    height: 90vh;
}
.suit{
    display: flex;
    width: 100%;

}
.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;
    
}
.active{
    background-color: var(--blackcours);
   a{color: white;
}} 

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

.background {
    margin: 2rem;
    background-color: var(--lightcours);
    border-radius: 50px;
    padding: 2rem;
    
}

.containercours {

    box-sizing: border-box;
    /* Inclut le padding dans les dimensions */
}

.grid {
    display: grid;
    width: 100%;
    /* La grille occupe toute la largeur disponible */
    grid-template-columns: 5fr 5fr;
    /* Deux colonnes égales */
    grid-template-rows: auto;
    /* Hauteur automatique des lignes */
    align-items: center;
    justify-items: center;
    row-gap: 1rem;
    /* Espacement entre les lignes */
}

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

.textcours {
    width: 60ch;
    /* Largeur fixe pour le texte */
    font-family: 'Sailors';
    letter-spacing: 1px;
    text-align: center;
    color: var(--blackcours);
    grid-column: 1;
    grid-row: 2;
}

.illustgroup {
    grid-column: 2;
    grid-row: 2;
    width: 30%;
}

.textacti {
    width: 60ch;
    font-family: 'Sailors';
    letter-spacing: 1px;
    text-align: center;
    color: var(--blackcours);
    grid-column: 2;
    grid-row: 3;
}

.illustacti {
    grid-column: 1;
    grid-row: 3;
    width: 30%;
}

.map {
    grid-column: 2;
    grid-row: 4;
    width: 45%;
}

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

.contact {
    margin: auto;
    /* Centrer le bouton contact */
    width: fit-content;
    /* Ajuste la largeur au contenu */
    border-radius: 50px;
    /* Bord arrondi */
    border-color: var(--blackcours);
    background-color: var(--pastelcours);
    padding: 0.5rem 1rem;
    /* Espacement interne */
}

.liencontact {
    font-family: 'Sailors';
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--blackcours);
}
 .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: calc(100% / 3);
    /* 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: 3fr 3fr 3fr;
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
    row-gap: 1rem;
}
.illustration{
    width:50%;
}}