/*--------------------------- header ---------------------------*/

/*-------------------- variables de hauteur --------------------*/
body {
    --header-height: 84px;
    background: var(--color-gris);
}
body.scrolled {
    --header-height: 64px;
}
@media only screen and (max-width: 768px) {
    body, body.scrolled {
        --header-height: 64px;
    }
}
body.home aside, body:has(.mini-header) aside:first-child  {
    display: none;
}

.header {
    height: var(--header-height);
    background: var(--color-light);
}
.header * {
    font-family: var(--font-1);
}
.header a {
    color:var(--color-dark);
}

/*--------------------- mobile / desktop ----------------------*/
.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media only screen and (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

/*--------------------- logo / ----------------------*/
.logo-site {
    width: 191px;
    height: 67px !important;
    position: absolute;
    transition: .3s;
}
.logo-site-aurlabs {
    width: 191px;
    height: auto;
    position: relative;
    transition: .3s;
}
.header-logo {
    flex: 1 1 auto;
    text-align: center;
}
.header-logo-aurlabs {
    flex: 1 1 auto;
    text-align: left;
    padding: 0 0 0 .5rem;
    display: flex;
    align-items: end;
    gap: 1rem;
}
.header-logo-aurlabs svg {
    width: 191px;
    position: relative;
    z-index: 1;
    transition: .3s;
}
@media only screen and (max-width: 768px) {
    .header-logo-aurlabs svg, .logo-site-aurlabs {
        width: 130px;
    }
    .header-logo-aurlabs {
        flex-direction: column;
        align-items: start;
    }
    .header-container > .container-fluid {
        padding-top: .5rem!important;
    }
    .header-logo-aurlabs {
        gap: 0.5rem;
    }
}
body.scrolled .header-logo-aurlabs svg, body.scrolled .logo-site {
    width: 130px;
}
body.scrolled .header-container > .container-fluid {
    padding-top: .5rem!important;
}

body:not(.scrolled):has(.hasMM) .bg-header {
    opacity: 1!important;
    transition: .3s!important;
}

/*------------------ menu principal ------------------*/

.menu-header-principal {
    display: flex;
    margin: 1.5rem 1rem 0rem 1rem;
}
body.scrolled .menu-header-principal {
    margin-top: 0rem;
    margin-bottom: 0rem;
}
#menu-menu_principal {
    margin-bottom: 0;
    padding-left: 5px;
}
#menu-menu_principal li {
    display: inline-block;
}
#menu-menu_principal > li {
    display: inline-block;
    min-width: 125px;
    text-align: center;
    padding-bottom: 1rem;
}
#menu-menu_principal > li > a {
    display: inline-block;
    margin: 0rem 1.2rem;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
    text-transform: uppercase;
}

#menu-menu_principal > li.current > a,
#menu-menu_principal > li:hover > a {
    font-style: italic;
    font-weight: 900;
}
.sub-menu-tpl {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    background: var(--color-light);
    color: var(--color-dark);
    margin-top: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: .8s;
}
#menu-menu_principal li .sub-menu-tpl li {
    display: block;
}
li:hover > .sub-menu-tpl {
    max-height: 900px;
    opacity: 1;
    z-index: 10;
}
.sub-menu-tpl li a {
    font-family: var(--font-1);
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    position: relative;
}

.sub-menu-tpl li > a {
    display: inline-block;
    margin: 20px 0 8px 0;
}
.sub-menu-tpl li .sub-menu li a, .sub-menu-tpl p {
    color: var(--color-dark);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 5px 0;
}

.sub-menu-tpl li .sub-menu li a::before,
.sub-menu-tpl li .sub-menu li a::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.sub-menu-tpl li .sub-menu li a::before {
    content: '';
}
.sub-menu-tpl li .sub-menu li a::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.sub-menu-tpl li .sub-menu li a:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}


.sub-menu-tpl .image-contenu, .sub-menu-img .image-contenu{
    min-width: 80%;
    min-height: 150px;
}
.menu-principal .multi-cols > * {
    padding: 20px 60px 40px 60px;
}




@media only screen and (max-width: 1200px) {
    .menu-principal .multi-cols > * {
        padding: 20px 30px 20px 30px;
    }
}

.ligne-menu-desktop {
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    transition: .3s;
}
@media only screen and (max-width: 768px) {
    .ligne-menu-desktop {
        max-height: 0;
        opacity: 0;
    }
}


/*------------------- menu mobile -------------------*/
.menu-header-mobile {
    position: fixed;
    width: 100%;
    z-index: 99;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-principale);
    height: calc(100vh);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: .3s;
}
.menu-header-mobile .menu-mobile{
    position: relative;
    padding: 1rem;
    overflow: auto;
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
}
.menu-header-mobile a {
    color: var(--color-light);
}
.menu-header-mobile ul {
    padding: 1rem;
}
.menu-header-mobile:has(input#mobile-menu:checked) {
    max-height: 1600px;
    opacity: 1;
}
@media only screen and (max-width: 768px) {
    body:has(input#mobile-menu:checked) {
        overflow: hidden;
    }
}

/*---------------- Boutons verticaux ----------------*/
.btns-verticaux {
    position: fixed;
    right: 0;
    bottom: 40px;
    cursor: pointer;
    display: flex;
    align-content: start;
    align-items: start;
    z-index: 100;
    transition: .3s;

    transform: translateX(300px);
    transform-origin: center center;
    transition: .3s;
}
.btns-verticaux.opened {
    transform: translateX(0px);
}

.btnv-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(270deg);
    transform-origin: left bottom;
    white-space: nowrap;
}
.content-cta-verticaux {
    display: block;
    width: 300px;
    height: 400px;
    background: var(--color-light);
    padding: var(--rem-1);
    box-shadow: 0px 2px 6px 0px #0003;
}
.btn-brochure {
    display: inline-block;
    background: var(--color-principale) !important;
    color: var(--color-accent) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    padding: 5px 30px !important;
    height: 46px;
    line-height: 36px;
}
.btn-rappel {
    display: inline-block;
    background: var(--color-accent) !important;
    color: var(--color-principale) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    padding: 5px 30px !important;
    height: 46px;
    line-height: 36px;
}

/*------------------ divers header ------------------*/
.header-container {
    position: relative;
    z-index: 1000;
}
.header-container .container {
    transition: .3s;
}
.header-burger-mobile {
    padding: 8px 12px;
    cursor: pointer;
}
.header-burger-mobile *, .w-icon {
    cursor: pointer;
}

.espace-etudiants {
    color: var(--color-tertiaire);
    leading-trim: both;
    text-edge: cap;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    line-height: 11px;
}
.bg-header {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    background: var(--color-light);
    background-position: center center;
}

.header-contact, .header-contact .btn-header {
    min-width: 150px;
    text-align: center;
}
.ligne-logo-boutons .btn-header {
    padding: 8px .5rem;
    border: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: var(--color-tertiaire);
    text-transform: none;
}
.ligne-logo-boutons .btn-header:hover {
    background: var(--color-light);
}

a.scrollToTop {
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
a.scrollToTop.visible {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
.btn-search {
    padding-top: 0;
    padding-bottom: 12px;
    padding-right: 0;
    max-width: 40px;
}
.w-icon {
    width: 50px;
}
.header .fa-solid {
    min-width: 20px;
}
#the-content {
    margin-top: var(--header-height);
}
#the-content:has(div[data-name="banner"]) {
    margin-top: 0;
}
#the-content:has(.mini-header) {
    margin-top: 0;
}
#offcanvasTop:has(.wp-block-search) {
    background: var(--color-1);
    height: 100vh;
}
#offcanvasTop:has(.wp-block-search) .offcanvas-header {
    position: absolute;
    right: 40px;
    top: 40px;
}
#offcanvasTop:has(.wp-block-search) .offcanvas-body {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#offcanvasTop:has(.wp-block-search) .offcanvas-body > section {
    width: 100%;
}
#offcanvasTop:has(.wp-block-search) .offcanvas-body h2 {
    display: none;
}
#offcanvasTop:has(.wp-block-search) .wp-block-search__inside-wrapper {
    border: 0;
    padding: 0;
}
#offcanvasTop:has(.wp-block-search) .wp-block-search__input {
    padding: 24px
}
#offcanvasTop:has(.wp-block-search) .wp-block-search__button.wp-element-button {
    color: var(--color-principale);
    background: var(--color-light);
    border: 0;
    margin: 0;
    text-transform: uppercase !important;
    font-style: normal;
    font-weight: 600;
    padding: 16px 20px !important;
    font-size: 30px !important;
}
#offcanvasTop:has(.wp-block-search) .btn-close {
    filter: invert(1);
    --bs-btn-close-opacity: 1;
}
.excerpt_part {
    font-size: 16px;
}
.lien-retour {
    position: absolute;
    display: flex;
    height: var(--header-height);
    align-items: center;
    margin-left: 30px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
}
.woocommerce-checkout .logo-site {
    width: 130px !important;
    position: relative;
}
@media only screen and (max-width: 992px) {
    .woocommerce-checkout .header-logo {
        position: absolute;
        right: 25px;
    }
}



/*------------------ header avec titre ------------------*/
.mini-header {
    margin-top: 0;
    height: 400px;
    max-height: 400px;
    position: relative;
    background-color: var(--color-1);
    background-position: center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.mini-header .display {
    position: relative;
    z-index: 11;
    background: transparent;
    color: var(--color-light);
    font-family: var(--font-1);
    font-size: 44px;
    font-style: italic;
    font-weight: 800;
    line-height: 54px;
    text-transform: uppercase;
    margin: 0;
    margin-top: 120px;
    padding: 0 10px;
}
.mini-header.default {
    background-image: url('/wp-content/uploads/2024/08/bg-marque-violet-fonce.webp');
}
.page-with-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    height: 100px;
}
.page-with-title .display  {
    text-align: center;
    font-family: var(--font-1);
    font-size: 34px;
    font-style: italic;
    font-weight: 800;
    line-height: 34px;
    text-transform: uppercase;
    padding: 0 10px;
}
.woocommerce-page .page-with-title {
    align-items: start;
}
body:has(div[data-name="banner"]) .page-with-title  {
    display: none;
}


@media only screen and (max-width: 768px) {
    .mini-header {
        max-height: 240px;
    }
    .mini-header .display {
        margin-top: 60px;
    }
    .page-with-title .display {
        font-size: 26px;
    }
}

/*--------------------------- footer ---------------------------*/


.footer .wp-block-kko-texte-libre,
.footer a, .footer p {
    color: var(--color-light);
    font-size: 14px;
    line-height: 20px;
}

.footer #menu-footer_copyright li {
    display: inline-block;
    font-weight: 700;
    padding-right: 1rem;
}
.footer #menu-footer_copyright li::after {
    margin-left: 1rem;
    content: "•";
    color: var(--color-light);
}
.footer #menu-footer_copyright li:last-child {
    font-weight: 400;
}
.footer #menu-footer_copyright li:last-child::after {
    content: "";
}
.footer .logo-footer-aurlom,
.footer .logo-footer-edu {
    text-align: left;
}
.footer .logo-footer-aurlom img {
    width: 190px;
    height: 45px;
}
.footer .logo-footer-edu img {
    width: 70px;
    height: 12px;
}
.footer .mc4wp-form-fields p {
    display: inline-block;
}
.footer .mc4wp-form-fields input {
    border: 0 !important;
    margin: 0 !important;
    padding:5px 20px !important;
    height: 46px;
    vertical-align: middle;
    font-size: 15px !important;
}
.footer .espacement.separator::before {
    content:" ";
    width: 100%;
    height: 1px;
    background: var(--color-light);
}
.footer .question, .footer .question h2[itemprop="name"] {
    color: var(--color-light) !important;
    border-color: var(--color-light);
    font-size: 14px!important;
    padding: 6px 0;
}
.footer .question::after {
    font-size: 20px;
    font-weight: 300;
}
.footer .col-12:has(.rs) {
    padding: 0;
}
.footer .rs li:first-child {
    margin-left: 0;
}
.footer .rs li:last-child {
    margin-right: 0;
}
.footer .faq {
    text-align: left!important;
}
.footer .question.opened {
    color: var(--color-light) !important;
}
footer {
    clear: both;
}
.palette-bts footer > section.bg--color-1 {
    background: var(--color-2);
}

.footer .multi-cols > div {
    padding: 0;
    padding-right: 3rem;
}
.footer .multi-cols > div:last-child {
    padding-right: 0;
}
.footer .px-1 {
    padding-right: calc(var(--rem-1-md) / 2) !important;
    padding-left: calc(var(--rem-1-md) / 2) !important;
}
@media only screen and (max-width: 1200px) {
    .footer .multi-cols > div {
        padding-left: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .footer .col-12:has(.rs) {
        text-align: left !important;
    }
}