/* --- BASE STYLES --- */
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-padding-top: 150px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 500;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h1 { font-size: 28px; color: var(--color-brand-accent); }
h2 { font-size: 24px; color: var(--color-brand-accent); }
h3 { font-size: 20px; color: var(--color-text-dark); }

p, li {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0.5em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-brand);
    text-decoration: none;
}

/* Responsive Base Styles */
@media screen and (min-width: 450px) and (max-width: 800px) {
    body {
        font-size: 85%;
    }
    h1 {
        font-size: 28px;
    }
    h2 { /* Includes .front-page-section h2 due to specificity */
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    p, li { /* Includes .presentation-text p, .service-item p */
        font-size: 14px;
        line-height: 1.4;
    }
}

@media screen and (max-width: 450px) {
    body {
        font-size: 82%;
    }
    h1 {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 0.5em;
    }
    h2 { /* Includes .front-page-section h2 */
        font-size: 22px;
        margin-bottom: 0.5em; /* This was specific to .front-page-section h2 */
    }
    h3 {
        font-size: 18px;
        margin-bottom: 0.5em; /* This was specific to .front-page-section h3 */
    }
    p, li { /* Includes .presentation-text p, .service-item p */
        font-size: 13px;
        line-height: 1.3;
    }
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*
 * Pour neutraliser les transformations d'AOS après l'animation.
 *
 * (Ce code est là pour résoudre le problème de "tremblotement"
 * même si le réglage `once: true` ne semble pas fonctionner)
*/
.aos-animate[data-aos=fade-up] {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}