@media (prefers-color-scheme: light) {
    header {
        background-color: whitesmoke;
    }
}

.logo-nav {
    display: block;
    border-radius: 5px;
    width: 100px;
}


.carbu-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2px 40px;
}

.carbu-label {
    display: flex;
    background-color: hsl(210 10.8% 71%);
    color: black;
    padding: 12px;
    width: 100px !important;
    border-radius: 6px;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.carbu-label input {
    display: none;
}

.carbu-gazole,
.gazole:has(input:checked) {
    color: black;
    background-color: #e8e515;
}

.carbu-sp95,
.sp95:has(input:checked) {
    color: white;
    background-color: #004a26;
}

.carbu-e85,
.e85:has(input:checked) {
    color: white;
    background-color: #29c0d6;
}

.carbu-gplc,
.gplc:has(input:checked) {
    color: white;
    background-color: #196c92;
}

.carbu-e10,
.e10:has(input:checked) {
    color: white;
    background-color: #56ba49;
}

.carbu-sp98,
.sp98:has(input:checked) {
    color: white;
    background-color: #004a26;
}

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

.list-villes {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: var(--pico-dropdown-background-color);
    border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-dropdown-box-shadow);
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.search-item {
    margin: 0;
    padding: 5px 0;
}

.search-item:hover {
    cursor: pointer;
    background-color: light-dark(var(--pico-color-azure-50), var(--pico-color-azure-950));
}

._body-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100vh;
}

.main-container {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-wrap: nowrap;
    height: 100%;
    max-width: 1246px;
    gap: 2rem;
}