body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    background-color: #0c0c0c;
    color: #C3C3C3;
}
#objectifs h1{
    margin-bottom: 10px;
    margin-top: 0;
}
section#objectifs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 100vh;
    /*padding: 100px 0;*/
}
#section#objectifs + footer {
    display: none;
}
section#objectifs .footer-button .button-flex {
    display: none;
}
section#objectifs .object-btn a {
    text-decoration: none;
    color: #C3C3C3;
    padding: 14px 22px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
section#objectifs .object-btn a:hover {
    color: #ffff;
    transition: all 0.6s;
}
section#objectifs button#valide {
    background: #E2A8FF;
    position: relative;
    border: none;
    padding: 14px 30px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    color: #171717;
}
section#objectifs button#valide:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;
    pointer-events: none;
    transition: all 0.6s;
}
section#objectifs button#valide:active::after, section#objectifs button#valide:focus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.6s;
}
section#objectifs button#valide span:first-child {
    padding-right: 5px;
}
section#objectifs .footer-button._active .button-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    /*gap: 40px;*/
}
.fullFronttriger{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}
section#objectifs .footer-button._active .text-center {
    display: none;
}
section.section {
    width: 100vw;
    height: 100vh;
}
.title-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
@media (min-width: 1201px){
    #objectifs .container {
        max-width: 1200px;
        margin: auto;
    }
}
#objectifs .container {
    text-align: center;
}
h1 {
    font-weight: 500;
    font-size: 44px;
    line-height: 48px;
    color: #ECECEC;
    text-align: center;
    vertical-align: middle;
}
h2.title-black {
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    margin: 0;
    color: #0C0C0C;
}
.subtitle {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #C3C3C3;
    text-align: center;
    max-width: 482px;
}

#typologie .subtitle {
    font-weight: 400;
    color: #B8B8B8;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.card {
    background-color: #171717;
    border-radius: 20px;
    margin: 0 2px;
    max-width: 232px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s;
}
.card:hover .front {
    transform: scaleX(1.04);
    background-color: #262626;
    transition: transform 0.5s;
}
.card:hover .front button.select{
    background-color: #262626;
}
.card:hover .front button.select.current{
    background: #ECECEC;
}
.card .front .img-card img{
    transform: scale(1);
    transition: transform 0.5s;
}
.card:hover .front .img-card img{
    transform: scale(1.1);
    transition: transform 0.5s;
}
.slick-initialized .slick-slide {
    display: flex !important;
}
.illustration {
    font-size: 40px;
    margin-bottom: 20px;
}

.card h2.card-title {
    margin-bottom: 32px;
    font-size: 24px;
    color: #ECECEC;
}
.card .object-block {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    height: 105px;
    margin: 20px 0 10px;
}
.card .button-card-flipper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card p.objectifs-title {
    font-size: 10px;
    line-height: 1;
    color: #6B6B6B;
    margin: 15px 0 7px;
}
.card p.objectifs-text {
    font-size: 14px;
    line-height: 1.4;
    color: #6B6B6B;
}
button.select {
    background-color: #141414;
    border: 1px solid #555454;
    color: #555454;
    padding: 13px 23px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 14px;
    position: relative;
    z-index: 2;
}
button.btn-select span.selectionner strong {
    font-weight: 400;
}
button.select span.retour {
    color: #141414;
}
button.select span.btnChecked .fa-check {
    color: #141414;
    font-size: 18px;
}
button.select span.retour .fa-times{
    color: #141414;
    font-size: 14px;
}
button.select span.retour {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 13px;
}
button.select span.btnChecked,
button.select span.retour{
    display: none;
    width: 0;
    transition: all 0.6s;
}
button.select span.retour{
    display: none;
    transform: translateX(-20px);
    width: 0;
    transition: all 0.6s;
}
button.select.current {
    min-width: auto !important;
    max-height: 46px;
    background: #ECECEC;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*------------------------*/
button.select.current span.selectionner, button.btn-select.current span.selectionner {
    display: none;
}
button.select.current span.btnChecked {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #141414;
    transition: all 0.6s;
}
button.select.current span.btnChecked .checked-text {
    opacity: 0;
    margin-left: -82px;
    transition: opacity 0.5s, margin-left 0.6s;
}
button.select.current span.btnChecked img {
    transform: scale(1);
}
button.select.current span.btnChecked .checked-text.show {
    margin-left: 0;
    margin-right: 10px;
    opacity: 1;
    transition: opacity 0.5s, margin-left 0.6s;
}
button.select.current span.btnChecked .checked-text.show + img {
    transform: scale(0.70);
}
button.select.current.show-hover:hover span.btnChecked {
    display: none;
}
button.select.current.show-hover:hover span.retour {
    display: flex;
    transform: translateX(0);
    width: 100%;
    transition: all 0.6s;
}
/*button.btn-select.current span.retour {
    display: flex;
    width: 100%;
    color: #fff;
    transition: all 0.6s;
}*/
.goTovitrine{
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: rgb(23, 23, 23);
    background: rgb(226, 168, 255);
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 14px 30px;
    border-radius: 20px;
    margin-top: 30px;
    display:inline-block ;
    position: relative;
}
.goTovitrine:hover::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.1;
    pointer-events: none;
    transition: 0.6s;
}
.error-text {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    height: 20px;
}
.card .front button.flip-trigger  {
    background: none;
    border: none;
    width: 100%;
    color: #555454;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}
.footer-buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.link {
    color: #aaa;
    font-size: 0.9rem;
    text-decoration: underline;
}
.validate {  
    background-color: #d0a8ff;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
/*#reset-button button.check-footer {
    position: absolute;
    border: none;
    left: 50px;
    bottom: 42px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(96.07deg, #F4A6D7 29.47%, #A2C9FF 65.52%, #B9FFFF 95.42%);
}*/
.reset-button button.check-footer {
    position: absolute;
    border: none;
    right: 68px;
    bottom: 32px;
    width: 50px;
    height: 50px;
    background: #171717;
    border-radius: 25px;
    padding: 10px;
    transition: all 0.5s;
}
.reset-button button.check-footer.showInfos {
    width: 328px;
    height: 122px;
    transition: all 0.5s;
}
.reset-button button.check-footer svg,.reset-button button.check-footer img {
    max-width: 30px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    transform: rotateY(0deg);
    transition: all 0.5s;
}
.reset-button button.check-footer:hover svg,.reset-button button.check-footer:hover img {
    transform: rotateY(180deg);
    transition: all 0.5s;
}
.reset-button button.check-footer .noteGuide {
    font-size: 14px;
    font-weight: 500;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    line-height: 1.2;
    padding: 20px 50px 20px 30px;
    background: linear-gradient(84deg, #F4A6D7 29%, #A2C9FF 68%, #B9FFFF 8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: left;
    display: inline-block;
    transition: transform 0.8s ease, opacity 0.8s ease, visibility 0s linear 1.2s;
}

.reset-button button.check-footer .noteGuide.showText {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.8s ease, opacity 0.8s ease, visibility 0s;
}
.footer-button {
    margin: 30px 0 0;
}
.footer-button .text-center p {
    background: linear-gradient(84deg, #F4A6D7 29%, #A2C9FF 68%, #B9FFFF 8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
#cohesion-w-sideBar {
    position: relative;
    /*overflow: hidden;*/
}
#cohesion-w-sideBar #header-cohesion {
    position: absolute;
    width: 100%;
    top: 20px;
    padding: 0 40px;
    z-index: 9;
}
#cohesion-w-sideBar .flex-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.progress-flex-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 312px;
    height: 3px;
    background: #4D4D4D;
    border-radius: 3px;
    overflow: hidden;
}
.progress-flex-inner span.steps-2 {
    content: '';
    display: block;
    width: 104px;
    height: 3px;
    background: #ECECEC;
}
.progress-flex-inner span.steps-3 {
    content: '';
    display: block;
    width: 156px;
    height: 3px;
    background: #ECECEC;
}
.progress-flex-inner span.steps-4 {
    content: '';
    display: block;
    width: 208px;
    height: 3px;
    background: #ECECEC;
}
.progress-flex-inner span.steps-5 {
    content: '';
    display: block;
    width: 260px;
    height: 3px;
    background: #ECECEC;
}
.progress-flex-inner span.steps-6 {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #ECECEC;
}
#cohesion-w-sideBar .progress-flex-inner span.progress-checked {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    background: #ECECEC;
}

#cohesion-w-sideBar .flex-items .objectif-flex-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 97px;
}
#cohesion-w-sideBar #global-counter {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ECECEC;
}
#cohesion-w-sideBar .flex-items .checking-items {
    display: flex;
    width: 74px;
    height: 14px;
    background: rgba(255 , 255 , 255 , 0.2);
    border-radius: 15px;
    justify-content: center;
}
h3.headerW-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ECECEC;
    margin: 0;
}
#progress-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    position: absolute;
    top: 14px;
}
#progress-item.d-none-mob {
    display: none;
}
#progress-item.d-none-mob {
    display: none;
}
#progress-item .progress-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #171717;
    padding: 15px 22px;
    border-radius: 24px;
}
#event-form .progress-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #171717;
    padding: 15px 22px;
    border-radius: 24px;
    margin-bottom: 46px;
}
.step-number {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    color: #ECECEC;
    gap: 5px;
    flex-wrap: nowrap;
}
#cohesion-w-sideBar .flex-items #objectif-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #141414;
    padding: 14px;
    border-radius: 24px;
    width: 225px;
    gap: 10px;
    position: relative;
}
span.objectif-check {
    content: '';
    background: #141414;
    width: 10px;
    height: 10px;
    display: none;
    opacity: 0;
    border-radius: 50%;
}
span.objectif-check.checked {
    content: '';
    width: 100%;
    opacity: 1;
    height: 14px;
    display: block;
    border-radius: 34px;
}
span.objectif-check.checked.acacher {
    display: none;
}
#header-cohesion.cohesion span.objectif-check.checked {
    background: #FF5869;
}
#header-cohesion.durabilite span.objectif-check.checked {
    background: #26D07C;
}
#header-cohesion.confidentialite span.objectif-check.checked {
    background: #963CBD;
}
#header-cohesion.partage span.objectif-check.checked {
    background: #4A65E8;
}
#header-cohesion.performance span.objectif-check.checked {
    background: #FFBF3F;
}

/* --- accordeon ---- */
.accordion {
    list-style: none;
    padding: 0;
    margin: 42px 0 0;
    position: relative;
}
.accordion:after{
    content: '';
    background: #0c0c0c;
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.accordion li {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
li.accordion-toggle {
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
    background: #0c0c0c;
    padding: 5px 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0;
    width: 100%;
    margin: 0;
    z-index: 1;
}

li.accordion-toggle.transitioning {
    pointer-events: none;
}

/* Classe pour afficher les éléments décoratifs après l'animation principale */
li.accordion-toggle.open.animate-decorations h3 .bulle,
li.accordion-toggle.open.animate-decorations .bulleFoot,
li.accordion-toggle.open.animate-decorations:before {
    opacity: 1;
}

li.accordion-toggle.open.animate-decorations h3 .bulle,
li.accordion-toggle.open.animate-decorations .bulleFoot {
    display: block;
}

li.accordion-toggle.open.animate-decorations:before {
    width: 30px;
    height: 36px;
}
li.accordion-toggle.open {
    border-radius: 30px 30px;
    padding: 28px 15px 10px 12px;
    width: 105%;
    margin: 15px 0 15px 15px;
    z-index: 9;
}
/*li.accordion-toggle.prevOpen {
    border-radius: 0 0 30px 0 ;
    padding-bottom: 20px;
}
li.accordion-toggle.afterOpen {
    border-radius: 0 30px 0 0;
    padding-top: 20px;
}*/
.cohesion-inner#cohesion li.accordion-toggle.open {
    background: #FF5869 !important;
}
.cohesion-inner#durabilite li.accordion-toggle.open {
    background: #26D07C !important;
}
.cohesion-inner#confidentialite li.accordion-toggle.open {
    background: #963CBD !important;
}
.cohesion-inner#partage li.accordion-toggle.open {
    background: #4A65E8 !important;
}
.cohesion-inner#performance li.accordion-toggle.open {
    background: #FFBF3F !important;
}
li.accordion-toggle h3 .bulle,li.accordion-toggle h3 .bulleFoot{
    display: none;
    opacity: 0;
}
li.accordion-toggle:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 29px;
    top: -36px;
    background: #0c0c0c;
    border-radius: 0 0 30px 0;
    z-index: 1;
    opacity: 0;
}

li.accordion-toggle.open:before {
    width: 30px;
    height: 36px;
    opacity: 1;
}
li.accordion-toggle.open h3 .bulle{
    content: "";
    position: absolute;
    width: 30px;
    height: 36px;
    right: 29px;
    top: -35px;
    display: block;
    opacity: 1;
}
li.accordion-toggle.open .bulleFoot {
    content: "";
    position: absolute;
    width: 30px;
    height: 36px;
    right: 29px;
    bottom: -36px;
    z-index: 2;
    border-radius: 0 0 0 30px;
    opacity: 1;
}
li.accordion-toggle.open .bulleFoot:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0 30px 0 25px;
    background: #0c0c0c;
}
li.accordion-toggle h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-left: 46px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
li.accordion-toggle h3 img {
    display: none;
    border-radius: 50%;
    overflow: hidden;
    width: 38px;
    height: 38px;
    flex: 38px;
    max-width: 38px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
}
li.accordion-toggle h3 span {
    flex: 1;
}
li.accordion-toggle.open h3 {
    color: #000;
    margin-left: 15px;
}
li.accordion-toggle.open h3 img {
    display: block;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.15s;
}
li.accordion-toggle .accordion-content {
    margin-top: 0;
    padding: 10px 0 0 15px;
    color: #000;
    display: none;
    position: relative;
}

li.accordion-toggle.open .accordion-content {
    display: block;
}
.accordion-content p {
    margin: 0 0 1rem 0;
    font-size: 14px;
    line-height: 1.5;
}

.btn-select {
    position: relative;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 12px;
    background: none;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.5s ease;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
    margin: 10px 0 15px;
    overflow: hidden;
    transition:  all 0.3s;
}
.btn-select:hover{
    background: #000;
    color: #fff;
    transition:  all 0.3s;
}
.btn-select.current {
    background: #0c0c0c;
    color: white;
    border-color: #0c0c0c;
    border-radius: 20px;
    min-width: 131px !important;
    min-height: 46px !important;
}

.btn-select.current:hover {
    background: #0c0c0c;
}
.btn-select span {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    display: inline-block;
}
.btn-select .btnChecked {
    display: none;
}
.btn-select.current .btnChecked {
    display: flex;
    align-items: center;
}
.btn-select.current .btnChecked .checked-text {
    margin-left: -82px;
    opacity: 0;
    transition: opacity 1.2s, margin-left 0.6s;
}
.btn-select.current .btnChecked img {
    transform: scale(1.12);
}
.btn-select.current .btnChecked .checked-text.show {
    margin-left: 0;
    margin-right: 7px;
    opacity: 1;
    transition: opacity 1.2s, margin-left 0.6s;
}
.btn-select.current .btnChecked .checked-text.show + img {
    transform: scale(0.75);
}
.btn-select .selectionner {
    opacity: 1;
    transform: scale(1);
    width: auto;
}

.btn-select .retour {
    position: absolute;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform: scale(0.8);
    color: #fff;
    width: 0;
    overflow: hidden;
}
.btn-select.current .selectionner {
    opacity: 0;
    transform: scale(0.8);
    width: 0;
    max-width: 0;
}
.btn-select.current.show-hover:hover .btnChecked {
    display: none;
}
.btn-select.current.show-hover:hover .retour {
    opacity: 1;
    transform: scale(1);
    position: static;
    width: 105.67px;
    max-width: 200px;
    transition: opacity 1.2s;
}

button.btn-select span.retour .fa-times {
    margin-left: 6px;
    font-size: 14px;
    color: #fff;
}
.btn-select {
    min-width: fit-content !important;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-select.current {
    min-width: fit-content !important;
}




@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.menu-sideBar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /*height: 100vh;*/
    padding-top: 28%;
}
h2.sideBar-title {
    font-weight: 600;
    font-size: 38px;
    line-height: 42px;
    vertical-align: middle;
    color: #E0E0E0;
    margin-left: 42px;
}
#cohesion-w-sideBar .cohesion-inner .row .col-md-3 {
    padding-right: 0;
    max-width: 280px;
    padding-left: 0;
    background: #0c0c0c;
    min-height: 100vh;
}
#header-cohesion button.back-in {
    background: none;
    border: none;
}
button.back-in:hover svg .s0{
    fill: #fff !important;
    transition: all 0.6s;
}
.reset-action:hover svg path {
    fill: #fff !important;
    transition: all 0.6s;
}
#cohesion-w-sideBar .cohesion-inner .row .col-md-9 {
    padding-left: 0;
    overflow: hidden;
    max-height: 100vh;
    max-width: calc(100vw - 280px);
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cohesion-inner#cohesion .row .col-md-9 {
    background: #FF5869;
}
.cohesion-inner#durabilite .row .col-md-9 {
    background: #26D07C;
}
.cohesion-inner#confidentialite .row .col-md-9 {
    background: #963CBD;
}
.cohesion-inner#partage .row .col-md-9 {
    background: #4A65E8;
}
.cohesion-inner#performance .row .col-md-9 {
    background: #FFBF3F;
}
#cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: url('../img/perso-cursor.svg'), pointer;
}
#cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond video{
    width: auto;
    height: 100%;
    object-fit: cover;
}

/* --- animation video --- */
.video-fade-out {
    animation: fadeLeftOut 0.6s forwards;
}
.video-fade-in {
    animation: fadeIn 0.6s forwards;
}
@keyframes fadeLeftOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/*--- --- */
/*#cohesion-w-sideBar .cohesion-inner .row .col-md-9 {
    max-width: 90%;
    cursor: url('../img/cursor.svg') 16 16, zoom-in;
}*/
/*#cohesion-w-sideBar .cohesion-inner .row .col-md-9.cohesion {
    cursor: url('../img/cursor-cohe.svg') 16 16, zoom-in;
}
#cohesion-w-sideBar .cohesion-inner .row .col-md-9.partage {
    cursor: url('../img/cursor-parta.svg') 16 16, zoom-in;
}*/
button#back-in {
    border: none;
    background: none;
    padding: 10px 15px;
}
/*.reset-button {
    position: relative;
}*/
/*.slider-nav-items .slider-item{
    display: none !important;
}
.slider-nav-items .slider-item.selected{
    display: flex !important;
}
.slider-nav-items.affiche .slider-item{
    display: flex !important;
}*/
#content-right-slider {
    /*position: absolute;
    top: 50%;
    right: 0;
    margin-top: -256px;*/
    background: #171717;
    border-radius: 52px 0 0 52px;
    padding-bottom: 50px;
    margin-right: -10px;
}
.changecont.affiche{
    position: absolute;
    bottom: 25px;
    font-size: 10px;
    color: #fff;
    background: #333333;
    padding: 5px 15px;
    border-radius: 20px;
    left: 30px;
    cursor: pointer;
}
#typologie .subtitle{
    margin: auto;
    letter-spacing: normal;
}
.changecont:not(.affiche){
    background: none;
    color: #ECECEC;
    font-size: 50px;
    line-height: 1;
    margin-left: 3px;
    position: absolute;
    bottom: 25px;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 20px;
    left: 30px;
}
.changecont:not(.affiche):hover{
    background: none;
}
.changecont.affiche:hover{
    background: #222222;
    transition: all 0.3s;
}
#content-right-slider .topCourb {
    position: absolute;
    right: 0;
    top: -54px;
    width: 67px;
    height: 55px;
    background: #171717;
    clip-path: polygon(91% 72%, 86% 79%, 80% 85%, 72% 91%, 64% 95%, 54% 98%, 44% 100%, 100% 100%, 99% 39%, 98% 49%, 96% 57%, 94% 64%);
}
#content-right-slider .bottomCourb {
    position: absolute;
    right: 0;
    bottom: -54px;
    width: 65px;
    height: 55px;
    background: #171717;
    clip-path: polygon(83% 15%, 75% 10%, 68% 6%, 60% 4%, 34% 0, 100% 0, 100% 50%, 97% 38%, 94% 30%, 89% 22%);
}
#content-right-slider .slider-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 126px;
}
#content-right-slider .slider-item button {
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0.8;
    transform: scale(0.85);
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    border: none;
    background: none;
}
#content-right-slider .slider-item.active button {
    opacity: 1;
    transform: scale(1);
    padding: 20px 0;
}
#content-right-slider .slider-item button img {
    max-width: 45px;
}
#content-right-slider .slider-item button span.text-titre {
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: #ECECEC;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.slider-for h2.title-black.active.animate-in {
    animation: fadeInLeft 0.5s ease forwards;
}
h2.title-black.active {
    display: block;
}
.arrow-btn {
    background: none;
    border: none;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    font-size: 28px;
    cursor: pointer;
    padding: 5px;
    position: absolute;
}
.arrow-btn.up {
    top: 48%;
    transform: translate(-50%, -250%);
}
.arrow-btn.down {
    top: 51%;
    transform: translate(-50%, 10%);
}
.slider-nav-items {
    /*height: 145px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
    scroll-behavior: smooth;
    transform: none !important;
}

.slider-nav-items .slider-item{
    margin: 0 !important;
}

.slider-nav-items > *:nth-child(1) { order: 0; } /* 1er */
.slider-nav-items > *:nth-child(2) { order: 1; } /* 2e */
.slider-nav-items > *:nth-child(3) { order: 2; } /* 3e (sera remplacé par .active) */
.slider-nav-items > *:nth-child(4) { order: 3; }
.slider-nav-items > *:nth-child(5) { order: 4; }

.slider-nav-items > .active {
    order: 2; /* remplace le 3e */
}

/*#carousel button.slick-arrow {
    display: none !important;
}*/
#gammes-objectifs .text-center {
   margin-bottom: 30px;
}
#gammes-objectifs .gamme-button {
    margin-top: 50px;
}
h2.stages-title {
    font-weight: 500;
    font-size: 44px;
    line-height: 54px;
    color: #ECECEC;
    margin-bottom: 30px;
}
#gammes-objectifs .content-gammes-center {
    /*height: 100vh;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#gammes-objectifs .content-gammes-center .content-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    /*height: 100%;
    padding-right: 10px;
    max-height: 582px;*/
    /*overflow-y: auto;*/
}
#gammes-objectifs .content-gammes-center .content-center .object-card {
    flex: 0 0 16%;
    max-width: 16%;
    width: 100%;
    height: auto;
}
#gammes-objectifs .content-gammes-center .content-center.liste-6{
    max-width: 690px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-6 .object-card {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-7{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    max-width: 1200px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-7 .object-card {
    max-width: 100%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-7 .object-card:nth-child(4) {
    grid-column: span 2;
    grid-row: span 2;
}
#gammes-objectifs .content-gammes-center .content-center.liste-7 .object-card:nth-child(4) img{
    aspect-ratio: 1 / 0.84;
}
#gammes-objectifs .content-gammes-center .content-center.liste-8{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    max-width: 960px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-8 .object-card {
    max-width: 100%;
    width: 100%;
}

#gammes-objectifs .content-gammes-center .content-center.liste-9{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.666%, 1fr));
    max-width: 1440px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-9 .object-card {
    max-width: 100%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-9 .object-card:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
}
#gammes-objectifs .content-gammes-center .content-center.liste-9 .object-card:nth-child(5) img{
    aspect-ratio: 1 / 0.84;
}
#gammes-objectifs .content-gammes-center .content-center.liste-10{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    max-width: 1440px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-10 .object-card {
    max-width: 100%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-11{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.285%, 1fr));
    max-width: 1440px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-11 .object-card {
    max-width: 100%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-11 .object-card:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
}
#gammes-objectifs .content-gammes-center .content-center.liste-11 .object-card:nth-child(6) img{
    aspect-ratio: 1 / 0.84;
}
#gammes-objectifs .content-gammes-center .content-center.liste-12{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.666%, 1fr));
    max-width: 1440px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-12 .object-card {
    max-width: 100%;
    width: 100%;
}

#gammes-objectifs .content-gammes-center .content-center.liste-13{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.285%, 1fr));
    max-width: 1200px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-13 .object-card {
    max-width: 100%;
    width: 100%;
}
#gammes-objectifs .content-gammes-center .content-center.liste-13 .object-card:nth-child(5) {
    grid-column: span 3;
    grid-row: span 3;
}
#gammes-objectifs .content-gammes-center .content-center.liste-13 .object-card:nth-child(5) img{
    aspect-ratio: 1 / 0.93;
}

#gammes-objectifs .content-gammes-center .content-center.liste-14,
#gammes-objectifs .content-gammes-center .content-center.liste-15,
#gammes-objectifs .content-gammes-center .content-center.liste-16,
#gammes-objectifs .content-gammes-center .content-center.liste-17,
#gammes-objectifs .content-gammes-center .content-center.liste-18,
#gammes-objectifs .content-gammes-center .content-center.liste-19,
#gammes-objectifs .content-gammes-center .content-center.liste-20,
#gammes-objectifs .content-gammes-center .content-center.liste-21,
#gammes-objectifs .content-gammes-center .content-center.liste-22,
#gammes-objectifs .content-gammes-center .content-center.liste-23,
#gammes-objectifs .content-gammes-center .content-center.liste-24,
#gammes-objectifs .content-gammes-center .content-center.liste-25{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5%, 1fr));
    max-width: 1440px;
}
#gammes-objectifs .content-gammes-center .content-center.liste-14 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-15 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-16 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-17 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-18 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-19 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-20 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-21 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-22 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-23 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-24 .object-card,
#gammes-objectifs .content-gammes-center .content-center.liste-25 .object-card
{
    max-width: 100%;
    width: 100%;
}

.content-center::-webkit-scrollbar {
    width: 8px;
}
.content-center::-webkit-scrollbar-track {
    background: #0C0C0C;
    border-radius: 4px;
}
.content-center::-webkit-scrollbar-thumb {
    background: #FF5869;
    border-radius: 4px;
}
.content-center::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 88, 105, 0.6);
}
/*.content-center {
    scrollbar-width: thin;
    scrollbar-color: #FF5869 #0C0C0C;
}*/
button.btn-w-hover {
    position: relative;
    background: #FF5869;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
    border-radius: 50px;
}
button.btn-w-hover img {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 50px 50px 0 0;
    aspect-ratio: 1 / 0.7454;
    object-fit: cover;
}
button.btn-w-hover span.text-in-img {
    padding: 14px;
    display: block;
    font-size: 16px;
}
button.btn-w-hover {
    position: relative;
    overflow: hidden;
}
button.btn-w-hover span.return {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    opacity: 0;
    background: rgba(12, 12, 12, 0.6);
    pointer-events: none;
    transition:
            width 0.6s ease 0.01s,
            height 0.6s ease 0.01s,
            bottom 0.4s ease 0.01s,
            opacity 0.4s ease 0.01s;
}
button.btn-w-hover:hover span.return {
    width: 100%;
    height: 100%;
    opacity: 1;
    bottom: 0;
    transition:
            width 0.01s ease,
            height 0.01s ease,
            bottom 0.01s ease,
            opacity 0.01s ease;
}
button.btn-w-hover span.return svg {
    width: 38px;
}
button#valide-gamme {
    background: #E2A8FF;
    position: relative;
    border: none;
    padding: 14px 30px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    color: #171717;
}
button#valide-gamme:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;
    pointer-events: none;
    transition: all 0.6s;
}
button#valide-gamme:active::after, button#valide-gamme:focus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.6s;
}
.gamme-button .button-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    flex-wrap: wrap;
}
.gamme-button .button-flex .object-btn a {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    color: #929292;
}
.gamme-button .button-flex .object-btn a:hover {
    color: #fff;
    transition: all 0.6s;
}
.head-gamme-form {
    position: relative;
    max-width: 95%;
    margin: auto;
    /*height: 68px;*/
}
/*#destination .head-gamme-form {
    height: auto;
}*/
#event-form .head-gamme-form {
    height: auto;
}
.head-gamme-form .button-flex-gamme {
    position: fixed;
    top: 46px;
    left: 15px;
    width: 98%;
    display: block;
    z-index: 2;
}
#typologie .head-gamme-form .button-flex-gamme {
    top: 32px;
}
.head-gamme-form .button-flex-gamme button.back-in {
    position: absolute;
    left: 0;
}
.head-gamme-form .button-flex-gamme .reset-action {
    width: fit-content;
    position: absolute;
    right: 5px;
    top: 4px;
}
/*#invite .head-gamme-form .button-flex-gamme {
    left: inherit;
    right: 0;
    width: auto;
}*/
#invite .head-gamme-form .back-in:hover svg path {
    fill: #fff;
}
.head-gamme-form .button-flex-gamme .back-in {
    background: none;
    border: none;
}
/*#event-form .head-gamme-form .button-flex-gamme .back-in {
    opacity: 0;
    width: 0;
    z-index: -1;
}
#event-form .head-gamme-form .button-flex-gamme .back-in svg {
    display: none;
}*/
.head-gamme-form .button-flex-gamme .back-in:hover svg path {
    fill: #fff;
}
h2.titleD {
    font-weight: 500;
    font-size: 44px;
    line-height: 54px;
    text-align: center;
    color: #ECECEC;
}
#next-details {
    position: relative;
}
#next-details .imageBottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
#next-details .content-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
}
#next-details .content-details .title-detail {
    margin-bottom: 30px;
}
#next-details .content-details .subtitle {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #B8B8B8;
    max-width: 426px;
}
#next-details .form-detail {
    position: relative;
}
#next-details .form-detail .imageBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
#name-event {
    width: 100%;
    font-size: 72px;
    font-weight: 600;
    color: #E2A8FF;
    background-color: transparent;
    border: none;
    text-align: center;
    resize: none;
    line-height: 1.2;
    box-sizing: border-box;
}
#name-event::placeholder {
    color: #4D4D4D;
    resize: none;
    font-size: 60px;
    font-weight: 600;
}
#next-details .content-details .btn-details {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 12%;
    margin-right: 20px;
}
#next-details .content-details .btn-details #valide-detail {
    color: #0C0C0C;
    border: none;
    position: relative;
    width: 260px;
    padding: 15px 0 13px;
    background: #4D4D4D;
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}
button#valide-detail:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;
    pointer-events: none;
    transition: all 0.6s;
}
button#valide-detail:active::after, button#valide-detail:focus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.6s;
}
#next-details .content-details .btn-details #reset-detail {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #929292;
    border: none;
    background: transparent;
    padding: 10px 62px;
}
#next-details .content-details .btn-details #reset-detail:hover {
    color: #fff;
    transition: all 0.6s;
}
#destination .container-fluid,
#typologie .container-fluid {
    display: flex;
    max-width: 1440px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
}
#destination .container-fluid .row,
#typologie .container-fluid .row {
    align-items: center;
    flex-wrap: wrap;
}
#destination .container-fluid .content-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}
#destination .container-fluid .content-form button.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #262626;
    border-radius: 26px;
    color: #ECECEC;
    border: none;
    width: 336px;
    padding: 15px 25px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}
#destination .container-fluid .content-form button.btn-icon:hover {
    background: #333333;
    transition: all 0.8s;
}
#destination .container-fluid .content-form button#date-btn.show:hover {
    background: #262626;
}
#destination .container-fluid .content-form button#date-btn.show .editDate {
    opacity: 0.8;
    transition: all 1.6s;
}
#destination .container-fluid .content-form button#date-btn.show:hover .editDate {
    color: #ffffff;
    opacity: 1;
    transform: scale(1.1);
    transition: all 1.6s;
}
#destination .container-fluid .content-form button.btn-icon.bettwen {
    justify-content: space-between;
}
#destination .container-fluid .content-form button#flexible-btn {
    background: none;
    border-radius: 26px;
    color: #929292;
    border: 1px solid #929292;
    width: 336px;
    padding: 14px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#destination .container-fluid .content-form button#flexible-btn.justify-betwen {
    justify-content: space-between;
    color: #FFFFFF;
    border-color: #FFFFFF;
}
#destination .form-destination .flexDestination-btn,
#typologie .form-typologie .flexTypo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 46px;
}
#destination .flexDestination-btn button#decide-destination {
    padding: 10px;
    background: none;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #929292;
}
#typologie #image.slide-left {
    padding-top: 72px;
}
#typologie #decide-typo {
    padding: 10px;
    background: none;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #929292;
}
#typologie #decide-typo:hover {
    color: #fff;
    transition: all 0.85s;
}
#destination .flexDestination-btn button#decide-destination:hover {
    color: #fff;
    transition: all 0.85s;
}
#destination .flexDestination-btn button#valide-destination {
    background: #E2A8FF;
    border: none;
    padding: 14px;
    width: 159px;
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #0c0c0c;
}
#typologie #valide-typo {
    background: #4D4D4D;
    border: none;
    color: #0C0C0C;
    padding: 14px;
    width: 159px;
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    transition: linear 0.85s;
}
#typologie #valide-typo.active {
    background: #E2A8FF;
}
#typologie #valide-typo:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))#E2A8FF;
    transition: linear 0.85s;
}
#typologie #valide-typo:active,
#typologie #valide-typo:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))#E2A8FF;
    transition: linear 0.85s;
}
#destination .flexDestination-btn button#valide-destination:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))#E2A8FF;
    transition: linear 0.85s;
}
#destination .flexDestination-btn button#valide-destination:active,
#destination .flexDestination-btn button#valide-destination:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))#E2A8FF;
    transition: linear 0.85s;
}
/* calendrier */
.calendar-modal {
    width: 760px;
    background: #0C0C0C;
    padding: 24px;
    border-radius: 24px;
}
.calendar-header {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.calendar-header button {
    background: #2c2c2c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}
.calendar-header .active {
    background: #444;
}
.calendar-content input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    background: #2c2c2c;
    color: white;
}
.calendar-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 698px;
    margin: 20px auto 40px;
}
.calendar-options .option {
    background: transparent;
    border: 1px solid #929292;
    color: #929292;
    padding: 7px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    transform: scale(0.92);
    transition: all 1.2s;
    line-height: 20px;
    text-align: center;
}
.calendar-options .option.exact {
    width: 222px;
}

.calendar-options .option.active {
    background: #262626;
    color: #E2A8FF;
    border: 1px solid #E2A8FF;
    transition: all 1.2s;
    transform: scale(1);
}

.calendar-footer {
    text-align: center;
    padding: 20px 0;
}

.validate-btn {
    background-color: #E2A8FF;
    color: #000;
    padding: 15px;
    width: 260px;
    border: none;
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}
.validate-btn:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))#E2A8FF;
}
.validate-btn:active, .validate-btn:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))#E2A8FF;
}
#tabinex-item {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#tabinex-item.tab-container.current {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    justify-content: center;
}
#tabinex-item .tabs {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #0C0C0C;
    margin-bottom: 20px;
    border-radius: 24px;
    justify-content: center;
    gap: 20px;
}
#tabinex-item .tabs .tab {
    background: #171717;
    border-radius: 22px;
    padding: 7px 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #ECECEC;
    cursor: pointer;
}
#tabinex-item .tabs .tab.active {
    background: #262626;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: flex;
}
#tabinex-item .calendar-content {
    height: 292px;
}
.flatpickr-innerContainer {
    display: flex !important;
    justify-content: center !important;
}
.flatpickr-calendar.inline {
    width: 100% !important;
    background: transparent;
}
.flatpickr-weekdays {
    gap: 150px;
}
.dayContainer {
    width: 262px;
    min-width: 262px;
    max-width: 262px;
}
.flatpickr-calendar .flatpickr-days {
    width: 678px !important;
    justify-content: space-between;
}
.flatpickr-input[readonly] {
    display: none !important;
}
.flatpickr-months .flatpickr-month {
    background: none;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer span.flatpickr-weekday {
    background: none;
    color: #555454;
    font-size: 14px;
    font-weight: 500;
}
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
    text-transform: capitalize;
    color: #ECECEC;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}
.flatpickr-calendar .flatpickr-months {
    margin-bottom: 10px;
    gap: 150px;
}
.flatpickr-calendar {
    padding-bottom: 15px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.dayContainer + .dayContainer {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.flatpickr-day {
    color: #B8B8B8;
    font-size: 14px;
    font-weight: 500;
    max-width: 35px;
    height: 35px;
    line-height: 35px;
}
.flatpickr-day.flatpickr-disabled {
    color: #4D4D4D;
}
/* ---------- */

/* ---- flexible ------  */
.tab-content#flexible {
    flex-direction: column;
    align-items: center;
    width: 760px;
    background: #0C0C0C;
    padding: 24px;
    border-radius: 24px;
}
.month-slider {
    display: flex;
    align-items: center;
}
.months-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}
.month-box {
    background: #171717;
    padding: 15px;
    border-radius: 12px;
    color: #ECECEC;
    text-align: center;
    min-width: 100px;
    border: 2px solid #171717;
}
.month-box.selected {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    transition: color 0.8s ease;
}
.month-box.selected:hover {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    transition: color 0.8s ease;
}
.month-box:hover {
    background-color: #262626;
    cursor: pointer;
}
.month-box.selected svg path {
    fill: #000;
}
.month-label {
    color: #cecece;
    margin-top: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}
.month-box.selected .month-label {
    color: #000;
}
.year-label {
    color: #cecece;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}
.month-box.selected .year-label {
    color: #000;
}
.tab-content#flexible .date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 0 20px;
}
.tab-content#flexible .date-icon p {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ECECEC;
    margin: 0;
}
.tab-content#flexible h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #ECECEC;
    padding-bottom: 42px;
    max-width: 284px;
}
#imageBlur.active {
    transform: scale(2);
    position: absolute;
    left: -25%;
    opacity: 0.6;
    top: -18%;
    filter: blur(7px);
}
.calendar-icon {
    height: 24px;
}
.tab-content#flexible .dur-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 342px;
    padding-bottom: 39px;
}
.tab-content#flexible h4 {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #ECECEC;
    margin-bottom: 20px;
}
.tab-content#flexible .dur-event .durations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tab-content#flexible .dur-event .durations button {
    background: #171717;
    border: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #929292;
    padding: 7px 15px;
    border-radius: 14px;
}
.tab-content#flexible .dur-event .durations button:hover {
    background-color: #262626;
    color: #cecece;
    cursor: pointer;
}
.tab-content#flexible .dur-event .durations button.selected {
    cursor: pointer;
    color: #000;
    background: #fff;
    transition: color 2s ease;
}
.tab-content#flexible .dur-event .durations button.selected:hover {
    cursor: pointer;
    color: #000;
    background: #fff;
    transition: color 2s ease;
}
.tab-content#flexible .months {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
}
.tab-content#flexible .months .month-slider button {
    background: none;
    border: none;
}
.btn-flexible-footer {
    margin: 42px 0 24px;
}
.btn-flexible-footer button#validate-flexible {
    background: #E2A8FF;
    border: none;
    padding: 14px;
    width: 159px;
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}
/* === POPUP === */
#destination-tabC {
    display: none;
}
#destination-tabC.active {
    display: block;
}
#destination-tabContent {
    display: flex;
    justify-content: center;
}
#destination-tabContent .content-destination {
    width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0C0C0C;
    border-radius: 24px;
    padding: 46px 24px;
}
#destination-tabContent h3 {
    font-size: 2rem;
    margin: 1rem 0;
}

#destination-tabContent p {
    color: #ECECEC;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin-top: 15px;
    max-width: 384px;
}
#imageBlur.blur-center {
    transform: scale(1.2);
    position: absolute;
    z-index: -1;
    left: 0;
    width: 75%;
    display: flex;
    justify-content: center;
    opacity: 0.5;
    top: 10%;
    filter: blur(5px);
}
#destination-tabContent .options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 354px;
    justify-content: center;
    gap: 12px;
}
#destination-tabContent .options button {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #929292;
    background: #171717;
    padding: 6px 16px;
    border-radius: 14px;
    border: none;
}
#destination-tabContent .options button:hover {
    background: #262626;
}
#destination-tabContent .options button:active {
    color: #fff;
}
#destination-tabContent .options button.selected {
    color: #000;
    background: #fff;
    transition: color 2s ease;
}
.destination-tab .validate-btn {
    background: #d69eff;
    color: black;
    margin-top: 1rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
}
#destin-event {
    font-size: 72px;
    margin: 20px 0 46px;
    width: 100%;
    font-weight: 600;
    color: #E2A8FF;
    background-color: transparent;
    border: none;
    text-align: center;
    resize: none;
    line-height: 1.2;
    box-sizing: border-box;
}
#destin-event::placeholder {
    color: #4D4D4D;
    resize: none;
    font-size: 64px;
    font-weight: 600;
}
button#destinationValide {
    margin-top: 50px;
}
h2.titleW-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ECECEC;
}
#invite .container-fluid {
    padding-left: 0;
}
#invite .container-fluid .row {
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
/*#invite .image img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: right;
}*/
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#invite .flexGuest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 42px;
}
#invite h2.titleD {
    margin-bottom: 34px;
}
.content-form {
    margin-top: 32px;
}
#invite .form-invite .content-form {
    margin-top: 20px;
}
.form-invite .content-form .input-form {
    position: relative;
}
#number-guest {
    width: 100%;
    height: 84px;
    font-size: 72px;
    font-weight: 600;
    color: #E2A8FF;
    background-color: transparent;
    border: none;
    text-align: center;
    resize: none;
    line-height: 1.2;
    box-sizing: border-box;
}
#typo-event {
    width: 100%;
    height: 84px;
    font-size: 42px;
    font-weight: 600;
    color: #E2A8FF;
    background-color: transparent;
    border: none;
    text-align: center;
    resize: none;
    line-height: 1.2;
    box-sizing: border-box;
}
input#budget {
    width: 100%;
    height: 84px;
    font-size: 72px;
    font-weight: 600;
    color: #E2A8FF;
    background-color: transparent;
    border: none;
    text-align: center;
    resize: none;
    line-height: 1.2;
    box-sizing: border-box;
}
#euroSymbol {
    position: absolute;
    right: 54px;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    font-size: 72px;
    font-weight: 600;
    color: #E2A8FF;
}
#number-guest::placeholder, #budget::placeholder, #typo-event::placeholder {
    color: #4D4D4D;
    resize: none;
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
    white-space: pre-line;
}
.flexGuest-btn button#decide-guest {
    background: none;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #929292;
}
.flexGuest-btn button#decide-guest:hover {
    color: #fff;
}
.flexGuest-btn button#valide-guest {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #0C0C0C;
    background: #E2A8FF;
    border: none;
    border-radius: 22px;
    padding: 14px 47px;
}
.flexGuest-btn button#valide-guest:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))#E2A8FF;
    transition: linear 0.8s;
}
.flexGuest-btn button#valide-guest:active,
.flexGuest-btn button#valide-guest:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))#E2A8FF;
}
.form-invite .options {
    margin: 15px 0 7%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.form-typologie .options {
    margin: 15px 0 12%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.form-invite .options button {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #929292;
    background: #171717;
    padding: 6px 16px;
    border-radius: 14px;
    border: 2px solid #171717;
}
.form-typologie .options button,
.form-typologie .options button {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #929292;
    background: #171717;
    padding: 6px 16px;
    border-radius: 14px;
    border: none;
}
.form-invite .options button:hover,
.form-typologie .options button:hover {
    background: #fff;
    color: #000;
    transition: all 0.85s;
}
.form-invite .options button:active,
.form-invite .options button:focus,
.form-typologie .options button:active,
.form-typologie .options button:focus {
    background: #fff;
    color: #000;
}
.inviteproposal button.selected,
.typoproposal button.selected {
    border: none;
    background: #fff;
    color: #000;
}
.form-invite .counter-budjet {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8%;
}
.form-invite .counter-budjet .input-counter {
    width: fit-content;
    padding: 22px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #171717;
    border-radius: 24px;
    gap: 10px;
}
.form-invite .input-counter p {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 0;
    color: #929292;
}
.form-invite .input-counter input#budget-participants {
    max-width: 168px;
    padding: 5px;
    background: #171717;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: #ECECEC;
}
/* --- form-event --*/
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    flex: 1;
}
label {
    margin-bottom: 5px;
    font-size: 16px;
    color: #B8B8B8;
}
label sup {
    top: -3px;
    right: -2px;
    font-size: 17px;
    font-style: italic;
}
label.btn-upload {
    margin: 0;
}
label.files-name {
    background: #E2A8FF;
    margin: 0;
    border-radius: 24px;
    height: 32px;
    font-size: 10px;
    font-weight: 500;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 110px;
    cursor: pointer;
}
label.files-name span{
    max-width: 75%;
    flex: 75%;
    overflow: hidden;
    white-space: nowrap;
}
.upload-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* espace entre fichiers */
}

.upload-container .files-name {
    flex: 1 1 calc(29% - 15px);
    max-width: 100%;
    padding: 0 5px;
}

input,
textarea {
    padding: 6px 6px 6px 0;
    background-color: #0C0C0C;
    border: none !important;
    outline: none;
    box-shadow: none;
    border-radius: 2px;
    color: #E2A8FF;
    font-size: 16px;
}
.content-formEvent input:active,
.content-formEvent input:focus {
    background: #171717;
}
input::placeholder,
textarea::placeholder {
    color: #777;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}
textarea {
    resize: vertical;
    height: 150px;
    background: #171717;
    padding-left: 6px;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
#event-form{
    overflow: auto;
}
.nextForm-event{
    padding-bottom: 10px;
}
#event-form .full-width {
    width: 100%;
}
#event-form .container-fluid .row {
    height: calc(100vh - 126px);
    margin-top: 126px;
}
#event-form .col-md-7 {
    padding: 0;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#event-form .content-w {
    padding-right: 20px;
}
#event-form .col-md-7::-webkit-scrollbar {
    display: none;
}
.element {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.element::-webkit-scrollbar {
    display: none;
}
#event-form h2.titleD {
    margin-bottom: 20px;
}
#event-form .subtitle {
    margin-bottom: 20px;
}
#event-form .btn-valide {
    margin-top: 32px;
}
#event-form .btn-valide button#valide-form-event {
    background: #E2A8FF;
    border: none;
    width: 260px;
    border-radius: 22px;
    padding: 14px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}
#event-form .content-w{
   height: 100%;
   display: flex;
    flex-direction: column;
}
#event-form .container-fluid,#event-form .container-fluid .row, #event-form .container-fluid .row > div{
    /*height: 100%;*/
}
#event-form .container-fluid .content-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1 0;
    flex-wrap: wrap;
}
#event-form .content-center .object-w-legend {
    background: #FF5869;
    border-radius: 10%;
    min-height: 100%;
}
#event-form .col-md-5{
    display: flex;
}
#event-form .content-center .object-w-legend img {
    border-radius: 50px 50px 0 0;
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1.01;
    object-fit: cover;
}
#event-form .content-center .object-w-legend span.legend {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #0C0C0C;
    display: block;
    padding: 10px 0;
}
#event-form .object-card{
    box-sizing: border-box;
    max-width: calc(100% / 5); /* évite les débordements */
    flex: 1 1 calc(100% / 5);
}
#event-form .content-wBg-radius {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 250 0;
}
#invite .subtitle{
    margin: auto;
}
#event-form .content-wBg-radius > div{
    flex: auto;
}
#event-form .content-wBg-radius .event-synthese {
    background: #FFFFFF;
    border-radius: 50px 50px 0 0;
    width: 100%;
    min-height: 277px;
    padding: 50px;
}
#event-form .event-synthese .listContentG {
    display: flex;
    /*align-items: flex-start;*/
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.listContentG .group-block {
    max-width: calc(33.3333% - 10px);
    flex: calc(33.3333% - 10px);
    background: #ECECEC;
    padding: 10px 15px;
    border-radius: 24px;
}
.listContentG .group-block .group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.listContentG .group-block .group-header h2 {
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: right;
    color: #0C0C0C;
    margin: 0;
    padding: 10px 20px;
    border-radius: 24px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.listContentG .group-block .group-header img {
    max-width: 35px;
}
.listContentG .group-block .group-items .tag-item {
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 23px;
    text-align: center;
    color: #0C0C0C;
    padding: 7px;
    border-radius: 24px;
}
#event-form .content-wBg-radius .your-guest {
    background: #FFE4E1;
    position: relative;
    max-height: 132px;
    height: 100%;
    width: 100%;
    padding-left: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#event-form .content-wBg-radius .guest-counter {
    display: flex;
    width: 90%;
    justify-content: space-between;
}
#event-form .content-wBg-radius .number-participants {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#event-form .content-wBg-radius .lieu{
    background: url("../img/lieu.jpg") no-repeat top center;
    background-size: 100% 100%;
    border-radius: 0 0 50px 50px;
    width: 100%;
    padding-left: 50px;
    padding-top: 32px;
    min-height: 283px;
}
#event-form .content-wBg-radius .lieu.Ocean  {
    background: url("../img/ocean-lieu.jpg") no-repeat top center;
    background-size: cover;
}
#event-form .content-wBg-radius .lieu.Montagne {
    background: url("../img/montagne-lieu.jpg") no-repeat top center;
    background-size: cover;
}
#event-form .content-wBg-radius .lieu.Nature {
    background: url("../img/nature-lieu.jpg") no-repeat top center;
    background-size: cover;
}
#event-form .content-wBg-radius .lieu.Paris {
    background: url("../img/paris-lieu.jpg") no-repeat top center;
    background-size: cover;
}
#event-form .content-wBg-radius .lieu.Lyon {
    background: url("../img/lyon-lieu.jpg") no-repeat top center;
    background-size: cover;
}
#event-form .content-wBg-radius .lieu.Marseille {
    background: url("../img/marseille-lieu.jpg") no-repeat top center;
    background-size: cover;
}
h4.title-blackForm {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #0C0C0C;
    margin-bottom: 10px;
}
h4.title-blackFormObject {
    font-weight: 600;
    font-size: 46px;
    line-height: 46px;
    letter-spacing: -2px;
    color: #0C0C0C;
}
#guest-number,
#location,
#totalBudget,
#typologie{
    font-weight: 600;
    font-size: 46px;
    line-height: 46px;
    letter-spacing: -2px;
    color: #0C0C0C;
}
#name-eventForm {
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 90px;
    line-height: 100px;
    color: #0C0C0C;
}
p.text-synthese {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #0C0C0C;
    max-width: 508px;
}
#date-classed {
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    color: #0C0C0C;
}
#event-form .nextForm-event {
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 15px;
    padding-right: 58px;
}
#btnInfooterMob {
    position: fixed;
    bottom: 44px;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
}
#btnInfooterMob button#addTogamme {
    background: none;
    border: none;
    border-radius: 34px;
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    padding: 14px 48px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    backdrop-filter: blur(50px)
}
#destination .container-fluid .content-form button.btn-icon span.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#destination .container-fluid .content-form button.btn-icon span.ville-destin {
    text-transform: uppercase;
}
/* ---- flip flap CSS -----  */
.flip-container {
    perspective: 1000px;
    width: 232px;
    /*height: 50vh;*/
    height: 480px;
}

.flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-container.flipped .flipper {
    transform: rotateY(180deg);
}

.flip-container .front, .flip-container .back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    backface-visibility: hidden;
    overflow: hidden;
}

.flip-container .front {
    background: transparent;
    color: white;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 32px 18px 20px;
    align-items: center;
    justify-content: space-between;
}
.flip-container .front:hover .object-block .objectifs-title,
.flip-container .front:hover .object-block .objectifs-text,
.card .front:hover button.flip-trigger {
    color: #fff;
    transition: all 0.5s;
}
.card .front:hover button.flip-trigger svg .s0 {
    fill: #fff !important;
}
.flip-container .front:hover button.select {
    border: 1px solid #fff;
    color: #fff;
    transition: all 0.5s;
}
/*.flip-container .front .img-card{
    max-height: 40%;
}
.flip-container .front .img-card img{
    height: 100%;
}*/
.flip-container .back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 17px;
    cursor: pointer;
}
.flip-container .back .img-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}
.flip-container .back p.objectifs-title {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #0C0C0C;
}
.flip-container .back .img-right img {
    max-width: 40px;
}
.flip-container .back h2.card-title {
    color: #171717;
    margin-bottom: 0;
}
.flip-container .back button.flip-back {
    display: flex;
    background: none;
    border: none;
    text-decoration: none;
    transform: rotate(180deg);
    position: absolute;
    bottom: 30px;
    z-index: 3;
}
.flip-container .back .backlisteobjectif{
    background: #ECECEC;
    display: flex;
    width: 100%;
    border-radius: 60px;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 7px;
    line-height: 1;
    color: #141414;
}
.flip-container .back .backlisteobjectif img{
    max-width: 32px;
    height: 32px;
    flex: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: -1px;
}
    /* --- fin flip --- */

/* ---- peice joints ---*/
.content-formEvent .upload-container {
    position: relative;
    display: flex;
    margin: 20px 0 32px;
    align-items: center;
    gap: 15px;
}
.content-formEvent .upload-container .inp-file {
    position: relative;
    cursor: pointer;
}
.content-formEvent .upload-container .btn-upload span {
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    vertical-align: middle;
    display: block;
    color: #0C0C0C;
}
.content-formEvent .file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    padding: 16px 20px;
}

.content-formEvent .btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b8b8b8;
    color: #333;
    padding: 7px 9px;
    border-radius: 25px;
    border: none;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 158px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.content-formEvent .btn-upload:hover {
    background-color: #a8a8a8;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.content-formEvent .btn-upload:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-formEvent .btn-text {
    flex-grow: 1;
}

.content-formEvent .btn-arrow {
    margin-left: 15px;
    font-size: 10px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.content-formEvent .btn-upload:hover .btn-arrow {
    transform: translateX(3px);
}

.content-formEvent .file-info {
    margin-top: 10px;
    color: #fff;
    font-size: 12px;
}

.content-formEvent .file-list {
    margin-top: 5px;
    max-width: 300px;
}

.content-formEvent .file-item {
    background-color: rgba(184, 184, 184, 0.2);
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 15px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-formEvent .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}

.content-formEvent .file-size {
    margin-left: 10px;
    opacity: 0.7;
}

.content-formEvent .remove-file {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    font-weight: bold;
}
.content-formEvent .upload-container.dragover .btn-upload {
    background-color: #9fb3d3;
    transform: scale(1.02);
}
.content-formEvent .btn-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b8b8b8;
    color: #333;
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 10px;
    margin-left: 20px;
}

.content-formEvent .btn-upload-icon:hover {
    background-color: #a8a8a8;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.content-formEvent .demo-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.content-formEvent .demo-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}

.content-formEvent .demo-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* --- pj fin --- */


div.step {
    display: none ;
}
div.step.active {
    display: block;
}
.loading {
    position: relative;
}

.loading:after {
    display: inline-block;
    content: '...';
}

#date-btn{
    flex-direction: column;
}
.datadate{
    width: 100%;
}
.headDatadate{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.bodyDataDate{
    background: url("../img/dateBg.svg") no-repeat;
    margin-top: 15px;
    padding-left: 20px;
    background-position: 3px 7px;
}
.valueDateCont{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.valueDate{
    width: 120px;
    padding: 5px 15px;
    background: #333333;
    border-radius: 30px;
    text-align: center;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background: #E2A8FF;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #E2A8FF;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange,
.flatpickr-day.selected.endRange {
    color: #0C0C0C;
}
.flatpickr-day.inRange {
    color: #B8B8B8;
    background: #262626;
    box-shadow: -5px 0 0 #262626, 5px 0 0 #262626;
    border-color: #262626;
}
#selectallgames,#return-2{
    cursor: pointer;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
    display: none;
}
.flatpickr-months .flatpickr-prev-month:after {
    content: url("../img/prevMonth.svg");
    position: absolute;
    left: 22px;
    top: 6px;
}
.flatpickr-months .flatpickr-next-month:after {
    content: url(../img/nextMonth.svg);
    position: absolute;
    right: 22px;
    top: 6px;
}
/*Thank page*/

#thankPage{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#thankPage .container{
    text-align: center;
}
#thankPage .container h2{
    font-size: 44px;
    font-weight: 500;
    margin-bottom: 30px;
}
#thankPage .container p{
    font-size: 22px;
}
#thankPage .satisfaction{
    margin-top: 10%;
}
#thankPage .satisfaction ul{
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#loading-container.active {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #000;
    position: absolute;
    z-index: 9;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.submit-btn.loading {
    cursor: wait;
}

#loading-container svg {
    margin: auto;
    max-width: 300px;
}
#iroform{
    overflow-x: hidden;
}
#addobjectifs{
    position: absolute;
    right: 120px;
    top: 0;
    border: none;
    outline: none;
    background: #E2A8FF;
    padding: 15px 20px;
    height: 100%;
    color: #0C0C0C;
    font-size: 14px;
    border-radius: 24px;
    transition: all 0.3s;
    display: none;
    width: 167px;
    font-size: 14px;
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {
    0% {
        stroke-dasharray: 1, 800;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 400, 400;
        stroke-dashoffset: -200px;
    }
    100% {
        stroke-dasharray: 800, 1;
        stroke-dashoffset: -800px;
    }
}

.spin2 {
    transform-origin: center;
    animation: spin2 1.5s ease-in-out infinite,
    spin 2s linear infinite;
    animation-direction: alternate;
}
#tarteaucitronAlertSmall{
    display: none !important;
}

/* Scrollbar track */
.menu-sideBar::-webkit-scrollbar {
    width: 4px; /* vertical scrollbar width */
    height: 4px; /* horizontal scrollbar height */
}

/* Scrollbar track background */
.menu-sideBar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Scrollbar thumb (the draggable part) */
.menu-sideBar::-webkit-scrollbar-thumb {
    background: #FF5869;
    border-radius: 10px;
}

/* Scrollbar thumb on hover */
.menu-sideBar::-webkit-scrollbar-thumb:hover {
    background: #FF5869;
}

/* Corner where scrollbars meet */
.menu-sideBar::-webkit-scrollbar-corner {
    background: #f1f1f1;
}
#event-form{
    height: auto;
}
.objectiListVideo{
    list-style: none;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 1372.34px;
    top: 0;
    cursor: url('../img/perso-cursor.svg'), pointer;
}
.objectiListVideo li{
    display: inline-block;
    position: absolute;
}
.objectiListVideo li.ob-plaisir{ top: 45%; left: 54%;}
.objectiListVideo li.ob-motiver{ top: 25%; left: 33%;}
.objectiListVideo li.ob-food{ top: 25%; left: 75%;}
.objectiListVideo li.ob-federer{ top: 40%; left: 31%;}
.objectiListVideo li.ob-reunir{ top: 63%; left: 18%;}
.objectiListVideo li.ob-partager{ top: 80%; left: 80%;}
.objectiListVideo li.ob-eduquer{ top: 35%; left: 79%;}
.objectiListVideo li.ob-communiquer{ top: 8%; left: 48%;}
.objectiListVideo li.ob-cohesion{ top: 60%; left: 50%;}
.objectiListVideo li.ob-evaluer{ top: 7%; left: 79%;}
.objectiListVideo li.ob-reseau{ top: 68%; left: 79%;}
.objectiListVideo li.ob-transmettre{ top: 33%; left: 20%;}
.objectiListVideo li.ob-informer{ top: 70%; left: 10%;}
.objectiListVideo li.ob-confidentialite{ top: 61%; left: 22%;}
.objectiListVideo li.ob-silence{ top: 14%; left: 17%;}
.objectiListVideo li.ob-timing { top: 13%; left: 48%;}
.objectiListVideo li.ob-marketing { top: 60%; left: 14%;}
.objectiListVideo li.ob-commercial { top:23%; left: 17%;}
.objectiListVideo li.ob-roi { top:83%; left: 77%;}
.objectiListVideo li.ob-rd { top:11%; left: 72%;}
.objectiListVideo li.ob-environement { top:13%; left: 47%;}
.objectiListVideo li.ob-eco-responsabilite { top:58%; left: 14%;}
ul.objectiListVideo .btnInVideo span {
    background: #FFF2E3;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 24px;
    display: inline-block;
    transform-origin: center;
    transition: transform 2.2s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
    cursor: url('../img/perso-cursor.svg') 8 8, pointer;
}

ul.objectiListVideo .btnInVideo:hover span {
    transform: scale(1.2);
}

.tutoEtape{
    display: none;
    min-height: 300px;
}
.activetuto{
    display: block;
}
.tutoEtapeCont{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 12, 0.8);
    z-index: 10;
    flex-direction: column;
}
.tutoInfo{
    height: 20vh;
}
.tutoTitre{
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -1px;
    color: rgba(236, 236, 236, 1);
    text-align: center;
    display: block;
}
.tutodesc{
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
}
.bulletuto{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 6px;
}
.bulletuto span{
    background: rgba(77, 77, 77, 1);
    width: 6px;
    height: 6px;
    border-radius: 6px;
    display: block;
}
.bulletuto span.active{
    width: 40px;
}
.bulletuto span.active:before{
    content: '';
    width: 6px;
    border-radius: 6px;
    height: 6px;
    background: #fff;
    display: block;
    animation: tutoBulletProgress 6s linear forwards;
}

@keyframes tutoBulletProgress{
    0%{width:6px}
    100%{width:40px}
}

.bulletuto span.passe{
    background: #fff;
}
.nextTuto{
    background: none;
    border: 2px solid rgba(236, 236, 236, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 147px;
    border-radius: 30px;
    color: rgba(236, 236, 236, 1);
    font-size: 14px;
    gap: 5px;
    margin: 35px auto 0;
    transition: all 0.3s;
}
.nextTuto:hover{
    background: rgba(236, 236, 236, 1);
    color: #171717;
    transition: all 0.3s;
}
.nextTuto:hover path{
    fill: #171717;
    transition: all 0.3s;
}
.flecheC{
    position: absolute;
}
.tutoEtape-1 .flecheC{
    transform: translate(50%, -34%);
    width: 34vw;
}
.tutoEtape-1 .flecheC img {
    max-width: 100%;
    width: 100%;
}
.tutoEtape-2 .flecheC{
    width: 23vw;
    left: 309px;
    top: 7vh;
}
.tutoEtape-2 .flecheC img {
    max-width: 100%;
    width: 100%;
}
.tutoEtape-3 .flecheC{
    width: 19vw;
    top: 40px;
    left: 58vw;
}
.tutoEtape-3 .flecheC img {
    max-width: 100%;
    width: 100%;
}
.tutoEtape-4 .flecheC{
    transform: translate(60% , 1%);
    width: 36%; 
}
.tutoEtape-4 .flecheC img {
    max-width: 100%;
    width: 100%;
}
.menu-sideBar.ombre:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(12, 12, 12, 0.8);
    top: 0;
    left: 0;
    z-index: 1;
}
.menu-sideBar.ombre .accordion-toggle.open .bulleFoot, .menu-sideBar.ombre .accordion-toggle.open h3 .bulle{
    display: none;
}
.headerNavStep{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    /*background: #0c0c0c;*/
}
.headerNavStep .barreProgress{
    width: 100%;
    height: 4px;
    background: #333333;
}
.headerNavStep .barreProgress span{
    background: #E2A8FF;
    height: 4px;
    display: block;
}
.stepMenu{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
}
.stepMenu .stepNav{
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    background: #171717;
    list-style: none;
    padding: 6px;
    gap: 6px;
    border-radius: 50px;
}
.stepNavC{
    background: #0C0C0C;
    padding: 6px 15px 6px 6px;
    color: #6D6D6D;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-radius: 50px;
}
.stepNavC .numb{
    width: 36px;
    height: 36px;
    background: #262626;
    line-height: 36px;
    text-align: center;
    color: #6D6D6D;
    font-size: 18px;
    display: block;
    margin-right: 10px;
    border-radius: 50px;
}
.stepNavC.active{
    background: #fff;
    color: #0C0C0C;
}
.stepNavC.active .numb{
    background: #0C0C0C;
    color: #fff;
}
.stepNavC.stePasse{
   background: #262626;
    color: #B8B8B8;
    cursor: pointer;
    transition: all 0.3s;
}
.stepNavC.stePasse:hover{
    background: #0C0C0C;
    transition: all 0.3s;
}
.stepNavC.stePasse .numb{
    margin-right: 0;
    color: #B8B8B8;
    background: none;
    width: 20px;
    margin-left: 5px;
}
.stepNavC.stePasse:after{
    content: url("../img/checkmenu.svg");
    margin-left: 10px;
}
.img-typologie,.img-destination,.img-invite{
    max-width: 710px;
}
.selected-only-state-4 .arrow-btn.up{
    transform: translate(-50%, -352%);
}
.selected-only-state-4 .arrow-btn.down{
    transform: translate(-50%, -100%);
}
.selected-only-state-4 .arrow-btn.up:after{
    transform: rotate(180deg);
}
.selected-only-state-4 .arrow-btn.down:after{
    transform: rotate(180deg);
}
.selected-only-state-4 .arrow-btn.up:after, .selected-only-state-4 .arrow-btn.down:after{}
.content-gammes-center{
    min-height: 100% ;
}
@media (min-width: 1620px) {
    .tutoEtape-3 .flecheC {
        width: 21vw;
        top: 35px;
        left: 61vw;
    }
}
@media screen and (max-width: 1440px) {
    li.accordion-toggle h3 img {
        width: 36px;
        height: 36px;
        flex: 36px;
        max-width: 36px;
    }
    li.accordion-toggle h3 {
        font-size: 25px;
        line-height: 26px;
        gap: 10px;
    }
    li.accordion-toggle.open h3 {
        margin-left: 13px;
    }
    #event-form .nextForm-event {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 13px 50px 0 40px;
    }
    #event-form h2.titleD {
        margin-bottom: 32px;
    }
    #event-form .subtitle {
        margin-bottom: 20px;
    }
    #event-form .btn-valide {
        margin-top: 0;
    }
    #contact-form textarea {
        margin-bottom: 0;
    }
}
@media (max-width: 1280px){
    .flip-container .back button.flip-back {
        position: absolute;
        bottom: initial;
        top: 10px;
        right: 15px;
    }
    .head-gamme-form .button-flex-gamme .reset-action {
        right: 20px;
    }
    .stepNavC {
        font-size: 12px;
        padding: 6px;
    }
    .stepNavC .numb {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        margin-right: 6px;
    }
    #number-guest, input#budget {
        font-size: 54px;
    }
    .reset-button button.check-footer {
        position: fixed;
        right: 34px;
    }
    #invite .container-fluid .row {
        align-items: center;
        justify-content: center;
        height: calc(100vh - 119px);
        width: 100%;
        margin-top: 116px;
    }
}
@media screen and (max-width: 1280px) and (max-height: 800px) {
    .img-invite {
        max-width: 582px;
    }
}
@media (min-width: 992px) and (max-width: 1280px) {
    section.section {
        height: auto;
        padding-bottom: 30px;
    }
    #cohesion-w-sideBar{
        padding-bottom: 0;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9{
        max-width: calc(100vw - 270px);
    }
    li.accordion-toggle:before,li.accordion-toggle.open .bulleFoot,li.accordion-toggle.open h3 .bulle{
        right: 28px;
    }
    /*#cohesion-w-sideBar,#step-2-container{
        overflow-y: auto;
        height: auto;
    }
    #cohesion-w-sideBar .cohesion-inner{
        height: 100%;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9{
        max-height: inherit;
    }*/
    .flip-container .back {
        padding: 8px 17px;
    }
    .flip-container .back p.objectifs-title {
        font-size: 12px;
        line-height: 16px;
        margin: 0 0 7px;
    }
    .footer-button {
        margin: 12px 0 0;
    }
    #step-3-container{
        padding-top: 120px;
    }
    #step-4-container,#step-8-container,#step-5-container{
        padding-top: 80px;
    }
    #step-8-container .container-fluid .row > div{
        flex: 50%;
        width: 50%;
    }
    .img-typologie{
        max-width: 100%;
    }
    .slide-right.animate{
        padding-bottom: 30px;
    }
    #event-form{
        padding-bottom: 0;
    }
    #event-form .container-fluid .row{
        height: auto;
    }
    #event-form .content-wBg-radius .your-guest{
        padding-left: 20px;
    }
    #guest-number, #location, #totalBudget, #typologie{
        font-size: 30px;
    }
    #date-classed{
        font-size: 20px;
    }
}
@media (min-width: 993px) and (max-width: 1199px){
    h2.sideBar-title{
        font-size: 28px;
    }
    li.accordion-toggle h3{
        font-size: 16px;
        line-height: 16px;
    }
    li.accordion-toggle.open{
        padding: 15px 0 10px 10px;
    }
    .accordion-content p{
        font-size: 12px;
    }
    .accordion-content button {
        font-size: 12px;
        width: 200px;
    }
    h2.title-black{
        font-size: 20px;
    }
    #cohesion-w-sideBar .flex-items .progress-flex-inner{
        width: 220px;
    }
    #cohesion-w-sideBar #header-cohesion{
        padding: 0 10px;
    }
    #content-right-slider {
        top: 50%;
    }
    button.btn-w-hover span.text-in-img{
        font-size: 12px;
    }
    button.btn-w-hover{
        border-radius: 20%;
    }
    #destination-tabContent .content-destination{
        width: 600px;
    }
    .calendar-modal,.tab-content#flexible{
        width: 600px;
    }
    .flatpickr-calendar .flatpickr-days {
        width: 550px !important;
    }
    .flatpickr-weekdays {
        gap: 30px;
    }
    .month-box{
        min-width: 70px;
    }
    textarea{
        height: 90px;
    }
    #event-form h2.titleD {
        margin-bottom: 20px;
    }
    h2.titleD{
        font-size: 34px;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    #carousel button.slick-prev.slick-arrow {
        position: absolute;
        left: -60px;
        top: -11px;
        height: 100%;
        width: 54px;
        background: transparent;
        border: none;
    }
    #carousel button.slick-next.slick-arrow {
        position: absolute;
        right: -60px;
        top: 0;
        height: 100%;
        width: 54px;
        background: transparent;
        border: none;
    }
    .flip-container {
        width: 185px;
    }
    .flip-container .back h2.card-title{
        display: none;
    }
    h1 {
        font-weight: 500;
        font-size: 32px;
        line-height: 36px;
        color: #ECECEC;
        text-align: center;
        vertical-align: middle;
    }
    .subtitle {
        font-size: 16px;
        line-height: 22px;
    }
    .flip-container {
        height: 372px;
    }
    .card .front .img-card img {
        height: 142px;
    }
}
@media screen and (max-width: 992px){
    .tutoEtape {
        min-height: 250px;
        max-width: 375px;
    }
    .tutoEtape-1 .flecheC img,.tutoEtape-2 .flecheC img,.tutoEtape-3 .flecheC img,.tutoEtape-4 .flecheC img {
        width: auto;
    }
    .head-gamme-form .button-flex-gamme {
        position: fixed;
        top: 20px;
        left: 0;
        width: 98%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
    }
    #typologie .head-gamme-form .button-flex-gamme {
        top: 0;
        left: 8px;
    }
    .head-gamme-form .button-flex-gamme button.back-in {
        position: initial;
        left: initial;
    }
    .head-gamme-form .button-flex-gamme .reset-action {
        width: fit-content;
        position: initial;
        right: initial;
        top: initial;
    }
    .tutoInfo{
        height: auto;
        padding: 0 15px;
    }
    .tutoInfo p br{
        display: none;
    }
    .head-gamme-form {
        position: relative;
        max-width: 100%;
        margin: auto;
        height: 96px;
        background: transparent;
    }
    .head-gamme-form .button-flex-gamme .back-in {
        padding-left: 15px;
    }
    .head-gamme-form .button-flex-gamme .reset-action {
        padding-right: 15px;
    }
    #progress-item .progress-inner {
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
    .changecont.affiche{
        display: none;
    }
    .changecont:not(.affiche) {
        margin-left: 0;
        font-size: 36px;
        position: absolute;
        bottom: 32px;
        cursor: pointer;
        padding: 0 8px 14px;
        border-radius: 20px;
        right: 10px;
        left: initial;
        width: fit-content;
        display: block;
    }
    .tutoEtapeCont {
        position: fixed;
        justify-content: inherit;
    }
    .tutoEtape-1{
        min-height: 60vh;
        padding-top: 210px;
    }
    .tutoEtape-2{
        min-height: 80%;
        position: relative;
    }
    .tutoEtape-3{
        min-height: 60%;
        padding-top: 40%;
    }
    .tutoEtape-4{
        min-height: 60%;
        padding-top: 60%;
        position: relative;
    }
    .tutoEtape-1 .flecheC {
        width: 100%;
        position: absolute;
        top: 15px;
        left: 0;
        text-align: center;
        transform: none;
        display: flex;
        justify-content: center;
    }
    .slider-item.active {
        transform: scale(0.95) !important;
    }
    .objectiListVideo li {
        display: none !important;
    }
    /*.reset-button button.check-footer .noteGuide{
        display: none !important;
    }*/
    [class*="col-md-"] {
        width: 100%;
    }
    #invite .col-md-7 {
        width: 60%;
    }
    #invite .col-md-5 {
        width: 40%;
    }
    .d-md-none {
        display: block !important;
    }
    .d-md-block {
        display: none !important;
    }
    /*.footer-button .text-center {
        display: none;
    }*/
    section#objectifs .footer-button .button-flex {
        /*display: flex;*/
        flex-direction: column-reverse;
    }
    section#objectifs .object-btn{
        margin: 15px 0 0;
    }
    .footer-button {
        margin: 44px 0 0;
    }
    section#objectifs .footer-button._active .button-flex {
        gap: initial;
    }
    section.section {
        width: auto;
        height: auto;
    }
    li.accordion-toggle.open:before {
        display: none;
    }
    li.accordion-toggle.open:after {
        display: none;
    }
    #cohesion-w-sideBar .cohesion-inner#cohesion {
        background: #FF5869;
    }
    #cohesion-w-sideBar .cohesion-inner#durabilite {
        background: #26D07C;
    }
    #cohesion-w-sideBar .cohesion-inner#confidentialite {
        background: #963CBD;
    }
    #cohesion-w-sideBar .cohesion-inner#partage {
        background: #4A65E8;
    }
    #cohesion-w-sideBar .cohesion-inner#performance {
        background: #FFBF3F;
    }
    #content-right-slider .slider-items button span.text-titre {
         display: none;
    }
    /*.slide-left {
        z-index: 0 !important;
    }*/
    .tutoTitre {
        max-width: 250px;
        margin: auto;
        line-height: 1.2;
        font-size: 32px;
    }
    .tutodesc {
        font-size: 14px;
    }
    /*#content-right-slider .slider-container {
        display: none;
    }
    #content-right-slider .slider-container button.arrow-btn {
        display: none;
    }*/
    .slider-nav-itemsNone {
        height: auto;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
        width: 100%;
    }
    /*#content-right-slider {
        display: none;
    }*/
    #cohesion-w-sideBar .cohesion-inner .row .col-md-3,
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9{
        max-width: 100%;
    }
    #cohesion-w-sideBar .cohesion-inner .row {
        flex-direction: column-reverse !important;
        margin-top: 0;
        border-radius: 24px 24px 0 0;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond {
        display: none;
        align-items: flex-end;
        justify-content: center;
        position: initial;
    }
    li.accordion-toggle.open {
        background: #FF5869;
        color: white;
        border-radius: 30px 0 0 30px;
        padding: 0;
        width: 100%;
        margin-left: 0;
    }
    .menu-sideBar {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        padding-top: 44px;
        padding-bottom: 46px;
    }
    button.btn-select span.selectionner strong {
        font-weight: 400;
        display: none;
    }
    .object-card {
        flex: 0 0 calc(50% - 20px);
    }
    #objectifs{
        height: auto;
        min-height: 100vh;
    }
    #next-details .form-detail .imageBottom {
        display: none;
    }
    .card p.objectifs-title {
        margin: 0 0 7px;
    }
    #objectifs .title-center {
        max-width: 320px;
        margin: 0 auto 15px;
    }
    #objectifs .footer-button{
        margin-top: 15px;
    }
    h1 br {
        display: none;
    }

    h1 {
        font-size: 24px;
        line-height: 28px;
        margin-top: 0;
    }
    .reset-button {
        position: fixed;
        right: 10px;
        bottom: 85px;
        width: auto;
        display: flex;
        justify-content: flex-end;
        z-index: 4;
    }
    .subtitle {
        font-size: 14px;
        line-height: 18px;
        max-width: 100%;
    }
    #objectifs .flip-container {
        height: 406px;
    }
    .objectifs-inner {
        max-width: 100%;
        width: 100%;
    }
    #carousel ul.slick-dots {
        display: none !important;
    }
    .reset-button button.check-footer {
        right: 3px;
    }
    #cohesion-w-sideBar .reset-button button.check-footer {
        position: relative;
        left: 0;
        bottom: -66px;
        transition: none;
    }
    #cohesion-w-sideBar .reset-button button.check-footer.showInfos {
        bottom: 0;
        transition: none;
    }
    #gammes-objectifs .reset-button button.check-footer {
        bottom: 10px;
    }
    #gammes-objectifs .reset-button button.check-footer.showInfos {
        bottom: 10px;
    }
    /*#next-details .reset-button button.check-footer {
        bottom: -72px;
    }*/
    #next-details .reset-button button.check-footer.showInfos {
        bottom: -72px;
    }
    #cohesion-w-sideBar #header-cohesion {
        position: fixed;
        border-radius: 50px;
        width: calc(100% - 20px);
        bottom: 15px;
        top: inherit;
        left: 10px;
        padding:0 10px;
        z-index: 9;
        background: #0C0C0C;
    }
    #cohesion-w-sideBar #header-cohesion .row .col-md-3 {
        flex: 10%;
        max-width: 10%;
    }
    #cohesion-w-sideBar #header-cohesion .row .col-md-9 {
        flex: 100%;
        max-width: 100%;
    }
    h2.title-black {
        margin: 27px 0 0 20px;
        font-weight: 600;
        font-size: 26px;
        line-height: 28px;
    }
    #cohesion-w-sideBar .flex-items #progress-item {
        gap: 0;
        width: 100%;
        position: fixed;
        left: 0;
        top: 88px;
    }
    h3.headerW-title {
        position: fixed;
        left: 32px;
        width: 100%;
    }
    #header-cohesion button.back-in {
        padding: 0;
        margin-top: 10px;
        position: fixed;
        top: 22px;
    }
    #cohesion-w-sideBar .flex-items #objectif-items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        padding: 14px 0;
        border-radius: 30px;
        width: auto;
        gap: 0;
    }
    .accordion-content p {
        display: none;
    }
    .menu-sideBar ul.accordion {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-3 {
        padding: initial;
        padding-bottom: 52px;
    }
    li.accordion-toggle.open h3 {
        flex-direction: column;
        margin: 0;
    }
    h2.sideBar-title {
        margin-left: 0;
        display: flex;
        justify-content: center;
    }
    h2.stages-title {
        font-size: 20px;
        line-height: 23px;
        margin-top: 13%;
        padding-bottom: 20px;
    }
    h2.stages-title span.mobNone {
        display: none;
    }
    li.accordion-toggle.open {
        background: #FF5869;
        color: white;
        border-radius: 30px;
        border: 2px solid #EA405B;
        padding: 32px 10px;
        width: 46%;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    button.btn-select.current:hover span.retour {
        display: none;
    }
    .accordion-content button:hover {
        background: initial;
    }
    button.btn-select.current {
        background: #0c0c0c;
    }
    .mobileModal button.btn-select {
        background: #E2A8FF;
        border: none;
    }
    button.select.current:hover span.btnChecked {
        display: flex;
    }
    li.accordion-toggle.open .accordion-content {
        padding: 0;
    }
    li.accordion-toggle a {
        font-weight: 500;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        color: #fff;
    }
    #gammes-objectifs .content-gammes-center {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-top: 20px;
    }
    #gammes-objectifs .content-gammes-center .content-center {
        height: auto;
        padding: 0 15px;
        max-height: 100%;
        margin-top: 15px;
        overflow: initial;
        display: flex !important;
    }
    #gammes-objectifs .content-gammes-center .content-center .object-card {
        flex: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #gammes-objectifs .gamme-button {
        position: fixed;
        bottom: 0;
        margin-top: 0;
    }
    button.btn-w-hover span.text-in-img{
        color: #fff;
    }
    .gamme-button .button-flex {
        display: flex;
        flex-direction: column-reverse;
        gap: 17px;
        padding-bottom: 15px;
    }
    button#valide-gamme {
        padding: 8px 30px;
    }
    .gamme-button .button-flex .object-btn a {
        font-size: 14px;
        line-height: 18px;
    }
    button.btn-w-hover {
        position: relative;
        background: #FF5869;
        border: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        flex-direction: row;
        padding: 0;
        border-radius: 50px;
    }
    button.btn-w-hover img {
        width: 68px;
        max-width: 100%;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
    }
    #next-details {
        background: none;
    }
    .title-mob {
        display: flex;
        justify-content: center;
        /*padding-top: 28px;*/
    }
    .title-mob h2 {
        font-weight: 500;
        font-size: 18px;
        line-height: 23px;
        text-align: center;
        color: #ECECEC;
        margin: 0;
    }
    h2.titleD {
        font-weight: 500;
        font-size: 30px;
        line-height: 34px;
        text-align: center;
        color: #ECECEC;
    }
    #next-details .content-details {
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 184px);
        margin-top: 88px;
    }
    #next-details .content-details .subtitle {
        font-size: 16px;
        line-height: 22px;
    }
    #name-event {
        height: 112px;
        font-size: 44px;
        padding: 0 20px 64px;
    }
    #typo-event {
        font-size: 44px;
        padding: 5px 20px;
    }
    #name-event::placeholder {
        font-size: 44px;
        line-height: 48px;
    }
    #typo-event::placeholder {
        font-size: 44px;
        line-height: 48px;
    }
    #next-details .content-details .btn-details {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-top: 0;
        width: 100%;
        margin-bottom: 36px;
        position: relative;
        z-index: 4;
    }
    #next-details .content-details .btn-details #valide-detail {
        width: 230px;
        padding: 8px;
        margin-right: 10px;
    }
    #next-details .content-details .btn-details #reset-detail {
        padding: 6px 24px;
    }
    #destination h2.titleD {
        display: none;
    }
    h2.titleD-mob {
        font-weight: 500;
        font-size: 30px;
        line-height: 34px;
        color: #ECECEC;
        text-align: center;
        margin-top: 30px;
    }
    #destination .container-fluid .content-form button.btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        padding: 10px 20px;
    }
    #destination .container-fluid {
        min-height: calc(100vh - 60px);
        height: auto;
        margin-bottom: 40px;
    }
    #imageBlur{
        margin-top: 50px;
    }
    #destination-tabContent .content-destination{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
    }
    #destination-tabContent .content-destination p{
        font-size: 16px;
        color: #B8B8B8;
    }
    .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{
        display: none !important;
    }
    h2.titleW-flex{
        margin-top: -18px;
        margin-bottom: 40px;
        font-size: 20px;
    }
    #destin-event{
        margin-left: 0;
        font-size: 44px;
        width: 100%;
        margin-bottom: 0;
    }
    #tabinex-item{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #0C0C0C;
        height: 100vh;
        overflow: hidden;
        padding-top: 10px;
        z-index: 1;
    }
    #invite .container-fluid .row .slide-left{
        text-align: center;
    }
    #invite .container-fluid .row .slide-left img{
        max-width: 80%;
    }
    #tabinex-item .tabs{
        margin-top: 90px;
        background: #171717;
        border-radius: 50px;
        margin-bottom: 0;
    }
    #tabinex-item .button-flex-gamme .date-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 20px;
        color: #ECECEC;
    }
    .flatpickr-current-month .flatpickr-monthDropdown-months{
        background: none;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .dayContainer {
        width: 100%;
        min-width: 262px;
        max-width: 100%;
    }
    #tabinex-item .flatpickr-current-month{
        font-weight: 600;
    }
    #tabinex-item .button-flex-gamme .date-icon p{
        margin: 0;
    }
    #tabinex-item .button-flex-gamme .date-icon img{
        width: 24px;
    }
    .calendar-modal{
        width: 100%;
    }
    .flatpickr-calendar .flatpickr-days{
        width: 100% !important;
    }
    #destin-event::placeholder{
        font-size: 44px;
    }
    #destination-tabContent .content-destination .button-flex-gamme,#tabinex-item .button-flex-gamme{
        position: absolute;
        top: 24px;
        left: 0;
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px ;
    }
    #destination-tabContent .content-destination .button-flex-gamme button,#tabinex-item .button-flex-gamme button{
        background: none;
        border: none;
        outline: none;
    }
    button.select.current:hover span.retour,
    button.btn-select.current:hover span.retour {
        display: none;
    }
    /*#cohesion-w-sideBar{
        padding-top: 96px;
    }*/
    #cohesion-w-sideBar.objectifMob-items{
        padding-top: 0;
    }
    /*#cohesion-w-sideBar.objectifMob-items .cohesion-inner {
        filter: blur(5px);
    }*/
    #cohesion-w-sideBar.objectifMob-items #content-right-slider {
        display: none;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9{
        margin: 0;
        padding-right: 0;
        border-radius: 24px 24px 0 0;
        display: flex;
        flex-direction: column;
    }
    #cohesion-w-sideBar .cohesion-inner .img-fond{
        margin-top: 60px;
    }
    h2.sideBar-title{
        margin-bottom: 30px;
        margin-top: 30px;
    }
    .liste-objectifs-cont-mobile{
        list-style: none;
        padding: 0 15px;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .liste-objectifs-cont-mobile li{
        flex: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }
    .liste-objectifs-cont-mobile li:last-child {
        position: relative;
        z-index: 4;
    }
    .item-objectif-mobile{
        border: 2px solid rgba(0,0,0,0.2);
        border-radius: 24px;
        padding: 9px;
    }
    .item-objectif-mobile.selected{
        border: 2px solid #fff;
    }

    .item-objectif-mobile .image-cont-mobile{
        margin: 15px auto 20px;
        text-align: center;
    }
    .item-objectif-mobile .image-cont-mobile img{
        max-width: 90%;
        border-radius: 50% 50% 0 0;
        aspect-ratio: 1 / 1.1;
        object-fit: cover;
    }
    .item-objectif-mobile h3{
        color: #0c0c0c;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }
    .item-objectif-mobile .btn-select {
        width: 100%;
        background: transparent;
        color: #0c0c0c;
        border: 1px solid #0c0c0c;
    }
    .item-objectif-mobile .btn-select span.retour {
        display: none;
    }
    .item-objectif-mobile .btn-select.current span.retour {
        display: flex;
    }
    .item-objectif-mobile .btn-select.current span.selectionner {
        display: none;
    }
    .item-objectif-mobile button.btn-select.current:hover span.retour {
        display: flex;
    }
    .more-details-objectif-mobile {
        background: none;
        border: none;
        width: 100%;
        color: #0c0c0c;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 5px 0;
        font-weight: 500;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
    }
    .mobileDetailsObjectif{
        display: none;
    }
    .mobileDetailsObjectif{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        min-height:100vh;
        z-index: 10;
    }
    .mobileDetailsObjectif .head-modal{
        border-radius: 0 0 24px 24px;
        width: 100%;
        padding: 15px;
        background: #0c0c0c;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobileDetailsObjectif .head-modal h2.title-black {
        font-weight: 600;
        margin: 0;
        font-size: 26px;
        line-height: 28px;
        color: #fff;
    }
    .mobileDetailsObjectif .head-modal button{
        background: none;
        border: none;
        outline: none;
    }
    .mobileDetailsObjectif .body-modal{
        border-radius: 24px 24px 0 0;
        height: calc(100vh - 42px);
        padding: 30px;
        font-weight: 400;
        color: #0c0c0c;
        font-size: 14px;
    }
    .image-cont-modal-mobile{
        text-align: center;
    }
    .mobileDetailsObjectif .body-modal .image-cont-modal-mobile img{
        width: 68%;
        max-width: 300px;
    }
    .mobileDetailsObjectif .body-modal h3{
        font-size: 38px;
        text-align: left;
        font-weight: 600;
        color: #0c0c0c;
        margin: 15px 0;
    }
    #content-right-slider{
        position: fixed;
        bottom: initial;
        left: 0;
        top: 0;
        right: inherit;
        width: 100%;
        padding: 0;
        margin-top: 0;
    }
    #content-right-slider .slider-container{
        background: #0C0C0C;
        width: 100%;
        border-radius: 0;
        height: 96px;
    }
    #content-right-slider .slider-nav-items {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 96px;
    }
    .arrow-btn {
        display: none !important;
    }
    #content-right-slider .slider-item button {
        filter: grayscale(1);
    }
    #content-right-slider .slider-item.active button {
        opacity: 1;
        transform: scale(0.85);
        padding: 0;
        filter: blur(0);
    }
    #cohesion-w-sideBar #header-cohesion .row .col-md-3 {
        /*display: none;*/
    }
    /*#content-right-slider .arrow-btn,#content-right-slider .slider-item button span.text-titre{
        display: none !important;
    }
    #cohesion-w-sideBar .cohesion-inner{
        padding-bottom: 110px;
    }*/
    .btn-aremplir{
        position: absolute;
        bottom: 15px;
        width: calc(100% - 60px);
        left: 30px;
    }
    .btn-aremplir button.btn-select span.selectionner strong{
        display: inline-block;
    }
    .btn-aremplir.mobileModal button.btn-select span.selectionner strong {
        display: none;
    }
    #imageBlur.active{
        display: none;
    }
    .tab-content#flexible{
        width: 100%;
    }
    .calendar-options .option{
        background: #171717;
        border: 2px solid #929292;
    }
    .calendar-options .option.active{
        color: #E2A8FF;
        border: 2px solid #E2A8FF;
        background: #171717;
    }
    .calendar-options .option.exact{
        width: 100%;
    }
    .tab-content#flexible h4{
        font-size: 16px;
        font-weight: 500;
        max-width: 240px;
    }
    .month-box{
        min-width: inherit;
        width: 32%;
    }
    .month-slider{
        width: 100%;
    }
    .months-scroll{
        width: 100%;
    }
    #invite .row > div{
        padding: 10px 0 0;
    }
    #invite .image img {
        height: auto;
        aspect-ratio: inherit;
        max-height: 100%;
        max-width: 100%;
    }
    #invite .button-flex-gamme{
        top: 0;
        background: transparent;
        padding: 20px 0 0;
    }
    #invite .head-gamme-form{
        max-width: 100%;
    }
    #invite .button-flex-gamme h2{
        margin-bottom: 0;
        margin-top: 0;
    }
    .form-invite{
        margin-top: 50px;
    }
    #event-form .object-card {
        box-sizing: border-box;
        min-width: 0;
        flex: 1 1 calc(100% / 2);
        max-width: 100%;
    }
    #event-form .content-w{
        padding: 0 15px;
    }
    #event-form .container-fluid, #event-form .container-fluid .row, #event-form .container-fluid .row > div{
        height: auto;
    }
    #event-form .col-md-7,#event-form .content-w{
        max-height: inherit;
    }
    #event-form .content-center .object-w-legend{
        position: relative;
        border: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        flex-direction: row;
        padding: 0;
        border-radius: 50px;
    }
    #event-form .content-center .object-w-legend img {
        width: 50px;
        max-width: 100%;
        border-radius: 50% 0 0 50%;
        aspect-ratio: 1 / 1;
    }
    #event-form .content-center .object-w-legend span.legend {
        padding: 0;
        display: block;
        font-size: 14px;
        line-height: 14px;
    }
    #event-form .head-gamme-form {
        position: fixed;
        top: 5px;
        max-width: 100%;
        z-index: 3;
        height: 54px;
        background: transparent;
        margin-bottom: 10px;
        width: 100%;
    }
    #event-form .head-gamme-form .button-flex-gamme{
        position: relative;
        background: transparent;
        padding: 15px 0 0;
        top: 0
    }
    #event-form .head-gamme-form .button-flex-gamme h2{
        margin: 0;
    }
    #event-form .content-wBg-radius .event-synthese, #event-form .content-wBg-radius .lieu{
        padding: 30px 20px;
    }
    #event-form .content-wBg-radius .your-guest{
        padding-left: 20px;
    }
    #name-eventForm, #guest-number, #location{
        font-size: 30px;
        position: relative;
        z-index: 1;
    }
    #event-form .col-md-5{
        padding-left: 0;
    }
    #event-form .nextForm-event {
        padding:0 20px;
        margin-top: 30px;
        width: 100%;
    }
    #event-form .form-row{
        flex-wrap: wrap;
        gap: 10px;
    }
    #event-form .form-group{
        flex: 100%;
        max-width: 100%;
    }
    #event-form .form-row.mob-50 .form-group{
        flex: calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    #event-form .btn-valide button#valide-form-event{
        width: 100%;
    }
    #event-form{
        padding-bottom: 40px;
    }
    #thankPage .container h2{
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 20px;
    }
    #thankPage .container{
        padding: 0 30px;
    }
    #thankPage .container p{
        font-size: 16px;
    }
    #thankPage .satisfaction {
        margin-top: 20%;
    }
    #addobjectifs{
        position: fixed;
        width: calc(50% - 15px);
        text-align: center;
        padding: 16px 0;
        right: initial;
        top: initial;
        left: 10px;
        height: auto;
    }
    #imageBlur{
        text-align: center;
    }
    #imageBlur .img-destination{
        max-width: 400px;
    }
    #number-guest,
    input#budget {
        height: 64px;
        font-size: 44px;
    }
    #number-guest::placeholder, #budget::placeholder {
        font-size: 44px;
    }
    #budget.placNone::placeholder {
        font-size: 0;
        width: 0;
    }
    #invite .flexGuest-btn {
        margin: 32px 0;
    }
    #invite .container-fluid {
        padding-left: 8px;
    }
    #invite .head-gamme-form .button-flex-gamme {
        left: inherit;
        right: 0;
        width: 100%;
    }
    #name-eventForm {
        font-size: 54px;
        line-height: 62px;
    }
    #event-form .content-wBg-radius .your-guest{
        height: auto;
    }
    #content-right-slider .topCourb {
        display: none;
    }
    #content-right-slider .bottomCourb {
        display: none;
    }
    #progress-item.d-none-mob {
        display: flex;
    }
    .tutoEtape-2.activetuto ul.liste-objectifs-cont-mobile {
        margin: 0 auto 30px;
    }
    .headerNavStep {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 132px;
        z-index: 2;
        border-radius: 0 0 26px 26px;
        background: #171717;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .stepMenu {
        margin: 54px 0 0;
    }
    .stepMenu .stepNav .namestep {
        display: none;
    }
    .stepNavC.active {
        padding: 3px;
    }
    .img-typologie{
        max-width: 100%;
    }
    .stepNavC {
        padding: 3px;
        align-items: center;
        font-size: 16px;
        border-radius: 50px;
    }
    .stepNavC .numb {
        margin: 0;
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 18px;
    }
    .stepNavC.active .numb {
        width: 36px;
        height: 36px;
        font-size: 18px;
        display: flex;
        margin-right: 0;
        justify-content: center;
        align-items: center;
    }
    .stepNavC.stePasse:after {
        content: url(../img/checkmenu.svg);
        margin-left: 4px;
        width: 13px;
    }
    #event-form .container-fluid .row {
        margin-top: 132px;
    }
    .tutoEtape-2 .liste-objectifs-cont-mobile{
        max-height: 320px;
        overflow: hidden;
        max-width: 375px;
    }
    .tutoEtape-3 .flecheC {
        width: auto;
        top: 56%;
        left: 79vw;
    }
    .tutoEtape-4 .flecheC{
        transform: none;
        right: -25%;
        top: 70%;
        width: auto;
    }
    .tutoEtape-2 .flecheC {
        width: 26%;
        left: 11%;
        top: 331px;
    }
    .tutoEtapeCont .liste-objectifs-cont-mobile{
        display: none;
    }
    .tutoEtapeCont .liste-objectifs-cont-mobile:first-child{
        display: flex;
    }
    #guest-number, #location, #totalBudget, #typologie{
        letter-spacing: 0;
    }
    #typologie .form-typologie .flexTypo-btn{
        margin-top: 0;
    }
    #destination .form-destination .flexDestination-btn{
        margin-top: 30px;
    }
    .gamme-button .button-flex .object-btn a#return-2{
        background: #171717;
        position: relative;
        border: none;
        padding: 11px 30px;
        border-radius: 20px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }
    .reset-button{
        display: none !important;
    }
}
@media (min-width: 820px) and (max-width: 992px) {
    #euroSymbol {
        right: 18px;
        font-size: 44px;
    }
    #invite .button-flex-gamme h2 {
        margin-bottom: 0;
        margin-top: 0;
        width: 100%;
        display: flex !important;
    }
    #invite .container-fluid .row {
        height: calc(100vh - 126px);
    }
}
@media screen and (max-width: 820px) {
    #invite [class*="col-md-"] {
        width: 100%;
    }
    #euroSymbol {
        right: 110px;
        font-size: 44px;
    }
    h4.title-blackFormObject {
        font-size: 30px;
        line-height: 30px;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    #progress-item {
        top: 72px;
    }
    #typologie .container-fluid #image {
        max-width: 512px;
        margin: auto;
    }
    #carousel button.slick-prev.slick-arrow {
        position: absolute;
        left: -60px;
        top: -11px;
        height: 100%;
        width: 68px;
        background: transparent;
        border: none;
    }
    #carousel button.slick-next.slick-arrow {
        position: absolute;
        right: -60px;
        top: 0;
        height: 100%;
        width: 68px;
        background: transparent;
        border: none;
    }
    .flip-container .back p.objectifs-title {
        font-size: 12px;
        line-height: 16px;
    }
    #objectifs .flip-container {
        height: 382px;
    }
}
@media (max-width: 767px) {
    #progress-item {
        top: 68px;
    }
    .headerNavStep {
        display: flex;
        flex-direction: column-reverse;
        height: 146px;
        justify-content: inherit;
    }
    .stepMenu {
        margin: 0;
    }
    .headerNavStep .barreProgress {
        width: 90%;
        margin: 24px auto 0;
        height: 4px;
        background: #333333;
    }
    .progress-flex-inner {
        width: 246px;
    }
    .tutoEtape-1 .flecheC {
        width: 100%;
        position: absolute;
        top: 15px;
        left: 0;
        text-align: center;
        transform: none;
        display: flex;
        justify-content: center;
    }
    #invite .container-fluid .row {
        height: auto;
        margin-top: 62px;
    }
    #cohesion-w-sideBar .progress-flex-inner span.progress-checked {
        width: 41px;
    }
    .progress-flex-inner span.steps-2 {
        width: 82px;
    }
    .progress-flex-inner span.steps-3 {
        width: 123px;
    }
    .progress-flex-inner span.steps-4 {
        width: 164px;
    }
    .progress-flex-inner span.steps-5 {
        width: 205px;
    }
    .progress-flex-inner span.steps-6 {
        width: 246px;
    }
    .calendar-options{
        gap: 10px;
    }
    .calendar-options .option{
        width: auto;
    }
    .tab-content#flexible .months{
        width: auto;
    }
    .flatpickr-rContainer{
        max-width: 320px;
    }
    .form-typologie .options {
        margin: 10px 0 10%;
        gap: 6px;
    }
    #typologie .content-form {
        margin-top: 20px;
    }
    .form-typologie {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .form-typologie .options button, .form-typologie .options button {
        font-size: 11px;
        line-height: 15px;
        padding: 4px 12px;
        border-radius: 14px;
    }
    #typo-event {
        font-size: 24px;
        padding: 5px 20px;
        height: 46px;
    }
    #name-event::placeholder,
    #destin-event::placeholder,
    #typo-event::placeholder{
        font-size: 24px;
        line-height: 28px;
    }
    #event-form .content-wBg-radius .your-guest {
        max-height: 100%;
    }
    .listContentG .group-block {
        max-width: 100%;
        flex: 100%;
    }
    #event-form .content-wBg-radius .guest-counter {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    #event-form .content-wBg-radius .number-participants {
        align-items: flex-start;
    }
    h4.title-blackForm {
        margin-bottom: 0;
    }
    #guest-number, #location, #totalBudget {
        font-size: 30px;
    }
    .listContentG .group-block .group-items {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .listContentG .group-block .group-items .tag-item {
        flex: 48%;
        max-width: 100%;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond video {
        width: 100%;
        height: 100%;
        object-fit: initial;
    }
    .item-objectif-mobile .btn-select.current span.btnChecked {
        color: #FFFFFF;
    }
    .item-objectif-mobile .btn-select.current.show-hover span.btnChecked {
        display: none;
    }
    .item-objectif-mobile .btn-select.current.show-hover span.retour {
        display: flex;
        opacity: 1;
        transform: scale(1);
        position: static;
        width: auto;
        max-width: 200px;
        transition: opacity 1.2s;
    }
    #gammes-objectifs .content-gammes-center .content-center.liste-7 .object-card:nth-child(4) img {
        aspect-ratio: inherit;
    }
    .form-invite .input-counter input#budget-participants {
        max-width: 162px;
        font-size: 16px;
    }
    .form-invite .input-counter p {
        font-weight: 400;
        font-size: 14px;
    }
    #typologie .container-fluid {
        display: flex;
        max-width: 1440px;
        height: calc(100vh - 98px);
        flex-direction: column;
        justify-content: center;
    }
    #typologie .container-fluid #image {
        max-width: 246px;
        margin: auto;
        padding-top: 20px;
    }
    #imageBlur {
        max-width: 246px;
        margin:60px auto 0;
    }
    #imageBlur .img-destination {
        max-width: 100%;
    }
    #destination .container-fluid {
        min-height: auto;
        /*height: calc(100vh - 112px);*/
        margin: 15px 0 0;
    }
    #destination .container-fluid .content-form {
        gap: 17px;
        margin-top: 32px;
    }
    #destination .container-fluid .content-form button#flexible-btn {
        padding: 9px 16px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }
    h2.titleD-mob {
        font-weight: 500;
        font-size: 26px;
        line-height: 26px;
        color: #ECECEC;
        text-align: center;
        margin-top: 24px;
    }
    .tutoEtape-2.activetuto ul.liste-objectifs-cont-mobile {
        margin-bottom: 5%;
    }
    /*.tutoEtape-2 .flecheC {
        width: 26%;
        left: 24%;
    }*/
    #event-form .container-fluid .row {
        margin-top: 148px;
    }
    #next-details .content-details {
        margin-top: 72px;
    }
}
@media screen and (max-width: 516px) {
    #btn-validate-dates, .btn-flexible-footer button#validate-flexible,.btn-flexible-footer{
        width: calc(100% - 30px);
        position: fixed;
        bottom: 5%;
        left: 15px;
    }
    .slick-initialized .slick-slide {
        transition: transform 0.4s ease;
        opacity: 0.9;
        transform: scale(0.92);
        z-index: 0;
        border-radius: 0;
        filter: blur(2px);
    }
    .slick-initialized .slick-slide h2 {
        font-size: 29px;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    .slick-initialized .slick-slide.slick-center {
        transform: scale(1);
        transition: transform 0.4s ease;
        z-index: 9;
        opacity: 1;
        position: relative;
        align-items: center;
        border-radius: 20px;
        filter: initial;
    }
    .slick-initialized .slick-slide.slick-center h2 {
        font-size: 24px;
        margin-bottom: 0;
        text-align: left;
    }
    .slick-initialized .slick-slide.slick-center img {
        width: initial;
    }
    .slick-center {
        opacity: 1;
    }
    button.select {
        padding: 10px 16px;
        width: 166px;
        border-radius: 20px;
    }
    .object-card {
        flex: 0 0 100%;
    }
    .card.slick-slide{
        max-width: inherit;
        background-color: #262626;
        margin: 0 -15px;
    }
    button.select, button.btn-select{
        background-color: #262626;
        color: #C3C3C3;
        border: 1px solid #C3C3C3;
    }
    #tarteaucitronAlertSmall{
        display: none !important;
    }
    .card .front button.flip-trigger{
        color: #C3C3C3;
    }
    #objectifs .objectifs-inner > .container{
        padding: 0;
        overflow-x: hidden;
    }
    #objectifs .footer-button{
        padding: 0 15px;
    }
    .card .front button.flip-trigger{
        margin-top: 5px;
    }
    .flip-container .front{
        padding: 20px;
    }
    #euroSymbol {
        right: 46px;
    }
    #carousel button.slick-arrow {
        display: flex !important;
        position: absolute;
        opacity: 0;
        z-index: 3;
        top: 25%;
        width: 12%;
        height: 50%;
    }
    #carousel button.slick-arrow.slick-prev {
        left: 0;
    }
    #carousel button.slick-arrow.slick-next {
        right: 0;
    }
    #next-details .content-details {
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 198px);
    }
}
@media screen and (max-width: 440px) {
    .animated-section{
        padding-bottom: 40px;
    }
    .tutoTitre {
        max-width: 236px;
        margin: auto;
        font-size: 32px;
        line-height: 1.2;
    }
    .tutodesc {
        font-size: 14px;
        text-align: center;
        margin: 0 auto 15px;
        max-width: 292px;
    }
    .tutodesc br {
        display: none;
    }
    #typologie .container-fluid {
        height: calc(100vh - 44px);
    }
    /*.tutoEtape-4 .flecheC {
        transform: none;
        width: fit-content;
        height: 132px;
        right: 24px;
        bottom: 174px;
    }
    .tutoEtape-4 .flecheC img {
        max-height: 100%;
    }*/
}
@media (min-width: 992px) {
    .animated-section {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .fade-up {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
    }

    .fade-up.animate {
        opacity: 1;
        transform: translateY(0);
    }

    .fade-down {
        opacity: 0;
        transform: translateY(-50px);
        transition: all 0.8s ease-out;
    }

    .fade-down.animate {
        opacity: 1;
        transform: translateY(0);
    }

    .slide-left {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 1s ease-out;
    }
    #invite .image.slide-left {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slide-left.animate {
        opacity: 1;
        transform: translateX(0);
    }

    .slide-right {
        opacity: 0;
        transform: translateX(100px);
        transition: all 1s ease-out;
    }

    .slide-right.animate {
        opacity: 1;
        transform: translateX(0);
    }

    .scale-in {
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.6s ease-out;
    }

    .scale-in.animate {
        opacity: 1;
        transform: scale(1);
    }

    .rotate-in {
        opacity: 0;
        transform: rotate(-90deg) scale(0.5);
        transition: all 1.2s ease-out;
    }

    .rotate-in.animate {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }


    .floating {
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    .stagger-delay-1 {
        transition-delay: 0.1s;
    }

    .stagger-delay-2 {
        transition-delay: 0.2s;
    }

    .stagger-delay-3 {
        transition-delay: 0.3s;
    }

    .stagger-delay-4 {
        transition-delay: 0.4s;
    }

    /* Styles pour l'effet smooth de la vidéo */
    .img-fond {
        position: relative;
        overflow: hidden;
    }

    .video-bg {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;

        transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;

        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    @keyframes slideUpFadeIn {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Classe alternative pour déclencher l'animation via CSS */
    .video-bg.slide-up-enter {
        animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }



    /* Préférences utilisateur pour les animations réduites */
    @media (prefers-reduced-motion: reduce) {
        .video-bg {
            transition: opacity 0.3s ease;
        }

        .video-bg.slide-up-enter {
            animation: none;
        }
    }

    /* Fallback pour les navigateurs plus anciens */
    .no-js .video-bg {
        transition: none;
        transform: none;
        opacity: 1;
    }
}
@media (-webkit-device-pixel-ratio: 1.50){
    #objectifs {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 993px) and (max-width: 1600px) {
    section.section{
        height: auto;
        min-height: 130vh;
    }
    #cohesion-w-sideBar{
        min-height: inherit;
    }
    body {
        min-height: 100vh;
        position: relative;
    }
    #gammes-objectifs{
        height: auto;
        min-height: 130vh;
    }
    #objectifs{
        zoom: 70%;
        margin: auto;
        padding-top: 20px;
    }
    #next-details,#destination,#invite{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #destination .head-gamme-form{
        margin: 0;
    }
    #invite{
        padding-top: 60px;
    }
    #step-7-container #event-form{
        min-height: 150vh;
    }
    #event-form .container-fluid .row{
        height: auto;
    }
    #event-form .col-md-7{
        height: auto;
    }
    #content-right-slider{
        zoom: 70%;
    }
    .menu-sideBar{
        zoom: 74%;
    }
    .slider-for,#btn-gammes,.objectiListVideo li {
        zoom: 83%;
    }
    li.accordion-toggle:before, li.accordion-toggle.open .bulleFoot, li.accordion-toggle.open h3 .bulle {
        right: 34px;
    }
    #step-3-container {
        padding-top: 140px;
        zoom: 70%;
        margin: auto;
    }
    #step-4-container,#step-8-container,#step-5-container,#step-6-container{
        zoom: 70%;
    }
    #step-7-container{
        zoom: 68%;
    }
    #step-8-container,#step-5-container{
        padding-top: 120px;
    }
    #gammes-objectifs,#next-details,#typologie,#destination,#invite,#event-form{
        margin: auto;
    }
    .guest-counter #typologie{
        margin: inherit;
    }
    .stepMenu{
        zoom: 80%;
    }
    .img-typologie {
        max-width: 90%;
        height: auto;
        object-fit: cover;
    }
    .img-destination{
        max-width: 80%;
    }
    #invite .container-fluid .row{
        height: auto;
    }
    #invite h2.titleD {
        margin-bottom: 15px;
    }
    #number-guest,input#budget{
        height: 60px;
    }
    #event-form{
        width: 145vw;
    }
    #event-form h2.titleD{
        line-height: 1;
    }
    #event-form .content-wBg-radius .your-guest{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    textarea#message {
        height: 70px;
    }
    textarea#message::placeholder {
        font-size: 12px;
        line-height: 1.2;
    }
    .reset-button{
        position: fixed;
        bottom: 0;
        right: 0;
    }
    #cohesion-w-sideBar .reset-button{
        zoom: 70%;
    }
    #step-3-container{
        overflow-y: auto;
    }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    section.section{
        height: auto;
        min-height: 130vh;
    }
    #gammes-objectifs{
        height: auto;
        min-height: 130vh;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9 {
        max-width: calc(100vw - 256px);
    }
    .objectiListVideo{
        max-width: 680px;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond video{
        max-width: 550px;
    }
}
@media (min-width: 1281px) and (max-width: 1400px) {
    section.section{
        height: auto;
        min-height: 130vh;
    }
    #gammes-objectifs{
        height: auto;
        min-height: 130vh;
    }
    .objectiListVideo{
        max-width: 710px;
    }
    #cohesion-w-sideBar .cohesion-inner .row .col-md-9 .img-fond video{
        max-width: 666px;
        height: auto;
    }
}
@media (max-width: 1920px) and (-webkit-device-pixel-ratio: 1.50){
    .tutoEtapeCont{
        justify-content: flex-end;
        padding-bottom: 50px;
    }
    .tutoEtape {
        min-height: 282px;
    }
    .tutoEtape-4 .flecheC {
        transform: translate(86%, -3%);
        width: 35%;
    }
}

/*@media (min-width: 1281px) and (max-width: 1439px) {
    #objectifs{
        zoom: 80%;
        margin: auto;
        padding-top: 20px;
    }
    #content-right-slider{
        zoom: 80%;
    }
    .menu-sideBar{
        zoom: 86%;
    }
    .slider-for,#btn-gammes,.reset-button,.objectiListVideo li {
        zoom: 93%;
    }
    li.accordion-toggle:before, li.accordion-toggle.open .bulleFoot, li.accordion-toggle.open h3 .bulle {
        right: 31px;
    }
    #step-3-container {
        padding-top: 140px;
        zoom: 80%;
        margin: auto;
    }
    #step-4-container,#step-8-container,#step-5-container,#step-6-container{
        zoom: 80%;
    }
    #step-7-container{
        zoom: 78%;
    }
    #step-8-container,#step-5-container,#step-6-container{
        padding-top: 120px;
    }
    #gammes-objectifs,#next-details,#typologie,#destination,#invite,#event-form{
        margin: auto;
    }
    .stepMenu{
        zoom: 85%;
    }
    .img-typologie {
        max-width: 80%;
        height: auto;
        object-fit: cover;
    }
    .img-destination{
        max-width: 90%;
    }
    #invite .container-fluid .row{
        height: auto;
    }
    #invite h2.titleD {
        margin-bottom: 15px;
    }
    #number-guest,input#budget{
        height: 60px;
    }
    #event-form{
        width: 145vw;
    }
    #event-form h2.titleD{
        line-height: 1;
    }
    #event-form .content-wBg-radius .your-guest{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    textarea#message {
        height: 70px;
    }
    textarea#message::placeholder {
        font-size: 12px;
        line-height: 1.2;
    }
    #event-form .container-fluid .row{
        height: auto;
    }
}*/