/*
=========================================================
TYPODULO
=========================================================

Fichier :
style.css

Rôle :
Styles généraux applicables à l'ensemble du site.

Contient :
- reset CSS
- styles de base du document
- règles communes
- comportements typographiques globaux

Remarque :
Ne pas y placer les styles spécifiques aux
composants ou à la mise en page.

=========================================================
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-ui);
    font-size: 16px;
    color: #2c2c2c;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 450;
    font-variation-settings:
        "CASL" 0.35,
        "MONO" 0;
}
h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variation-settings:
        "CASL" 1,
        "MONO" 0;
}
h2 {
    font-size: 1.6rem;
    display: block;
    font-weight: 900;
    color: #d9a935;
    margin-bottom: 16px;
    font-variation-settings:
        "CASL" 0.5,
        "MONO" 0;
}
h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #222222;
    margin-bottom: 12px;
    font-variation-settings:
        "CASL" 0.9,
        "MONO" 0;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
p, li, span, input, button {
  font-size: .9rem;
  font-family: var(--font-ui);
  font-weight: inherit;
}
figcaption {
    font-size: 0.7rem;
    color: #949494;
    margin-top: 4px;
    margin-bottom: 16px;
}
#bauhaus-image {
    width: 100%;
    height: 25%;
    object-fit: contain;
}
button,
input,
select,
textarea {
    font-family: var(--font-ui);
    font-weight: 600;
    font-variation-settings:
        "CASL" 0.5,
        "MONO" 0;
}
.family-button {
    border: none;
    border-radius: 999px;
    padding: 12px;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    background: #d9a935;
    color: white;
    font-family: var(--font-ui);
    font-weight: 700;
    text-transform: lowercase;
    font-variation-settings:
        "CASL" 0.75,
        "MONO" 0;
}
#logo {
    height: 140px;
}
#logo-image {
    transition: opacity .15s ease;
    width: 100%;
    height: 140px;
    object-fit: contain;
}
.kofi-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background-color: #457b9d;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.kofi-pill:hover {
  background-color: #457b9dc5;
  color: #ffffff;
}
#reset-btn{
    background-color: #e63946;
    color: #ffffff;
}
#reset-btn:hover {
    background-color: #e63946c5;
    color: #ffffff;
}
#info-btn{
    background-color: #66b560;
    color: #ffffff;
}
#info-btn:hover {
    background-color: #66b560c5;
    color: #ffffff;
}
#credits-toggle{
    background-color: #66b560;
    color: #ffffff;
}
#credits-toggle:hover {
    background-color: #66b560c5;
    color: #ffffff;
}
.danger-btn {
    background-color: #e63946;
    color: #ffffff;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 999px;
    padding: 12px;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    transition: .2s;
}
.danger-btn:hover {
    background-color: #e63946c5;
    color: #ffffff;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 999px;
    padding: 12px;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    transform:
        translateY(-2px);
}
.secondary-btn {
    background-color: #457b9d;
    color: #ffffff;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 999px;
    padding: 12px;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    transition: .2s;
}
.secondary-btn:hover {
    background-color: #457b9dc5;
    color: #ffffff;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 999px;
    padding: 12px;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    transform:
        translateY(-2px);
}
#credits-panel{
    cursor: url("../assets/ui/cursor_auto.svg") 16 16, auto;
}
#credits-overlay{
    background-color: #2222228d;
    cursor: url("../assets/ui/cursor_auto.svg") 16 16, auto;
    backdrop-filter:
        blur(4px);
}
#help-toggle {
    position: static;
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: #d7d7d7;
    color: #666;
    font-size: 28px;
    font-weight: 700;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    z-index: 999;
}
#help-toggle:hover {
    background: rgb(69, 123, 157);
    color: #eeebe6;
}
#help-hud {
    position: fixed;
    right: 75px;
    bottom: 16px;
    transform:
        translateX(120%);
    opacity: 0;
    transition:
        .25s ease;
    background:
        #d7d7d7;
    border-radius: 12px;
    padding:
        16px 28px;
    font-size: 14px;
    color: #666;
    z-index: 998;
    pointer-events: none;
    width: max-content;
    max-width: min(700px, calc(100vw - 120px));
    white-space: normal;
    line-height: 1.45;
}
#help-hud.open {
    opacity: 1;
    transform:
        translateX(0);
}
#grid-toggle {
    position: static;
    right: 16px;
    bottom: 72px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: #d7d7d7;
    color: #666;
    cursor: url("../assets/ui/cursor_point.svg") 16 16, pointer;
    z-index: 999;
}
#grid-toggle:hover {
    background: #457b9d;
    color: #eeebe6;
}
#grid-toggle.active {
    background: #d9a935;
    color: white;
}