:root {
    --color-taupe: #d2cbc4;
    --color-marron: #a19184;
    --color-beige: #fffef9;
    --color-chanvre: #33673b;
    --color-lightGrey: #e5e7eb;
    --color-darkGrey: #808080;
    --color-warning: rgb(255, 147, 7);
}

@font-face {
    font-family: "Bodoni";
    src:
        url("/fonts/BodoniBT.ttf"),
}

@font-face {
    font-family: "Rosario";
    src:
        url("/fonts/Rosario.ttf"),
}

@font-face {
    font-family: "Athelas";
    src:
        url("/fonts/Athelas-Bold.ttf"),
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-beige);
    font-family: "Rosario";
}

h1,
h2,
h3,
h4 {
    font-family: "Bodoni";
    font-weight: normal;
}

.label {
    transition: transform 0.1s ease-in-out;
}

input {
    border: 2px solid var(--color-lightGrey);
}

input:not(:placeholder-shown)+.label {
    transform: scale(0.8) translateX(-5px) translateY(-19px);
    background: var(--color-beige);
}

.button {
    background-color: var(--color-marron);
    color: white !important;
    cursor: pointer;
    text-transform: var(--button-text, none);
    border-radius: 4px;
}

.button-maj {
    --button-text: uppercase;
}

.text-warning{
    color:var(--color-warning);
    font-style: italic;
}


input:required:has(+ outsider-l label) + outsider-l label::after  {
    content: "*";
  }