.hero {
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('../images/background.webp') no-repeat center center/cover;
    padding: 10px 20px;
    color: var(--colorsecondary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    min-height: calc(100vh - var(--header-height));
}

.hero h1, .hero h2{
    color: var(--colorsecondary);
}

.hero-content{
    width: min(1000px, 90%);
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero .cta {
    margin-top: 40px;
    padding: 15px 30px;
    font-size: 24px;
    border-radius: 5px;
    color: var(--colorprimary);
    transition: var(--transition);
    text-shadow: none;
    width: 50%;
}

.hero .cta:hover {
    background-color: #a89775;
    scale: 1.03;
}

.praticienne-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.praticienne-image {
    width: 300px; /* Ajuste la taille selon tes besoins */
    height: auto;
    border-radius: 8px; /* Pour des bords arrondis si désiré */
}

.praticienne-text {
    max-width: 600px; 
}

.catalogue {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.catalogue div {
    background-color: var(--coloraccent3);
    box-shadow: var(--shadow);
    padding: 20px;
    border-radius: 10px;
    width: clamp(220px, 280px, 90%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalogue img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


/* soin aine */

.soins-aines {
    margin: 20px 0;
}

.soins-aines h2 {
    margin-bottom: 20px;
    color: #333;
}

.soins-aines-content {
    display: flex;
    align-items: center;
    gap: 20px; /* Espace entre l'image et le texte */
}

.soins-aines img {
    max-width: 300px; /* Largeur maximale de l'image */
    height: auto;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre légère pour donner de la profondeur */
}

.soins-aines-text {
    max-width: 600px; /* Largeur maximale pour le texte */
}

.soins-aines p {
    margin: 10px 0;
    color: #666;
}

/* atelier */

.ateliers-sante {
    margin: 20px 0;
}

.ateliers-sante h2 {
    margin-bottom: 10px;
    color: #333;
}

.ateliers-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px; /* Espace entre l'image et le texte */
}

.ateliers-sante img {
    max-width: 300px; /* Largeur maximale de l'image */
    height: auto;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre légère */
}

.ateliers-text {
    max-width: 600px; /* Largeur maximale pour le texte */
}

.ateliers-text p {
    margin: 10px 0;
    color: #666;
}

.ateliers-text ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ateliers-text ul li {
    background-color: var(--coloraccent3);
    color: var(--colorsecondary);
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    color: #333;
}

/* Temoignage */

.temoignages {
    margin: 40px 0;
    text-align: center;
}

.temoignages h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.temoignages-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacement entre les témoignages */
    align-items: center;
}

.more-temoignage {
    display: none;
    width: 100%;
}

.temoignage {
    padding: 20px;
    border-left: 4px solid var(--coloraccent2); /* Liseré pour donner du style */
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-style: italic;
    text-align: left;
}

.temoignage p {
    margin: 0;
    color: #555;
}

.temoignage strong {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

/* FAQ */
.faq {
    margin: 40px 0;
    background-color: var(--colorsecondary);
    padding: 20px;
    box-shadow: var(--shadow);
    border-radius: 10px;
}

.faq h2 {
    color: var(--colorprimary);
    margin-bottom: 20px;
    text-align: center;
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-content .question {
    background-color: var(--coloraccent3);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-content .question h3 {
    color: var(--colorprimary);
    margin-bottom: 10px;
}

.faq-content .question p {
    color: #666;
    line-height: 1.6;
}

/* Smaller screen, responsive design */
@media (max-width: 768px) {
    /* Hero Section */
    .hero {
        padding: 50px 10px;
    }

    .hero h1{
        font-size: 2rem; /* Reduced font size */
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    .hero .cta {
        padding: 10px 20px;
        font-size: 16px;
    }

    /* Praticienne Section */
    .praticienne-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .praticienne-image {
        width: 100%; /* Full width for images */
    }

    .praticienne-text {
        max-width: 100%;
    }

    /* Catalogue */
    .catalogue {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    /* Soins Aînés */
    .soins-aines-content {
        flex-direction: column;
        text-align: center;
    }

    .soins-aines img {
        max-width: 100%;
    }

    .soins-aines-text {
        max-width: 100%;
    }

    /* Ateliers Santé */
    .ateliers-content {
        flex-direction: column;
        text-align: center;
    }

    .ateliers-sante img {
        max-width: 100%;
    }

    .ateliers-text {
        max-width: 100%;
    }

    /* Témoignages */
    .temoignages-content {
        gap: 10px;
    }

    .temoignage {
        max-width: 100%;
    }

    /* FAQ */
    .faq-content {
        gap: 15px;
    }

    .faq-content .question {
        padding: 10px;
    }

    /* Footer */
    footer {
        padding: 10px;
    }
}

@media (max-width: 480px) {
     /* Hero section */
     .hero {
        padding: 30px 10px;
    }
    
    .hero .cta {
        width: 70%;
    }
    /* Catalogue adjustments */
    .catalogue div {
        padding: 10px 0;
    }

    /* FAQ and other sections with padding */
    section {
        padding: 20px 10px;
    }

    .ateliers-text p, .soins-aines-content p {
        text-align: left;
        padding: 10px;
    }
}