body {
    margin-top: 100px;
}

/* HEAD ANIMATION + DESCRIPTION*/
.head {
    text-align: center;
    margin: 5vh 2.5vw 5vh 2.5vw; 
    background-color:#071c33; /*#31003a;*/
    width: fit-content;
    /*width: 85vw;*/
    height: 60vh;
    color: white;
    border-radius: 35px;
    display: grid;
    grid-template-rows: 30vh 30vh;
    padding: 0 5vw 0 5vw;
}
.textehead {margin: 5vh 0 0 0;}
.textehead>h1{font-size: 2.5rem; margin: 1vh 0 0 0;}
.textehead>p {font-size: 1rem; margin: 1vh 0 0 0;}
.textehead>svg{ width: 30vw;}
.head>video {
    max-height: 40vh;
    max-width: 80vw;
    justify-self: center;
    align-self: self-end;
}
.description {
    width: 85vw;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 10vh 0 10vh 7.5vw;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .head {
        padding: 0;
        margin: 5vh 7.5vw 5vh 7.5vw;
        width: 85vw;
        height: 50vh;
        border-radius: 30px;
        grid-template-rows: 20vh 30vh;
    }
    .textehead {margin: 5vh 0 0 0;}
    .textehead>h1 {margin: 0.5vh 0 0 0;}
    .textehead>p  {margin: 0.5vh 0 0 0;}
    .textehead>svg{height: 10vh; width: 13vw;}
    .head>video {max-width: 70vw;}
    .description {
        width: 75vw;
        font-size: 1.5rem;
        margin: 5vh 0 5vh 12.5vw;
    }
}

@media screen and (min-width: 1024px) {
    .head {
        margin: 5vh 7.5vw 5vh 7.5vw;
        width: 85vw;
        height: 75vh;
        border-radius: 35px;
        grid-template-rows: 35vh 40vh;
    }
    .textehead>h1{font-size: 4rem; margin: 1vh 0 0 0;}
    .textehead>p {margin: 1vh 0 0 0;}
    .textehead>svg{height: 13vh;}
    .description {
        width: 65vw;
        margin: 10vh 0 10vh 17.5vw;
    }
}

@media screen and (min-width: 1950px) {
    .titrehead h1{ font-size: 4rem; margin: 1vh 0 0 0;}
    .titrehead p { font-size: 1rem; margin: 1vh 0 0 0; font-weight: 400;}
    .textehead>svg{ height: 13vh; width: auto; margin: 0 2vw 0 2vw;}
    .head>video { max-width: 90vw; height: 100%; max-height: 70vh;}
}


/* PARTITLES */
.parttitle {font-size: 2rem; text-align: center; margin: 5vh 0 2vh 0;}
@media screen and (min-width: 768px) {
    .parttitle {font-size: 2rem;}    
}
@media screen and (min-width: 1024px) {
    .parttitle {font-size: 2.5rem; margin: 0vh 0 2vh 0;}
}

.encadretitre1 {
    display: inline-block;
    border: 0.25rem solid #E7505A;
    padding: 0.25rem;
    border-radius: 1rem;
    color: #E7505A;
}

.encadretitre2 {
    display: inline-block;
    border: 0.25rem solid #f66a2e;
    padding: 0.25rem;
    border-radius: 1rem;
    color: #f66a2e;
}

.encadretitre3 {
    display: inline-block;
    border: 0.25rem solid #1D3A6A;
    padding: 0.25rem;
    border-radius: 1rem;
    color: #1D3A6A;
}


/* PART 1 */
.part1 {
    width: 90vw;
    margin: 0 0vw 10vh 5vw;
    display: grid;
    grid-template-rows: 1fr 40vh 40vh;
    grid-gap: 2vw;
    line-height: 1.5rem;
}
.part1box {
    background-color: white;
    padding: 2rem;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.part1box1 {grid-column: 1; grid-row: 1; background-color: #E9505B; color: white;}
.part1box2 {grid-column: 1; grid-row: 2; border: 0.10rem solid rgba(0, 0, 0, 0.25);}
.part1box3 {grid-column: 1; grid-row: 3; background-color: #e7505a25;}
.part1box video {width: 75vw; align-self: center;}

@media screen and (min-width: 768px) {
    .part1 {width: 80vw; margin: 0 0vw 10vh 10vw; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
    .part1box {padding: 2rem;}
    .part1box1 {grid-row: 1 / span 2;}
    .part1box2 {grid-column: 2; grid-row: 1;}
    .part1box3 {grid-column: 2; grid-row: 2;}
    .part1box video {width: 25vw;}
}

@media screen and (min-width: 1024px) {
    .part1box video { width: 20vw; align-self: center;}
}

@media screen and (min-width: 1950px) {
    .part1 {width: 60vw; margin: 0 0 10rem 20vw; padding: 0;}
    .part1 video { max-width: 20vw;}
}


/* PART 2 */
.part2 {
    width: 90vw;
    margin: 0 0vw 10vh 5vw;
    display: grid;
    grid-gap: 2vw;
    line-height: 1.5rem;
}
.part2box {
    background-color: white;
    padding: 2rem;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    align-items: center;
}
.part2box video {width: 25vw; align-self: center;}
.part2box1 { grid-column: 1; grid-row: 1; flex-direction: column-reverse;  background-color: #f66a2ed7; color: white;}
.part2box1 > video{ width: 75%; height: 75%;}
.part2box2 {grid-column: 1; grid-row: 2; background-color: #1b69bd1b;}
.part2box2>video {width: 75%; height: 100%; margin: 1vw;}
.part2box3 {grid-column: 1; grid-row: 3; border: 0.10rem solid rgba(0, 0, 0, 0.25);}
.part2box3 > video{ width: 65%; height: 65%; align-self: center;}

@media screen and (min-width: 768px) {
    .part2 {width: 80vw; margin: 0 0vw 10vh 10vw; grid-template-columns: 1fr 1fr; grid-template-rows: 0.6fr 1fr}
    .part2box {padding: 2rem;}
    .part2box1 {grid-row: 1; grid-column: 1 / span 2; flex-direction: row;}
    .part2box video {max-width: 30vw; max-height: 35vh; margin-right: 2vw;}
    .part2box2 {grid-row: 2; grid-column: 1; justify-content: start;}
    .part2box3 {grid-row: 2; grid-column: 2; justify-content: start;}
}

@media screen and (min-width: 1024px) {
    .part2 {grid-template-rows: 0.5fr 1fr;}
    .part2box video { max-width: 20vw; max-height: 25vh;}
}

@media screen and (min-width: 1950px) {
    .part2 {width: 60vw; margin: 0 0 10rem 20vw; padding: 0;}
    .part2 video { max-width: 20vw;}
}


/* PART 3 */
.part3 {
    width: 90vw;
    margin: 0 0 10vh 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1vw;
    line-height: 1.5rem;
    padding: 0 5vw 0 5vw;
}
.part3box {
    background-color: white;
    padding: 2rem;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    align-items: center;
}
.part3box video {width: 75%; align-self: center;}
.part3box1 {flex-direction: column-reverse; justify-content: start; background-color: #00ffae13;}
.part3box2 {background-color: #00384413;}
.part3box2 > video{width: 65%; height: 65%;}
.part3box3 {background-color: #003844; color: white;}

@media screen and (min-width: 768px) {
    .part3 {width: 80vw; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 0.3fr; padding: 0 10vw 0 10vw;}
    .part3box {padding: 4rem;}
    .part3box video {width: 25vw; max-height:30vh; }
    .part3box1 {grid-row: 1 /span 2; grid-column: 1; flex-direction: column; justify-content: start; }
    .part3box1 > video{ margin-top: 50px;}
    .part3box2 {grid-row: 1 ; grid-column: 2; justify-content: start;}
    .part3box3 {grid-row: 2; grid-column: 2 ;}
}

@media screen and (min-width: 1024px) {
    /*.part3 {grid-template-rows: 2fr 1fr;}*/
}

@media screen and (min-width: 1950px) {
    .part3 {width: 60vw; margin: 0 0vw 0vh 20vw; padding: 0;}
}



/* Privacy */
.privacycare2 {
    width: 100vw;
    background-color: #31003a;
    color: white;
    padding: 5vh 0 5vh 0;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 10px #e9e9e9;
}
.privacytexte {width: 80vw;}
.privacytexte>p {font-size: 1rem;line-height: 1.5rem;}
.privacycare2>img {width: 8rem; margin: 0 2.5vw 2vh 2.5vw;}
.privacycare2>video {width: 8rem; margin: 0 2.5vw 0 2.5vw;}

@media screen and (min-width: 768px) {   
    .privacytexte {width: 50vw;}
    .privacycare2>svg {width: 20vw;}
}

@media screen and (min-width: 1024px) {
    .privacycare2>svg {width: 10vw;}
}

@media screen and (min-width: 1950px) {
    .privacycare2 {margin-top: 10vh;}
    .privacycare2>svg {width: 10rem;}
}