@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --header-height: 40px;
    --mainnav-height: 90px;
    --vl-height: 32px;
}

body{font-weight: 400; min-width: 360px; font-family: var(--web-font), "Inter", -apple-system, sans-serif; color: #212529;}

p, .font-text {font-family: "Inter";}

.navbar-brand {padding: 0;}
.navbar-brand img { height: 72px; }

#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 2px 4px rgba(0,0,0,.1); background-color: var(--web-color); }
#header nav#topbar {height: var(--header-height); color: var(--web-light);}
#header nav#mainnav { padding: 0; height: var(--mainnav-height); }
#header nav#vl { height: var(--vl-height); background-color: #000; }
/* Rendre ce padding-top dynamique pour qu'il depende des hauteurs des éléments du #header */
body {
    padding-top: calc(
        var(--header-height, 0px) +
        var(--mainnav-height, 0px) +
        var(--vl-height, 0px)
    );
}

a {text-decoration: none;}
a:hover {text-decoration: underline;}
.dark-links a {color: var(--web-light);}
.dark-links a.active {font-weight: 700; text-decoration: underline;}

img {pointer-events: none;}

.footer { font-size: .9rem; background-color: var(--web-dark); color: #fff; padding: 2.8rem 0;}
footer ul.items {margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; align-items: start;}
footer ul.items a:hover, a.link:hover {text-decoration: underline;}


.navbar-toggler {border: 0; box-shadow: none !important; color: var(--web-color);}
.navbar-toggler:hover {color: var(--web-color-dark);}

#side-menu.offcanvas {background-color: var(--web-color-dark);}
#side-menu.offcanvas .offcanvas-body {display: flex; align-items: center; justify-content: center; flex-direction: column;}

ul.menu-list {list-style: none; display: flex; align-items: center; flex-direction: column; margin: 0; padding: 0; gap: 1rem; position: relative; top: -25px;}
ul.menu-list a {transition: .25s ease-out; opacity: 0; transform: translateY(10px); 
    text-align: center; font-weight: 400; font-size: 1.8rem; padding: .25rem 1.65rem; text-decoration: none; display: block; color: #fff; position: relative}
ul.menu-list a.active {font-weight: 700;}

ul.menu-list a.active:after, ul.menu-list a:focus:after {content: ""; width: 100%; display: block; height: 4px; background-color: #fff;margin-top: .5rem;}

.fade-in { opacity: 1 !important; transform: translateY(0) !important; transition: opacity 0.4s ease, transform 0.4s ease !important; }

.btn {border-radius: 0 !important;}
.section-header {padding: 4em 0;}