@font-face {font-family: 'roboto_light'; font-style: normal; font-weight: normal; font-display: swap; src: url('/fonts/roboto_light.woff2') format('woff2'), url('/fonts/roboto_light.ttf') format('truetype');}
@font-face {font-family: 'calibri'; font-style: normal; font-weight: normal; font-display: swap; src: url('/fonts/calibri.woff2') format('woff2'), url('/fonts/calibri.ttf') format('truetype');}

[v-cloak] {display: none !important;}
[v-cloak] > * {display: none !important;}

html, body {height: 100% !important; scrollbar-gutter: stable;}
body {margin: 0 !important; padding: 0 !important; font-family: 'roboto_light', sans-serif !important; font-size: 1rem !important; overflow-x: hidden; color: #455C8F;}

select, input[type=text], input[type=tel], input[type=email], input[type=password], button, textarea {outline: none !important; box-shadow: none !important; -webkit-touch-callout: none; -webkit-user-select: none;}
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-border-color);
    box-shadow: none !important;
    outline: 0 !important;
}

/* Bootstrap ne grise que ce qui porte .btn. Les boutons pleins de l application (border-0,
   rounded-pill, fond colore) n ont pas cette classe : desactives, ils restaient pleinement
   satures et indiscernables d un bouton actif qui ne repond pas. Meme opacite que
   .btn:disabled, apparence normale inchangee. */
button:disabled:not(.btn){opacity: 0.65; cursor: not-allowed;}

.calibri{font-family: 'calibri', sans-serif !important;}

.fc-blue{color: #455C8F;}
.fc-green{color: #359b9b;}
.fc-orange{color: #f6b83e;}
.fc-purple{color: #9169df;}

.bc-blue{background-color: #455C8F;}
.bc-blue-25{background-color: rgba(69, 92, 143, 0.25);}
.bc-green{background-color: #359b9b;}
.bc-green-25{background-color: rgba(53, 155, 155, 0.25);}
.bc-orange{background-color: #f6b83e;}
.bc-orange-25{background-color: rgba(246, 184, 62, 0.25);}
.bc-purple{background-color: #9169df;}
.bc-purple-25{background-color: rgba(145, 105, 223, 0.25);}

.b-blue{border: 2px solid #455C8F;}
.b-green{border: 2px solid #359b9b;}
.b-orange{border: 2px solid #f6b83e;}
.b-purple{border: 2px solid #9169df;}

/* Les vues sont posees en position absolue dans <main>, qui n occupe plus toute la fenetre
   des que le bandeau lecture seule s affiche au-dessus. min-vh-100 leur ferait reclamer une
   fenetre entiere de plus que la place disponible, donc un vide en bas et un ascenseur
   parasite. Bootstrap n a pas d equivalent en pourcentage : une boite absolue resout bien
   min-height: 100% sur son bloc conteneur, ici <main>. */
.min-h-100{min-height: 100% !important;}

.w-fit{width: fit-content;}
.minw-0{min-width: 0;}
.w-42px{width: 42px;}
.h-2px{height: 2px;}

.icon-14{width: 14px; height: 14px;}
.icon-16{width: 16px; height: 16px;}
.icon-18{width: 18px; height: 18px;}
.icon-20{width: 20px; height: 20px;}
.icon-22{width: 22px; height: 22px;}
.icon-24{width: 24px; height: 24px;}
.icon-28{width: 28px; height: 28px;}
.icon-30{width: 30px; height: 30px;}
.icon-up{margin-top: -2px;}

.logo-header{height: 50px; width: auto;}
.bg-houses{background: url('/images/layout_houses.webp') no-repeat center top; background-size: 100% auto;}
.bullet-dot{width: 8px; height: 8px; margin-top: 6px;}
.tab-indicator{height: 3px; width: 70%; bottom: 0;}
.v-separator{width: 2px; min-height: 1.25em;}
.animated-transform{transition: transform 0.15s;}
.z-toast{z-index: 1100;}

.feature-cards{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0.5rem;}
.feature-card{display: grid; grid-template-rows: subgrid; grid-row: span 5; align-items: center; justify-items: center;}

.fs-50{font-size: calc(5rem + 1.5vw) !important;}
.fs-15{font-size: calc(1.5rem + 1.5vw) !important;}
.fs-20{font-size: calc(2rem + 1.5vw) !important;}

.animated{transition: all 0.3s ease-in-out;}
.fs-7{font-size: 0.75rem !important;}
.fs-8{font-size: 0.7rem !important;}
.no-mp{margin: 0 !important; padding: 0 !important;}

.slideleft-leave-active, .slideleft-enter-active{transition: 0.3s ease-out;}
.slideleft-enter, .slideleft-enter-from{transform: translate(100%, 0);}
.slideleft-leave-to{transform: translate(-100%, 0);}

.slideright-leave-active, .slideright-enter-active{transition: 0.3s ease-out;}
.slideright-enter, .slideright-enter-from{transform: translate(-100%, 0);}
.slideright-leave-to{transform: translate(100%, 0);}

.fade-enter-active, .fade-leave-active{transition: opacity .5s;}
.fade-enter, .fade-enter-from, .fade-leave-to{opacity: 0;}