:root{
    --primary-color : #8C52FF
    
}
@import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400..800&display=swap');

.primary-color{
    color: var(--primary-color);
}
a{
    font-family: "Baloo Paaji 2", sans-serif;
}

body{
    margin: 0;
}

img{
    width: 150px;
}

p, button, li{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

.blob{
    width: 650px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.container{
    margin-top: 1em;
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-areas: "header header"
                        " s1 i1 "
                        " i2 s2 "
                        " s3 s3 "
                        " s4 i4 "
                        "i6 s6 ";
    row-gap: 5em;
    justify-items: center;
}

.section-card, .section-image{
    width: 70%;
}

header{
    background-color: var(--primary-color);
    width: 95%;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 50px;
    grid-area: header;
    justify-self: center;
}

header>nav{
    width: 50%;
}


header>nav>ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
}

header>nav>ul>li>a{
    color: #ffff;
    font-weight: bold;
    text-decoration: none;
}

.logo{
    display: flex;
    column-gap: 1em;
}

.logo>img{
    max-width: 100px;
}

.logo>.title{
    width: 200px;
    max-width: none;
}


.section-1{
    grid-area: s1;
    animation: slide-in 1.5s ease-out forwards; /* Animation d'entrée */
}

.download-image{
display: flex;
justify-content: space-evenly;
}

.download-image>img{
}

.section-image{
display: flex;
justify-content: center;
align-items: center;
}

.image-1{
grid-area: i1;
}

.image-1>img{
width: 600px;

}

.image-2{
grid-area: i2;
}

.image-2 > img{
width: 120%;

}

.section-2{
grid-area: s2;
}

.section-3{
    grid-area: s3;
    width: 100%;
    height: 1750px;
    position: relative;
    display: flex;
    justify-items: center;
    flex-direction: column;
    background-image: url(/resources/images/background-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: repeat-x;
    justify-content: center;
    align-items: center;
}

.section-3 > img{
    width: 100%;
}

.section-3 > div{
    width: 40%;
    padding-bottom: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-3 > div > h2, .section-3 > div > p{
    color: white;
}

.section-3 > div > form{
    display: flex;
    justify-content: center;
    column-gap: 1em;
}

.section-3 > div > form > input{
    border-radius: 20px ;
    padding: 1em;
    border: 1px gray solid;
    column-gap: 0;

}


.section-4 > h2{
    font-size: 2.4em; 
}

.section-4 > img{
    width: 100%;; 
}


.section-4{
    grid-area: s4;
}

.image-3{
    grid-area: i4;
}

.image-3>img{
    width: 700px;
}

.section-5{
    grid-area: s5;
    display: flex;
    justify-content: center;
    background-image: url(images/yellow\ red\ cercle.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 80vh;
}

.section-5 > *{
    width: 51%;
}


.image-4{
    grid-area: i6;
}

.image-4>img{
    width: 600px;
}

.section-6{
    grid-area: s6;
}


h1{
    font-family: "Baloo Paaji 2", sans-serif;
    font-size: 2.75em;
    color: var(--primary-color);
    font-weight: 800;
    line-height: 1.1;
}

h2{
    font-family: "Baloo Paaji 2", sans-serif;
    font-size: 2.5em;
    color: var(--primary-color);
}


@keyframes slide-in {
0% {
    opacity: 0;
    transform: translateY(50px); /* Départ en bas */
}
100% {
    opacity: 1;
    transform: translateY(0); /* Arrivé à la position normale */
}
}



.input-container {
    position: relative;
    width: 500px; /* Largeur de l'input */
}

/* Input */
.input-container input {
    width: 100%;
    height: 60px;
    border: 3px solid #40A4FF; /* Bordure bleue */
    border-radius: 30px; /* Coins arrondis */
    outline: none;
    padding: 0 60px 0 20px; /* Espacement interne */
    font-size: 18px;
    box-sizing: border-box;
}

/* Bouton icône */
.icon-btn {
    position: absolute;
    right: 10px; /* Position à droite */
    top: 50%;
    transform: translateY(-50%); /* Centrage vertical */
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.icon-btn svg {
    width: 30px;
    height: 30px;
    fill: #FF40E6; /* Couleur de l'icône rose */
    transition: transform 0.2s ease-in-out;
}

.icon-btn:hover svg {
    transform: scale(1.2); /* Animation légère au survol */
}


.purple-button{
    background-color: #ff57ff; /* Couleur rose vif */
}

.purple-button:hover{
    background-color: #ff2aff; /* Couleur légèrement plus foncée au survol */
}


.yellow-button{
    background-color: #F9C80E; /* Couleur rose vif */
}

.yellow-button:hover{
    background-color: #F9D20E; /* Couleur légèrement plus foncée au survol */
}

.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px; /* Bord arrondi pour le bouton */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s; /* Animation au survol */
}

.custom-button:hover {
    transform: translateY(-2px); /* Légère élévation au survol */
}

.arrow {
    margin-left: 8px; /* Espacement entre le texte et la flèche */
    height: 18px; /* Taille de la flèche */
    width: auto;
}

.email-link {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 25px;
    padding: 5px 15px;
    width: 400px; /* Ajuste la largeur selon tes besoins */
    height: 50px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.email-link span {
    flex: 1;
    font-size: 16px;
    color: #333;
    outline: none;
    border: none;
}

.email-link .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #FF69B4; /* Rose */
    border-radius: 50%;
}

.email-link .icon svg {
    fill: white;
    width: 20px;
    height: 20px;
}


footer>img{
    width: 100%;
    height: 100%;
}