@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Montserrat:wght@400;700&display=swap');

/* Base styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

section, .formule-item {
    scroll-margin-top: 100px; /* Ajuste selon la hauteur de ta navbar */
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8ead5;
    color: #693d22;
    font-family: 'Libre Baskerville', serif;
    margin: 0; /* Supprime toute marge par défaut */
    padding: 0; /* Supprime tout padding par défaut */
}

main {
    flex: 1 0 auto; /* Le main prend tout l'espace disponible */
}

.about-container {
    max-width: 1200px; /* Ajustez selon vos besoins */
    margin: 0 auto;
    padding: 20px;
}

.about-row {
    display: flex;
    align-items: flex-start; /* Aligne les éléments avec le début */
    gap: 20px; /* Espace entre le texte et la photo */
}

.about-text {
    flex: 2; /* 2/3 de la largeur */
    padding-right: 20px; /* Espace entre texte et photo */
}

.photo-column {
    flex: 1; /* 1/3 de la largeur */
}

.photo-column img {
    margin-top: 140px; /* Marge pour aligner la photo sur grand écran */
    width: 100%; /* La photo prend toute la largeur de la colonne */
    max-width: 400px; /* Limite la largeur maximale */
    height: auto; /* Conserve les proportions */
    display: block;
    border-radius: 20px; /* Effet arrondi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Bouton */
.btn-primary {
    display: flex;
    width: fit-content;
    background-color: #693d22;
    border-color: #693d22;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 0.95em;
    transition: background 0.3s ease;
}

.text-center {
    text-align: center;
}

/* Media query for mobile (screens smaller than 768px) */
@media (max-width: 768px) {
    .about-row {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items horizontally */
    }

    .about-text {
        display: contents; /* Treat .about-text children as direct children of .about-row */
        width: 100%; /* Full width */
        padding-right: 0; /* Remove right padding on mobile */
    }

    .about-title {
        order: 0; /* Title comes first */
        text-align: center; /* Center title */
        width: 100%; /* Ensure full width */
    }

    .photo-column {
        order: 1; /* Photo comes after title */
        width: 100%; /* Full width for the photo column */
        display: flex;
        justify-content: center; /* Center the image horizontally */
        margin: 20px 0; /* Space above and below the photo */
    }

    .photo-column img {
        margin-top: 0; /* Remove top margin for mobile */
        width: 80%; /* Reduce image width to avoid full stretch */
        max-width: 300px; /* Smaller max-width for mobile */
    }

    .apropos-description {
        order: 2; /* Description comes last */
        text-align: center; /* Center description text */
        width: 100%; /* Ensure full width */
    }
}