/* HERO COMPONENT */
#sell-my-car .hero {
    flex: 1 1 50%;
    color: var(--color-white);
    gap:0;
    padding-top:40px;
    position:relative;
}

#sell-my-car .hero__img {
    width:100%;
    height:100%;
}

#sell-my-car .hero__content {
    padding: 0px 40px 0px 40px;
    position: relative;
    z-index: 2;
}

/* BANNER */
#sell-my-car .banner {
    background-color: var(--color-dark);
    width: 100vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    margin-top: 105px;
}

/* CARD COMPONENT */
#sell-my-car .card {
    gap:13px;
    padding: 15px 30px 30px 30px;
    background: var(--color-white);
}

#sell-my-car .card svg{
    width:80px;
    height:80px;
}

/* OFFRE COMPONENT */
#sell-my-car .offre {
    border-radius: 4px;
    background: var(--color-white);
    height: 100%;
}

#sell-my-car .offre__img {
    flex-basis: 35%;
    width: 100%;
    object-fit: cover;
}

#sell-my-car .offre__inside{
    padding: 40px;
    flex-basis: 65%;
    justify-content:space-between;
    align-items: flex-start;
    height: auto;
}

/* HOWTO LIST */
#sell-my-car .howto{
    list-style: none;
    counter-reset: item;
    padding:0;
    margin:0;
}

#sell-my-car .howto li {
    counter-increment: item;
    margin-bottom: 10px;
}

#sell-my-car .howto li:before {
    font-size: 28px;
    height: 45px;
    width: 45px;
    content: "";
    color: var(--color-dark);
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 15px;
}

#sell-my-car .howto li:nth-child(1):before {
    background-image: url("data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2040'%3e%3cpath%20d='M34.973%207.509%2043.273%2020s-4.458%208.052-8.274%2012.458a20.004%2020.004%200%200%201-1.733%201.94c-.256.269-.441.446-.539.511l-.007.005C29.247%2038.077%2024.662%2040%2019.636%2040%208.791%2040%200%2031.046%200%2020S8.791%200%2019.636%200c5.027%200%209.613%201.924%2013.087%205.089l.004.002.01.011a19.979%2019.979%200%200%201%202.236%202.407Z'%20fill='%23fff'/%3e%3cpath%20d='M21.704%209.952V30h-2.072V12.864l-4.452%203.08v-2.072l5.656-3.92h.868Z'%20fill='%23282830'/%3e%3c/svg%3e");
}
#sell-my-car .howto li:nth-child(2):before {
    background-image: url("data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2040'%3e%3cpath%20d='M34.973%207.509%2043.273%2020s-4.458%208.052-8.274%2012.458a20.004%2020.004%200%200%201-1.733%201.94c-.256.269-.441.446-.539.511l-.007.005C29.247%2038.077%2024.662%2040%2019.636%2040%208.791%2040%200%2031.046%200%2020S8.791%200%2019.636%200c5.027%200%209.613%201.924%2013.087%205.089l.004.002.01.011a19.979%2019.979%200%200%201%202.236%202.407Z'%20fill='%23fff'/%3e%3cpath%20d='M13.404%2028.712%2019.9%2021.18c1.176-1.344%202.016-2.455%202.52-3.332.523-.877.784-1.773.784-2.688%200-1.027-.317-1.857-.952-2.492s-1.568-.952-2.8-.952c-1.848%200-3.49.84-4.928%202.52l-.924-1.624a7.476%207.476%200%200%201%202.604-2.016%207.698%207.698%200%200%201%203.388-.756c1.157%200%202.165.233%203.024.7.877.467%201.54%201.101%201.988%201.904.448.784.672%201.652.672%202.604%200%201.139-.336%202.259-1.008%203.36-.653%201.083-1.652%202.39-2.996%203.92l-5.012%205.796h9.604V30h-12.46v-1.288Z'%20fill='%23282830'/%3e%3c/svg%3e");
}
#sell-my-car .howto li:nth-child(3):before {
    background-image: url("data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2040'%3e%3cpath%20d='M34.973%207.509%2043.273%2020s-4.458%208.052-8.274%2012.458a20.004%2020.004%200%200%201-1.733%201.94c-.256.269-.441.446-.539.511l-.007.005C29.247%2038.077%2024.662%2040%2019.636%2040%208.791%2040%200%2031.046%200%2020S8.791%200%2019.636%200c5.027%200%209.613%201.924%2013.087%205.089l.004.002.01.011a19.979%2019.979%200%200%201%202.236%202.407Z'%20fill='%23fff'/%3e%3cpath%20d='M19.228%2030.308c-1.381%200-2.604-.261-3.668-.784-1.064-.541-1.904-1.223-2.52-2.044l1.064-1.68c1.363%201.755%203.07%202.632%205.124%202.632%201.4%200%202.52-.373%203.36-1.12.859-.765%201.288-1.755%201.288-2.968%200-1.344-.532-2.352-1.596-3.024-1.064-.672-2.483-1.008-4.256-1.008v-1.736c1.101-.019%202.025-.205%202.772-.56.765-.373%201.325-.85%201.68-1.428.373-.579.56-1.204.56-1.876%200-.896-.327-1.615-.98-2.156-.635-.56-1.512-.84-2.632-.84-1.717%200-3.341.765-4.872%202.296l-.952-1.68c1.736-1.661%203.715-2.492%205.936-2.492%201.083%200%202.035.205%202.856.616.84.392%201.493.943%201.96%201.652.467.71.7%201.521.7%202.436%200%201.101-.336%202.063-1.008%202.884-.653.821-1.605%201.419-2.856%201.792%201.55.355%202.725.99%203.528%201.904.803.896%201.204%201.997%201.204%203.304%200%201.101-.28%202.1-.84%202.996-.56.896-1.353%201.605-2.38%202.128-1.008.504-2.165.756-3.472.756Z'%20fill='%23282830'/%3e%3c/svg%3e");
}

/* ACCORDION */
#sell-my-car .accordion{
    flex-basis:60%;
}

#sell-my-car .accordion__element::after{
    content: content;
    margin-left: 10px;
}

#sell-my-car .accordion__element{
    align-items: center;
    border-bottom: 1px solid var(--color-grey);
    padding-bottom: 20px;
    font-size: 16px;
}

/* TREMPLIN COMPONENT */
#sell-my-car .tremplin{
    background-color: var(--color-dark);
    color: var(--color-white);
    display: flex;
    height: 100%;
}

#sell-my-car .tremplin__img{
    flex: 0 0 40%;
    height:50px;
    object-fit: cover;
}

#sell-my-car .tremplin__img img{
    object-fit: cover;
    display: block;
}

#sell-my-car .tremplin__content{
    flex: 1 0 60%;
    padding: 80px;
    height: 100%;
}

/* AVIS COMPONENT */
#sell-my-car .avis {
    gap:13px;
    padding: 20px;
    align-items: start;
    background: var(--color-white);
}

#sell-my-car .avis p{
    text-align: left;
}

#sell-my-car .avis .stars svg{
    width:16px;
    height:16px;
}

#sell-my-car .avis .stars svg path{
    fill: var(--color-dark);
}

#sell-my-car .avis .meta {
    width:100%;
    display:flex;
    justify-content: space-between;
    color: var(--color-medium-grey);
}

#sell-my-car .avis .meta p {
    font-size: 13px;
}

#sell-my-car .tremplin__img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and fill */
    display: block; /* Remove any inline spacing */
}

@media screen and (max-width: 1439px) {
    #sell-my-car .tremplin {
        --gap: 40px !important;
    }

    #sell-my-car .tremplin__content {
        padding: 0px;
        padding-inline: 1rem;
    }
}

@media screen and (max-width: 900px){
    #sell-my-car .header{
        flex-direction: column-reverse !important;
    }
    #sell-my-car .hero__img{
        display:none;
    }
    #sell-my-car .accordion__element{
        flex-direction: row !important;
    }
    #sell-my-car .accordion__img{
        display:none;
    }
    #sell-my-car .tremplin{
        flex-direction: column;
        padding-bottom: 80px;
    }
}