@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* Pour Chrome, Safari et Edge */
::-webkit-scrollbar {
    width: 6px; /* Largeur fine de la scrollbar */
    height: 8px; /* Hauteur fine pour les éléments défilants horizontalement */
}

::-webkit-scrollbar-track {
    background: transparent; /* Track invisible ou très discrète */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.7); /* Couleur de la barre de défilement, semi-transparente */
    border-radius: 10px; /* Coins arrondis pour la barre */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(85, 85, 85, 0.8); /* Couleur un peu plus foncée au survol */
}

.font-bevan-regular {
    font-family: "Bevan", serif;
    font-weight: 400;
    font-style: normal;
}

body {
    --bs-body-font-family: 'Inter', sans-serif;
}

.font-holtwood-one {
    font-family: 'Holtwood One SC', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.background-image {
    content: '';
    height: 300px;
    background-image: url('https://radio.vinci-autoroutes.com/medias/image/0ed5e6362837fea789a720a7bd320ec9.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*.row > div > div {*/
/*    height: 100%;*/
/*}*/

.levitate {
    animation: levitate 5s infinite;
}

@keyframes levitate {
    0% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-3px) translateX(3px);
    }
    50% {
        transform: translateY(0) translateX(-3px);
    }
    75% {
        transform: translateY(3px) translateX(3px);
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

/** RESPONSIVE **/


table > tbody > tr > td > span:first-child {
    font-weight: 700;
    display: none;
}


table > tbody > tr > td > span:first-child::after {
    content: ':';
}

/* md */
@media (max-width: 768px) {


    /*table > tbody > tr > td:first-child*/
    /*{*/
    /*    text-align: center;*/
    /*}*/
    table > tbody > tr > td:first-child > div {
        position: absolute;
        bottom: 25%;
        right: 20px;
        transform: translateY(50%);
        padding: 5px;

        --size: 30px;
        font-size: var(--size);
        line-height: var(--size);

        background: var(--bs-primary);
        color: white;
        min-height: calc(var(--size) * 1.2);
        aspect-ratio: 1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    table > tbody > tr > td > span:first-child {
        display: inline;
    }

    table > thead > tr {
        display: none;
    }

    table > tbody > tr {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: start !important;
    }

    table > tbody > tr > td {
        display: block;
        padding: 0 !important;
        margin: 0 !important;

        padding-inline: 20px !important;
    }

    /*table > tbody > tr > td {*/
    /*    padding-bottom: 0px !important;*/
    /*}*/
    table > tbody > tr > td:first-child {
        padding-top: 20px !important;
    }

    table > tbody > tr > td:last-child {
        padding-bottom: 20px !important;
    }
}

/*.small {*/
/*    !* force !important *!*/
/*    font-size: 0.8em !important;*/
/*}*/

.link-body-emphasis {
    transition: .2s;
}

#hero {
    position: relative;

    background: url('/assets/img/background-hero.jpg') no-repeat;
    background-size: cover;
    background-position: center 80%;

    color: white;
}

#hero > div {
    z-index: 1;
}

#hero::before {
    content: '';
    position: absolute;
    inset: 0;

    background: rgb(var(--bs-secondary-rgb), .9);
    /*filter: blur(10px);*/
}

/*.player-details-row > div {*/
/*    position: sticky;*/
/*    top: 80px;*/
/*}*/

/*.player-details-row {*/
/*    align-items: flex-start;*/
/*    position: relative;*/
/*}*/

@media (min-width: 1199px) {
    .navbar,
    .navbar > .container {
        max-height: 60px !important;
    }
}

@media (max-width: 1200px) {
    .navbar .navbar-brand > img {
        max-width: 80px;
    }
}


body:has(#pwa-install-banner:not(.hidden))::after {
    position: fixed;
    content: '';
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.3);
    z-index: 9999;
    animation: slideUp 0.5s ease-out;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1c1c1e;
}

.hidden {
    display: none;
}

.pwa-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pwa-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pwa-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.pwa-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.pwa-header p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.2;
    color: #555;
}

.pwa-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    color: #333;
}

.pwa-steps li {
    margin-bottom: 6px;
    line-height: 1;
}

.icon {
    font-size: 1.2em;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    position: absolute;
    top: 12px;
    right: 16px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.was-validated .form-control.is-invalid:valid, .form-control.valid.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    padding-right: calc(1.5em + 0.75rem) !important;;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

#accountTabsContent.tab-content > .active {
    display: flex !important;
}

.toast-primary {
    background: rgba(var(--bs-primary-rgb), .85) !important;
    color: var(--bs-white) !important;
}

.toast-primary .toast-header {
    background-color: rgba(var(--bs-primary-rgb), .75) !important;
    color: var(--bs-white) !important;
}

.toast-success {
    background: rgba(var(--bs-success-rgb), .85) !important;
    color: var(--bs-white) !important;
}

.toast-success .toast-header {
    background-color: rgba(var(--bs-success-rgb), .65) !important;
    color: var(--bs-white) !important;
}

.toast-error {
    background: rgba(var(--bs-danger-rgb), .85) !important;
    color: var(--bs-white) !important;
}

.toast-error .toast-header {
    background-color: rgba(var(--bs-danger-rgb), .65) !important;
    color: var(--bs-white) !important;
}

.toast-warning {
    background: rgba(var(--bs-warning-rgb), .85) !important;
    color: var(--bs-white) !important;
}

.toast-warning .toast-header {
    background-color: rgba(var(--bs-warning-rgb), .65) !important;
    color: var(--bs-white) !important;
}

.toast-info {
    background: rgba(var(--bs-info-rgb), .85) !important;
    color: var(--bs-white) !important;
}

.toast-info .toast-header {
    background-color: rgba(var(--bs-info-rgb), .65) !important;
    color: var(--bs-white) !important;
}

.bi {
    font-size: 1.15em;
}