#oeweo{
    width: 100%;
    position: relative;
    background:#624b78;
    color:#ffffff;
    overflow:hidden;
    font-family: "serenity"
}
#oeweo .aux-content-top-margin .aux-primary{
    padding-top:0 !important;
}

.exergue{color:#00ffff;}


.section-fullscreen{
    position: relative;
    width:100%;
    height:100vh;
    overflow: hidden;
}
.section-fullscreen-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width:auto;
}



.tete-chapitre-titre{font-size:2rem; margin-bottom:5px; line-height:0.9;font-weight: 100; letter-spacing: 5px;font-family: "serenity", sans-serif;}
.tete-chapitre-sstitre{font-size: 4.45rem;font-weight: bold;margin-bottom:20px;line-height: 1;font-family: "serenity", sans-serif;}
.tete-chapitre-texte{font-size:1.3rem; line-height:1; font-weight:bold;font-family: "serenity", sans-serif;}

.contenu-chapitre-titre{font-size:2.7rem; font-weight:normal; margin-bottom:20px;font-family: "serenity", sans-serif; line-height: 1;}
.contenu-chapitre-titre span{line-height:1.2}
.contenu-chapitre-titre-separator{display:inline-block; line-height: 10px; font-size:10px; transform: translateY(-15px);}
.contenu-chapitre-titre-separator svg{height:10px; width:auto;}
.contenu-chapitre-titre-separator svg path{fill:#FFFFFF;}
.contenu-chapitre-titre-separator.bleu svg path{fill:#312783;}
.contenu-chapitre-texte{font-size:1.4rem; line-height:1; font-weight:bold;font-family: "serenity", sans-serif;}
.contenu-chapitre-fin{font-size:2.5rem; line-height:1; font-weight:100;font-family: "serenity", sans-serif;}

#main{opacity:0;}
#oeweo-logo-menu-svg{
    display:inline-block;  opacity:0;
}
#oeweo-logo-menu{
    display:none;
}
#oeweo-logo-menu-svg{
    z-index: 1000;
}


#animation-intro{
    position: relative;
    width:100%;
    margin:0 auto;
    height:700vh;
    overflow: hidden;
}

#header-animation{
    position: absolute;
    width:100%;
    background: #FFFFFF;
    height:100vh;
    overflow: hidden;
}

#oeweo-logo-menu-svg{
    width: 210px;
    height: 40px;
}
#oeweo-logo-menu-svg svg{
    width: 100%;
    height: auto;
    display:block;
}



.animation-canvas-cont{
    position: relative;
    width:100%;
    height:100vh;
    overflow: hidden;
}
.animation-canvas-cont canvas {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
}

@media (min-aspect-ratio: 1920/1080) {
    .animation-canvas-cont canvas {
        width: 100%;
        height: auto;
    }
}


#icon-scroll, #icon-scroll:before {
    position: absolute;
    left: 50%;
}
#icon-scroll {
    width: 30px;
    height: 50px;
    margin-left: -15px;
    bottom: 100px;
    margin-top: -35px;
    box-shadow: inset 0 0 0 2px #624b78;
    border-radius: 20px;
}
#icon-scroll span{
    color: #624b78;
    transform: translateX(-50%);
    display: inline-block;
    left: 50%;
    position: absolute;
    bottom: -30px;
}

#icon-scroll:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #624b78;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: mousescroll;
}
@keyframes mousescroll {
    0% {opacity:1;}
    100% {opacity:0; transform: translateY(20px);}
}

#subtitle{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100vh;
    opacity:0;
    will-change: transform;
}
#subtitle h2{
    padding:0; margin:0;
    font-size:3rem;
    letter-spacing: 3px;
    color:#FFFFFF;
    line-height:1.1;
    font-weight:bold;
    text-align: center;
}


#intro-texte-cont{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100vh;
    opacity:0;
}
#intro-texte{
    max-width:700px;
    width:96%;
    font-size:2.5rem;
    line-height:1.2;
    color:#FFF;
    font-weight: bold;
}

#intro-texte > span{opacity:0.4;}

#chapitre1-intro-cont{
    position:absolute; top:0; right:8%;
    max-width:700px;
    width:82%;
    height:100vh;
    opacity:0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}

#txt-vous-1, #txt-vous-2{opacity:0;}

.barre-oeweo{height:20vh; width:auto; display: flex; flex-direction: row; column-gap: 10px;}
.barre-oeweo img{width:auto; height:100%; max-width: none;opacity:0;}


.createur-impossible-content-cont{
    position:absolute;
}

#createur-impossible-content-1{
    margin-top:-100vh;
    height:500vh;
    z-index:500;
}

#createur-impossible-content-1 .createur-impossible-content-cont {
    width:20%;
    left:20%;
    top:40vh;
    opacity:0;
}
#createur-impossible-content-1 .contenu-chapitre-fin{
    position:absolute;
    top:75vh; left:20%;
    width:60%;
    opacity:0;
}
#createur-impossible-content-1 img{
    position:absolute;
    top:0;
    right:18%;
    height:100vh;
    width:auto;
    opacity:0;
}




#chapitre1-content-2{
    margin-top:-100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: initial;
    height:auto;
}
#chapitre1-content-2 .chapitre-content-cont {
    position: initial;
    max-width:1200px;
    width:96%;
    text-align:center;
}

#chapitre1-content-2-image{
    position: relative;
    max-height:50vh;
    text-align: center;
    margin-bottom:5vh;
}

#chapitre1-content-2-image img{
    width: auto; height:100%; max-width: none;
}


#animation-chapitre1-spa-canvas-cont{
    position: relative;
    width:100%;
    height:auto;
    overflow: hidden;
    padding-top:8vh;
    display: flex;
    justify-content: center;
    margin-top:30px;
}
#animation-chapitre1-spa-canvas-cont canvas {
    width: 98%;
    height: auto;
}
@media (min-aspect-ratio: 1/1) {
    #animation-chapitre1-spa-canvas-cont canvas {
        height: 70vh;
        width: auto;
    }
}


#animation-chapitre1-content-2-pin{
    position: absolute;
    top: 0; right:50%; transform: translateX(-50%);
    width: 1px;
    height: 15vh;transform-origin: center top;
}
#animation-chapitre1-content-2-pin .bubble{opacity:0;}





#chapitre1-content-3{
    height:400vh;
    overflow: hidden;
}
#chapitre1-content-3 .chapitre-content-cont {
    position: absolute;
    top:0; left:0; width:100%; height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: initial;
    column-gap:100px;
    text-align:left;
}

#chapitre1-content-3-inner{
    position: relative;
    width:40%;
    padding-left:20%;
}
#chapitre1-content-3-images{
    position: relative;
    width: 60%; height:100vh;
    text-align: center;
    background-image:url(../img/oeweo/oeweo-halo-sousJet-min.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow:hidden;
}

.chapitre1-content-3-images-bloc{
    position:absolute; top:50%; left: 100%; transform:translateY(-50%);
    width:25%;
    height:auto;
    opacity:0;
}

#chapitre1-content-3-images img{width:100%; height:auto; max-width: none;}

.chapitre1-content-3-images-bloc .pin{position:absolute; top: 90%; left:30%; width:1px; height:0px;}
.chapitre1-content-3-images-bloc .bubble{opacity:0;}
.chapitre1-content-3-images-bloc .pin-text{position: absolute; top: calc(90% + 160px); left:30%; transform: translateX(-50%); font-size:1em; line-height: 1; width:100%; opacity:0;}

#chapitre1-content-3-images-bloc-1{left:35%; opacity:1; scale:1;}
#chapitre1-content-3-images-bloc-2{left:70%; opacity:0.5; scale:0.8;}
#chapitre1-content-3-images-bloc-3{left:105%; opacity:0.5; scale:0.8;}
#chapitre1-content-3-images-bloc-4{left:140%; opacity:0.5; scale:0.8;}
#chapitre1-content-3-images-bloc-5{left:175%; opacity:0.5; scale:0.8;}



#chapitre1-content-4{
    height:auto;
    overflow: initial;
}
#chapitre1-content-4 .chapitre-content-cont {
    position: initial;
    max-width:1200px;
    width:96%;
    text-align:center;
}

#chapitre1-content-4-animation{
    height:400vh;
    overflow: initial;
    padding:20vh 0;
}
#chapitre1-content-4-animation-cont{
    position:absolute; top:0; left:0; width:100%; height:100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: initial;
}
#chapitre1-content-4-animation-cont-ecran{position:relative; height:500px; max-height:45vh;}
#chapitre1-content-4-animation-cont-ecran-graphisme{position:absolute; top:50%; left:80%; width:70%; height:auto; animation: waveAnimation 4s infinite;}
#chapitre1-content-4-animation-cont-ecran-graphisme img{height:auto; width:100%; max-width: none;}
#chapitre1-content-4-animation-cont-ecran img{position: absolute;top:0; left:0;height:100%; width:auto; max-width:none; opacity:0;}
#chapitre1-content-4-animation-cont-ecran-1{position:relative !important; top:auto !important;left:auto !important; opacity:1 !important;}

#chapitre1-content-4-animation-cont-ecran-bubble{display: block; position:absolute; bottom:-50px; left:-50px; width:100px; aspect-ratio:1/1;}
#chapitre1-content-4-animation-cont-ecran-bubble span{display: block; position:absolute; background:transparent; border:solid 3px #FFF; border-radius:50%; width:100%; height:100%; animation: scaleIn 6s infinite;}
#chapitre1-content-4-animation-cont-ecran-bubble span:nth-child(2){animation-delay: 2s}
#chapitre1-content-4-animation-cont-ecran-bubble span:nth-child(3){animation-delay: 4s}

#chapitre1-content-4-animation-cont-ecran-pin{position:absolute; top: 50px; left:97%; height:1px; width:0;}
#chapitre1-content-4-animation-cont-ecran-pin .bubble{opacity:0;}
#chapitre1-content-4-animation-cont-ecran-pin-text{position: absolute; top: 28px; left: calc(100% + 150px); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}

#chapitre1-content-4-animation-cont-ecran-mobile-pin{position:absolute; top: 90%; left:50%; width:1px; height:0; visibility: hidden;}
#chapitre1-content-4-animation-cont-ecran-mobile-pin .bubble{opacity:0;}
#chapitre1-content-4-animation-cont-ecran-mobile-pin-text{position: absolute; top: calc(90% + 160px); left: 50%; transform: translateX(-50%); font-size:0.9em; opacity:0; line-height: 1.4; width:90%; text-align: center;visibility: hidden;}

#chapitre1-content-4-animation-cont-lumiere{position:relative; height:500px; max-height:35vh; margin-top:5vh}
#chapitre1-content-4-animation-cont-lumiere img{position:absolute;top:0; left:0; height:100%; width:auto; max-width:none; opacity:0;}
#chapitre1-content-4-animation-cont-lumiere-1{position:relative !important; top:auto !important;left:auto !important; opacity:0.2 !important;}

#chapitre1-content-4-animation-cont-lumiere-pin{position: absolute; top: 0; right:30%; width: 1px; height: 0;}
#chapitre1-content-4-animation-cont-lumiere .bubble{opacity:0;}
#chapitre1-content-4-animation-cont-lumiere-pin-text{position: absolute; top: 30px; right:35%; width:180px; max-width:60%; opacity:0; font-weight:bold; line-height:1.1;}





#animation-chapitre2{
    position: relative;
    width:100%;
    margin:-50vh auto 0 auto;
    height:300vh;
    overflow: hidden;
    z-index:460;
}
#animation-chapitre2-canvas-cont{
    opacity:0;
}

#chapitre2-intro-cont{
    position:absolute; top:0; left:50%; transform: translateX(-50%);
    max-width:770px;
    width:80%;
    height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}
#chapitre2-intro{
    opacity:0;
}





#chapitre2-content-1{
    height:auto;
    z-index:450;
}
#chapitre2-content-1-inner{
    /*position:absolute; top:0; left:0;*/ width:100%; height:100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
#chapitre2-content-1 .chapitre-content-cont{
    position:initial;
    width:900px; max-width:96%;
    text-align:center; margin:0 auto;
}
#chapitre2-content-1-images{
    width: 100%;
    margin: 5vh auto 12vh auto;
    text-align: center;
    aspect-ratio: 1800/800;
    max-width: 1000px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
.chapitre2-content-1-images-bloc{display:inline-block;height:100%; position:relative;}

#chapitre2-content-1-image-3{margin-left:-20%;}
#chapitre2-content-1-image-4{margin-left:-20%;}
#chapitre2-content-1-images img{height:100%; opacity:0;}

#chapitre2-content-1-image-1-pin{position:absolute; top: 90%; right:30%; width:1px; height:0;}
#chapitre2-content-1-image-1-pin-bubble{opacity:0;}
#chapitre2-content-1-image-1-pin-text{position: absolute; top: calc(90% + 11vh); right:30%; transform: translateX(50%); font-size:0.9em; opacity:0; line-height: 1; width:100%;}

#chapitre2-content-1-image-4-pin{position:absolute; top: 90%; right:30%; width:1px; height:0;}
#chapitre2-content-1-image-4-pin-bubble{opacity:0;}
#chapitre2-content-1-image-4-pin-text{position: absolute; top: calc(90% + 11vh); right:30%; transform: translateX(50%); font-size:0.9em; opacity:0; line-height: 1; width:100%;}

#chapitre2-content-1-image-5-pin{position:absolute; top: 90%; right:30%; width:1px; height:0;}
#chapitre2-content-1-image-5-pin-bubble{opacity:0;}
#chapitre2-content-1-image-5-pin-text{position: absolute; top: calc(90% + 11vh); right:30%; transform: translateX(50%); font-size:0.9em; opacity:0; line-height: 1; width:100%;}



#chapitre2-content-2{
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:10vh;
}
#chapitre2-content-2 .chapitre-content-cont{
    position:initial;
    width:900px; max-width:96%;
    text-align:left;
}
#chapitre2-content-2-images-cont{
    height:300vh;
}
#chapitre2-content-2-images-inner{
    position:absolute;
    height:100vh;
    width:100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    top:0; left:0;
}
#chapitre2-content-2-images{
    position:relative;
    height:55%;
    margin-bottom:20vh;
}
#chapitre2-content-2-images img{position:absolute; top:0; left:0; height:100%; max-width:none; width:auto; opacity:1;}
#chapitre2-content-2-images img#chapitre2-content-2-image-1{position: initial; top:auto; left:auto;}


#chapitre2-content-2-pin1{position:absolute; top:50%; right:110%; height:1px; width:0;}
#chapitre2-content-2-pin1 .bubble{opacity:0;}
#chapitre2-content-2-pin1-text{position: absolute; top: calc(50% - 50px); right: calc(120%); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}
#chapitre2-content-2-pin1-text img{transform: translateY(-100%);}

#chapitre2-content-2-pin2{position:absolute; top:15%; left:100%; height:1px; width:0;}
#chapitre2-content-2-pin2 .bubble{opacity:0;}
#chapitre2-content-2-pin2-text{position: absolute; top: 15%; left: calc(100% + 200px); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}
#chapitre2-content-2-pin2-text img{transform: translateY(-50%);}


#chapitre2-content-2-pin3{position:absolute; top:65%; left:100%; height:1px; width:0;}
#chapitre2-content-2-pin3 .bubble{opacity:0;}
#chapitre2-content-2-pin3-text{position: absolute; top: 65%; left: calc(100% + 200px); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}
#chapitre2-content-2-pin3-text img{transform: translateY(-50%);}


#chapitre2-content-2-pin4{position:absolute; top:105%; left:40%; width:1px; height:0;}
#chapitre2-content-2-pin4 .bubble{opacity:0;}
#chapitre2-content-2-pin4-text{position: absolute; top: 105%; left: calc(40% + 50px); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}
#chapitre2-content-2-pin4-text img{transform: translateY(50%);}

#chapitre2-content-2-pin1-text img, #chapitre2-content-2-pin2-text img, #chapitre2-content-2-pin3-text img, #chapitre2-content-2-pin4-text img{height:100px; width:auto; max-width: none;}


#animation-chapitre3{
    position: relative;
    width:100%;
    margin:-50vh auto 0 auto;
    height:300vh;
    overflow: hidden;
    z-index:460;
}
#animation-chapitre3-canvas-cont{
    opacity:0;
}

#chapitre3-intro-cont{
    position:absolute; top:0; left:10%;
    max-width:710px;
    width:80%;
    height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;


}
#chapitre3-intro{
    opacity:0;
}








#chapitre3-content-1{
    height:350vh;
}
#chapitre3-content-1-inner{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
#chapitre3-content-1 .chapitre-content-cont{
    position:absolute;
    height:100vh;
    width:900px; max-width:96%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left:50%; transform: translateX(-50%);
    text-align: center;
}
#chapitre3-content-1-images{
    position:absolute; top:0; left:0;
    width: 100%;
    height:100vh;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity:0;
    scale:1.1;
}
#chapitre3-content-1-image-bg{position:absolute; width:100%; height:auto; /*animation: waveAnimation 15s infinite;*/ scale:1.3}
#chapitre3-content-1-image-bg img{width:100%; max-width: none; height:auto;}
#chapitre3-content-1-images-bloc{display:inline-block; height:80%;  position:relative;}
#chapitre3-content-1-images-bloc img{position:absolute; top:0; left:0; max-width:none; width:auto; height:100%; opacity:0;}
#chapitre3-content-1-images-bloc img#chapitre3-content-1-image-1{position: initial; top:auto; left:auto; opacity:1;}




#chapitre3-content-2{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:100px;
}

#chapitre3-content-2 .chapitre-content-cont{
    position:initial;
    text-align:left;
    width:340px; max-width:96%;
}
#chapitre3-content-2-images{
    position:relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    width:750px; max-width:96%;
}
#chapitre3-content-2-images-bloc{display:inline-block;width:100%; max-width:96%; position:relative;}
#chapitre3-content-2-images-bloc img{position:absolute; top:0; left:0; width:100%; max-width:none; height:auto; opacity:0;}
#chapitre3-content-2-images-bloc img#chapitre3-content-2-image-1{position: initial; top:auto; left:auto;}





#chapitre3-content-3{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    row-gap:50px;
    height:auto;
    padding-bottom:10vh;
}
#chapitre3-content-3 .chapitre-content-cont{
    width:900px; max-width:96%;
    text-align: center;
}

#chapitre3-content-3-image-bg{width:100%; height:auto; z-index:500;}
#chapitre3-content-3-image-bg img{width:100%; max-width: none; height:auto;}

#chapitre3-content-3-images{ z-index:450; width:60%; max-width:510px; position:relative; height:auto;
}
#chapitre3-content-3-image-1{position:absolute; transform: translate(-30%, -20%); width:60%; opacity:0;}
#chapitre3-content-3-image-2{display:inline-block;width:600px; position:relative; transform: translate3d(0, 0, 0px); opacity:0; margin-top:-30px;}
#chapitre3-content-3-image-2 img{width:100%; max-width: none; height:auto;}

#chapitre3-content-3-pin{position:absolute; top: 90px; left:87%; height:1px; width:0;}
#chapitre3-content-3-pin .bubble{opacity:0;}
#chapitre3-content-3-pin-text{position: absolute; top: 77px; left: calc(87% + 160px); font-size:0.9em; opacity:0; line-height: 1.4; width:160px; max-width:60%;}

#chapitre3-content-3-mobile-pin{position:absolute; top: 80%; left:50%; width:1px; height:0; visibility: hidden;}
#chapitre3-content-3-mobile-pin .bubble{opacity:0;}
#chapitre3-content-3-mobile-pin-text{position: absolute; top: calc(80% + 110px); left: 50%; transform: translateX(-50%); font-size:0.9em; opacity:0; line-height: 1.4; width:90%; text-align: center;visibility: hidden;}




#animation-chapitre2 *, #chapitre2-content-1 *, #chapitre2-content-2 *, #animation-chapitre3 *, #chapitre3-content-1{color:#312783 !important;}







.pin{background:#FFFFFF; }
.pin.bleu{background:#312783; }
.pin .bubble{display: block; position:absolute; width:70px; aspect-ratio:1/1;}
.pin span{display: block; position:absolute; background:transparent; border:solid 3px #FFF; border-radius:50%; width:100%; height:100%; animation: scaleIn 3s infinite;}
.pin.bleu span{border:solid 3px #312783; }
.pin span:nth-child(2){animation-delay: 1s}
.pin span:nth-child(3){animation-delay: 2s}

.pin-top .bubble{top:-35px; left:-35px;}
.pin-bottom .bubble{bottom:-35px; left:-35px;}
.pin-left .bubble{bottom:-35px; left:-35px;}
.pin-right .bubble{bottom:-35px; right:-35px;}

@keyframes scaleIn{
    from{transform:scale(0.2, 0.2); opacity:1;}
    to{transform:scale(1, 1); opacity:0;}
}

@keyframes waveAnimation{
    0% {transform:scale(1.1, 1.1); opacity:0.7;}
    50% {transform:scale(1, 1); opacity:1;}
    100% {transform:scale(1.1, 1.1); opacity:0.7;}
}



html.darkmysite_dark_mode_enabled #text1, html.darkmysite_dark_mode_enabled #text2,
html.darkmysite_dark_mode_enabled #subtitle h2{
    color:#000 !important;
}




@media (max-aspect-ratio: 1/1) {
    #chapitre3-content-1-images-bloc{width:90%; height:auto;}
    #chapitre3-content-1-images-bloc img{width:100%; max-width:none; height:auto;}
}
@media screen and (max-height: 750px) {

    #chapitre2-content-1 .chapitre-content-cont{width:96%}
    #chapitre2-content-1-images{margin: 10px auto 12vh auto;}
    #chapitre1-content-3-inner{padding-left:3%;}
    #chapitre1-content-3 .chapitre-content-cont {column-gap:50px;}
}


@media screen and (max-width: 1600px) {

}


@media screen and (max-width: 1400px) {

    #chapitre1-content-3-inner{padding-left:3%;}
    #chapitre1-content-3 .chapitre-content-cont {column-gap:50px;}

}

@media screen and (max-width: 1200px) {

    #chapitre2-content-2-pin2-text{top: calc(15% + 40px); left: calc(110%);}
    #chapitre2-content-2-pin2-text img{transform:initial ;}

    #chapitre2-content-2-pin3-text{top: calc(35% + 40px); left: calc(110%);}
    #chapitre2-content-2-pin3-text img{transform:initial ;}

    #chapitre1-content-4-animation-cont{
        left:10%; width:80%;
        align-items: start;
    }

    #chapitre1-content-4-animation-cont-ecran-bubble{bottom:-20px; left:-20px; width:70px; aspect-ratio:1/1;}
    #chapitre1-content-4-animation-cont-ecran-pin{left:90%;}
    #chapitre1-content-4-animation-cont-ecran-pin-text{top: 60px; left: 110%; font-size:0.9em; opacity:0; line-height: 1.4; width:50%;}

    #chapitre1-content-4-animation-cont-lumiere-pin{right:50%;}
    #chapitre1-content-4-animation-cont-lumiere-pin-text{right:55%;}




}

@media screen and (max-width: 900px) {

    .contenu-chapitre-fin{font-size:2rem;}
    .tete-chapitre-titre{font-size:1.5rem; letter-spacing: 3px;}
    .tete-chapitre-sstitre{font-size:2.6rem;}

    .barre-oeweo {column-gap: 0;}

    .pin .bubble{width:40px;}
    .pin span{border:solid 2px #FFF;}
    .pin.bleu span{border:solid 2px #312783; }
    .pin-top .bubble{top:-20px; left:-20px;}
    .pin-bottom .bubble{bottom:-20px; left:-20px;}
    .pin-left .bubble{bottom:-20px; left:-20px;}
    .pin-right .bubble{bottom:-20px; right:-20px;}


    #intro-texte{font-size:1.5em;}
    .contenu-chapitre-titre{font-size:2rem;}

    #chapitre1-intro-cont{position:absolute; top:0; right:2%; width:96%; column-gap:10px;}
    #chapitre2-intro-cont{position:absolute; top:0; right:2%; width:96%; column-gap:10px;}
    #chapitre3-intro-cont{position:absolute; top:0; left:2%; width:96%; column-gap:10px;}

    #chapitre1-content-3{margin-top:20vh;}
    #chapitre1-content-3 .chapitre-content-cont{position:relative; display:block; width:100%; margin:0;}
    #chapitre1-content-3-inner{position:absolute; top:0; left:2%; width:96%; height:100vh; padding-left:0;}
    #chapitre1-content-3-images{position:absolute; top:0; left:0; width:100%; height:100vh;opacity:0;background-position:center 40%;background-size: 250% auto;}
    .chapitre1-content-3-images-bloc{width:60%; top:40%;}

    .chapitre1-content-3-images-bloc .pin, .chapitre1-content-3-images-bloc .pin-text{left:50%;}


    #chapitre1-content-3-images-bloc-1{left:20%; opacity:1; scale:1;}
    #chapitre1-content-3-images-bloc-2{left:90%; opacity:0.5; scale:0.8;}
    #chapitre1-content-3-images-bloc-3{left:160%; opacity:0.5; scale:0.8;}
    #chapitre1-content-3-images-bloc-4{left:220%; opacity:0.5; scale:0.8;}
    #chapitre1-content-3-images-bloc-5{left:280%; opacity:0.5; scale:0.8;}



    #chapitre1-content-4-animation-cont-ecran{position:relative; height:400px; max-height:45vh;}
    #chapitre1-content-4-animation-cont-ecran-graphisme{top:0; left:40%;width: 30%;}



    #chapitre2-content-1-images {margin: 5vh auto 20vh auto;}

    #chapitre2-content-1-image-4-pin{right:50%;}
    #chapitre2-content-1-image-4-pin-text{right:50%; width:50%;}

    #chapitre2-content-1-image-5-pin{right:60%}
    #chapitre2-content-1-image-5-pin-text{right:60%;}


    /*#chapitre2-content-2{height:200vh;}*/
    #chapitre2-content-2-cont{left:2%; width:96%; justify-content: end; padding-bottom:10vh;}
    #chapitre2-content-2-video{width: 120%; left: -10%;}

    #chapitre2-content-2-pin3{position:absolute; top:90%; left:10%; width:1px; height:0;}
    #chapitre2-content-2-pin1-text, #chapitre2-content-2-pin2-text, #chapitre2-content-2-pin3-text, #chapitre2-content-2-pin4-text{top: 92%; left: calc(10% + 50px);max-width:80%;}
    #chapitre2-content-2-pin1-text img, #chapitre2-content-2-pin2-text img, #chapitre2-content-2-pin3-text img, #chapitre2-content-2-pin4-text img{transform: translateY(50%);}


    #chapitre3-content-2{height:auto; flex-direction: column; row-gap:20px; padding: 10vh 2% 10vh 0;}
    #chapitre3-content-3-images{margin-bottom:10vh;}
    #chapitre3-content-3-pin, #chapitre3-content-3-pin-text{visibility: hidden;}
    #chapitre3-content-3-mobile-pin, #chapitre3-content-3-mobile-pin-text{visibility:visible;}



}



@media screen and (max-width: 750px) {
    #subtitle h2{font-size:3rem;}


    #chapitre1-content-4-animation-cont-ecran{width:90%; height:auto; max-height:none;}
    #chapitre1-content-4-animation-cont-lumiere{width:90%; height:auto; max-height:none; margin-top:5vh}
    #chapitre1-content-4-animation-cont-ecran img{width:100%; height:auto;}
    #chapitre1-content-4-animation-cont-lumiere img{width:100%; height:auto; margin-top:15vh}
    #chapitre1-content-4-animation-cont-ecran-graphisme{top:0; left:40%;width: 100%;}
    #chapitre1-content-4-animation-cont-ecran-pin, #chapitre1-content-4-animation-cont-ecran-pin-text{visibility: hidden;}
    #chapitre1-content-4-animation-cont-ecran-mobile-pin, #chapitre1-content-4-animation-cont-ecran-mobile-pin-text{visibility: visible;}


}



@media screen and (max-width: 580px) {
    #chapitre1-content-4-animation-cont-lumiere-pin{right:20%;}
    #chapitre1-content-4-animation-cont-lumiere-pin-text{right:25%;}
}