/* ============================== *
 *  TYPOGRAPHIE
 * ============================== */
.font-family-lato {
    font-family: Lato, sans-serif;
}

.font-family-raleway {
    font-family: 'Raleway', sans-serif;
}

.font-weight-black {
    font-weight: 900;
}

.font-weight-100 {
    font-weight: 100;
}

.font-weight-200 {
    font-weight: 200;
}

.font-weight-300 {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-800 {
    font-weight: 800;
}

.font-weight-900 {
    font-weight: 900;
}

.ws-nowrap {
    white-space: nowrap !important;
}

.ws-normal {
    white-space: normal !important;
}

/* =============================== *
 * ASPECT RATIO
 * =============================== */
[style*="--aspect-ratio"] > :first-child {
    width: 100%;
}

[style*="--aspect-ratio"] > img {
    height: auto;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

/* ============================== *
 *  IMAGES
 * ============================== */
.object-fit-contain {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

.object-fit-cover {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* ============================== *
 *  BOUTON
 * ============================== */
.btn-unstyled {
    /* Reset button style */
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    text-align: inherit;
    /* inherit font & color from ancestor */
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

/* ============================== *
 *  DISPLAY
 * ============================== */
@media (min-width: 480px) {
    .d-480-none {
        display: none !important;
    }

    .d-480-inline {
        display: inline;
    }

    .d-480-inline-block {
        display: inline-block;
    }

    .d-480-flex {
        display: flex;
    }

    .d-480-inline-flex {
        display: inline-flex;
    }
}

/* ============================== *
 *  POSITIONS
 * ============================== */
.pos-absolute {
    position: absolute;
}

.pos-relative {
    position: relative;
}

.pos-static {
    position: static;
}

.pos-fixed {
    position: fixed;
}

.pos-absolute-i {
    position: absolute !important;
}

.pos-relative-i {
    position: relative !important;
}

.pos-static-i {
    position: static !important;
}

.pos-fixed-i {
    position: fixed !important;
}

/* ============================== *
 *  DIRECTIONS
 * ============================== */
.at-top-left-bottom-right,
.at-all-directions,
.at-top-left,
.at-top-right,
.at-top-center,
.at-bottom-left,
.at-bottom-right,
.at-bottom-center,
.at-middle-center,
.at-middle-left,
.at-middle-right,
.at-top-bottom-left,
.at-top-bottom-right {
    --t: 0;
    --l: 0;
    --b: 0;
    --r: 0;
}

.at-top-left-bottom-right,
.at-all-directions {
    top: var(--t);
    left: var(--l);
    bottom: var(--b);
    right: var(--r);
}

.at-top-left {
    top: var(--t);
    left: var(--l);
}

.at-top-right {
    top: var(--t);
    right: var(--r);
}

.at-top-center {
    top: var(--t);
    left: 50%;
    transform: translateX(-50%);
}

.at-bottom-left {
    bottom: var(--b);
    left: var(--l);
}

.at-bottom-right {
    bottom: var(--b);
    right: var(--r);
}

.at-bottom-center {
    bottom: var(--b);
    left: 50%;
    transform: translateX(-50%);
}

.at-middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.at-middle-left {
    top: 50%;
    left: var(--l);
    transform: translateY(-50%);
}

.at-middle-right {
    top: 50%;
    right: var(--r);
    transform: translateY(-50%);
}

.at-top-bottom-left {
    top: var(--t);
    left: var(--l);
    bottom: var(--b);
}

.at-top-bottom-right {
    top: var(--t);
    right: var(--r);
    bottom: var(--b);
}

.left-auto {
    left: auto;
}

.left-auto-i {
    left: auto !important;
}

/* ============================== *
 *  DÉBORDEMENTS
 * ============================== */
.of-hidden {
    overflow: hidden;
}

.of-x-hidden {
    overflow-x: hidden;
}

.of-y-hidden {
    overflow-y: hidden;
}

.of-auto {
    overflow: auto;
}

.of-x-auto {
    overflow-x: auto;
}

.of-y-auto {
    overflow-y: auto;
}

.of-visible {
    overflow: visible;
}

.of-x-visible {
    overflow-x: visible;
}

.of-y-visible {
    overflow-y: visible;
}

.of-hidden-i {
    overflow: hidden !important;
}

.of-x-hidden-i {
    overflow-x: hidden !important;
}

.of-y-hidden-i {
    overflow-y: hidden !important;
}

.of-auto-i {
    overflow: auto !important;
}

.of-x-auto-i {
    overflow-x: auto !important;
}

.of-y-auto-i {
    overflow-y: auto !important;
}

.of-visible-i {
    overflow: visible !important;
}

.of-x-visible-i {
    overflow-x: visible !important;
}

.of-y-visible-i {
    overflow-y: visible !important;
}

/* ============================== *
 *  CHANGEMENTS
 * ============================== */
.will-change-opacity {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.will-change-opacity.is-hidden {
    opacity: 0;
}

/* ============================== *
 *  FLEXBOX
 * ============================== */
/* Proportions */
.flex-grow {
    flex-grow: 1;
}

.flex-ungrow {
    flex-grow: 0;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-unshrink {
    flex-shrink: 0;
}

.flex-adapt-width {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 1px;
}

.flex-adapt-height {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 1px;
}

.flex-lock-size {
    flex-grow: 0;
    flex-shrink: 0;
}

/* LIGNE FLEX */
.row-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

.row-flex-stretch-between {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: space-between;
}

.row-flex-stretch-end {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-end;
}

.row-flex-baseline {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: flex-start;
}

.row-flex-baseline-between {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: space-between;
}

.row-flex-baseline-end {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: flex-end;
}

.row-flex-center {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}

.row-flex-center-center {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.row-flex-center-between {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

/* LIGNE FLEX AVEC RETOUR À LA LIGNE AUTOMATIQUE */
.row-wrap {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
}

.row-wrap-stretch-between {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-between;
}

.row-wrap-stretch-end {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-end;
}

.row-wrap-center {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
}

.row-wrap-center-center {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.row-wrap-center-between {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.row-wrap-end-between {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: space-between;
}

/* COLONNE FLEX */
.col-flex {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

.col-flex-center {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
}

.col-flex-center-center {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.col-flex-stretch-center {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: center;
}

/* COLONNE FLEX AVEC RETOUR À LA LIGNE AUTOMATIQUE */
.col-wrap {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    justify-content: flex-start;
}

/* En ligne centré */
.flex-centered {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-centered-wrap {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.inline-flex-centered {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.inline-flex-centered-wrap {
    display: inline-flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
}

/* En colonne centré */

.colflex-centered {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.colflex-centered-wrap {
    display: flex !important;
    flex-flow: column wrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.inline-colflex-centered {
    display: inline-flex !important;
    flex-flow: column nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}

.inline-colflex-centered-wrap {
    display: inline-flex !important;
    flex-flow: column wrap !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Vrac */
.flex-row-nowrap-center-start {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: start;
}

.flex-row-nowrap-center {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.flex-row-nowrap-center-between {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.flex-row-nowrap-center-around {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
}

.flex-row-nowrap-center-end {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
}

/* ============================== *
 *  DIMENSIONS                    *
 * ============================== */
.minh-screen {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.w-third {
    width: calc(100vh / 3);
    width: calc(var(--vh, 1vh) * 100 / 3);
}

.w-50vh {
    width: 50vh;
    width: calc(var(--vh, 1vh) * 50);
}

.w-double-third {
    width: calc(100vh / 3 * 2);
    width: calc(var(--vh, 1vh) * 100 / 3 * 2);
}

.w-auto {
    width: auto !important;
}

.h-third {
    height: calc(100vh / 3);
    height: calc(var(--vh, 1vh) * 100 / 3);
}

.h-50vh {
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
}

.h-auto {
    height: auto !important;
}

@media (min-width: 480px) {
    /* Bootstrap related */
    .w-xs-50 {
        width: 50% !important;
    }

    /* Unrelated */
    .w-xs-third {
        width: calc(100vh / 3);
        width: calc(var(--vh, 1vh) * 100 / 3);
    }

    .w-xs-50vh {
        width: 50vh;
        width: calc(var(--vh, 1vh) * 50);
    }

    .w-xs-double-third {
        width: calc(100vh / 3 * 2);
        width: calc(var(--vh, 1vh) * 100 / 3 * 2);
    }

    .w-xs-auto {
        width: auto !important;
    }

    .h-xs-third {
        height: calc(100vh / 3);
        height: calc(var(--vh, 1vh) * 100 / 3);
    }

    .h-xs-50vh {
        height: 50vh;
        height: calc(var(--vh, 1vh) * 50);
    }

    .h-xs-auto {
        height: auto !important;
    }
}

@media (min-width: 576px) {
    /* Bootstrap related */
    .w-sm-50 {
        width: 50% !important;
    }

    /* Unrelated */
    .w-sm-third {
        width: calc(100vh / 3);
        width: calc(var(--vh, 1vh) * 100 / 3);
    }

    .w-sm-50vh {
        width: 50vh;
        width: calc(var(--vh, 1vh) * 50);
    }

    .w-sm-double-third {
        width: calc(100vh / 3 * 2);
        width: calc(var(--vh, 1vh) * 100 / 3 * 2);
    }

    .w-sm-auto {
        width: auto !important;
    }

    .h-sm-third {
        height: calc(100vh / 3);
        height: calc(var(--vh, 1vh) * 100 / 3);
    }

    .h-sm-50vh {
        height: 50vh;
        height: calc(var(--vh, 1vh) * 50);
    }

    .h-sm-auto {
        height: auto !important;
    }
}

@media (min-width: 768px) {
    /* Bootstrap related */
    .w-md-50 {
        width: 50% !important;
    }

    /* Unrelated */
    .w-md-third {
        width: calc(100vh / 3);
        width: calc(var(--vh, 1vh) * 100 / 3);
    }

    .w-md-50vh {
        width: 50vh;
        width: calc(var(--vh, 1vh) * 50);
    }

    .w-md-double-third {
        width: calc(100vh / 3 * 2);
        width: calc(var(--vh, 1vh) * 100 / 3 * 2);
    }

    .w-md-auto {
        width: auto !important;
    }

    .h-md-third {
        height: calc(100vh / 3);
        height: calc(var(--vh, 1vh) * 100 / 3);
    }

    .h-md-50vh {
        height: 50vh;
        height: calc(var(--vh, 1vh) * 50);
    }

    .h-md-auto {
        height: auto !important;
    }
}

@media (min-width: 992px) {
    /* Bootstrap related */
    .w-lg-50 {
        width: 50% !important;
    }

    /* Unrelated */
    .w-lg-third {
        width: calc(100% / 3);
    }

    .w-lg-third-i {
        width: calc(100% / 3) !important;
    }

    .w-lg-50vh {
        width: 50vh;
        width: calc(var(--vh, 1vh) * 50);
    }

    .w-lg-double-third {
        width: calc(100% / 3 * 2);
    }

    .w-lg-double-third-i {
        width: calc(100% / 3 * 2) !important;
    }

    .w-lg-auto {
        width: auto !important;
    }

    .h-lg-third {
        height: calc(100vh / 3);
        height: calc(var(--vh, 1vh) * 100 / 3);
    }

    .h-lg-50vh {
        height: 50vh;
        height: calc(var(--vh, 1vh) * 50);
    }

    .h-lg-auto {
        height: auto !important;
    }
}

/* ============================== *
 *  DENSITÉ (ÉLÉMENTS PLUS PETITS)
 * ============================== */
/* Menu */
.nav.is-dense .nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Datatable */
.datatable-container.is-dense .dataTable-table > tbody > tr > td,
.datatable-container.is-dense .dataTable-table > tbody > tr > th,
.datatable-container.is-dense .dataTable-table > tfoot > tr > td,
.datatable-container.is-dense .dataTable-table > tfoot > tr > th,
.datatable-container.is-dense .dataTable-table > thead > tr > td,
.datatable-container.is-dense .dataTable-table > thead > tr > th {
    vertical-align: middle;
    padding: 0.25rem;
}

.datatable-container.is-dense .dataTable-top {
    padding: 0;
    padding-bottom: 0.5rem;
}

.datatable-container.is-dense .dataTable-bottom {
    padding: 0;
    padding-top: 0.5rem;
}

/* Carte */
.card.is-dense .card-header {
    padding: 0.5rem;
}

.card.is-dense .card-body {
    padding: 0.25rem;
}

/* DENSE LIST-GROUP */
.list-group.is-dense .list-group-item {
    padding: 0.25rem;
}

.list-group.is-dense .list-group-item-heading {
    margin: 0;
}

.list-group.is-dense .list-group-item-text {
    margin: 0;
}

/* ============================== *
 *  HAUTEURS ET MARGES
 * ============================== */
.full-height {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.full-height-bottom-bar {
    height: calc(100vh - 48px);
    height: calc(var(--vh, 1vh) * 100 - 48px);
}

/* Spécifiques à la navbar */
.h-navbar {
    height: 64px !important;
}

.pt-navbar {
    padding-top: 64px !important;
}

.pb-navbar {
    padding-bottom: 64px !important;
}

.mt-navbar {
    margin-top: 64px !important;
}

.mb-navbar {
    margin-bottom: 64px !important;
}

.h-100vh-navbar {
    height: calc(100vh - 64px) !important;
    height: calc(var(--vh, 1vh) * 100 - 64px) !important;
}

.minh-100vh-navbar {
    min-height: calc(100vh - 64px) !important;
    min-height: calc(var(--vh, 1vh) * 100 - 64px) !important;
}

/* Spécifiques à la barre d'actions */
.h-toolbar {
    height: 56px !important;
}

.pt-toolbar {
    padding-top: 56px !important;
}

.pb-toolbar {
    padding-bottom: 56px !important;
}

.mt-toolbar {
    margin-top: 56px !important;
}

.mb-toolbar {
    margin-bottom: 56px !important;
}

/* Spécifiques au bouton d'action */
.pb-fab-btn {
    padding-bottom: calc(64px + 32px);
}

/* ==================================== *
 *  Troncage multiligne
 * ==================================== */
.line-clamp {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp[data-limit="2"] {
    -webkit-line-clamp: 2;
}

.line-clamp[data-limit="3"] {
    -webkit-line-clamp: 3;
}

.line-clamp[data-limit="4"] {
    -webkit-line-clamp: 4;
}

.line-clamp[data-limit="5"] {
    -webkit-line-clamp: 5;
}

.line-clamp[data-limit="6"] {
    -webkit-line-clamp: 6;
}

/* ============================== *
 *  OMBRES
 * ============================== */
.box-shadow-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.box-shadow-medium {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12) !important;
}

.box-shadow-large {
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16) !important;
}

.box-shadow-xlarge {
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16) !important;
}

/* ============================== *
 *  CURSEUR
 * ============================== */
.pointer {
    cursor: pointer;
}

/* ============================== *
 *  ANIMATIONS
 * ============================== */
@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(0.75)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes pulse-rotate {
    0% {
        transform: rotate(0) scale(1)
    }
    50% {
        transform: rotate(180deg) scale(0.75)
    }
    100% {
        transform: rotate(360deg) scale(1)
    }
}

.pulse {
    -webkit-animation: pulse 0.75s 0s linear;
    animation: pulse 0.75s 0s linear;
}

.pulse-infinite-gently {
    -webkit-animation: pulse 1.5s 0s linear infinite;
    animation: pulse 1.5s 0s linear infinite;
}

.pulse-infinite {
    -webkit-animation: pulse 1s 0s linear infinite;
    animation: pulse 1s 0s linear infinite;
}

.pulse-infinite-energically {
    -webkit-animation: pulse 0.75s 0s linear infinite;
    animation: pulse 0.75s 0s linear infinite;
}

/* ==================================== *
 *  MODALE IMPROVISÉE
 * ==================================== */
.backdroppable::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.backdroppable.backdropped::before {
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.modal-in-code.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.26);
}

.modal-in-code .modal-dialog {
    width: 100%;
}

.modal-backdrop {
    display: none;
    pointer-events: none;
}

.scroll-shadow-h {
    --shadow-h-bg: white;
    background: linear-gradient(90deg, var(--shadow-h-bg) 0%, rgba(255, 255, 255, 0)),
    linear-gradient(-90deg, var(--shadow-h-bg) 0%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 100% 0%;
    background-repeat: no-repeat;
    background-color: var(--shadow-h-bg);
    background-size: 100px 100%, 100px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.scroll-shadow-v {
    --shadow-v-bg: white;
    background: linear-gradient(var(--shadow-v-bg) 30%, hsla(0, 0%, 100%, 0)),
    linear-gradient(hsla(0, 0%, 100%, 0) 10px, var(--shadow-v-bg) 70%) bottom,
    radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
    radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
    background-repeat: no-repeat no-repeat;
    background-color: var(--shadow-v-bg);
    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}