@keyframes vague50px-inverse {
0% {
height:50px;
}
50% {
height:20px;
}
100% {
height:50px;
}
}

@keyframes vague50px {
0% {
height:20px;
}
50% {
height:50px;
}
100% {
height:20px;
}
}

@keyframes vague100px-inverse {
0% {
height:100px;
}
50% {
height:20px;
}
100% {
height:100px;
}
}

@keyframes vague100px {
0% {
height:20px;
}
50% {
height:100px;
}
100% {
height:20px;
}
}

@keyframes vagues {
0% {
background-size:100% 80%;
}
50% {
background-size:100% 50%;
}
100% {
background-size:100% 80%;
}
}


#homepage h2 {
font-size:2.6em;
font-weight:700;
}


.bulle {
width:60%;
border-radius:0 50% 50% 50%;
background:var(--blanc);
margin:0 auto;
transition: transform 0.3s, box-shadow 0.3s;
}

.bulle img {
transition: transform 0.3s;
}

.homepage-button:hover .bulle {
box-shadow: 0 0 20px 0 var(--blanc);
transform: scale(1.01);
}

.homepage-button:hover .bulle img {
transform: scale(1.05);
}

.intitule {
display:inline-block;
font-weight: 700;
color: white;
padding: 8px 15px;
border-radius: 20px;
background: transparent;
font-size: 1.1em;
text-decoration: none;
line-height: 1.2;
width:auto;
transition:background 0.3s, box-shadow 0.3s;
}

.homepage-button:hover .intitule {
background:var(--couleur2) !important;
box-shadow: 0 0 20px 0 var(--blanc);
}


#public-cible {
background:var(--couleur1);
padding:50px 0 120px;
position:relative;
}

#public-cible:after {
z-index: 1000;
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_bas_bleu-fonce_1.png");
background-size: 100% 100%;
animation: vague100px 10s infinite ease-in-out;
}


#territoire {
background:var(--couleur2) url("/download/images/vagues_fond_bleu.png") no-repeat center center;
background-size: 100% 80%;
padding:50px 0 50px;
position:relative;
animation: vagues 10s infinite ease-in-out;
}


#territoire .bulle {
background:var(--couleur4);
}

#territoire h2 {
color:var(--couleur3);
}

#territoire .homepage-button:hover .bulle {
box-shadow: 0 0 20px 0 var(--couleur3);
}

#territoire .homepage-button:hover .intitule {
background:var(--couleur4);
box-shadow: 0 0 20px 0 var(--couleur3);
}


#approfondir {
background: #FFFFFF url(/download/images/illustration.jpg) no-repeat 25% center;
background-size:cover;
padding:150px 0 150px;
position:relative;
}

#approfondir:before {
z-index: 1000;
content: "";
position: absolute;
top: -1px;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_haut_bleu-fonce_1.png");
background-size: 100% 100%;
animation: vague100px 10s infinite ease-in-out;
}


#approfondir:after {
z-index: 1000;
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_bas_bleu-clair_1.png");
background-size: 100% 100%;
animation: vague100px-inverse 10s infinite ease-in-out;
}


#approfondir h2 {
color:var(--couleur4);
text-shadow: 0 2px 5px #FFFFFF;
}

#approfondir .intitule {
background: var(--couleur4);
}


#approfondir .copyright {
left:0;
right:auto;
transform-origin:bottom left;
transform: rotate(90deg) translateX(-150%);
}


@media screen AND (max-width: 991px) {
#approfondir .copyright {
font-size:0.5em;
}
}


#agir {
background: var(--couleur3) url("/download/images/vague_bas_agir.png") bottom no-repeat;
background-size: 100% 20px;
padding:50px 0 150px;
position:relative;
}

#agir:after {
z-index: 1000;
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_bas_agir.png") no-repeat;
background-size: 100% 100%;
animation: vague100px 10s infinite ease-in-out;
}


#agir h2 {
color:var(--couleur4);
}


#agir .bulle {
background:var(--couleur4);
}

#agir .intitule {
color:var(--couleur4);
}

#agir .homepage-button:hover .intitule {
color:var(--blanc);
}

#presentation {
background:var(--blanc) url("/download/images/vague_bas_presentation.png") bottom no-repeat;
background-size:100% 20px;
padding:50px 0 100px;
position:relative;
z-index:2;
}

#presentation:after {
z-index: 1000;
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_bas_presentation.png");
background-size: 100% 100%;
animation: vague100px-inverse 10s infinite ease-in-out;
}


#diaporama {
position: relative;
background-color: black;
height: 25vh;
min-height: 25rem;
width: 100%;
overflow: hidden;

}

#diaporama p {
font-weight: 900;
color: var(--couleur4);
font-size: 4em;
line-height: 1.2em;
margin-bottom: 0;
}


#diaporama video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background:var(--couleur3);
}

#diaporama .container {
position: relative;
z-index: 2;
}

#diaporama .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}


#carouselText {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}

.carousel-item {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
z-index: 10;
transition: opacity 3s ease-in-out;
opacity: 0;
}

.carousel-item.active {
opacity: 1;
}

#diaporama:before {
z-index: 1000;
content: "";
position: absolute;
top: -1px;
right: 0;
left: 0;
height: 50px;
background: url("/download/images/vague_blanc_header.png");
background-size: 100% 100%;
animation: vague50px 10s infinite ease-in-out;
}

#diaporama:after {
z-index: 1000;
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
height: 50px;
background: url("/download/images/vague_bas_bleu-fonce_1.png");
background-size: 100% 100%;
animation: vague50px 10s infinite ease-in-out;
}


@media screen AND (max-width: 991px) {
#diaporama p {
font-size: 3em;
}
.bulle {
width:75%;
}
#homepage h2 {
font-size:2.2em
}
#public-cible {
padding:50px 0 50px;
}
#public-cible:after {
height: 50px;
animation: vague50px 10s infinite ease-in-out;
}
#approfondir {
padding:100px 0 100px;
}
#approfondir:before {
height: 50px;
animation: vague50px 10s infinite ease-in-out;
}
#approfondir:after {
height: 50px;
animation: vague50px-inverse 10s infinite ease-in-out;
}
#agir {
padding:50px 0 100px;
}
#agir:after {
height: 50px;
animation: vague50px 10s infinite ease-in-out;
}
#presentation {
padding:50px 0 50px;
}
#presentation:after {
height: 50px;
animation: vague50px 10s infinite ease-in-out;
}
}

@media screen AND (max-width: 540px) {
#diaporama p {
font-size: 2em;
}
.bulle {
width:90%;
}
#homepage h2 {
font-size:1.8em
}
}