@import url("header.css");
@import url("home.css");
@import url("tarifs-prestations.css");
@import url("footer.css");
@import url("accompagnements.css");
@import url("quand-consulter.css");
@import url("contact.css");
@import url("a-propos.css");
@import url("mentions-legales.css");
@import url("responsive.css");

:root {
    /* couleurs */
    --background-color: rgba(203, 215, 192, 0.123);
    --fushia-border: #a77fb388;
    --background-overlay: #effcebd3;
    --title-color: rgb(70, 92, 72);
    /* polices */
    --font-title: 'Source Sans 3', sans-serif;
    --font-accent: 'Allura', cursive;
    --font-main: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body {
    font-family: var(--font-main);
}

main {
    background: var(--background-color);
    padding-bottom: 2rem;
}

h1 {
    font-size: 1.5rem;
    margin: .8rem;
    color: var(--title-color);
    font-family: var(--font-title);
    text-align: center;
    margin-bottom: 2rem;
}

.decorative-title {
    margin-bottom: 25px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--title-color);
}

.decorative-title::before,
.decorative-title::after {
    content: "";
    width: 60px;
    height: 1px;
    background-color: #5a7c5a;
}

h4 {
    font-size: 1.2rem;
    text-align: center;
    margin: .5rem;
}

p {
    color: black;
    margin: .8rem;
}

.consultation-hero, .accompagnement-hero,
.prestations-hero, .about-hero,
.contact-hero, .legal-page {
    padding: 1.2rem;
}

.intro-card, .consultation-card,
.about-card, .story-card, 
.qualification-card, .partners-card {
    background: white;
    border-radius: 1rem;
    padding: .5rem;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.accompagnement-hero img, .consultation-hero img, 
.prestations-hero img, .about-hero img, .contact-hero img {
    max-width: 500px;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    margin-left: auto;
    margin-right: auto;
}

.intro {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    font-style: italic;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}


/* ----- Responsive Design ----- */

@media (min-width: 1024px) {

    .wrapper {
        max-width: 1024px;
        margin: 0 auto;
    }
    
}

@media (min-width: 500px) {

    .consultation-image, .nature-image-inner, .about-image-inner {
        max-width: 440px;
        margin: auto;
        border-radius: 1rem;
        box-shadow: 0 6px 18px rgba(0,0,0,.1);
    }
    
    .overlay {
        max-width: 340px;
    }

}