/* Font Face for Roboto Regular */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Font Face for Roboto Bold */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Font Face for Roboto Black */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
            url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Root Variables */
:root {
    --font-family: 'Roboto', sans-serif;
}

/* Reset Styles */
*, ::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.5;
    padding: 0;
    background: #fbfbfb;
    overflow-x: hidden;
    transition: padding 0.3s ease-in-out;
    position: relative;
}

/* Footer */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 24px 12px;
    font-size: 12px;
    color: #333;
    text-align: center;
    font-family: var(--font-family);
    line-height: 1.4;
    direction: ltr; /* s’adapte à rtl si ton html a dir="rtl" */
}

body.webview .loader-overlay {
    display: none;
}

body.webview .footer,
body.webview .footer .powered strong,
body.webview .footer a:not(.social) {
    color: #444;
    text-decoration: none;
}

body.webview .footer a:hover {
    text-decoration: underline;
}

.footer span {
    margin-block: 2px;
}

.footer .sep {
    margin: 0 2px;
}

.footer .powered strong,
.footer .powered a {
    color: #fff;
    font-weight: 600;
}

.footer .powered a {
    color: var(--menu-text-on-primary,#0d3b66);
}

.footer .powered a:hover {
    text-decoration: underline;
}

.footer small {
    font-size: 11px;
}

body[data-theme="default"] .footer .powered strong {
    color: unset;
}

/* Utility classes */
.flex {
    display: flex;
}

.flex-v {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}