@font-face {
    font-family: 'Marcellus';
    src: url('../fonts/marcellus-v14-latin_latin-ext-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk-v12-latin_latin-ext-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk-v12-latin_latin-ext-500.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk-v12-latin_latin-ext-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --laque: #2B1216;
    --laque-2: #3A1B20;
    --lait: #F6F1EA;
    --lait-2: #EFE7DC;
    --dorure: #C8A24B;
    --dorure-vif: #E3C878;
    --porcelaine: #FBF8F3;
    --encre: #241014;
    --font-lettrage: 'Marcellus', 'Times New Roman', serif;
    --font-texte: 'Hanken Grotesk', -apple-system, 'Helvetica Neue', sans-serif;
    --fs-vitrine: clamp(2.5rem, 9vw + 1rem, 5.5rem);
    --fs-enseigne: clamp(1.75rem, 5vw + .75rem, 3rem);
    --fs-prix: clamp(1.5rem, 4vw + .5rem, 2.25rem);
    --s1: .5rem;
    --s2: 1rem;
    --s3: 1.5rem;
    --s4: 2.5rem;
    --s5: 4rem;
    --s6: 6.5rem;
    --r-vitrine: 14rem 14rem .5rem .5rem;
    --r-panel: .5rem;
    --r-pill: 999px;
}

::selection { background: var(--dorure); color: var(--encre); }
* { caret-color: var(--dorure); scrollbar-width: thin; scrollbar-color: var(--dorure) var(--laque); }
::-webkit-scrollbar { width: .65rem; }
::-webkit-scrollbar-track { background: var(--laque); }
::-webkit-scrollbar-thumb { background: var(--dorure); border-radius: var(--r-pill); }
:focus-visible { outline: 2px solid var(--dorure); outline-offset: 2px; }