:root {
    color-scheme: light only;
}

@media (prefers-color-scheme: dark) {
    .main {
        background-color: aquamarine;
    }
}


:root {
    --bleu: #192333;
    --marron: #C18B52;
    --container: 1300px;
}

body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    cursor: url("img/cursor-1.svg") 17 17, auto;
    overflow: hidden;
}

a:hover {
    cursor: url("img/cursor-2.svg") 17 17, pointer;
}

h1 {
    text-align: center;
}
h1 span:after {
    content: " - ";
    display: inline;
}

h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 57px;
    color: var(--bleu);
}

main {
    background-image: url(img/bg-header.jpg);
    background-repeat: repeat-x;
    background-position: top center;
    background-attachment: fixed;
}

header {
    background-color: var(--bleu);
    color: white;
    padding: 13px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 500;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

header img {
    height: 50px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 20px 0px;
    transition: 0.7s all;
}

nav ul li a:hover {
    color: var(--marron);
}

main .container {
    width: var(--container);
    max-width: 100%;
}

main #intro {
    /*background-image: url(img/bg-header.jpg);
    background-repeat: repeat-x;
    background-position: top center;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - 0px);
    /*justify-content: center;*/
    /*padding-top: 50px;*/
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 30%, rgb(255 255 255));
    overflow: hidden;
    padding: 0px 20px;
}

main #intro #logo {
    width: 810px;
    max-width: 100%;
    height: 329px;
    margin: auto;
    display: block;
    display: none;
}

main #intro h1 {
    margin-top: 0px;
    font-weight: 600;
    margin-top: calc(50vh + 30px);
}

main #intro .info {
    color: var(--marron);
    font-size: 33px;
    text-transform: uppercase;
    text-align: center;
    margin: auto;
    margin-top: 150px;
    margin-bottom: 33px;
    max-width: 1010px;
    padding: 0px 20px;
}





/**a propos***/
section#apropos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*background-color: #c18b522b;*/
    background-color: #f5ede5;
    /*padding: 150px 20px;*/
    position: relative;
    height: 100vh;
    min-height: 888px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 5;
}

section#apropos h2 {
    position: absolute;
    top: 10%;
    left: calc(50% - 175px);
    transform-origin: center center;
    z-index: 20;
    width: 320px;
}

section#apropos svg {
    position: absolute;
    left: calc(50% + 145px);
    top: 10%;
    z-index: 20;
    height: 160px;
}

section#apropos svg #cercle {
    /*cursor: pointer;*/
}

section#apropos svg #Close {
    opacity: 0;
}

section#apropos #lestrois {
    width: 1200px;
    max-width: 100%;
    position: relative;
    /*background-color: #E91E63;*/
    height: 675px;
    max-height: 100%;
}

#lestrois .c-apropos {
    /*background-color: #bfbfbf;*/
    /*border: 1px solid #2863B5;*/
    width: 25%;
    height: 74%;
    box-sizing: border-box;
    position: absolute;
    top: 13%;
    padding: 30px 8px;
    transition: all 1s;
}

#lestrois .c-apropos:hover {
    cursor: url("img/cursor-2.svg") 17 17, pointer;
}



#lestrois .c-apropos .c-in {
    background-color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-content: space-evenly;*/
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid;
    /*border-color: var(--marron);*/
    border-color: #ecd2b6;
    border-radius: 20px;
    box-shadow: #00000012 6px 6px 10px 5px;
}

#lestrois .c1 {
    left: 0px;
}

#lestrois .c2 {
    left: 25%;
}

#lestrois .c3 {
    right: 25%;
}
#lestrois .c4 {
    right: 0px;
}

/****left****/
#lestrois .c-apropos .left-info {
    width: 300px;
    /*background-color: #2863B5;*/
}

#lestrois .c-apropos .left-info img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

#lestrois .left-info h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--bleu);
}

/****right***/
#lestrois .right-info {
    display: none;
    opacity: 0;
    width: 0%;
    /*background-color: #C18B52;*/
    padding: 20px;
}

#lestrois .right-info h3 {
    text-align: left;
    text-transform: uppercase;
    font-size: 30px;
    color: var(--bleu);
}

#lestrois .right-info .texte {
    padding-right: 90px;
    font-size: 18px;
    margin-bottom: 35px;
    color: #707070;
    font-weight: 200;
    line-height: 1.3em;
}

#lestrois .right-info .texte p {
    font-size: 18px;
}

@media screen and (max-width: 1060px) {
    #lestrois .right-info .texte {
        padding-right: 0px;
    }
}

#lestrois .right-info .texte b {
    font-weight: 700;
}

#lestrois .right-info .texte span {
    color: var(--marron);
}

#lestrois .right-info a {
    background-color: var(--marron);
    border-radius: 18px;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 120px;
    text-transform: uppercase;
}


/*****/
#lestrois .c1 .left-info img,
#lestrois .c2 .left-info img {
    padding: 0px 20px;
    box-sizing: border-box;
}
#lestrois .c3 .left-info img {
    padding: 0px 7px;
    box-sizing: border-box;
}
#lestrois .c4 .left-info img {
    padding: 0px 12px;
    box-sizing: border-box;
}

#apropos img#deco2 {
    position: absolute;
    bottom: -354px;
    right: 0;
}


@media screen and (max-width: 700px) {
    main #intro h1 {
        font-size: 1.5em;
    }

    main #intro .info {
        font-size: 1.5em;
    }

    h1 span:after {
        content: "";
        display: block;
    }

    nav ul li a {
        font-size: 14px;
    }
    nav ul li:first-child {
        display: none;
    }
    header img {
        height: 43px;
    }

    section#apropos {
        height: auto;
        padding: 183px 20px;
        padding-bottom: 100px;
        /* min-width: 10px; */
        min-height: auto;
    }

    section#apropos #lestrois {
        width: 1200px;
        max-width: 100%;
        position: initial;
        /*background-color: #E91E63;*/
        height: auto;
        max-height: none;
    }

    #lestrois .c-apropos {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: initial;
    }
    #lestrois .right-info .texte p {
        font-size: 17px;
    }

    section#apropos h2 {
        top: 46px;
        font-size: 45px;
    }

    section#apropos svg {
        top: 30px;
    }

    /****left****/
    #lestrois .c-apropos .left-info {
        width: 100%;
    }

    #lestrois .c-apropos .c-in {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: space-evenly; */
        justify-content: center;
        min-height: 121px;
    }

    .left-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    #lestrois .c-apropos .left-info img {
        width: 35%;
        padding: 10px 16px;
        margin-bottom: 0px;
    }

    #lestrois .c-apropos .left-info br {
        content: "";
    }

    #lestrois .c-apropos .left-info br::after {
        content: " ";
    }

    #lestrois .c3 .left-info img {
        padding: 25px 16px;
        box-sizing: border-box;
        width: 35%;
    }

    #lestrois .left-info h3 {
        text-align: left;
        font-size: 17px;
    }

    #lestrois .right-info {
        display: flex;
        opacity: 1;
        width: 100%;
        /* background-color: #C18B52; */
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        transition: max-height 0.2s ease-out;
        flex-direction: column;
        align-items: flex-end;
    }

    #lestrois .right-info h3 {
        display: none;
    }

    #lestrois .right-info a {
        margin-bottom: 20px;
        font-size: 15px;
    }
    /***/
    #lestrois .info .left-info br {
        content: "";
    }

    #intro .info br::after {
        content: " ";
    }
}





/***/
/**** CONTACT*****/
#contact {
    height: 100vh;
    position: relative;
}

#contact #deco1 {
    position: absolute;
    top: -354px;
    right: 0;
}


#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*background-color: #c18b522b;*/
    background-color: #ffffffe3;
    /*padding: 150px 20px;*/
    position: relative;
    height: 100vh;
    min-height: 980px;
    box-sizing: border-box;
    overflow: hidden;
    /*z-index: 5;*/
}

#contact h2 {
    position: absolute;
    top: 10%;
    left: calc(50% - 295px);
    transform-origin: center center;
    z-index: 20;
    width: 590px;
}

#contact svg {
    position: absolute;
    right: calc(50% + 285px);
    top: 10%;
    z-index: 20;
    height: 160px;
    transform: rotateY(180deg);
}

#contact #container-contact {
    width: var(--container);
    max-width: 100%;
    position: relative;
    /*background-color: #E91E63;*/
    min-height: 675px;
    max-height: 100%;
    /*background-color: #f5ede5;*/
    margin-top: 10%;
    margin-right: 60px;
}

@media screen and (max-width: 1384px) {
    #contact #container-contact {
        margin-right: 130px;
    }
}
#info-right {
    border: 1px solid #000;
    height: 100%;
    border-radius: 20px;
    width: calc(100% - 260px);
    position: absolute;
    right: 0;
    padding-left: 385px;
    box-sizing: border-box;
    padding-right: 95px;
}

#circle-1 {
    height: 520px;
    width: 520px;
    position: absolute;
    background-color: var(--marron);
    border-radius: 50%;
    top: calc(50% - 260px);
    display: flex;
    flex-direction: column;
    /* align-content: center; */
    justify-content: center;
    padding: 80px;
    box-sizing: border-box;
    align-items: center;
}

#circle-2 {
    height: 580px;
    width: 580px;
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 290px - 20px);
    border: 20px solid #f5ede5;
    left: -52px;
}

#circle-1 h3 {
    font-size: 47px;
    color: #fff;
    text-align: center;
}

#circle-1 p {
    font-size: 20px;
    color: #fff;
    text-align: center;
}
#titre-responsive {
    display: none;
}

/*******contact form ****/
form {
    color: #707070;
}

form b {
    color: #1d1d1d;
}

.form-container {
    width: 100%;
    /* margin: 50px auto; */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: 100%;
    /* box-sizing: border-box; */
    align-content: center;
    flex-direction: column;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    height: 100px;
}

.submit-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--marron);
    color: white;
    text-align: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    width: 130px;
    height: 130px;
    position: absolute;
    bottom: -65px;
    right: -65px;
    font-size: 16px;
}

.submit-btn span {
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #8B5C35;
}

::placeholder {
    color: rgb(184, 184, 184);
    font-size: 15px;
}


/*********** footer ******/
footer {
    background-color: var(--bleu);
    color: white;
    text-align: center;
    padding: 40px 20px;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
}

footer #container-footer {
    width: var(--container);
    margin: auto;
    display: grid;
    justify-content: space-around;
    align-items: center;
    grid-template-columns: 33.33% 33.33% 33.33%;
    max-width: 100%;
}

#container-footer .left {
    text-align: left;
}

#container-footer .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #fff;
    justify-content: center;
    font-weight: 100;
}

#container-footer .right a {
    text-decoration: none;
    color: #fff;
    margin: 5px 0px;
    text-align: right;
}




@media screen and (max-width: 1050px) {
    #contact {
        height: auto; 
        padding: 60px;
    }
    #contact #container-contact {
        width: 700px;
        min-height: 675px;
        max-height: none;
        margin-top: 265px;
        margin-right: 0px;
    }
    #info-right {
        height: auto;
        width: 100%;
        padding: 50px;
        position: relative;
        margin-bottom: 110px;
    }
    #circle-1, #circle-2 {
        display: none;
    }
    #titre-responsive {
        display: block;
        color: var(--marron);
        font-size: 19px;
    }
    #titre-responsive h3{
        font-size: 27px;
    }
    #contact svg {
        top: 130px;
        right: calc(50% + 205px);
    }
    #contact h2 {
        top: 100px;
        width: 420px;
        left: calc(50% - 200px);

    }
    .submit-btn {
        width: 100px;
        height: 100px;
        bottom: -50px;
        right: -50px;
    }
    .submit-btn img {
        border-style: none;
        width: 29px;
    }
    div#container-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #container-footer .right {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #container-footer .centre {
        padding: 13px;
    }
}

@media screen and (max-width: 700px) {
    #contact #container-contact {
        margin-top: 215px;
    }

    #info-right {
        padding: 35px;
        padding-bottom: 70px;
        margin-bottom: 70px;
    }
    #contact {
        padding: 60px 35px;
    }

    #contact svg {
        top: 70px;
        right: calc(50% + 144px);
    }
    #contact h2 {
        top: 65px;
        width: 400px;
        left: calc(50% - 200px);
        font-size: 45px;
    }
    #apropos img#deco2 {
        opacity: 0.6;
    }
    #contact #deco1 {
        opacity: 0.6;
    }
    .submit-btn {
        width: 90px;
        height: 90px;
        bottom: -20px;
        right: -20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }
    .submit-btn img {
        border-style: none;
        width: 26px;
    }

}














/******************************* animation noir intro***********/

#back-rings {
    background-color: #433;
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    align-content: center;
    justify-content: center;
    background-image: url(img/bg-header.jpg);
    /* mix-blend-mode: multiply; */
    background-blend-mode: multiply;
    background-repeat: repeat-x;
}

a#bouton-entrez {
    padding: 15px 30px;
    background-color: #2b2424;
    border: 1px #ffffffc4 solid;
    border-radius: 30px;
    color: #fff;
    margin-top: 80px;
    text-decoration: none;
    transition: .5s;
    position: relative;
}

a#bouton-entrez::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: #ffee10;
    transition: .5s;
    transform: scale(.9);
    z-index: -1;
}

a#bouton-entrez:hover::before {
    transform: scale(1.1);
    box-shadow: 0 0 15px #ffee10;
}

a#bouton-entrez:hover {
    color: #ffee10;
    box-shadow: 0 0 5px #ffee10;
    text-shadow: 0 0 5px #ffee10;
}

.rings {
    /*max-width: 65vmin;*/
    filter: drop-shadow(0 -25px 15px rgba(0, 0, 0, 0.5));
    /* position: fixed; */
    top: 40%;
    /*left: 30%;*/
    /* background-color: blue; */
    position: absolute;
    /*la position left and top on la met en js***/
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /**/
    width: 800px;
    max-width: 70%;
}

a#bouton-entrez2 {
    padding: 15px 30px;
    background-color: #2b2424;
    border: 1px #ffffffc4 solid;
    border-radius: 30px;
    color: #fff;
    margin-top: 80px;
    text-decoration: none;
    transition: .5s;
    position: fixed;
    bottom: 40px;
    left: calc(50% - 53px);
    /*display: none;*/
}




/*****/
/* flash light - circulo de luz*/
* {
    /*padding: 0;
    margin: 0;*/
    /*-webkit-box-sizing: border-box;
    box-sizing: border-box;*/
    /*cursor: none;*/
    /*font-family: "Poppins", sans-serif;*/
}

#flashlight {
    --Xpos: 50%;
    /* position initial cachée*/
    --Ypos: 28%;
    --l: 13em;
}

#flashlight:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle var(--l) at var(--Xpos) var(--Ypos),
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1));
    animation: colorChange 4s infinite alternate;
}

/*
@property --l {
    syntax: '<length>';
    inherits: false;
    initial-value: 10px;
}

@keyframes colorChange {
    0% {
        --l: 13em;
    }

    50% {
        --l: 15em;
    }

    100% {
        --l: 13em;
    }

    50% {
        --l: 17em;
    }

    100% {
        --l: 13em;
    }
}*/


/** Fire - antorche**/
.fire {
    font-size: 11px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    margin: 3em auto 0 auto;
    position: absolute;
    left: 44%;
    /*position initial*/
    top: 24%;
    /*position initial*/
    width: 10em;
    height: 12em;
    transition: 1s scale;
}

@media screen and (max-width: 700px) {
    .fire {
        position: absolute;
        left: calc(50% - 45px);
        top: auto;
        bottom: 150px;
    }
    a#bouton-entrez {
        /*display: none;*/
    }
    #flashlight {
        /* position initial cachée*/
        --Ypos: 68%;

    }
}

.particle {
    animation: rise 1s ease-in infinite;
    background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 5em;
    height: 5em;
}

.particle:nth-of-type(1) {
    animation-delay: 0.4234272805s;
    left: calc((100% - 5em) * 0);
}

.particle:nth-of-type(2) {
    animation-delay: 0.0858359469s;
    left: calc((100% - 5em) * 0.02);
}

.particle:nth-of-type(3) {
    animation-delay: 0.1414037288s;
    left: calc((100% - 5em) * 0.04);
}

.particle:nth-of-type(4) {
    animation-delay: 0.0029242184s;
    left: calc((100% - 5em) * 0.06);
}

.particle:nth-of-type(5) {
    animation-delay: 0.2766678321s;
    left: calc((100% - 5em) * 0.08);
}

.particle:nth-of-type(6) {
    animation-delay: 0.5816126488s;
    left: calc((100% - 5em) * 0.1);
}

.particle:nth-of-type(7) {
    animation-delay: 0.3727066881s;
    left: calc((100% - 5em) * 0.12);
}

.particle:nth-of-type(8) {
    animation-delay: 0.9020913863s;
    left: calc((100% - 5em) * 0.14);
}

.particle:nth-of-type(9) {
    animation-delay: 0.6709695574s;
    left: calc((100% - 5em) * 0.16);
}

.particle:nth-of-type(10) {
    animation-delay: 0.1268491518s;
    left: calc((100% - 5em) * 0.18);
}

.particle:nth-of-type(11) {
    animation-delay: 0.2730922173s;
    left: calc((100% - 5em) * 0.2);
}

.particle:nth-of-type(12) {
    animation-delay: 0.1772938546s;
    left: calc((100% - 5em) * 0.22);
}

.particle:nth-of-type(13) {
    animation-delay: 0.6466811201s;
    left: calc((100% - 5em) * 0.24);
}

.particle:nth-of-type(14) {
    animation-delay: 0.2398997407s;
    left: calc((100% - 5em) * 0.26);
}

.particle:nth-of-type(15) {
    animation-delay: 0.4614704068s;
    left: calc((100% - 5em) * 0.28);
}

.particle:nth-of-type(16) {
    animation-delay: 0.3996527284s;
    left: calc((100% - 5em) * 0.3);
}

.particle:nth-of-type(17) {
    animation-delay: 0.3959085373s;
    left: calc((100% - 5em) * 0.32);
}

.particle:nth-of-type(18) {
    animation-delay: 0.4615602926s;
    left: calc((100% - 5em) * 0.34);
}

.particle:nth-of-type(19) {
    animation-delay: 0.2052650781s;
    left: calc((100% - 5em) * 0.36);
}

.particle:nth-of-type(20) {
    animation-delay: 0.2144358523s;
    left: calc((100% - 5em) * 0.38);
}

.particle:nth-of-type(21) {
    animation-delay: 0.3733556051s;
    left: calc((100% - 5em) * 0.4);
}

.particle:nth-of-type(22) {
    animation-delay: 0.5159854043s;
    left: calc((100% - 5em) * 0.42);
}

.particle:nth-of-type(23) {
    animation-delay: 0.1001987987s;
    left: calc((100% - 5em) * 0.44);
}

.particle:nth-of-type(24) {
    animation-delay: 0.8928362379s;
    left: calc((100% - 5em) * 0.46);
}

.particle:nth-of-type(25) {
    animation-delay: 0.9799564606s;
    left: calc((100% - 5em) * 0.48);
}

.particle:nth-of-type(26) {
    animation-delay: 0.3365660432s;
    left: calc((100% - 5em) * 0.5);
}

.particle:nth-of-type(27) {
    animation-delay: 0.3445180976s;
    left: calc((100% - 5em) * 0.52);
}

.particle:nth-of-type(28) {
    animation-delay: 0.4774359173s;
    left: calc((100% - 5em) * 0.54);
}

.particle:nth-of-type(29) {
    animation-delay: 0.7305389317s;
    left: calc((100% - 5em) * 0.56);
}

.particle:nth-of-type(30) {
    animation-delay: 0.9146230909s;
    left: calc((100% - 5em) * 0.58);
}

.particle:nth-of-type(31) {
    animation-delay: 0.7326884539s;
    left: calc((100% - 5em) * 0.6);
}

.particle:nth-of-type(32) {
    animation-delay: 0.7116673787s;
    left: calc((100% - 5em) * 0.62);
}

.particle:nth-of-type(33) {
    animation-delay: 0.8854970585s;
    left: calc((100% - 5em) * 0.64);
}

.particle:nth-of-type(34) {
    animation-delay: 0.0796859482s;
    left: calc((100% - 5em) * 0.66);
}

.particle:nth-of-type(35) {
    animation-delay: 0.0127839465s;
    left: calc((100% - 5em) * 0.68);
}

.particle:nth-of-type(36) {
    animation-delay: 0.3712130474s;
    left: calc((100% - 5em) * 0.7);
}

.particle:nth-of-type(37) {
    animation-delay: 0.8660424211s;
    left: calc((100% - 5em) * 0.72);
}

.particle:nth-of-type(38) {
    animation-delay: 0.4612494196s;
    left: calc((100% - 5em) * 0.74);
}

.particle:nth-of-type(39) {
    animation-delay: 0.2330695208s;
    left: calc((100% - 5em) * 0.76);
}

.particle:nth-of-type(40) {
    animation-delay: 0.50849092s;
    left: calc((100% - 5em) * 0.78);
}

.particle:nth-of-type(41) {
    animation-delay: 0.0715336325s;
    left: calc((100% - 5em) * 0.8);
}

.particle:nth-of-type(42) {
    animation-delay: 0.5269485179s;
    left: calc((100% - 5em) * 0.82);
}

.particle:nth-of-type(43) {
    animation-delay: 0.6132552417s;
    left: calc((100% - 5em) * 0.84);
}

.particle:nth-of-type(44) {
    animation-delay: 0.4346149769s;
    left: calc((100% - 5em) * 0.86);
}

.particle:nth-of-type(45) {
    animation-delay: 0.4844222072s;
    left: calc((100% - 5em) * 0.88);
}

.particle:nth-of-type(46) {
    animation-delay: 0.8912190371s;
    left: calc((100% - 5em) * 0.9);
}

.particle:nth-of-type(47) {
    animation-delay: 0.0292266409s;
    left: calc((100% - 5em) * 0.92);
}

.particle:nth-of-type(48) {
    animation-delay: 0.8156510452s;
    left: calc((100% - 5em) * 0.94);
}

.particle:nth-of-type(49) {
    animation-delay: 0.5534430085s;
    left: calc((100% - 5em) * 0.96);
}

.particle:nth-of-type(50) {
    animation-delay: 0.9103416309s;
    left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    25% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-10em) scale(0);
    }
}

.fire:before {
    content: "";
    background-image: url(img/lampe-4.png);
    width: 202px;
    /*background: url(img/lampe-2.png);*/
    background-size: 153px 270px;
    background-repeat: no-repeat;
    height: 452px;
    /* background: linear-gradient(to bottom, sienna, darkgoldenrod); */
    /* background: linear-gradient(darkgoldenrod, rgb(84, 37, 16) 52.94%, rgb(26, 12, 5) 96.64%); */
    position: absolute;
    left: 30px;
    top: 50px;
    /* clip-path: polygon(0% 0%, 100% 0%, 80% 10%, 80% 40%, 65% 50%, 65% 90%, 50% 100%, 35% 90%, 35% 50%, 20% 40%, 20% 10%); */
}
.particle {
    display: none;
}