/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color:var(--text);

    background:var(--bg);

    padding-bottom:72px;

}

/* ==========================================================
   TYPOGRAPHIE
========================================================== */

h1,h2,h3,h4{

    margin:0 0 var(--space-4);

    line-height:1.2;

    font-weight:700;

}

p{

    margin:0 0 var(--space-4);

    line-height:1.6;

}

small{

    color:var(--muted);

}

a{

    color:inherit;

    text-decoration:none;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(100%,var(--container));

    margin:auto;

    padding:var(--space-5);

}

/* ==========================================================
   CARD
========================================================== */

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:var(--space-5);

    margin-bottom:var(--space-4);

    box-shadow:var(--shadow-sm);

}

/* ==========================================================
   SECTION
========================================================== */

section{

    margin-bottom:var(--space-5);

}

/* ==========================================================
   UTILITAIRES
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.muted{

    color:var(--muted);

}

.hidden{

    display:none;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.w-100{

    width:100%;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.fade{

    animation:fade .25s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}