:root {
    --primary-color: #a77ae2;
    --secondary-color: #eadaff;
    --white: #fafafa;
    --purple: #5a32c8;
    --violet: #6e4489;
    --xxs: 3px;
    --xs: calc(2 * var(--xxs)); /* 6px */
    --s: calc(4 * var(--xxs)); /* 12px */
    --m: calc(6 * var(--xxs)); /* 18px */
    --l: calc(8 * var(--xxs)); /* 24px */
    --xl: calc(12 * var(--xxs)); /* 36px */
    --xxl: calc(16 * var(--xxs)); /* 48px */
    --texture: url(../images/texture.png);
    --bg: url(../images/desktop/bg.png);
    --lotus: url(../images/desktop/lotus-bg.png);
    --sofia: url(../images/desktop/sofia.png);
    --pierre: url(../images/desktop/pierre.png);
    --bg-size: 100% auto;
    --bg-position: left bottom;
    --lotus-size: var(--bg-size);
    --lotus-position: var(--bg-position);
    --sofia-bg-size: var(--bg-size);
    --sofia-bg-position: var(--bg-position);
    --pierre-bg-size: var(--bg-size);
    --pierre-bg-position: var(--bg-position);
}

body {min-height: calc(100vh - 48px); background-color: var(--primary-color); background-image: var(--texture), var(--bg), var(--lotus), var(--sofia), var(--pierre); background-size: auto auto, var(--bg-size), var(--lotus-size), var(--sofia-bg-size), var(--pierre-bg-size); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, var(--bg-position), var(--lotus-position), var(--sofia-bg-position), var(--pierre-bg-position); background-blend-mode: screen, multiply, hard-light, luminosity, luminosity; font-family: 'Outfit', sans-serif; padding-bottom: var(--xxl);}

.triangle,
.triangle:before,
.triangle:after {width: var(--xs); height: var(--xs); border-top-right-radius: 30%; transform: rotate(-90deg) skewX(-30deg) scale(1, .866);}
.triangle {position: absolute; background-color: var(--primary-color);}
.triangle:before,
.triangle:after {content: ''; position: absolute; background-color: inherit;}
.triangle:before {transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);}
.triangle:after {transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);}

.dropdown {position: absolute; top: 40px; right: 40px; z-index: 9999;}

.arrow {position: absolute; right: 88px; top: 85px; width: 54px; z-index: 9999;}
.arrow__text {position: relative; top: 72px; left: -70px; width: 160px; font-family: 'Parisienne', cursive; font-size: 20px; color: var(--purple); font-weight: 600; text-align: right; text-shadow: 0 0 4px var(--secondary-color); transform: rotate(-97deg);}

.dropdown:hover ~ .arrow {display: none;}

.dropdown .dropdown__toggle {position: relative; background: transparent; width: 50px; height: 50px; color: var(--secondary-color); font-size: var(--m); font-weight: 900; text-align: center; line-height: 30px; padding: var(--xs); border: var(--xxs) solid var(--secondary-color); border-radius: var(--xxs);cursor: pointer; overflow: hidden; transition: all .5s ease;}
.dropdown .dropdown__toggle .triangle {top: calc(50% - 3px); right: -12px; background-color: var(--secondary-color); transform: rotate(0deg) skewX(-30deg) scale(1, .866); transition: right .5s ease;}
.dropdown .dropdown__toggle .triangle,
.dropdown .dropdown__toggle .triangle:before,
.dropdown .dropdown__toggle .triangle:after {width: 5px; height: 5px;}
.dropdown .dropdown__menu {display: none; background-color: var(--primary-color); border-radius: 0 0 var(--xxs) var(--xxs); visibility: hidden; opacity: 0; transition: all .5s ease;}
.dropdown .dropdown__menu .dropdown__item {width: 50px; height: 50px; background-color: var(--primary-color); color: var(--secondary-color); transition: all .5s ease;}
.dropdown .dropdown__menu .dropdown__item:hover {background-color: var(--purple);}
.dropdown .dropdown__menu .dropdown__item a {display: block; width: 100%; height: 100%; font-weight: 600; font-size: var(--m); font-weight: 900; text-align: center; line-height: 50px;}
.dropdown:hover .dropdown__toggle {text-align: left; border-radius: var(--xxs) var(--xxs) 0 0;}
.dropdown:hover .dropdown__toggle .triangle {right: var(--xs);}
.dropdown:hover .dropdown__menu {display: block; visibility: visible; opacity: 1;}

.header {position: relative; margin-top: var(--xxl);}
.header .header__title {font-size: 78px; color: var(--white); font-weight: 600;}
.header .header__date {font-size: 24px; color: var(--white); font-weight: 400; margin-top: var(--xs);}
.header .header__location {font-size: 18px; color: var(--white); font-weight: 400; margin-top: var(--xs);}
.header .header__map {font-size: 14px; color: var(--purple); font-weight: 400; margin-top: var(--xs);}

.colibri {position: absolute; mix-blend-mode: luminosity; opacity: .8; z-index: 1;}
.colibri__header {width: 100px;}
.colibri__header--sofia {top: -12px; left: calc(50% - 370px); transform: rotate(-8deg);}
.colibri__header--pierre {top: 84px; right: calc(50% - 360px); opacity: .7; transform: rotate(48deg);}

.main {margin-bottom: var(--xxl);}
.content {max-width: 524px; margin: 0 auto; padding: 40px 20px;}

.form__step {display: none;}
.form__step.active {display: block;}

.content__title {font-size: 21px; color: var(--violet); font-weight: 600; margin-top: var(--l); margin-bottom: var(--s);}
.content__paragraphe {font-size: 18px; color: var(--white); font-weight: 400; line-height: 1.2; margin-bottom: 12px;}
.content__paragraphe--color {color: var(--violet); font-weight: 600; margin-top: var(--l);}

.content__button {position: relative; display: flex; align-items: center; background-color: var(--purple); width: 250px; height: 40px; font-size: 15px; color: var(--secondary-color); font-weight: 900; text-align: left; margin-top: 24px; padding: 0 var(--s); border: none; border-radius: var(--xxs); cursor: pointer; overflow: hidden; transition: all .5s ease;}
.content__button .triangle {top: calc(50% - var(--xxs)); right: var(--s); background-color: var(--secondary-color);}
.content__button:disabled {opacity: .5; cursor: not-allowed;}
.content__button:hover {background-color: var(--secondary-color); color: var(--purple);}
.content__button:hover .triangle {background-color: var(--purple);}

.form__field {position: relative; margin-top: var(--l);}

.form__legend {display: block; font-size: 15px; color: var(--secondary-color); font-weight: 600; margin-bottom: var(--xs);}
.form__input {background-color: var(--secondary-color); width: 100%; height: 40px; font-size: 15px; color: var(--primary-color); font-weight: 600; padding: 0 var(--s); border: none; border-radius: var(--xxs);}

.form__input::placeholder {color: var(--primary-color); opacity: .5;}

.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover, 
.form__input:-webkit-autofill:focus {-webkit-text-fill-color: var(--primary-color); -webkit-box-shadow: 0 0 0px 40rem var(--secondary-color) inset;}

.form__input.form__input--text,
.form__input.form__input--email,
.form__input.form__input--select,
.form__input.form__input--textarea {width: 100%; height: 40px;}

.form__input.form__input--toggle {position: relative; color: var(--primary-color); width: 50px; height: 30px; vertical-align: text-bottom; margin-top: var(--xs); margin-right: var(--xs); border: 2px solid var(--primary-color); border-radius: var(--xxs); appearance: none; cursor: pointer; transition: all .2s ease;}
.form__input.form__input--toggle::before {content: ''; position: absolute; top: 50%; left: var(--xxs); background: var(--primary-color); width: 20px; height: 20px; border-radius: var(--xxs); transform: translate(0, -50%); transition: all .2s ease;}
.form__input.form__input--toggle ~ .toggle__label {font-size: 15px; color: var(--secondary-color); font-weight: 600; vertical-align: super; user-select: none;}
.form__input.form__input--toggle ~ .toggle__label--true {display: none;}
.form__input.form__input--toggle:checked {background: var(--primary-color); border-color: var(--secondary-color);}
.form__input.form__input--toggle:checked::before {left: calc(100% - 23px); background: var(--secondary-color);}
.form__input.form__input--toggle:checked ~ .toggle__label--false {display: none;}
.form__input.form__input--toggle:checked ~ .toggle__label--true {display: inline;}

.form__input.form__input--select {padding: var(--s);}
.form__input.form__input--select {appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.form__input.form__input--select ~ .triangle {bottom: 18px; right: 12px; transform: rotate(0deg) skewX(-30deg) scale(1, .866);}

.form__input.form__input--textarea {min-height: 200px; resize: vertical; padding: 9px var(--s);}

.form__counter { display: flex; align-items: center; gap: 3px; margin-top: var(--s);}
.counter__input {width: 40px; text-align: center; appearance: none;}
.counter__input::-webkit-outer-spin-button,
.counter__input::-webkit-inner-spin-button{-webkit-appearance: none; appearance: none;}
.counter__input::-moz-inner-spin-button,
.counter__input::-moz-outer-spin-button {-moz-appearance: none; appearance: none;}

.counter__button {position: relative; width: 40px; height: 40px; background: #dbbfff; color: var(--primary-color); font-size: 20px; font-weight: 600; border: none; border-radius: 3px; cursor: pointer; transition: all .3s ease;}
.counter__button::before,
.counter__button::after {content: ''; position: absolute; top: 50%; left: 50%; width: var(--s); height: var(--xxs); background-color: var(--primary-color); transform: translate(-50%, -50%); transition: all .3s ease;}
.counter__button::after {transform: translate(-50%, -50%) rotate(90deg);}
.counter__button.counter__button--decrease::after {display: none;}

.counter__button:hover {background: var(--purple); color: var(--secondary-color);}

.form__sup {color: var(--purple); padding-left: 2px;}
.form__warning {background: var(--purple); color: var(--secondary-color); font-size: 14px; font-weight: 400; padding: 6px 12px; margin-top: 12px; margin-bottom: -12px; border-radius: 3px;}

.form__buttons {display: flex; align-items: center; gap: var(--xs); margin-top: var(--l);}
.form__button {position: relative; background-color: var(--secondary-color); width: 250px; height: 40px; font-size: 15px; color: var(--primary-color); font-weight: 900; text-align: left; padding: 0 var(--s); border: none; border-radius: var(--xxs); cursor: pointer; overflow: hidden; transition: all .5s ease;}
.form__button .triangle {top: calc(50% - var(--xxs)); right: var(--s);}
.form__button:disabled {opacity: .5; cursor: not-allowed;}
.form__button:hover {background-color: var(--purple); color: var(--secondary-color);}
.form__button:hover .triangle {background-color: var(--secondary-color);}
.form__button--prev {width: 40px;}
.form__button--prev .triangle {top: calc(50% - 1px); left: calc(50% - 1px); transform: rotate(90deg) skewX(-30deg) scale(1, .866);}

@media (max-width: 1240px) {
    body {--lotus: url(../images/desktop/lotus.png); --sofia: url(../images/colibri/sofia/mirror.png); --pierre: url(../images/colibri/pierre/mirror.png); --lotus-size: 11.5vw auto; --lotus-position: calc(50% - 12vw) calc(100% + 6.5vw); --sofia-bg-size: 5vw auto; --sofia-bg-position: calc(50% - 3.5vw) calc(100% - 9.5vw); --pierre-bg-size: 5vw auto; --pierre-bg-position: calc(50% - 19.5vw) calc(100% - 11vw); padding-bottom: 10vw;}
}

@media (max-width: 980px) {
    .arrow {display: none;}
}

@media (max-width: 840px) {
    body {background-color: var(--primary-color); background-image: url(../images/texture.png); background-size: auto auto; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; background-blend-mode: screen; padding-bottom: 0;}
    .content {max-width: 100%; margin: 0 auto; padding: 48px 24px 24px;}
    .header {--left: url(../images/mobile/left.png); --right: url(../images/mobile/right.png); --lotus: url(../images/mobile/lotus.png);--bg-size: auto 200px; --left-position: var(--bg-position); --right-position: calc(100% + 24px) bottom; --lotus-size: 250px auto; --lotus-position: calc(50% - 15px) calc(100% + 48px); padding-bottom: 172px;}
    .header:after {content: ''; position: absolute; top: 224px; left: 24px; width: calc(100% - 48px); height: 200px; background-color: #9170bd; background-image: var(--texture), var(--left), var(--right), var(--lotus); background-size: auto auto, var(--bg-size), var(--bg-size), var(--lotus-size); background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, var(--left-position), var(--right-position), var(--lotus-position); background-blend-mode: screen, multiply, multiply, hard-light; border-radius: 5px;}
    .colibri__header {width: 150px; opacity: .8;}
    .colibri__header--sofia {top: 190px; left: calc(50% - 250px); transform: rotate(-8deg);}
    .colibri__header--pierre {top: 224px; right: calc(50% - 224px); opacity: .7; transform: rotate(42deg);}
}

@media (max-width: 767px) {    
    .header {--bg-size: auto 175px; --left-position: 0px 15px; --right-position: calc(100% + 56px) bottom; --lotus-size: 200px auto; --lotus-position: calc(50% - 20px) calc(100% + 40px); padding-bottom: 152px;}
    .colibri__header {width: 125px; opacity: .8;}
    .colibri__header--sofia {top: 190px; left: calc(50% - 200px); transform: rotate(-8deg);}
    .colibri__header--pierre {top: 224px; right: calc(50% - 180px); opacity: .7; transform: rotate(32deg);}
    .header:after {height: 175px;}
}

@media (max-width: 640px) {    
    .header {--right-position: calc(100% + 90px) bottom; --lotus-position: 50% calc(100% + 40px); margin-top: 12px; margin-bottom: 36px;}
    .header .header__title {font-size: 48px;}
    .header .header__date {font-size: 18px;}
    .header .header__location {font-size: 14px;}
    .content {padding: 24px 12px;}
    .main {margin-bottom: 0;}
    .content__title {font-size: 18px;}
    .content__paragraphe {font-size: 16px;}
    .content__button {width: 200px; height: 36px; font-size: 14px;}
    .colibri__header {width: 112px;}
    .colibri__header--sofia {top: 136px; left: calc(50% - 160px); transform: rotate(1deg);}
    .colibri__header--pierre {top: 186px; right: calc(50% - 180px);}
    .header:after {top: 160px; left: 0; width: 100%; border-radius: 0;}
}

@media (max-width: 440px) {
    .dropdown {top: 24px; right: 24px;}
    .header {--left-position: -6px 16px; --right-position: calc(100% + 48px) bottom; --lotus-size: 150px auto; --lotus-position: calc(50% - 40px) calc(100% + 32px); margin-top: 0; margin-bottom: 0;}
    .header .header__title {font-size: 36px; }
    .header .header__date {font-size: 16px;}
    .header .header__location {font-size: 12px;}
    .header .header__map {font-size: 12px;}
    .colibri__header {width: 85px; opacity: 1;}
    .colibri__header--sofia {top: 108px; left: calc(50% - 150px); transform: rotate(5deg); }
    .colibri__header--pierre {top: 150px; right: calc(50% - 90px); transform: rotate(28deg);}
    .header:after {top: 125px; height: 138px;}
    .main .content {padding-top: 0;}
}