@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: "FuturaPT";
    src:
        url("../fonts/FuturaPT-30ba63083d2728d68465c72a7a72a365.ttf") format("truetype");
}

:root {
    --bs-primary-light: 0, 0, 0;
    --bs-primary-rgb: 8, 31, 92;
    --bs-primary: rgba(var(--bs-primary-rgb), var(--bs-opacity, 1));
    --bs-secondary-rgb: 112, 150, 209;
    --bs-secondary: rgba(var(--bs-secondary-rgb), var(--bs-opacity, 1));
    --bs-body-font-family: "FuturaPT", serif;
    --bs-body-font-size: 1.3rem;
    --title-font-family: "Playfair Display", serif;
    --z-header: 5;
}

body {
    background-color: var(--bs-light);
    line-height: 140%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    main {
        flex-grow: 2;
    }
}


h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-family: var(--title-font-family);

    section & {
        letter-spacing: 0.15rem;
    }
}

.form-control::placeholder {
    opacity: 0.5;
}

.fs-7 {
    font-size: 0.8rem;
}

.fs-8 {
    font-size: 0.6rem;
}

.font-text {
    font-family: var(--bs-body-font-family);
}

.text-balance {
    text-wrap: balance;
}

img {
    width: 100%;
    object-fit: cover;
}

.nav-menu {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
}

.navbar {
    &.main-nav {
        box-shadow: 0 0 16px -8px var(--bs-dark);
    }

    & .newsletter {
        font-size: 0.8rem;
    }

    & .logo {
        width: 100%;
        max-width: 280px;
    }

    & .date {
        text-wrap: balance;
        width: 150px;
    }

    li a {
        text-decoration: none;
    }

    & .nav-link,
    .dropdown-item {
        font-size: 0.8rem;
        text-transform: uppercase;
        font-weight: 500;


        &.dropdown-item {
            color: var(--primary);
            font-weight: 400;
        }

        color: var(--primary);
    }

    & .nav-link {
        &:hover {
            background-color: var(--bs-secondary);

            &+.dropdown-toggle {
                background-color: rgba(var(--bs-secondary-rgb), 0.5);
            }
        }

        &:has(+.dropdown-toggle:hover) {
            background-color: rgba(var(--bs-secondary-rgb), 0.5);
        }

    }
}

.header {
    --header-height: 580px;
    height: var(--header-height);
    background-image: url("../images/header-9817f3d7d024bc8fc3df9ed2bf871017.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;

    /* Le conteneur principal doit avoir le bon z-index */
    & > .container-fluid {
        position: relative;
        z-index: 2;
        height: 100%;
    }

    & h1 {
        box-shadow: 4px 4px 8px -4px var(--bs-dark);
        position: relative;
        z-index: 2;
    }

    &.has-video {
        background-image: none;
    }

    & .video-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
        object-position: center center;
    }

    /* Assure que le bloc d'info reste visible sur mobile */
    @media (max-width: 575.98px) {
        & .container-fluid {
            padding: 1rem;
        }
        
        & h1 {
            font-size: 1.5rem;
        }
    }
}

.page {
    --header-height: 250px;

    h1 {
        letter-spacing: 0.25rem;
    }

    & aside {
        .aside-content {
            position: sticky;
            top: var(--sticky-offset, 150px);
            z-index: 3;    
            
            a {
                --bs-btn-font-weight: bold;
                text-transform: uppercase;
                padding-block: 0.75rem;
                padding-inline: 1rem;
                width: 100%;
            }
        } 
      
    }
}

.page-header {
    height: var(--header-height);
    object-fit: cover;

    img {
        width: 100%;
        height: 100%;
    }
}

.bg-secondary-light {
    background-color: rgba(var(--bs-secondary-rgb), 0.3);
}

.btn-outline-primary {
    --bs-btn-focus-shadow-rgb: var(--bs-primary);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    &:hover {
        --bs-btn-hover-color: var(--bs-primary);
        --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.5);
        --bs-btn-hover-border-color: var(--bs-primary);
    }

    &:active,
    &:focus {
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-focus-bg: var(--bs-primary);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-hover-border-color: #0d6efd;
        --bs-btn-focus-shadow-rgb: var(--bs-secondary);
    }
}

.btn-outline-secondary {
    --bs-btn-focus-shadow-rgb: var(--bs-secondary);
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    &:hover {
        --bs-btn-hover-color: var(--bs-secondary);
        --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.5);
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-color: var(--bs-primary);
    }

    &:active,
    &:focus,
    &:visited {
        --bs-btn-active-bg: var(--bs-secondary);
        --bs-btn-focus-bg: var(--bs-secondary);
        --bs-btn-hover-bg: var(--bs-secondary);
        --bs-btn-active-border-color: var(--bs-secondary);
        --bs-btn-hover-border-color: #0d6efd;
        --bs-btn-focus-shadow-rgb: var(--bs-secondary);
        --bs-btn-hover-color: var(--bs-primary);
        --bs-btn-active-color: var(--bs-primary);
        --bs-btn-color: var(--bs-primary);
    }
}

.nav-cards {

    article {
        background-color: var(--bs-primary);
        min-height: 100%;
        box-shadow: 0 12px 24px -8px var(--bs-dark);
        position: relative;
        transition: 0.5s;

        & svg {
            color: var(--bs-secondary);
        }

        &:hover {
            background-color: var(--bs-secondary);
            box-shadow: 0 4px 42px -16px var(--bs-dark);
            translate: 0 -0.5rem;

            & svg {
                transition: 0.3s;
                color: var(--bs-primary);
                scale: 1.5;
            }
        }
    }

    a {
        letter-spacing: 0.1rem;
        text-align: center;
        word-break: break-all;

        &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
        }
    }
}

.footer {
    text-transform: uppercase;

    & a {
        color: var(--bs-primary);
    }

    & .nav {
        border-inline-start: 1px solid var(--bs-primary);
    }

    .newsletter {
        border-color: var(--bs-primary);

        .title {
            letter-spacing: 0.15rem;

        }

        p {
            text-transform: none;
        }
    }
}

.number::before {
    counter-set: exhib var(--number, 1);
    content: counter(exhib, upper-roman);
}

.directory {
    a:hover {
        background-color: rgba(var(--bs-secondary-rgb), 0.5);
    }
}

.badge-request {
    margin-block-end: 2rem;

    #visitor_type {
        .form-check {
            margin-inline-end: 0rem;

            .form-check-input {
                float: none;
            }
        }

        display: flex;
        gap:1rem;
    }

    & form>fieldset {
        fieldset {
            padding-inline-start: 1rem;

        }

        .form-check.form-switch {
            margin-inline-start: 1rem;
            padding-block: 0.2rem;
        }

        >legend {
            color: rgba(var(--bs-secondary-rgb), 1);
            border-block-end: 1px solid rgba(var(--bs-secondary-rgb), 0.1);

            ~div {
                padding-inline-start: 1rem;
            }
        }
    }
}


/* Form exhibitor */
.h300 {
    height: 300px;
}

.form-secondary {
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-opacity, 0.2));
    ;
}

/* Payment box */
.confirmation-box {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--bs-btn-border-color);
}

.confirmation-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: x-large;
}

.confirmation-content {
    margin: 20px 115px;
}


/* Form Key products */
.key-products-input {
    display: inline-block;
    width: 70%;
}

.key-products-delete {
    display: inline-block;
    width: 20%;
}





.company_form form {
    &>button {
        &~fieldset {
            display: none;
        }
    }
}

.dynamic-header-countdown {
    width: 1.25rem;
    display: inline-block;
}

.dynamic-header-countdown#days {
    width: 1.6rem;
}

.medium-modal {
    .modal-content {
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(5px);
    }
}

.bg-bs-light {
    background-color: var(--bs-light);
}

.carousel-item {
    transition: none !important;
}

.container-responsive {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1600px) {
  .container-responsive {
    max-width: 1600px;
    width: 80%;
  }
}

.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 10; /* Assurez-vous que l'en-tête est au-dessus des autres éléments */
    background-color: #f8f9fa; /* Couleur de fond pour l'en-tête */
    border-bottom: 1px solid #dee2e6; /* Optionnel : pour garder le style de Bootstrap */
}