/* gère les variables*/
:root {
    --fond1: #F7F3E8;
    --fond2: #EFE7DA;
    --fond3: #E6DDCE;
    --fond4: #DCCFBF;
    --fond5: #D1C2B0;
    --fond6: #C6B5A1;

    --trans1: rgba(255, 255, 255, 0.9);

    --trait1: #2B1F18;
    --trait2: #3A2B23;
    --trait3: #4A372E;
    --trait4: #5A463A;
    --trait5: #6A5648;
    --trait6: #7A6656;

    --ombre1: 0 2px 6px rgba(42, 36, 30, 0.06);
    --ombre2: 0 6px 16px rgba(42, 36, 30, 0.12);
    --ombre3: 0 12px 28px rgba(42, 36, 30, 0.18);

    --accent1: #E07A2A;
    --accent2: #C65F18;
    --accent3: #8A3E12;

    --succes: #3D8A5A;
    --info: #2A9DAF;
    --attention: #D99A2F;
    --alerte: #D14B3A;

    --fondSansImage: var(--trait2);
    --fondSansImageDegrade: linear-gradient(180deg, color-mix(in srgb, var(--trait2) 90%, transparent) 0%, color-mix(in srgb, var(--fond2) 90%, transparent) 100%);
    --traitSansImage: var(--fond1);

    --fondEntete: var(--trans1);
    --traitEntete: var(--trait1);
    --ombreEntete: var(--ombre1);

    --fondBouton: var(--fond1);
    --fondBouton-hover: var(--fond3);
    --fondBouton-active: var(--fond5);
    --traitBouton: var(--trait2);

    --fondBordure: var(--fond6);
    --traitBordure: var(--trait6);

    --fondAccent: var(--accent1);
    --traitAccent: var(--fond1);

    --texteAccent: var(--accent3);

    --lien: var(--accent1);
    --lien-hover: var(--accent2);
    --lien-active: var(--accent3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond1: #111122;
        --fond2: #222233;
        --fond3: #333344;
        --fond4: #444455;
        --fond5: #555566;
        --fond6: #666677;

        --trans1: rgba(20, 20, 40, 0.9);

        --trait1: #E6E6F2;
        --trait2: #D8D8E6;
        --trait3: #C8C8D8;
        --trait4: #BABACB;
        --trait5: #ACACBD;
        --trait6: #9E9EAF;

        --ombre1: 0 2px 6px rgba(230, 236, 242, 0.06);
        --ombre2: 0 6px 16px rgba(230, 236, 242, 0.12);
        --ombre3: 0 12px 28px rgba(230, 236, 242, 0.18);

        --fondSansImage: var(--fond2);
        --fondSansImageDegrade: linear-gradient(180deg, color-mix(in srgb, var(--fond1) 90%, transparent) 0%, color-mix(in srgb, var(--fond3) 90%, transparent) 100%);
        --traitSansImage: var(--trait1);

        --fondEntete: var(--trans1);
        --traitEntete: var(--trait1);
        --ombreEntete: var(--ombre1);

        --fondBouton: var(--trait1);
        --fondBouton-hover: var(--trait2);
        --fondBouton-active: var(--trait3);
        --traitBouton: var(--fond1);

        --fondBordure: var(--fond6);
        --traitBordure: var(--trait6);

        --fondAccent: var(--accent1);
        --traitAccent: var(--trait1);
    }
}

/* crée une structure centrée */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: var(--fond1);
    color: var(--trait1);
    font-family: 'texte', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
main {
    text-align: center;
}