/* ===== Reset CSS commun ===== */

/* 1rem = 16px (100%, valeur par défaut du navigateur) */
html {
    font-size: 100%;
}

body {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Crée un stacking context à z-index positif dans body.
       Garantit que tout overflow positionné à l'intérieur (ex. dropdown téléphone
       sur la page d'inscription) est peint au-dessus du site-footer (z-index:auto). */
    position: relative;
    z-index: 1;
}

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

/* Accessibilité : désactiver les animations pour les utilisateurs qui le préfèrent */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

h2 {
    margin-bottom: var(--spacing-md);
}

img {
    max-width: 100%;
    height: auto;
}


/* Les éléments de formulaire n'héritent pas de la police par défaut dans les navigateurs.
   Sans cette règle, <button>/<input>/<select>/<textarea> utilisent la police système (system-ui)
   au lieu de la police du projet. Les composants (.btn, .form-control) fixent leurs propres
   valeurs explicites qui priment sur cette règle de base. */
button,
input,
select,
textarea {
    font-family: inherit;
}