@font-face {
    font-family: karrik;
    src: url(font/karrik.otf);
}

/* preloader */
#preloader {
    position: fixed;
    inset: 0;
    background:rgb(255, 255, 255);
    color: rgb(81, 21, 95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: karrik;
    z-index: 999;
    opacity: 1;
    transition: opacity 500ms ease-out;
    pointer-events: none;
}
#preloader.hidden {
    opacity: 0;
}

#bar-container {
    width: 320px;
    height: 8px;
    background: rgb(212, 169, 221);
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 10px;
}

#bar {
    width: 0%;
    height: 100%;
    background: rgb(221, 145, 30);
    transition: width 0.15s linear;
}
.zoziaux {
    position: absolute;
    inset: 0;
}
.zoziaux img {
    position: absolute;
    width: 50px;
    opacity: 0;
    z-index: -1;
    transition: opacity 100ms ease-out;
}
.zoziaux img.visible {
    opacity: 1;
}

/* ---------------------------------------------------------------------- helper */

/* image sélectionnée */
img.help-selected {
    outline: 3px solid lime;
}
/* section sélectionnée */
section.help-selected {
    outline: 3px solid turquoise;
    background: #40e0d011;
}
/* section qui a une image sélectionnée */
section:has(img.help-selected) {
    background: #40e0d011;
}




/* ---------------------------------------------------------------------- bruitages */
img[data-bruitage]:hover{
    animation: brrr 300ms ease-out;
}
@keyframes brrr {
    0%{rotate: 0deg;}
    10%{rotate: -1deg;}
    20%{rotate: 1deg;}    
    40%{rotate: -1deg;}
    60%{rotate: 1deg;}    
    80%{rotate: -1deg;}   
    100%{rotate: 0deg;}
}


/* ---------------------------------------------------------------------- typo */

:root {
    /* @link https://utopia.fyi/clamp/calculator?a=360,1240,50—86 */
    --tresgroscorps: clamp(3.4375rem, -0.2699rem + 16.4773vw, 12.5rem);
    --autrices: clamp(0.5rem, -0.0625rem + 2.5vw, 1.875rem);
}

html{
    overflow-x: hidden; 
}

body {
    color: rgb(72, 45, 12);
    font-family: karrik;
    background-color: rgb(255, 255, 255);
    overflow-x: hidden;
    margin: 0;
    padding: 1em;
}

/* img { max-width: 100%; } */
.retour a img{
    transform: rotate(-90deg);
    width: 10vw;
}

hr {
    opacity: 0;
    grid-column: 1 / span 4;
}

.top{
    position: fixed;
    max-width: 6vw;
    z-index: 8;

}

.floptop{
    position: fixed;
    width: 30px;
    z-index: 3;
    bottom: 1.5em;
    left: 1.5em;
    display: block;
    transform: rotate(-90deg);

    img { width: 100%;}
}
header, .colophon {
    position: relative;
    background: white;
    z-index: 4;
}
#serveursection {
    z-index: 6  ;
}
/* ----------------------------------------------------------------------  sections : hrlp */

.help section::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px dotted purple;
}
.help section::after {
    content: attr(class);
    font-family: monospace;
    font-size: 1em;
    padding: .1em .5em;
    z-index: 99999;
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: purple;
    color: white;
}

/* ----------------------------------------------------------------------  sections : free */

section.free {
    height: 50vh;
    position: relative;
    z-index: 2;
}
.free img {
    position: absolute;
    width: 50%;
}
.free .right { right: 0; }
.free .left { left: 0; }
.free .top { top: 0; }
.free .bottom { bottom: 0; }


img.free { position: absolute; }

/* ----------------------------------------------------------------------  sections : grid */

.grid:where(section) {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-width: 1200px;
    gap: 1em 1em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 3;
    pointer-events: none;
}

article {
    position: relative;
    z-index: 1;
    grid-column: 1 / span 2;
    pointer-events: all;
}

section.grid img {
    position: absolute;
    width: 50%;
}
.col1 { grid-column: 1 / span 2; }
.col2 { grid-column: 2 / span 2; }
.col3 { grid-column: 3 / span 2; }
.col4 { grid-column: 4 / span 2; }
.col5 { grid-column: 5 / span 2; }
.col6 { grid-column: 6 / span 2; }
.col7 { grid-column: 7 / span 2; }
.row2 { grid-row: 2; }

.hidden { display: none; }

/* ---------------------------------------------------------------------- play pause */

.text span {
    width: 1.5em;
    height: 1.5em;
    background: url(media/play.svg);
    float: left;
    margin-right: 0.5em;
    margin: .25em 0.5em 0 -.25em;
    margin: 0 0.5em 0 -.25em;
    cursor: pointer;
    /* border: 1px solid black; */
  /* border-radius: 100%; */
}
#blancsvg{
    background: url(media/playblanc.svg);
    background-position: center;
  background-repeat: no-repeat;
  /* background-size: 1.5em; */
  }


.text.play-right span {
    float: right;
    margin-left: 0.5em;
    margin-right: 0;
}
.text span.playing {
    background: url(media/pause.svg);
}
#blancsvg.playing {
     background: url(media/pauseblanc.svg);
     background-position: center;
  background-repeat: no-repeat;
}

.text p {
    opacity: 1000;
    margin: 0;
    transition: opacity 1000ms;
    pointer-events: none;
}
.text.text-visible p {
    opacity: 1;
    pointer-events: all;
}
.audioonly .text p {
    visibility: hidden !important;
}
/* -------------------------- bruitages */
[data-bruitage] {
    cursor: pointer;
}

/* header---------------------------------------------------------------------- header */


h1 {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    font-size: var(--tresgroscorps);
    font-size: 14vw;
    margin-bottom: 0;
    padding-bottom: 1em;
    /* font-size: min(14vw, 12em); */
}

.comme {
    transform: rotate(-14.5deg) translateX(-25%);
}
.flope {
    transform: rotate(17deg) translateX(20%);
}
.rossignol {
    transform: rotate(-3.5deg);
}

/* ---colophon------------------------------------------------------------------- colophon */
/*pour que position relative soit responsive il faut utiliser des % pas des px */

.colophon {
    height: 314.857vw;
    width: 100vw;
    /* background-color: rgba(229, 216, 240, 0); */
    position: relative;
    overflow: visible;
}

.colophon img {
    max-width: none;
}
.colophon::after {
    content: "";
    background-image: url(images/illus/nuagescailloux/foret2.png);
    width: 150vw;
    margin-left: -25vw;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    bottom: -25vh;
    z-index: -1;
    background-size: contain;
    opacity: 0.3;
}

.autrices-nuagerouge {
    height: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: -2em 0 10em 0;*/
    transform: rotate(-5deg);
    position: relative;
    left: 30%;
}

.autrices {
    display: flex;
    flex-direction: column;
    gap: 5em;
    align-items: center;
    margin: 0 0 0 0;
    font-size: var(--autrices);

    position: relative;
    top: -2%;
    left: 15%;
}

.maida {
    transform: translateX(40%) rotate(-14.5deg);
}

.clemence {
    transform: translateX(-40%) rotate(8deg);
}

.autrices-nuagevert {
    height: 85vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(-5deg);
    position: relative;
    left: 27%;
}

.autrices-nuagejaune {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(30deg);
    position: relative;
    top: -27%;
    left: -29%;
}

.autrices-brule {
    height: 130vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em 0 0em 0;
    transform: rotate(60deg);
    position: relative;
    top: -34%;
    left: 14%;
}

.autrices-purplevase {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(100deg);
    position: relative;
    top: -54%;
    left: 11%;
}

.autrices-flamme {
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(20deg);
    position: relative;
    top: -105%;
    left: -35%;
}

.autrices-feuillemorte {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(250deg);
    position: relative;
    top: -104%;
    left: -36%;
}

.autrices-herbecoupe {
    height: 71vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(35deg);
    position: relative;
    top: -105%;
    left: -61%;
}

.autrices-vanille {
    height: 56vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em 0 0em 0;
    transform: rotate(120deg);
    position: relative;
    top: -116%;
    left: 48%;
}

/* ---------------------------------------------------------------------- sections */
/*intro-----------------------------------------------------------------------intro*/

.intro {
    /* margin-top: -39vh;*/
    
    position: relative;
}

.intro article {
    grid-row: 2;
}


.introtext{
    margin-bottom: 38%;
    z-index: 6;
}
.serveur {
    left: 13.4288%;
  top: 32.8066%;
    transform: scale(1.249);
}
.intro.free {
    height: 49.98vw; 
margin-top: -20vw;
}
.printemps.right {
    right: 18.6047%;
  top: 54.8175%;
    transform: scale(1.100);

}

@media (max-width:500px) {
    section.grid{
        display: flex !important;
        flex-direction: column;
    }
    .text {
        width: 75%;
    }
    .col4, .col5, .col6  {
        margin-left: 25vw;
    }
    
}
/*terrasse-----------------------------------------------------------------------------------------terasse*/

.terrassetext1 {
    
    margin-bottom:28% ;
    position: relative;
}

@media (max-width:850px)
{
    .terrassetext1
    {
      margin-bottom:11% ;
    position: relative;   
    }
}





.terrassetext2 {
   margin-bottom:-5% ;
  position: relative;
}


@media (max-width:850px)
{
    .terrassetext2
    {
      margin-bottom:-3% ;
    position: relative;   
    }
}




.terrassetext3 {
    margin-bottom:19% ;
   
    position: relative;
}

.terrasseimg1.free{
    height: 2vw;
}

.terrasseimg2.free{
    height: 34vw;
}

.terrasseimg3.free{
    height: 10.9vw;
}
.cetapresmidila {
    position: relative;
}

.airetaitdoux {
    position: relative;
}

.caseracomme {
    position: relative;
}

.facadethe.right {
    right: 0%;
  top: -56.4882%;
    transform: scale(0.950);
    z-index: 3;
}
.teisane {
    left: 3.28947%;
  top: 11.4891%;
    transform: scale(0.400);
}

@media (max-width:850px) {
    .teisane {
    left: 0%;
  top: 8.81688%;
    transform: scale(0.399);
}
  
}



.leverdesoleil.right {
    right: 0%;
  top: -69.8921%;
    transform: scale(1.200);
}

.envahir.right {
    right: -8.70647%;
  top: 51.9%;
    transform: scale(1.000);
}




@media (max-width:850px) {
   .commedhab.right {
    right: 0%;
  top: -594.121%;
    transform: scale(0.900);
}

.moussefeu {
    left: 0%;
  top: -154.031%;
    transform: scale(1.790);
}
.gouttefeu {
    left: 58.0685%;
  top: -308.063%;
    transform: scale(1.000);
}
  
}

.commedhab.right {
    right: 0%;
  top: -296.267%;
    transform: scale(0.900);
}
.moussefeu {
    left: 0%;
  top: -15.9283%;
    transform: scale(1.790);
}
.gouttefeu {
    left: 54.4242%;
  top: -82.8273%;
    transform: scale(1.000);
}



/*--absence-------------------------------------------------------------------------------------------absence*/

.absencetext1{
     margin-bottom:20% ;
    position: relative;     
}

.nourvendredi {
    left: 7.3736%;
  top: -41.358%;
    transform: scale(1.000);
}
.apovendredi.right {
    right: 2.80899%;
  top: 4.32099%;
    transform: scale(0.900);
}
.tacheduochrome {
    left: 25.2809%;
  top: 4.32099%;
    transform: scale(2.100);
}

.absenceimg1.free {
    height: 56.25vw; }



@media (max-width:850px) {
    .absencetext1{
     margin-bottom:11% ;
    position: relative;     
}
  .tacheduochrome {
    left: 26.2836%;
  top: 0%;
    transform: scale(2.300);
}
.nourvendredi {
    left: 7.33496%;
  top: -55.4223%;
    transform: scale(1.100);
}
.apovendredi.right {
    right: 0%;
  top: 6.39488%;
    transform: scale(1.000);
}

}




/*---rituel--------------------------------------------------------------------------------------------rituel*/
.carton {
    left: 27.2191%;
  top: 5.22222%;
    transform: scale(0.900);
    transform: rotate(35deg);
    z-index: 3;
}

.rituelimg1.free {
    height: 46.25vw; }


.mainapo.right {
    right: -16.5871%;
  top: -15.7658%;
    transform: scale(1.100);
}

.ritueltext2{
    margin-top:-34% ;
    position: relative; 
    margin-bottom: 35%;
}

.albmarc.right {
    right: -3.61842%;
  top: -44.5795%;
    transform: scale(0.750);
}
.tasseebreche.right {
    right: -3.94737%;
  top: -71.3835%;
    transform: scale(0.500);
}
.rituelimg3.free {
    height: 7.83vw; }



.rituelimg2.free {
    height: 32.86vw; }



.tachepile {
    left: 11.1842%;
  top: 27.0501%;
    transform: scale(0.900);
    z-index: 3;
}



.porteouverte {
    left: 6.25%;
  top: 95.1432%;
    transform: scale(0.650);
    z-index: 3;
}



.tacheselrituel.right {
    right: 12.5%;
  top: 13.8692%;
    transform: scale(1.200);
}

.rituelimg4.free {
    height: 47.90vw; }
.vieuxlivre.right {
    right: -3.61842%;
  top: 30.5797%;
    transform: scale(0.600);
}


.librairie {
    left: -4.60526%;
  top: -31.2613%;
    transform: scale(0.693) rotate(-7deg);
    
}


@media (max-width:850px) {


.carton {
    left: 27.2191%;
  top: 5.22222%;
    transform: scale(0.900);
    transform: rotate(35deg);
    z-index: 3;
}

.rituelimg1.free {
    height: 46.25vw; }


.mainapo.right {
    right: -16.5871%;
  top: -15.7658%;
    transform: scale(1.100);
}

.ritueltext2{
    margin-top:-34% ;
    position: relative; 
    margin-bottom: 35%;
}

.albmarc.right {
    right: -3.61842%;
  top: -44.5795%;
    transform: scale(0.750);
}
.tasseebreche.right {
    right: -3.94737%;
  top: -71.3835%;
    transform: scale(0.500);
}
.rituelimg3.free {
    height: 7.83vw; }



.rituelimg2.free {
    height: 32.86vw; }



.tachepile {
    left: 11.1842%;
  top: 27.0501%;
    transform: scale(0.900);
    z-index: 3;
}



.porteouverte {
    left: 6.25%;
  top: 95.1432%;
    transform: scale(0.650);
    z-index: 3;
}



.tacheselrituel.right {
    right: 12.5%;
  top: 13.8692%;
    transform: scale(1.200);
}

.rituelimg4.free {
    height: 47.90vw; }
.vieuxlivre.right {
    right: -3.61842%;
  top: 30.5797%;
    transform: scale(0.600);
}


.librairie {
    left: -4.60526%;
  top: -31.2613%;
    transform: scale(0.693) rotate(-7deg);
    
}




}

/*-vendredi--------------------------------------- section: vendredi */



.vendreditext1{
    margin-bottom:20% ;
    position: relative; 
}


.tapismanteau {
    left: 28.2895%;
  top: 41.602%;
    transform: scale(1.700);
}


.vendrediimg1.free {
    height: 37.88vw; }

    .manteau.right {
    right: 0%;
  top: -75.623%;
    transform: scale(0.750);
}



.apocafe {
    left: 10.5263%;
  top: 76.4824%;
    transform: scale(0.800);
}
.rideaux {
    left: 53.9474%;
  top: 70.4669%;
    transform: scale(0.650);
}


.tapisorange {
    left: 2.30263%;
  top: 175.308%;
    transform: scale(1.650);
}


.vendreditext2{
    margin-bottom:30% ;
    position: relative; 
}


@media (max-width:850px) {

.vendreditext1{
    margin-bottom:20% ;
    position: relative; 
}


.tapismanteau {
    left: 28.2895%;
  top: 41.602%;
    transform: scale(1.700);
}


.vendrediimg1.free {
    height: 37.88vw; }

    .manteau.right {
    right: 0%;
  top: -75.623%;
    transform: scale(0.750);
}



.apocafe {
    left: 10.5263%;
  top: 76.4824%;
    transform: scale(0.800);
}
.rideaux {
    left: 53.9474%;
  top: 70.4669%;
    transform: scale(0.650);
}


.tapisorange {
    left: 2.30263%;
  top: 175.308%;
    transform: scale(1.650);
}


.vendreditext2{
    margin-bottom:30% ;
    position: relative; 
}
}

/*ancetre---------------------------------------- section: ancetre */



.ancetreimg1.free {
    height: 67.95vw; }


.spirale {
    left: 25.9868%;
  top: 35.9299%;
    transform: scale(2.150);
}
.rayuresviojau {
    left: 0.328947%;
  top: 39.7624%;
    transform: scale(0.650);
}
.sel.right {
    right: 11.8421%;
  top: 25.3904%;
    transform: scale(0.600);
}

.detroit.right {
    right: -17.7632%;
  top: -11.4976%;
    transform: scale(0.600);
}


.ancetretext2{
     margin-top:-10% ;
    position: relative; 
     margin-bottom:120% ;
    
}

.theiere {
    left: 3.94737%;
  top: 159.529%;
    transform: scale(0.950);
}


.tasserose {
    left: 3.61842%;
  top: 112.58%;
    transform: scale(0.700);
}


.tasseverte {
    left: -0.986842%;
  top: 210.789%;
    transform: scale(0.850);
}

.couler.right {
    right: 1.64474%;
  top: 160.008%;
    transform: scale(1.000);
    z-index: 3;
}
.tasseviolette.right {
    right: 6.25%;
  top: 270.672%;
    transform: scale(1.000);
}
.tassejaune.right {
    right: 0%;
  top: 101.083%;
    transform: scale(1.000);
}

@media (max-width:850px) {
    
}

/*--ancetre^partie2--------------------------------------------------------------------------------------------*/


.ancetretext3{
     margin-bottom:4% ;
    position: relative; 

}



.ancetreimg2.free {
    height: 93.02vw; }
.tordu {
    left: 0%;
  top: 78.8946%;
    transform: scale(0.900);
    z-index: 3;
}
.famille {
    left: 26.3158%;
  top: 20.2142%;
    transform: scale(1.500);
}
.portrait {
    left: 23.3553%;
  top: 24.3885%;
    transform: scale(1.800);
}

.tordu {
    left: 0.328947%;
  top: 92.0364%;
    transform: scale(0.950);
}

.carreauorange.right {
    right: -9.53947%;
  top: 111.983%;
    transform: scale(0.900);
}

.ancetretext4{
     margin-bottom:7% ;
    position: relative; 

}

@media (max-width:850px) {
 
.ancetretext3{
     margin-bottom:4% ;
    position: relative; 

}



.ancetreimg2.free {
    height: 93.02vw; }
.tordu {
    left: 0%;
  top: 78.8946%;
    transform: scale(0.900);
}
.famille {
    left: 26.3158%;
  top: 20.2142%;
    transform: scale(1.500);
}
.portrait {
    left: 23.3553%;
  top: 24.3885%;
    transform: scale(1.800);
}

.tordu {
    left: 0.328947%;
  top: 92.0364%;
    transform: scale(0.950);
}

.carreauorange.right {
    right: -9.53947%;
  top: 111.983%;
    transform: scale(0.900);
}

.ancetretext4{
     margin-bottom:7% ;
    position: relative; 

}   
}

/*--moderne------------------------------------------------------------- section: moderne */

.modernetext1{
     margin-bottom:53% ;
    position: relative; 

}

.porte {
    left: 41.1184%;
  top: -133.827%;
    transform: scale(0.900);
}

@media (max-width:850px) {
   .modernetext1{
     margin-bottom:53% ;
    position: relative; 

}

.porte {
    left: 41.1184%;
  top: -133.827%;
    transform: scale(0.900);
} 
}

/*-moderneetageres----------------------------------------------------------------*/

.moderneimg2.free {
    height: 12.84vw; }

.etag4 {
    left: 25%;
  top: 81.1359%;
    transform: scale(2.400);
}

.modernetext3{
     margin-bottom:17% ;
    position: relative; 
}


.moderneimg2.free {
    height: 12.81vw; }


.thevert {
    left: 4.27632%;
  top: -20.3304%;
    transform: scale(0.450);
}
.potvide {
    left: -16.1184%;
  top: -27.9543%;
    transform: scale(0.350);
}
.pichet {
    left: 20.7237%;
  top: -155.019%;
    transform: scale(0.250);
}
.sirop {
    left: 31.5789%;
  top: -332.91%;
    transform: scale(0.200);
}


.tassesunset.right {
    right: 3.61842%;
  top: 20.3304%;
    transform: scale(0.250);
}
.tassepirouette.right {
    right: -8.88158%;
  top: 91.4867%;
    transform: scale(0.250);
}
.tasseubematcha.right {
    right: -20.3947%;
  top: -99.1105%;
    transform: scale(0.200);
}



.moderneimg3.free {
    height: 27.88vw; }
.etag3 {
    left: 23.6842%;
  top: -16.464%;
    transform: scale(2.250);
}



.cafetiereitalienne.right {
    right: 4.27632%;
  top: -66.5525%;
    transform: scale(0.450);
}
.boite.right {
    right: -15.7895%;
  top: -63.0497%;
    transform: scale(0.350);
}

.tassechunk {
    left: -16.1184%;
  top: 1.16759%;
    transform: scale(0.350);
}
.tasseocean {
    left: 28.2895%;
  top: -3.50276%;
    transform: scale(0.250);
}
.confiture {
    left: 1.31579%;
  top: -49.0387%;
    transform: scale(0.350);
}
.fiolinette {
    left: 15.4605%;
  top: -14.0111%;
    transform: scale(0.250);
}






.flute {
    left: 24.0132%;
  top: -13.7504%;
    transform: scale(0.300);
}

.boitethe {
    left: -15.7895%;
  top: -17.188%;
    transform: scale(0.350);
}
.lessive {
    left: -3.28947%;
  top: -87.659%;
    transform: scale(0.250);
}
.tassechou {
    left: 10.5263%;
  top: -5.15641%;
    transform: scale(0.300);
}
.etag2 {
    left: 22.0395%;
  top: 83.0605%;
    transform: scale(2.200);
}
.moderneimg4.free {
    height: 37.88vw; }
.etag1 {
    left: 25.9868%;
  top: -3.43761%;
    transform: scale(2.150);
}

.decoction.right {
    right: -15.1316%;
  top: -38.6709%;
    transform: scale(0.350);
}
.huile.right {
    right: 12.8289%;
  top: -97.1068%;
    transform: scale(0.250);
}
.tassinette.right {
    right: 0%;
  top: 10.3122%;
    transform: scale(0.250);
}


.modernetext4{
   margin-top:-33% ;
    position: relative; 
    margin-bottom: 50%; 
}

@media (max-width:850px) {
    
.moderneimg2.free {
    height: 12.84vw; }

.etag4 {
    left: 25%;
  top: 81.1359%;
    transform: scale(2.400);
}

.modernetext3{
     margin-bottom:17% ;
    position: relative; 
}


.moderneimg2.free {
    height: 12.81vw; }


.thevert {
    left: 4.27632%;
  top: -20.3304%;
    transform: scale(0.450);
}
.potvide {
    left: -16.1184%;
  top: -27.9543%;
    transform: scale(0.350);
}
.pichet {
    left: 20.7237%;
  top: -155.019%;
    transform: scale(0.250);
}
.sirop {
    left: 31.5789%;
  top: -332.91%;
    transform: scale(0.200);
}


.tassesunset.right {
    right: 3.61842%;
  top: 20.3304%;
    transform: scale(0.250);
}
.tassepirouette.right {
    right: -8.88158%;
  top: 91.4867%;
    transform: scale(0.250);
}
.tasseubematcha.right {
    right: -20.3947%;
  top: -99.1105%;
    transform: scale(0.200);
}



.moderneimg3.free {
    height: 27.88vw; }
.etag3 {
    left: 23.6842%;
  top: -16.464%;
    transform: scale(2.250);
}



.cafetiereitalienne.right {
    right: 4.27632%;
  top: -66.5525%;
    transform: scale(0.450);
}
.boite.right {
    right: -15.7895%;
  top: -63.0497%;
    transform: scale(0.350);
}

.tassechunk {
    left: -16.1184%;
  top: 1.16759%;
    transform: scale(0.350);
}
.tasseocean {
    left: 28.2895%;
  top: -3.50276%;
    transform: scale(0.250);
}
.confiture {
    left: 1.31579%;
  top: -49.0387%;
    transform: scale(0.350);
}
.fiolinette {
    left: 15.4605%;
  top: -14.0111%;
    transform: scale(0.250);
}






.flute {
    left: 24.0132%;
  top: -13.7504%;
    transform: scale(0.300);
}

.boitethe {
    left: -15.7895%;
  top: -17.188%;
    transform: scale(0.350);
}
.lessive {
    left: -3.28947%;
  top: -87.659%;
    transform: scale(0.250);
}
.tassechou {
    left: 10.5263%;
  top: -5.15641%;
    transform: scale(0.300);
}
.etag2 {
    left: 22.0395%;
  top: 83.0605%;
    transform: scale(2.200);
}
.moderneimg4.free {
    height: 37.88vw; }
.etag1 {
    left: 25.9868%;
  top: -3.43761%;
    transform: scale(2.150);
}

.decoction.right {
    right: -15.1316%;
  top: -38.6709%;
    transform: scale(0.350);
}
.huile.right {
    right: 12.8289%;
  top: -97.1068%;
    transform: scale(0.250);
}
.tassinette.right {
    right: 0%;
  top: 10.3122%;
    transform: scale(0.250);
}


.modernetext4{
   margin-top:-33% ;
    position: relative; 
    margin-bottom: 50%; 
}
}

/*-lumiere--------------------------------------- section: lumiere */

.lumieretext1{
    margin-top:-21% ;
    position: relative; 
     

}


.wahoug.right {
    right: 6.64894%;
  top: -16.2835%;
    transform: scale(1.000);
}
.tassewahoufeu.right {
    right: 18.9495%;
  top: -22.7851%;
    transform: scale(0.700);
}
.lumiereimg1.free {
    height: 22.86vw; }

.lumieretext2{
    margin-top:-8% ;
    position: relative; 
     

}

.chauddevant.right {
    right: -2.11864%;
  top: 5.33808%;
    transform: scale(0.550);
}
.lumiereimg2.free {
    height: 43.91vw; }
.limonados {
    left: 2.64831%;
  top: -29.0629%;
    transform: scale(0.400);
    z-index: 3;
}
.sunflower {
    left: 4%;
  top: -14%;
    transform: scale(0.700) rotate(60deg); 
    
}


.lunelumiere.right {
    right: -9.26907%;
  top: -26.7523%;
    transform: scale(0.450);
}
.heritage {
    left: 10.5932%;
  top: 7.54851%;
    transform: scale(0.950);
}
.laclumiere2 {
    left: 49.2585%;
  top: 33.243%;
    transform: scale(1.100);
}
.laclumiere1 {
    left: -4.50212%;
  top: 33.693%;
    transform: scale(1.100);
}
.lumiereimg3.free {
    height: 58.91vw; }





    .rayon.right {
    right: 1.85381%;
  top: -4.35159%;
    transform: scale(0.650);
}
.ventre.right {
    right: 4.50212%;
  top: 15.4421%;
    transform: scale(0.350);
}
.rayontache.right {
    right: 7.15042%;
  top: -2.91977%;
    transform: scale(0.950);
}
.ventretache.right {
    right: 2.91314%;
  top: 44.6634%;
    transform: scale(1.050);
}
.luciole {
    left: 0%;
  top: 22.1535%;
    transform: scale(0.550);
}
.eclat {
    left: 0%;
  top: 43.5145%;
    transform: scale(0.400);
}
.lucioletache {
    left: -2.64831%;
  top: 21.9908%;
    transform: scale(0.850);
}
.eclattache {
    left: 0.529661%;
  top: 72.8984%;
    transform: scale(1.000);
}
.lumiereimg4.free {
    height: 123.91vw; }


    .lumieretext5{
        margin-top:-4% ;
    position: relative; 
    }


    @media (max-width:850px) {
    
.lumieretext1{
    margin-top:-21% ;
    position: relative; 
     

}


.wahoug.right {
    right: 6.64894%;
  top: -16.2835%;
    transform: scale(1.000);
}
.tassewahoufeu.right {
    right: 18.9495%;
  top: -22.7851%;
    transform: scale(0.700);
}
.lumiereimg1.free {
    height: 22.86vw; }

.lumieretext2{
    margin-top:-8% ;
    position: relative; 
     

}

.chauddevant.right {
    right: -2.11864%;
  top: 5.33808%;
    transform: scale(0.550);
}
.lumiereimg2.free {
    height: 43.91vw; }
.limonados {
    left: 2.64831%;
  top: -29.0629%;
    transform: scale(0.400);
}
.sunflower {
    left: 4%;
  top: -14%;
    transform: scale(0.700) rotate(60deg); 
    
}


.lunelumiere.right {
    right: -9.26907%;
  top: -26.7523%;
    transform: scale(0.450);
}
.heritage {
    left: 10.5932%;
  top: 7.54851%;
    transform: scale(0.950);
}
.laclumiere2 {
    left: 49.2585%;
  top: 33.243%;
    transform: scale(1.100);
}
.laclumiere1 {
    left: -4.50212%;
  top: 33.693%;
    transform: scale(1.100);
}
.lumiereimg3.free {
    height: 58.91vw; }





    .rayon.right {
    right: 1.85381%;
  top: -4.35159%;
    transform: scale(0.650);
}
.ventre.right {
    right: 4.50212%;
  top: 15.4421%;
    transform: scale(0.350);
}
.rayontache.right {
    right: 7.15042%;
  top: -2.91977%;
    transform: scale(0.950);
}
.ventretache.right {
    right: 2.91314%;
  top: 44.6634%;
    transform: scale(1.050);
}
.luciole {
    left: 0%;
  top: 22.1535%;
    transform: scale(0.550);
}
.eclat {
    left: 0%;
  top: 43.5145%;
    transform: scale(0.400);
}
.lucioletache {
    left: -2.64831%;
  top: 21.9908%;
    transform: scale(0.850);
}
.eclattache {
    left: 0.529661%;
  top: 72.8984%;
    transform: scale(1.000);
}
.lumiereimg4.free {
    height: 123.91vw; }


    .lumieretext5{
        margin-top:-4% ;
    position: relative; 
    }
}
/*---------------------------------------- section: cafe */



.cafeimg1.free {
    height: 53.91vw; }

.separorage {
    left: 0.29%;
  top: -30%;
    transform: scale(0.789) rotate(110deg);
}




.separorage2.right {
    right: -13.2415%;
  top: 4.34755%;
    transform: scale(1.050);
}

  .cafetext1{
        margin-top:-4% ;
    position: relative; 
    margin-bottom: 6%;
    }



    .cafeimg2.free {
    height: 28.91vw; }

.degouliner {
    left: -20.1271%;
  top: -9.00901%;
    transform: scale(0.700);
}
.cafetriste {
    left: 9.79873%;
  top: -59.4595%;
    transform: scale(1.200);
}
.separorage3.right {
    right: -19.3326%;
  top: -34.7341%;
    transform: scale(0.650);
}
.lunettes.right {
    right: -5.82627%;
  top: 0%;
    transform: scale(0.500);
}

.cafeimg3.free {
    height: 48.91vw; }
.orageneige {
    left: 0%;
  top: 23.9617%;
    transform: scale(1.150);
}



.oragepluie.right {
    right: 3%;
  top: -55%;
    transform: scale(0.890) rotate(-70deg);
}


.cafetext4{
        margin-top:7% ;
    position: relative; 
    margin-bottom: 1%;
    }


.paslourds.right {
    right: 2.38347%;
  top: -147.189%;
    transform: scale(1.000);
}
.cafeimg4.free {
    height: 33.91vw; }

@media (max-width:850px) {
   

.cafeimg1.free {
    height: 53.91vw; }

.separorage {
    left: 0.29%;
  top: -30%;
    transform: scale(0.789) rotate(110deg);
}




.separorage2.right {
    right: -13.2415%;
  top: 4.34755%;
    transform: scale(1.050);
}

  .cafetext1{
        margin-top:-4% ;
    position: relative; 
    margin-bottom: 6%;
    }



    .cafeimg2.free {
    height: 28.91vw; }

.degouliner {
    left: -20.1271%;
  top: -9.00901%;
    transform: scale(0.700);
}
.cafetriste {
    left: 9.79873%;
  top: -59.4595%;
    transform: scale(1.200);
}
.separorage3.right {
    right: -19.3326%;
  top: -34.7341%;
    transform: scale(0.650);
}
.lunettes.right {
    right: -5.82627%;
  top: 0%;
    transform: scale(0.500);
}

.cafeimg3.free {
    height: 48.91vw; }
.orageneige {
    left: 0%;
  top: 23.9617%;
    transform: scale(1.150);
}



.oragepluie.right {
    right: 3%;
  top: -55%;
    transform: scale(0.890) rotate(-70deg);
}


.cafetext4{
        margin-top:7% ;
    position: relative; 
    margin-bottom: 1%;
    }


.paslourds.right {
    right: 2.38347%;
  top: -147.189%;
    transform: scale(1.000);
}
.cafeimg4.free {
    height: 33.91vw; } 
}

/*---------------------------------------- section: inquiet */
.inquietimg1.free {
    height: 3.91vw; }
.magieviolette {
    left: -1.85381%;
  top: -420%;
    transform: scale(1.150);
}

.nourreviens {
    left: 9.5339%;
  top: -5.02691%;
    transform: scale(0.900);
}
.inquietimg2.free {
    height: 48.91vw; }
.comptoir {
    left: 37.8708%;
  top: 18.8836%;
    transform: scale(1.350);
}


.inquietimg3.free {
    height: 8.91vw; }

    .muginquiet.right {
    right: -2.64831%;
  top: -286.438%;
    transform: scale(0.600);
}
.tartepref {
    left: 7.68008%;
  top: -14.6142%;
    transform: scale(0.800);
}


.cuillere {
    left: -11.5657%;
  top: -801.002%;
    transform: scale(0.150) rotate(123deg);
    z-index: 3;
}


.inquiettext3{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 10%;
    }


.nourcroise.right {
    right: -2.38347%;
  top: -75.6227%;
    transform: scale(0.900);
}
.brouillard {
    left: -16.6223%;
  top: -10.134%;
    transform: scale(0.900);

}
.apodesespoir {
    left: 6.35593%;
  top: 14.4127%;
    transform: scale(0.900);
}

.inquietimg4.free {
    height: 28.91vw; }

    

    .inquietimg5.free {
    height: 63.91vw; }
.poids44 {
    left: 28.3369%;
  top: 0%;
    transform: scale(1.050);
}
.poids33 {
    left: 25.4237%;
  top: 3.25998%;
    transform: scale(1.050);
}


@media (max-width:850px) {
 
.inquietimg1.free {
    height: 3.91vw; }
.magieviolette {
    left: -1.85381%;
  top: -420%;
    transform: scale(1.150);
}

.nourreviens {
    left: 9.5339%;
  top: -5.02691%;
    transform: scale(0.900);
}
.inquietimg2.free {
    height: 48.91vw; }
.comptoir {
    left: 37.8708%;
  top: 18.8836%;
    transform: scale(1.350);
}


.inquietimg3.free {
    height: 8.91vw; }

    .muginquiet.right {
    right: -2.64831%;
  top: -286.438%;
    transform: scale(0.600);
}
.tartepref {
    left: 7.68008%;
  top: -14.6142%;
    transform: scale(0.800);
}


.cuillere {
    left: -11.5657%;
  top: -801.002%;
    transform: scale(0.150) rotate(123deg);
    z-index: 3;
}


.inquiettext3{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 10%;
    }


.nourcroise.right {
    right: -2.38347%;
  top: -75.6227%;
    transform: scale(0.900);
}
.brouillard {
    left: -16.6223%;
  top: -10.134%;
    transform: scale(0.900);

}
.apodesespoir {
    left: 6.35593%;
  top: 14.4127%;
    transform: scale(0.900);
}

.inquietimg4.free {
    height: 28.91vw; }

    

    .inquietimg5.free {
    height: 63.91vw; }
.poids44 {
    left: 28.3369%;
  top: 0%;
    transform: scale(1.050);
}
.poids33 {
    left: 25.4237%;
  top: 3.25998%;
    transform: scale(1.050);
}
   
}

/*---------------------------------------- section: luminion */
.luminiontext1{
        margin-top:-11% ;
    position: relative; 
    margin-bottom: 0%;
    }


.luminionimg1.free {
    height: 43.91vw; }
.lumilivre {
    left: 34.6928%;
  top: -17.7936%;
    transform: scale(0.600);
}
.brouette {
    left: 38.1356%;
  top: 7.71056%;
    transform: scale(1.000);
}
.marais {
    left: 2.91314%;
  top: -19.573%;
    transform: scale(0.850) rotate(143deg);
}


.salade.right {
    right: -4.65426%;
  top: -544.667%;
    transform: scale(1.100);
}
.poeme {
    left: 34.9069%;
  top: -417.149%;
    transform: scale(1.000);
   
}


.luminionimg2.free {
    height: 2.81vw; }

.luminiontext3{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 50%;
    }




.recette {
    left: 13.2979%;
  top: 27.9543%;
    transform: scale(1.000);
}

@media (min-width:1577px) {
.recette {
    left: 18.2979%;
  top: 27.9543%;
    transform: scale(1.000);
}
}



.luminionimg3.free {
    height: 12.81vw; }

.luminiontext5{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 70%;
    }




    .magierosa {
    left: 35.891%;
  top: 62.7802%;
    transform: scale(0.500) rotate(45deg);
}

.carotte {
    left: 11.3032%;
  top: -185.4%;
    transform: scale(0.800);
}
.titi {
    left: 44.2154%;
  top: -157.56%;
    transform: scale(1.000);
}

.toupet {
    left: 0%;
  top: 81.3215%;
    transform: scale(1.000);
}

.luminiontext6{
    position: relative;
    margin-top: -19%;
    margin-bottom: 9%;
}

@media (max-width:850px) {
 .luminiontext1{
        margin-top:-11% ;
    position: relative; 
    margin-bottom: 0%;
    }


.luminionimg1.free {
    height: 43.91vw; }
.lumilivre {
    left: 34.6928%;
  top: -17.7936%;
    transform: scale(0.600);
}
.brouette {
    left: 38.1356%;
  top: 7.71056%;
    transform: scale(1.000);
}
.marais {
    left: 2.91314%;
  top: -19.573%;
    transform: scale(0.850) rotate(143deg);
}


.salade.right {
    right: -4.65426%;
  top: -544.667%;
    transform: scale(1.100);
}
.poeme {
    left: 34.9069%;
  top: -417.149%;
    transform: scale(1.000);
}


.luminionimg2.free {
    height: 2.81vw; }

.luminiontext3{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 50%;
    }




.recette {
    left: 13.2979%;
  top: 27.9543%;
    transform: scale(1.000);
}



.luminionimg3.free {
    height: 12.81vw; }

.luminiontext5{
        margin-top:0% ;
    position: relative; 
    margin-bottom: 70%;
    }




    .magierosa {
    left: 35.891%;
  top: 62.7802%;
    transform: scale(0.500) rotate(45deg);
}

.carotte {
    left: 11.3032%;
  top: -185.4%;
    transform: scale(0.800);
}
.titi {
    left: 44.2154%;
  top: -157.56%;
    transform: scale(1.000);
}

.toupet {
    left: 0%;
  top: 81.3215%;
    transform: scale(1.000);
}

.luminiontext6{
    position: relative;
    margin-top: -19%;
    margin-bottom: 9%;
}   
}

/*---------------------------------------- section: cuisine */


.tableverte {
    left: 22.6064%;
  top: 73.612%;
    transform: scale(2.500);
}
.cuisineimg1.free {
    height: 57.93vw; }
.melanger.right {
    right: 3.65691%;
  top: -23.6008%;
    transform: scale(0.900);
}


.cuisineimg2.free {
    height: 57.93vw; }

.thermo {
    left: 23.9362%;
  top: -53.3828%;
    transform: scale(0.150);
}
.troishibis.right {
    right: -11.3032%;
  top: 17.4196%;
    transform: scale(0.400);
}
.mauvesolo.right {
    right: 4.65426%;
  top: 28.6581%;
    transform: scale(0.300);
}
.banana {
    left: 23.6037%;
  top: 66.869%;
    transform: scale(1.150);
}

.mauvedos {
    left: 6.98138%;
  top: -23.0389%;
    transform: scale(0.500);
}

.deuxhibis {
    left: -13.6303%;
  top: -74.3474%;
    transform: scale(0.250);
}
.poule.right {
    right: -13.6303%;
  top: -15.1719%;
    transform: scale(0.350);
}
.gingembre {
    left: 28.5904%;
  top: -23.6008%;
    transform: scale(0.350);
}


.alambic {
    left: -10.6383%;
  top: -6.74309%;
    transform: scale(0.450);
}
.fouet {
    left: 8.97606%;
  top: -106.766%;
    transform: scale(0.150);
}
.spatule.right {
    right: 7.97872%;
  top: -9.55271%;
    transform: scale(0.400);
}


.cuisinetext3{
    position: relative;
    margin-top: -3.5%;
    margin-bottom: 10%;
}



.soleilmer.right {
    right: 0%;
  top: 10.59%;
    transform: scale(0.400);
}
.cuisineimg3.free {
    height: 82.99vw; }
.plage {
    left: 23.2713%;
  top: 84.7203%;
    transform: scale(2.500);
}
.nourhorizon {
    left: 3.98936%;
  top: 31.3795%;
    transform: scale(1.200);
}

.mer {
    left: 26.9282%;
  top: 56.8724%;
    transform: scale(2.450);
}
.ciel {
    left: 24.9335%;
  top: 18.6501%;
    transform: scale(1.950);
}


.cuisinetext5{
    position: relative;
    margin-top: 13%;
margin-bottom: 22%;}


@media (max-width:850px) {
  .tableverte {
    left: 22.6064%;
  top: 73.612%;
    transform: scale(2.500);
}
.cuisineimg1.free {
    height: 57.93vw; }
.melanger.right {
    right: 3.65691%;
  top: -23.6008%;
    transform: scale(0.900);
}


.cuisineimg2.free {
    height: 57.93vw; }

.thermo {
    left: 23.9362%;
  top: -53.3828%;
    transform: scale(0.150);
}
.troishibis.right {
    right: -11.3032%;
  top: 17.4196%;
    transform: scale(0.400);
}
.mauvesolo.right {
    right: 4.65426%;
  top: 28.6581%;
    transform: scale(0.300);
}
.banana {
    left: 23.6037%;
  top: 66.869%;
    transform: scale(1.150);
}

.mauvedos {
    left: 6.98138%;
  top: -23.0389%;
    transform: scale(0.500);
}

.deuxhibis {
    left: -13.6303%;
  top: -74.3474%;
    transform: scale(0.250);
}
.poule.right {
    right: -13.6303%;
  top: -15.1719%;
    transform: scale(0.350);
}
.gingembre {
    left: 28.5904%;
  top: -23.6008%;
    transform: scale(0.350);
}


.alambic {
    left: -10.6383%;
  top: -6.74309%;
    transform: scale(0.450);
}
.fouet {
    left: 8.97606%;
  top: -106.766%;
    transform: scale(0.150);
}
.spatule.right {
    right: 7.97872%;
  top: -9.55271%;
    transform: scale(0.400);
}


.cuisinetext3{
    position: relative;
    margin-top: -3.5%;
    margin-bottom: 10%;
}



.soleilmer.right {
    right: 0%;
  top: 10.59%;
    transform: scale(0.400);
}
.cuisineimg3.free {
    height: 82.99vw; }
.plage {
    left: 23.2713%;
  top: 84.7203%;
    transform: scale(2.500);
}
.nourhorizon {
    left: 3.98936%;
  top: 31.3795%;
    transform: scale(1.200);
}

.mer {
    left: 26.9282%;
  top: 56.8724%;
    transform: scale(2.450);
}
.ciel {
    left: 24.9335%;
  top: 18.6501%;
    transform: scale(1.950);
}


.cuisinetext5{
    position: relative;
    margin-top: 13%;
margin-bottom: 22%;}  
}

/*---------------------------------------- section: marmite */

.marmiteimg1.free {
    height: 67.95vw; }
.feuchaud {
    left: 23.6037%;
  top: 27.4856%;
    transform: scale(0.500);
}
.marmite {
    left: 22.9388%;
  top: 8.14345%;
    transform: scale(1.200);
}

.foretjeune.right {
    right: 2.32713%;
  top: 38.8043%;
    transform: scale(0.800);
}
.magnolia {
    left: 7.64628%;
  top: -8.62317%;
    transform: scale(0.950);
}

.tabouret.right {
    right: -0.99734%;
  top: -43.827%;
    transform: scale(0.600);
}
.pacifiboite {
    left: 7.31383%;
  top: -18.0464%;
    transform: scale(0.500);
}
.orangeconfite {
    left: 7.64628%;
  top: 8.59353%;
    transform: scale(1.000);
}
.marmiteimg2.free {
    height: 32.89vw; }




    .marmiteimg3.free {
    height: 22.86vw; }

.atmosphere {
    left: 40.2261%;
  top: 37.0159%;
    transform: scale(1.250);
}

.mainpacifi {
    left: 18.617%;
  top: 56.9611%;
    transform: scale(0.700);
}

@media (min-width:1577px) {
.mainpacifi {
    left: 14.8305%;
  top: 58.0998%;
    transform: scale(0.700);
}

.atmosphere {
    left: 33.1038%;
  top: 41.0116%;
    transform: scale(1.250);
}

}

.marmitetext4{
    position: relative;
    margin-top: 10%;
}




.four {
    left: -4.65426%;
  top: 37.0159%;
    transform: scale(0.750);
    z-index: 3;
}


.marmiteimg5.free {
    height: 77.98vw; }

.dodo {
    left: 50.1995%;
  top: 0%;
    transform: scale(1.000);
}
.tacheendormi {
    left: 25.9309%;
  top: 22.9588%;
    transform: scale(1.800);
    z-index: -1;
}
.lunebicolor.right {
    right: -12.9654%;
  top: -46.7537%;
    transform: scale(0.450);
}

@media (max-width:850px) {
 .marmiteimg1.free {
    height: 67.95vw; }
.feuchaud {
    left: 23.6037%;
  top: 27.4856%;
    transform: scale(0.500);
}
.marmite {
    left: 22.9388%;
  top: 8.14345%;
    transform: scale(1.200);
}

.foretjeune.right {
    right: 2.32713%;
  top: 38.8043%;
    transform: scale(0.800);
}
.magnolia {
    left: 7.64628%;
  top: -8.62317%;
    transform: scale(0.950);
}

.tabouret.right {
    right: -0.99734%;
  top: -43.827%;
    transform: scale(0.600);
}
.pacifiboite {
    left: 7.31383%;
  top: -18.0464%;
    transform: scale(0.500);
}
.orangeconfite {
    left: 7.64628%;
  top: 8.59353%;
    transform: scale(1.000);
}
.marmiteimg2.free {
    height: 32.89vw; }




    .marmiteimg3.free {
    height: 22.86vw; }

.atmosphere {
    left: 40.2261%;
  top: 37.0159%;
    transform: scale(1.250);
}

.mainpacifi {
    left: 18.617%;
  top: 56.9611%;
    transform: scale(0.700);
}

.marmitetext4{
    position: relative;
    margin-top: 10%;
}




.four {
    left: -4.65426%;
  top: 37.0159%;
    transform: scale(0.750);
}


.marmiteimg5.free {
    height: 77.98vw; }

.dodo {
    left: 50.1995%;
  top: 0%;
    transform: scale(1.000);
}
.tacheendormi {
    left: 25.9309%;
  top: 22.9588%;
    transform: scale(1.800);
    z-index: -1;
}
.lunebicolor.right {
    right: -12.9654%;
  top: -46.7537%;
    transform: scale(0.450);
}   
}

/*---------------------------------------- section: reve */

.fusion{
     mix-blend-mode: overlay;
}



.revetext1 {
    color: white;
}
.revetext2{
    color: white;
    position: relative;
    margin-top: -23%;
    margin-bottom: 20%;
    z-index: 4;
}


.revetext3{
    color: white;
    position: relative;
    margin-top: -71%;
    margin-bottom: 0%;
}




.reveimg1.free {
    height: 72.97vw; }


.reveimg2.free {
    height: 72.97vw; }



 
.fonddereve2 {
    left: 22.9388%;
  top: 27.6584%;
    transform: scale(2.850);
}


.fonddereve1 {
    left: 28.258%;
  top: 18.7363%;
    transform: scale(2.850);
}



.grandassiseblanc.right {
    right: 7.64628%;
  top: -12.4909%;
    transform: scale(1.000);
}
.grandassise.fusion.right {
    right: 7.97872%;
  top: -12.4909%;
    transform: scale(1.000);
}

.mainmainblanc {
    left: 0.64096%;
  top: 41.1792%;
    transform: scale(1.500) rotate(38deg);
    z-index: 9;
}

.mainmain {
    left: 0.94096%;
  top: 42.1792%;
    transform: scale(1.500) rotate(38deg);
    z-index: 20;
}




.ensembleblanc {
    left: 26.5957%;
  top: 44.1642%;
    transform: scale(1.850);
    z-index: 3;
}

.ensemble {
    left: 26.9957%;
  top: 44.5642%;
    transform: scale(1.850);
    z-index: 3;
}


.revetext4{
    color: white;
    position: relative;
    margin-top: 82%;
    margin-bottom: 0%;
}
.reveimg3.free {
    height: 67.95vw; }
.fonddereve3 {
    left: 33.5771%;
  top: 20.1191%;
    transform: scale(2.950);
}

.murplblanc {
    left: -0.332447%;
  top: 11.0185%;
    transform: scale(1.000);
}
.flop.right {
    right: 8.64362%;
  top: -7.18597%;
    transform: scale(1.000);
    z-index: 3;
}


.murpl {
    left: -0.732447%;
  top: 11.4185%;
    transform: scale(1.000);
}
.flopo.right {
    right: 8.04362%;
  top: -7.98597%;
    transform: scale(1.000);
    mix-blend-mode: multiply;
    z-index: 3;
}


.revetext5{
    color: white;
    position: relative;
    margin-top: 0%;
    margin-bottom: 0%;
    z-index: 4;
}

.fonddereve4 {
    left: 23.6037%;
  top: 23.7936%;
    transform: scale(2.250);
}
.reveimg4.free {
    height: 77.98vw; }



.theiereblanc.right {
    right: -1.66223%;
  top: -7.51399%;
    transform: scale(0.700);
}


.bouilloire.fusion.right {
      right: -1.99468%;
  top: -7.09654%;
    transform: scale(0.700);
}

.fancyblanc {
    left: 6.98138%;
  top: -15.028%;
    transform: scale(0.800);
    z-index: 3;
}

.fancy.fusion {
    left: 7.28138%;
  top: -14.728%;
    transform: scale(0.800);
    z-index: 3;
}

.revetext6{
    color: white;
    position: relative;
    margin-top: -31%;
    margin-bottom: 0%;
}

.reveimg5.free {
    height: 67.98vw; }
.fonddereve5 {
    left: 23.2713%;
  top: 25.3783%;
    transform: scale(2.400);
}

.couvertureblanc {
    left: 23.9362%;
  top: 18.6752%;
    transform: scale(1.450);
}

.couverture.fusion {
    left: 23.5362%;
  top: 18.1752%;
    transform: scale(1.450);
}

/*---------------------------------------- section: reveil */

.reveiltext1{
      color: rgb(255, 255, 255);
    
z-index: 4;
margin-top: 27%;
margin-bottom: -29%;
height: 6vh;

}
.tri{
position: absolute;
    transform: scale(16.450) rotate(35deg);
    left: 20%;

}

.reveiltextb{   
z-index: 5;
height: 6vh;
margin-top: 33%;
margin-bottom: -36%;

}
.trii{
position: absolute;
    transform: scale(16.450) rotate(50deg);
    left: 20%;

}






.reveilimg1.free {
    height: 78.91vw; }
.bloug3.right {
    right: -10.0636%;
  top: -24.0924%;
    transform: scale(0.850);
}
.bloug2.right {
    right: 10.3284%;
  top: -17.4917%;
    transform: scale(0.800);
}
.bloug1 {
    left: 11.1229%;
  top: -19.4719%;
    transform: scale(0.800);
}
.bloug4 {
    left: -14.5657%;
  top: -9.57096%;
    transform: scale(1.100);
}



.bulle22 {
    left: -3.97246%;
  top: 72.2741%;
    transform: scale(0.250);
}
.bulle13 {
    left: -24.0996%;
  top: 59.0733%;
    transform: scale(0.400);
}
.bulle3 {
    left: 0%;
  top: 40.2623%;
    transform: scale(0.450);
}
.bulle16.right {
    right: 18.2733%;
  top: 25.7414%;
    transform: scale(0.200);
}
.bulle10.right {
    right: 14.5657%;
  top: 50.8229%;
    transform: scale(0.300);
}
.bulle2.right {
    right: -11.1229%;
  top: 58.0833%;
    transform: scale(0.450);
}


.reveilimg2.free {
    height: 3.91vw; }

    .bulle19.right {
    right: -3.4428%;
  top: -226.465%;
    transform: scale(0.400);
}
.bulle23 {
    left: 14.8305%;
  top: -539.52%;
    transform: scale(0.150);
}
.bulle1 {
    left: -12.1822%;
  top: -66.6075%;
    transform: scale(0.500);
}

.reveiltext3{
    position: relative;
    margin-top: 20%;
    margin-bottom: -17%;
}

.reveilimg3.free {
    height: 73.91vw; }


.gants {
    left: 0%;
  top: 54.9657%;
    transform: scale(1.000);
}
.cookies.right {
    right: 9.5339%;
  top: 16.2078%;
    transform: scale(1.150);
}

.reveiltext4{
    position: relative;
    margin-top: -14%;
    margin-bottom: 0%;
}

.reveiltext5{
    position: relative;
    margin-top: -9%;
    margin-bottom: 21%;
}


.reveiltext6{
    position: relative;
    margin-top: 15%;
    margin-bottom: 21%;
}




.nuitnuagepastel.right {
    right: -8.73941%;
  top: 159.041%;
    transform: scale(0.600);
}
.nuitnuagebleu.right {
    right: -0.529661%;
  top: 42.4837%;
    transform: scale(0.500);
}
.etoileb.right {
    right: 7.94492%;
  top: 62.0915%;
    transform: scale(0.300);
}
.etoilea.right {
    right: -13.7712%;
  top: -77.3421%;
    transform: scale(0.350);
}




.nuitnuageviolet {
    left: 19.0678%;
  top: 13.0719%;
    transform: scale(0.500);
}
.nuitnuagecorail {
    left: 19.5975%;
  top: 163.399%;
    transform: scale(0.450);
}
.etoilec {
    left: -15.8898%;
  top: 148.148%;
    transform: scale(0.450);
}
.luneetoiled {
    left: 1.58898%;
  top: 65.3595%;
    transform: scale(0.500);
    z-index: 3;
}
.etoilee {
    left: -13.2415%;
  top: 11.9826%;
    transform: scale(0.400);
}

/*---------------------------------------- section: peinture */

.peinturetext1{
    position: relative;
    margin-top: 30%;
    margin-bottom: -8%;
}

.seau {
    left: -3.4428%;
  top: 31.401%;
    transform: scale(0.800);
}
.peintureimg1.free {
    height: 53.91vw; }
.brosse.right {
    right: 8.20975%;
  top: -96.1353%;
    transform: scale(0.150);
}
.pinceau.right {
    right: -9.26907%;
  top: -121.256%;
    transform: scale(0.150);
}
.plic1.right {
    right: 2.64831%;
  top: 0.966184%;
    transform: scale(1.150);
}


.peinturetext2{
    position: relative;
    margin-top: 5%;
    margin-bottom: 0%;
}


.peintureimg2.free {
    height: 63.91vw; }


.potironron.right {
    right: -15.3602%;
  top: 37.4878%;
    transform: scale(1.700);
}

.potions {
    left: 12.1822%;
  top: 5.70466%;
    transform: scale(1.100);
}
.peindre {
    left: 0%;
  top: 6.92709%;
    transform: scale(0.800);
}

.peinturetext3{
    position: relative;
    margin-top: 14%;
    margin-bottom: 12%;
}

/*---------------------------------------- section: changement */

.changementimg1.free {
    height: 33.91vw; }
.bocaloide.right {
    right: 7.41525%;
  top: -15.361%;
    transform: scale(1.050);
}



.bleuetou {
    left: 15.8898%;
  top: 29.4667%;
    transform: scale(0.750);
}

.changementimg2.free {
    height: 53.91vw; }
.veston {
    left: 22.2458%;
  top: -28.9855%;
    transform: scale(1.150);
}

.aurore {
    left: 0%;
  top: -57.0048%;
    transform: scale(0.900);
}

.quartier.right {
    right: 1.85381%;
  top: -7.72897%;
    transform: scale(1.000);
}


.changementtext3{
    position: relative;
    margin-top: -15%;
    margin-bottom: 12%;
}



.vapeurthe {
    left: 1.58898%;
  top: 53.1353%;
    transform: scale(0.650);
}
.brouillardvapeur {
    left: 24.8941%;
  top: 30.0944%;
    transform: scale(1.800);
}
.changementimg3.free {
    height: 78.91vw; }

    .changementtext4{
    position: relative;
    margin-top: -55%;
    margin-bottom: 40%;
}

   .changementtext5{
    position: relative;
    margin-top: -6%;
    margin-bottom: 0%;
}
/*-biblio--------------------------------------- section: biblio */

.biblioimg1.free {
    height: 8.91vw; }


    .nournez.right {
    right: 5.56144%;
  top: 8.76851%;
    transform: scale(1.000);
}


.biblioimg2.free {
    height: 38.91vw; }

.apopointe {
    left: 0.91314%;
  top: 2.9656%;
    transform: scale(0.850) rotate(20deg);
}
.roche {
    left: -8.47458%;
  top: 3.34642%;
    transform: scale(1.100);
}


.biblioimg3.free {
    height: 13.91vw; }

.bouquiniste.right {
    right: 0%;
  top: -3.74438%;
    transform: scale(0.800);
}



.biblioimg4.free {
    height: 43.91vw; }

.bibliou {
    left: 10.5932%;
  top: 0%;
    transform: scale(1.000);
}
.rosier {
    left: 33.6335%;
  top: 5.33766%;
    transform: scale(1.300);
}












/*-fin----------------------------------------------------------------------------------------------fin*/

.fintext1{
    position: relative;
    margin-top: 6%;
    margin-bottom: 0%; 
}



.finimg1.free {
    height: 13.91vw; }
.matin.right {
    right: -10.5932%;
  top: -61.7823%;
    transform: scale(1.150);
}
.oceanos {
    left: -1.05932%;
  top: -20.5941%;
    transform: scale(0.800);
}


.fintext2{
    position: relative;
    margin-top: 0%;
    margin-bottom: 8%; 
}


.finimg2.free {
    height: 53.91vw; }
.joieintense {
    left: 24.0996%;
  top: 18.3575%;
    transform: scale(1.800);
}



.nourjoie {
    left: 8.47458%;
  top: -45.6702%;
    transform: scale(0.850);
}
.finimg3.free {
    height: 38.91vw; }


.menthos.right {
    right: -11.9174%;
  top: -42.1649%;
    transform: scale(0.800);
}

.mano.right {
    right: -14.8305%;
  top: -18.0707%;
    transform: scale(0.500);
}
.tasselumini.right {
    right: -0.264831%;
  top: -14.7243%;
    transform: scale(0.700);
}


.fintext5{
    position: relative;
    margin-top: -10%;
    margin-bottom: 0%; 
}


.finimg4.free {
    height: 63.91vw; }
.grandfinal {
    left: 22.2458%;
  top: 32.2325%;
    transform: scale(1.950);
}


.fintext6{
    position: relative;
    
    margin-bottom: 17%; 
}




.etincelle {
    left: 11.6356%;
  top: 9.36831%;
    transform: scale(1.000);
}



.dernier.right {
    right: -11.6356%;
  top: 51.8551%;
    transform: scale(0.250);
}
.finimg5.free {
    height: 93.02vw; }







/*-------------------------------------------------------------------------------------------------------extra*/

main section {
    max-width: 600px;
    margin: auto;
    padding-inline: 20px;
}

audio {
    position: sticky;
    top: 1em;
}

button {
    height: 20px;
    width: 40px;

    color: rgb(44, 30, 4);
    background-color: #912b2b;
    border-color: #ffffff00;
    cursor: pointer;
}

.amplitude-play-pause {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.amplitude-play-pause.amplitude-paused {
    background: url(media/play.svg);
}

.amplitude-play-pause.amplitude-playing {
    background: url(media/pause.svg);
}

.titre {
    text-align: center;
}

#container {
    position: relative;
}