@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Irish+Grover&display=swap');

/* ---------------------- HEADER ---------------------- */
header #promesse {
    background-color: #f3a7b5;
    color: white;
    border-radius: 50px;
    text-align: center;
}

header #promesse h1 {
    font-size: 20px;
}

/* ------------------------------------------------------ CONTENT 1 ------------------------------------------------- */
.container-1 {
    overflow: hidden;
    position: relative;
}

.container-1 video {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.horizon-titre {
    position: absolute;
    top: 80%;
    left: 5%;
    padding: 1% 2%;
    font-size: 28px;
    background-color: #6BF0EB;
    color: white;
    border-radius: 90px;
}

.container-1-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
    padding: 80px;

    position: relative;
}

.container-1-text .etoile-3-absolute-1,
.container-1-text .etoile-3-absolute-2,
.container-1-text .etoile-3-absolute-3 {
    width: 30%;
    position: absolute;
}

.etoile-3-absolute-1 {
    top: 0%;
    right: 17%;
}

.etoile-3-absolute-2 {
    top: 29%;
    left: 18%;
    z-index: -1;
}

.etoile-3-absolute-3 {
    top: 60%;
    right: 17%;
}

.container-2-text {
    display: flex;
    justify-content: flex-end;
}

.container-box-2,
.container-box-1 {
    width: 70%;
    background-color: rgba(38, 185, 201, 21%);
    border-radius: 40px;
    padding-left: 60px;
    margin-top: 50px;
}

.container-box-2 {
    align-self: self-end;
}

.container-box-2 .titre {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 30px;
}

.container-box-2 .titre h2 {
    align-self: self-end;
}

.container-1 img {
    opacity: 0.7;
}

.titre {
    display: flex;
    margin: 40px 0;
}

.box-text {
    padding: 20px 0 20px 0px;
}

.box-text ul {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    gap: 20px;
    list-style: disc;
}

/* ---------------------------- CONTENT 2 ---------------------------- */
.relative{
    position: relative;
}

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

.image-bob-patrick #vague {
    height: 500px;
}

.image-bob-patrick #bob-patrick {
    height: 250px;
    position: absolute;
    top: 50%;
}

.container-2 {
    display: flex;
    justify-content: center;
    padding: 100px;
    font-size: 40px;
}

.ecosysteme-titre h2 {
    background-color: #EEDEF9;
    color: white;
    border-radius: 90px;
    padding: 10px 30px;
}

.container-2-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-2-text img {
    width: 350px;
    object-fit: contain;
}

.container2-box-1,
.container2-box-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-2-box-1,
.container-2-box-2 {
    width: 70%;
    padding: 0 50px;
    text-align: justify;
    font-size: 20px;
}

.container-2-box-2 {
    align-self: self-end;
}

/* ---------------------------- CONTENT 3 ---------------------------- */
.container-3 {
    margin-top: 100px;
}

.responsable-titre {
    display: flex;
    padding-left: 150px;
    align-items: center;
    justify-content: center;
}

.responsable-titre h2 {
    font-size: 48px;
    background-color: #09A790;
    color: white;
    border-radius: 90px;
    padding: 10px 30px;
}

.responsable-titre img {
    width: 300px;
    padding: 0;
    margin: 0;
}

.container-3-text .bleu {
    position: absolute;
    bottom: -30%;
    width: 100%;
    z-index: -10;
}

.container-3-text .relative{
    width: 100%;
}

.container-3-box-1 {
    width: 100%;
    margin: 250px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
}

.container-3-box-1 .titre h3 {
    font-size: 40px;
}
.container-3-box-1 .box-text,
.container-3-box-2 .box-text{
    width: 70%;
}

.container-3-box-2 {
    width: 100%;
    margin: 450px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
}

.container-3-box-2 .titre h3 {
    font-size: 40px;
}

.container-3-text .vert {
    position: absolute;
    bottom: -70%;
    width: 100%;
    z-index: -10;
}

/* ---------------------------- CONTENT 4 ---------------------------- */
.container-4 {
    margin-top: 200px;
    overflow: hidden;
}

.container-4 img {
    margin-top: 60px;
    width: 100%;
}

.container-4-box-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 100px;
    width: 70%;
}

.container-4-box-1,
.container-4-box-2 {
    display: flex;
    padding: 30px;
}

.container-4-text .titre {
    font-size: 30px;
}

.container-4-text .text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.container-4-text .text ul li {
    padding: 10px;
}

/* ---------------------------- Vague ---------------------------- */
.vague-rose-jaune {
    width: 100%;
    margin-top: 50px;
}

/* ---------------------------- CONTENT 5 ---------------------------- */
.titre-evenement {
    display: flex;
    justify-content: center;
    padding: 100px;
}

.titre-evenement h2 {
    font-size: 60px;
    background-color: #26B9C9;
    color: white;
    border-radius: 90px;
    padding: 10px 30px;
}

.container-5-box-1,
.container-5-box-2 {
    display: flex;
    padding: 30px;
}

.container-5-box-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 100px;
    width: 70%;
}

.container-5-box-text .titre {
    font-size: 30px;
}

.container-5-box-text .text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.container-5-box-text .text ul li {
    padding: 10px;
}

.container-5-box-2 {
    margin: 50px 0;
    padding: 0;
}