* {
    box-sizing: border-box;
}

html {
    height: 100vh;
    overflow: hidden;
    font-family: sans-serif;
    line-height: 1.5;
    /* Si on veut des transitions smooth entre les slides */
    /* scroll-behavior: smooth; */
}

body {
    /* Supprimer les marges par défaut */
    margin: 0;
}

section {
    position: relative;
    height: 100vh;
    overflow-y: auto;
    padding: 5%; /* marges des slides (en % ou en px) */
}

/* Prev / Next */
section nav {
    background: Canvas;
    position: fixed;
    bottom: 0; right: 0; /* position de la nav */
}
/* Masque toutes les nav sauf celle du premier slide */
section + section nav {
    display: none;
}

/* Affiche la nav du slide actif */
:target nav {
    display: initial;
}

nav a {
    display: inline-block;
    text-decoration: none;
    padding: .75rem 1rem; /* marge intérieure autour des liens pour élargir la zone cliquable */
}
.prev::after {
    content: "←";
}
.next::after {
    content: "→";
}

/* Supprime la marge supérieur du premier élément de chaque slide (en général le titre) */
section > :first-child,
h1 + h2,
h2 + h3 {
    margin-top: 0;
}

/* Améliore la balance des titres et défini les marges inférieures */
h1, h2, h3 {
    text-wrap: balance;
    margin-bottom: 1rem;
}

/* Règle le corps et les marges des titres */
h1 {
    font-size: xx-large;
}
h2 {
    font-size: x-large;
}
h3 {
    font-size: large;
}

/* Règle le corps et la largeur maximum des textes et des éléments de liste */
p, li {
    font-size: large;
    max-width: 72ch;
}
ul, ol {
    padding-left: 1em;
}

/* Masque visuellement l'élément mais le laisse lisible pour les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}