@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* Alias pour classes / composants qui attendent la palette « product webapp ». */
:root {
    --ro-colors-product-webapp-500: var(--ro-colors-accent);
    --ro-colors-product-webapp-600: var(--ro-colors-accent-hover);
    --ro-colors-product-webapp-700: var(--ro-colors-accent-active);
}

/*
 * design-system.css fournit déjà : reset *, html (fond), body (typo, couleurs, lissage).
 * On n’ajoute que le centrage du shell et quelques règles globales légères.
 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--ro-colors-bg-branding);
}

hr {
    opacity: 0.3;
    margin: 20px 0;
}

svg,
img {
    user-select: none;
}

li {
    list-style: none;
}

b,
strong {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: currentColor;
}

canvas {
    max-width: initial;
}

summary {
    display: flex;
    list-style: none;
    -webkit-appearance: none;
    appearance: none;
}

summary::-webkit-details-marker {
    display: none;
}

#version {
    position: fixed;
    bottom: 4px;
    right: 4px;
    font-size: var(--ro-fs-1);
}

*[hidden] {
    display: none !important;
}