@keyframes enter-part{
    from{transform: translateY(2rem); opacity: 0.2;} 
    to{ transform: translateY(0); opacity: 1;}
}

.part{padding: 4.625rem 8.75rem; display: none; position: relative; overflow: hidden; min-height: 578px; border-radius: 24px;}
.part.active{display: block;}
.part h2{margin-bottom: 1.5rem;}
.part p{margin: 0;}
.part-content{animation: enter-part 0.5s;}
input, button, select, option{font-family: "Poppins", sans-serif !important; border-radius: 6px;}
.btn-form{border-radius: 6px !important; cursor: pointer; color: black; padding: 1rem 1.5rem!important; border: 1px solid transparent; transition: 0.2s; font-size: 1rem; font-weight: 500 !important; border: 1px solid var(--wp--preset--color--white)!important; background-color: white;}
.btn-form:hover{background-color: transparent !important; border-color: var(--wp--preset--color--white)!important; color: white!important;}

.container-form-estimation input{width: 100%; padding: 10px; font-size: 1rem; color: #333; background-color: #fff; border: 1px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none;  margin-top: 3rem; margin-bottom: 4rem; outline: none; cursor: pointer; transition: border-color 0.3s ease;}
/* Input non remplie ou faux */
.invalid {border: 2px solid red;}

/* Bar de progression dans le form */
.progression {display: flex; justify-content: start; gap: 1rem; margin-bottom: 3rem;}
.progression  div{width: 58px; height: 6px; background-color: rgba(255, 255, 255, 0.278); border-radius: 10px;}
.progression  div.active{background-color: rgb(255, 255, 255);}

/* Button de prochaine étape */
.next-stap{display: flex; justify-content: end;}

/* Part 1 - Marque */
.brand-select {width: 100%; height: 60px; padding: 1rem; font-size: 1rem; color: #333; background-color: #fff; border: 1px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none;  margin-top: 2rem; margin-bottom: 3rem; outline: none; cursor: pointer; transition: border-color 0.3s ease;     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; border: 1px solid transparent; transition: 0.2s;}

/* Part 2 - Année */
.year-select{width: 100%; height: 60px; padding: 1rem; font-size: 1rem; color: #333; background-color: #fff; border: 1px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none;  margin-top: 2rem; margin-bottom: 3rem; outline: none; cursor: pointer; transition: border-color 0.3s ease;     background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; border: 1px solid transparent; transition: 0.2s;}

/* Part 3 - Etats */
.img-options label{display: flex; cursor: pointer; align-items: center; flex-direction: column; transition: 350ms ease; background-color: white; text-align: center; padding: 1rem 2rem;  box-sizing: border-box; min-height: 230px; border-radius: 6px; justify-content: center;}
.img-options label p {margin-bottom: 0; font-weight: 600; height: 3rem; display: flex; align-items: center;}
.img-options label:hover{transform: scale(1.025);}
.img-options section:hover label p{color: #75B843 !important;}

/* Part 4 - Maintenance */
.maintenance{display: flex; justify-content: start; gap: 2rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; white-space: nowrap;}
.maintenance>button{margin-top: 1rem;}
.btn-form input[type="radio"] {display: none;}

/* Part 5 - Code Postal */
.postal-code-container {display: flex; justify-content: start; gap: 0.7rem; margin-top: 1rem;}  
.postal-code-container input {width: 3rem; height: 4rem; font-size: 2rem; text-align: center; border: 1px solid #ccc;  outline: none; padding: 0;}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}

/* Partie 7 - Offre de reprise */
#part-7>div{text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#part-7 h2{font-size: 7.25rem; margin-top: 0.3rem; margin-bottom: 0.5rem;}
#part-7 p, #part-7 a{margin: 0; color: white;}
#part-7 .buttons{padding: 0 5rem;}
#part-7 .btn-form{margin-top: 3rem; margin-bottom: 1.25rem; border-radius: 6px; border: 1px solid var(--White, #FFF); background: var(--White, #FFF); box-shadow: 0px 14px 24px -10px rgba(0, 0, 0, 0.25);}
.limited-offer{font-size: 2rem; font-weight: bold; margin-bottom: 10px; background-color: #F3DA00; color: #000; width: fit-content; padding: 0.25rem; transform: rotate(-6deg);}
.final-step-button{margin-bottom: 2rem; margin-top: 2rem;}
#result{margin: 0rem !important;}

/* Confetti */
.confetti-container {width: 100%; pointer-events: none;  overflow: hidden;}
.confetti {position: absolute; width: 10px; height: 10px; background-color: #ff0; opacity: 0.8; transform: translateY(-100%); animation: confetti-fall linear forwards;}

.pyro{align-items: start !important; pointer-events: none !important; position: absolute; left: 0; width: 100%;} .pyro>.after, .pyro>.before{position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0; box-shadow: -120px -218.66667px #00f, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #9f0, -90px -200px #ff5733, 150px -50px #f0f, 100px 30px #33ff57, -130px -250px #8a2be2, -80px -300px #ff4500, -40px -310px #2e8b57; animation: 1s bang ease-out infinite, 1s gravity ease-in infinite, 5s position linear infinite, 5s animopacity ease infinite; } .pyro>.after{animation-delay: 1.25s, 1.25s, 1.25s; animation-duration: 1.25s, 1.25s, 6.25s;} @keyframes animopacity {0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes bang { from { box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; } } @keyframes gravity { to { transform: translateY(200px); opacity: 0; } } @keyframes position { 0%, 19.9% { margin-top: 10%; margin-left: 40%; } 20%, 39.9% { margin-top: 40%; margin-left: 30%; } 40%, 59.9% { margin-top: 20%; margin-left: 70%; } 60%, 79.9% { margin-top: 30%; margin-left: 20%; } 80%, 99.9% { margin-top: 30%; margin-left: 80%; } }


@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Responsive styles */

@media (max-width: 1400px) {
    .part { padding: 4.625rem 5.75rem; }
}

@media (max-width: 1200px) {
    .part { padding: 4.625rem 6.75rem; }

    .img-options div{padding: 1rem 1rem;}
    .img-options div p { margin-bottom: 0; font-weight: 600; height: 4rem;}
}

@media (max-width: 992px) {
    .part { padding: 4.625rem 3.75rem;}

    .maintenance { justify-content: start; gap: 0 1.2rem;}

    .img-options div p { margin-bottom: 0; font-weight: 600; height: 3rem;}
}

@media (max-width: 768px) {
    .part {padding: 3.125rem 2.75rem;}

    .status {gap: 0.5rem;}

    .status div {width: 48px; height: 8px;}


    .btn-form {width: 100%; text-align: center;}

    .img-options, .maintenance {align-items: center; gap: 1rem;}
    .img-options label{min-height: auto;}

    .postal-code-container input {width: 3rem; height: 4rem; font-size: 2rem; text-align: center; border: 1px solid #ccc;  outline: none;}

    #part-7 h2 {font-size: 5rem;}
    #part-7 .buttons{padding: 0 0; flex-direction: column;}
    #part-7 .buttons button:first-child{margin-top: 2rem;}
    #part-7 .buttons button:last-child{margin-top: 0rem;}

    .limited-offer {font-size: 1.5rem ;padding: 0.3rem;}
}

@media (max-width: 576px) {
    .part {padding: 2.125rem 1.75rem;}

    .brand-select,.year-select{margin-bottom: 2rem;}
    
    .postal-code-container input { width: 2.5rem; height: 4rem; font-size: 2rem; text-align: center; border: 1px solid #ccc;  outline: none;}

    #part-7 h2 {font-size: 3.5rem;}

    .limited-offer {font-size: 1.2rem; padding: 0.2rem;}
}