:root {
  --charbom-color: #000000;
  --lavande-color: #c8a0ff;
  --azur-color: #c9f0fc;
  --pomme-color: #caf29e;
  --abricot-color: #f29a5a;
  --creme-color: #fdf8e6;
  --border-radius: 10px;
}

/* FONTS */

@font-face {
font-family: 'Neulis Alt';
src: url('./fonts/NeulisAlt-Bold.otf') format('opentype');
font-weight: 700;
font-style: bold;
}

@font-face {
font-family: 'Butter Sweet';
src: url('./fonts/ButterSweet-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
}

@font-face {
  font-family: 'Bittersweet';
  src: url('./fonts/Bittersweet-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
font-family: 'Montserrat Alternates';
src: url('./fonts/MontserratAlternates-Regular.ttf') format('TrueType');
font-weight: 400;
font-style: normal;
}

/* GENERAL */

html,
body {
position: relative;
height: 100%;
}

body {
font-size: 14px;
margin: 0;
padding: 0;
background-color: var(--creme-color);
font-family: 'Montserrat Alternates', sans-serif;
display: flex;
flex-direction: column;
background-image: url(/assets/images/background/background.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Neulis Alt', 'Montserrat Alternates', sans-serif;
}

p {
margin: 0;
margin-bottom: 10px;
}

.page-width {
padding: 0 20px;
max-width: 1000px;
margin: 0 auto;
}

/* LOADER */

.loader {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';  
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--accent-color);
position: absolute;
left: 0;
top: 0;
animation: animloader 2s linear infinite;
background-color: var(--lavande-color);
}
.loader::after {
animation-delay: 1s;
}

@keyframes animloader {
0% {
  transform: scale(0);
  opacity: 1;
}
100% {
  transform: scale(1);
  opacity: 0;
}
}

/* BUTTON */

button,
.button{
border-radius: var(--border-radius);
padding: 15px 30px;
border: none;
color: var(--charbon-color);
cursor: pointer;
font-family: 'Montserrat Alternates', sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
gap: 7px;
text-decoration: none;
width: 100%;
max-width: 400px;
}

.rgpd-submit {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
}

/* POMME BUTTON */

.pomme-button {
  background-color: var(--pomme-color);
  box-shadow: -3px 3px 0px var(--lavande-color);
}

button.pomme-button:hover,
.button.pomme-button:hover {
box-shadow: 0 0 0 var(--lavande-color);
}

/* LAVANDE BUTTON */

.lavande-button {
  background-color: var(--lavande-color);
  box-shadow: -3px 3px 0px var(--pomme-color);
}

button.lavande-button:hover,
.button.lavande-button:hover {
box-shadow: 0 0 0 var(--pomme-color);
}

/* SWIPER BUTTONS */

.swiper-buttons {
width: 100%;
max-width: calc(100% - 20px);
padding: 0;
display: flex;
justify-content: space-between;
}

.swiper-buttons .swiper-button-prev,
.swiper-buttons .swiper-button-next {
height: unset;
position: unset;
margin: 0;
max-width: 50px;
}

.swiper-buttons .swiper-button-prev:after,
.swiper-buttons .swiper-button-next:after {
font-size:12px;
}

.swiper-button-next.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* HEADER */

.header {
width: 100%;
padding: 20px 0;
display: flex;
justify-content: center;
}

/* CONTAINER */

.container {
position: relative;
margin-bottom: 60px;
}

.container.result {
display: flex;
align-items: center;
justify-content: center;
}

.swiper {
width: 100%;
height: 100%;
padding-bottom: 300px;
display: flex;
justify-content: center;
}

.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0 20px;
max-width: calc(100% - 40px);
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* SWIPER CONTROLS */

.swiper-controls {
position: fixed;
z-index: 10;
bottom: 0;
width: 100%;
height: 60px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
row-gap: 10px;
border-top: solid 0.5px;
padding-top: 5px;
background-color: var(--creme-color);
border-color: #00000050;
}
@media screen and (min-width: 750px) {
.swiper-controls {
  border-radius: 10px 10px 0 0;
  border-left: solid 0.5px;
  border-right: solid 0.5px;}
}

.swiper-controls.page-width {
padding-left: 0;
padding-right: 0;
}

.swiper-pagination {
position: unset;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--lavande-color);
}

/* ANSWERS */

.answer .answer__heading {
display: flex;
align-items: center;
text-align: center;
flex-flow: wrap;
column-gap: 7px;
margin-top: 15px;
margin-bottom: 25px;
}

.answer .answer__heading .answer__title {
font-family: 'Neulis Alt', 'Montserrat Alternates', sans-serif;
font-size: 23px;
line-height: 1;
margin-bottom: 5px;
text-align: left;
}

.answer .answer__heading .answer__subtitle {
font-size: 16px;
font-style: italic;
}

.answer .choices {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.answer .choices .item {
position: relative;
display: flex;
align-items: center;
}

.answer .choices .item label{
position: relative;
display: flex;
align-items: center;
min-height: 40px;
padding: 0 10px 0 30px;
border: solid 1px #000000;
border-radius: 20px;
cursor: pointer;
background-color: var(--creme-color);
}

.answer .choices .item label::before {
content: "";
display: block;
width: 30px;
height: 30px;
background-image: url('./images/patte_noir.svg');
background-size: 30px;
background-repeat: no-repeat;
background-position: left center;
position: absolute;
left: 0;
}

.answer .choices .item input {
display: none;
}

.answer .choices input:checked + label {
color: var(--lavande-color);
background-color: #000000;
}
.answer .choices input:checked + label::before {
background-image: url('./images/patte_lavande.svg');
}

/* BUBBLE */

.item .info {
position: absolute;
right: -30px;
width: 20px;
height: 20px;
}

.item .info::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url('./images/icons-info.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
}

.item .info .bubble {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

.item .info:hover .bubble,
.item .info .active.bubble {
visibility: visible;
opacity: 1;
}

/* INPUT */

input[type="text"],
input[type="email"] {
display: flex;
align-items: center;
min-height: 40px;
padding: 0 10px 0 30px;
border: solid 1px #000000;
border-radius: 20px;
margin-top: 5px;
margin-bottom: 20px;
width: calc(100% - 40px);
max-width: 400px;
font-size: 16px;
}

/* INDEX */

.index {
text-align: center;
margin-top: 70px;
}

.index .main-title {
position: relative;
display: flex;
align-items: center;
line-height: 1;
background-color: #c8a0ff80;
border-radius: 20px;
padding: 0px 30px;
}

.index .main-title h1 {
font-family: 'Bittersweet';
font-size: 22px;
line-height: 1.3;
letter-spacing: 2px;
text-transform: uppercase;
width: 100%;
}

.index h2 {
  font-size: 18px;
  margin: 30px 0;
}

.index .main-title .patte {
position: absolute;
left: -75px;
transform: rotate(25deg);
}

.index .main-title .trait {
position: absolute;
right: -30px;
top: -40px;
transform: rotate(90deg);
}

.index p {
margin-bottom: 25px;
font-size: 14px;
}

.index .button {
max-width: calc(100% - 60px);
}

/* RESULTS */

.results {
display: flex;
flex-direction: column;
row-gap: 30px;
}

.results:empty {
display: none;
}

.results .result {
display: flex;
column-gap: 30px;
align-items: center;
padding: 20px;
border-radius: 10px;
background-color: #FFFFFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 749px) {
.results .result {
    flex-direction: column;
}
}

.results .result .content {
display: flex;
flex-direction: column;
row-gap: 10px;
}

.results .result .content h2 {
margin-bottom: 10px;
}

.results .result .content p {
margin: 0;
line-height: 1.2;
}

/* PROGRESS BAR */

.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 5px;
}

.progress-bar .progress {
height: 100%;
width: 0%;
border-radius: var(--border-radius);
background-color: var(--accent-color);
transition: all .3s;;
}

/* LOADING */

.loading,
.loading[disabled] {
display: none;
}
.loading[enabled] {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
row-gap: 5px;
padding: 0 20px;
text-align: center;
margin-top: 60px;
}

/* INITIALISED */

.initialised[disabled] {
display: none;
}
.initialised[enabled] {
display: flex;
}

.initialised {
flex-direction: column;
row-gap: 30px;
padding: 20px;
}

.initialised .buttons {
display: flex;
justify-content: center;
}

/* SHARE */

.share {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}

.share .links {
display: flex;
column-gap: 25px;
}

.share .item {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 5px;
font-size: 14px;
text-decoration: none;
color: #000000;
}

.share .item .image {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
height: 60px;
width: 60px;
}

.share .item#facebook .image {
background-color: #E7F2FE;
}
.share .item#x .image {
background-color: #E6E6E6;
}
.share .item#whatsapp .image {
background-color: #EAFCF0;
}
.share .item#telegram .image {
background-color: #E9F6FC;
}

.share .item .image img {
height: 100%;
max-height: 30px;
}