@font-face {
    font-family: "CourierPrime";
    src: url("fonts/CourierPrime-Regular.03ef685b34f3.ttf");
}

@font-face {
    font-family: "CourierPrime";
    font-style: italic;
    src: url("fonts/CourierPrime-Italic.ace04e0c2548.ttf");
}

html {
    overflow-y: scroll;
}

.modal {
    padding: 1em;
}

.modal-card, .modal-content {
	max-width: 25em;
}

.modal-background {
	/* background-color: rgba(0,0,0,.33); */
    background: #66666688;
    position: fixed;
}

.section {
    padding: 1.5rem;
}

.side-buttons .button {
    justify-content: left;
    z-index: 10;
}

.button:focus {
    outline: solid 2pt black;
}

@media screen and (min-width: 600px) {
    .mobile-only {
        display: none !important;
    }
    .hbox {
        display: flex;
        margin-top: 0.5em;
    }
    .side-buttons {
        flex-shrink: 0;
        padding-right: 0;
        width: 15em;
        position: fixed;
    }
    .main-section {
        margin-left: 16em;
    }
}

@media screen and (max-width: 599px) {
    .desktop-only {
        display: none !important;
    }
    .side-buttons {
        padding-bottom: 0;
    }
    .main-section {
        padding-top: 0;
    }
}

#page-title-mobile {
    background: #eff4f7;
    padding: 0.5em;
    padding-top: 0.75em;
    font-size: 1.1em;
}

#page-title-mobile h1 {
    font-weight: bold;
}

.navbar-right {
    position:absolute;
    right: 0;
}

.user-id, .user-is-coach, .user-is-expired {
	font-weight: bold !important;
}

.flow-card {
    display: inline-block;
    width: 22em;
    margin-right: 1em;
    margin-bottom: 1em;
    overflow-x:hidden;
    animation-duration: 0.5s;
    animation-name: top-bottom-leaf;
}

@keyframes top-bottom-leaf {
    from {
        transform: translateY(-1em);
        opacity: 0;
    }
  
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8pt;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CCC;
    border-left: solid 3pt white;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #AAA; 
}

.hidden {
    display: none;
}

#localhost-label {
    position: fixed;
    bottom: 1em;
    left: 1em;
    font-weight: bold;
    color: red;
}

/* Language toggle */
.lang-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lang-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
    line-height: 1;
    user-select: none;
}
.lang-label.lang-active {
    color: rgba(255,255,255,0.9);
}
.lang-toggle-btn {
    position: relative;
    width: 54px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.lang-knob {
    position: absolute;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: left 0.2s ease;
    line-height: 1;
}
.lang-toggle-btn.lang-en .lang-knob {
    left: 28px;
}

/* COULEURS — AQI Design System */

/*      Barre du haut */

.navbar.is-light {
    background-color: #0F2A38;
}

.navbar.is-light .title {
    color: white;
}

.navbar.is-light .navbar-brand > a.navbar-item:hover {
    background-color: transparent;
}

.navbar.is-light .navbar-menu {
    background-color: #0F2A38;
}

.navbar.is-light .navbar-menu .navbar-item,
.navbar.is-light .navbar-menu .navbar-link {
    color: rgba(255,255,255,0.85);
}

/*      Onglets */

.tabs.is-toggle li.is-active a {
    background-color: #0F2A38;
    border-color: #0F2A38;
}

.tabs.is-toggle li.is-active a:hover {
    background-color: #0c2130;
    border-color: #0c2130;
}

/*      Boutons principaux */

.button.is-primary {
    background-color: #0F2A38;
}

.button.is-primary.is-hovered, .button.is-primary:hover {
    background-color: #0c2130;
}

.button.is-primary[disabled], fieldset[disabled] .button.is-primary {
    background-color: #4a7a8a;
}

/*      Onglets Cours / Fiches (navbar) — état inactif, distinct du fond navy */

.button.is-nav-tab {
    background-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15);
}

.button.is-nav-tab:hover,
.button.is-nav-tab.is-hovered {
    background-color: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

/*      Boutons warning */

.button.is-warning {
    background-color: #e4942d;
}

.button.is-warning:hover,
.button.is-warning.is-hovered {
    background-color: #dd8f29;
}

.button.is-warning,
.button.is-warning:hover,
.button.is-warning.is-hovered,
.button.is-warning:active,
.button.is-warning:focus {
    color: white;
}

/*      Barre de progression */

.progress::-moz-progress-bar {
    background-color: #0F2A38;
}

.progress::-webkit-progress-value {
    background-color: #0F2A38;
}

/*      Boutons principaux en mode light */

.button.is-primary.is-light {
    background-color: #eff4f7;
    color: #0F2A38;
}

.button.is-primary.is-light.is-hovered,
.button.is-primary.is-light:hover {
    background-color: #e6f0f7;
    color: #0F2A38;
}

/*      Liens */

a {
    color: #0F2A38;
}