/* -------------------/*
 * Reset CSS "Bretzel"
 * Made par Alsacréations
 * Consignes : à placer dans un layer `reset`
 /* ------------------ */

/* On adopte les couleurs système afin de s'adapter automatiquement en dark et light mode */
:root {
    color-scheme: light;
}

/* On passe tout le monde en modèle border-box et on évite min-width: auto sur les flex- et grid-items */
*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0;
}

/* On prévoit une petite marge au-dessus des ancres ciblées */
:target {
    scroll-margin-block: 1rem;
}

/* On évite les débordements de page et les zooms non désirés en landscape */
html {
    overflow-wrap: break-word;
    text-size-adjust: none;
}

/* On donne à body toute la hauteur + styles divers */
body {
    /* min-height: 100dvh; */
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    text-rendering: optimizespeed;
}

/* On supprime les styles des listes ayant une class (version accessible) */
:where(ol, ul)[class] {
    padding-left: 0;

    & > li::marker {
        content: "";
    }
}

/* On évite les débordements d'éléments */
img,
table,
td,
blockquote,
pre,
code,
input,
textarea,
select,
video,
svg,
iframe {
    max-width: 100%;
}

/* On réduit de la hauteur de ligne sur certains éléments */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.3;
}

/* On améliore la typographie */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p,
li,
figcaption {
    text-wrap: pretty;
}

/* On préserve le ratio d'affichage */
iframe,
img,
input,
select,
textarea {
    height: auto;
}

/* On stylise par défaut des liens */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* On supprime les marges */
figure {
    margin: 0;
}

/* On change ces éléments en block */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
}

/* On stylise les formulaires */
input,
button,
textarea,
select {
    margin: 0;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    vertical-align: middle;
}

form,
fieldset {
    border: none;
}

fieldset {
    margin: 0;
    padding: 1em;
}

legend {
    max-width: 100%;
    border: 0;
    color: inherit;
    white-space: normal;
}

label {
    display: inline-block;
    cursor: pointer;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

textarea {
    overflow: auto;
    vertical-align: top;
    white-space: pre-wrap;
    resize: vertical;
}

/* On stylise les éléments préformatés */
pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

pre {
    overflow: auto;
    line-height: normal;
    white-space: pre-wrap;
    tab-size: 2;
}

/* On stylise les SVG */
svg:not([fill]) {
    fill: currentcolor;
}

svg {
    overflow: visible;
}

svg * {
    transform-box: fill-box;
}

svg:has(symbol) {
    display: none;
}

/* On corrige des styles ARIA */
[aria-busy="true"] {
    cursor: progress;
}

[aria-controls] {
    cursor: pointer;
}

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}

[aria-hidden="false"][hidden] {
    display: revert;
}

[aria-hidden="false"][hidden]:not(:focus) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

/* On désactive les animations selon les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation-duration: 1ms !important;
        animation-delay: -1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
    }
}