/*
========================================
1. VARIABLES & RESET
========================================
*/
:root {
    --color-bg: #F9F7F2;            /* Beige très clair */
    --color-bg-alt: #EBE5D9;        /* Beige moyen (pour le fond clair) */
    --color-primary: #8D6E63;        /* Brun doux (Bouton principal, liens) */
    --color-secondary: #5D4037;      /* Brun foncé (Texte, fond sombre, CTA nav) */
    --color-text: #4E342E;          /* Texte général */
    --color-white: #FFFFFF;
    
    --font-heading: 'Lora', serif;
    --font-body: 'Lato', sans-serif;
    
    --nav-height: 80px;
    --shadow-small: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    font-size: 1.1rem; 
    /* Correction mobile: Décaler le contenu sous l'en-tête fixe */
    padding-top: 70px; 
}

/*
========================================
2. TYPOGRAPHIE & GÉNÉRAL
========================================
*/
h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--color-secondary);
    margin-bottom: 1rem;
    font-weight: 700;
}

h1 {
    font-size: 4rem; 
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/*
========================================
3. UTILITAIRES & GRILLES
========================================
*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.bg-light { background-color: var(--color-bg-alt); }
.bg-dark { background-color: var(--color-secondary); } /* Simplifié: uniquement la couleur de fond */
.text-light { color: var(--color-bg); }

/* S'assurer que les titres sont clairs sur fond sombre/clair */
.text-light h1, 
.text-light h2, 
.text-light h3,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
    color: var(--color-bg); 
}

.section-padding { padding: 80px 0; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.image-content img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/*
========================================
4. BOUTONS
========================================
*/
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out; 
}

/* 1. Bouton Primaire */
.btn-primary {
    background-color: var(--color-primary); 
    color: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 2. Bouton de Navigation */
.btn-nav {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    color: var(--color-white);
    padding: 8px 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-nav:hover {
    filter: brightness(110%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 3. Bouton Secondaire (Utilisé sur fond sombre) */
.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2); 
}

/* 4. Boutons de Contact dans les cartes */
.contact-item .btn-contact {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 8px 15px;
    font-size: 0.9rem;
    background-color: var(--color-bg-alt);
    color: var(--color-secondary);
    border: 1px solid var(--color-bg-alt);
    box-shadow: none;
}

.contact-item .btn-contact:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/*
========================================
5. HEADER & NAVIGATION
========================================
*/
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(249, 247, 242, 0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    height: 50px;
    width: auto;
}

.site-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.main-nav ul {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 30px;
}

.main-nav a:not(.btn) {
    font-weight: 400;
    position: relative;
    color: var(--color-text); /* S'assurer de la couleur du texte normal */
}

.main-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-secondary);
    transition: width 0.3s;
}

.main-nav a:not(.btn):hover::after { width: 100%; }

/* --- Hamburger Menu (caché par défaut sur desktop) --- */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: var(--color-secondary);
}

/*
========================================
6. SECTIONS PRINCIPALES (HERO, CARTES, TARIFS, AGENDA)
========================================
*/

/* --- Hero Section --- */
.hero {
    height: calc(95vh - var(--nav-height)); /* NOUVEAU: Prend toute la hauteur de la vue moins la hauteur de la navigation */
    min-height: 500px; /* Réduit légèrement la hauteur minimale */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/hero.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white);
}

.hero-content h1 {
    font-size: 4rem;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 300;
}

/* --- Divider Image --- */
.divider-image {
    height: 600px; 
    width: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- Cards (Atouts) --- */
.card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-small);
    transition: transform 0.3s;
    border-top: 4px solid var(--color-primary);
}

.card ion-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.card:hover { transform: translateY(-5px); }

/* --- Tarifs --- */
.pricing-table {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-small);
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.price-item:last-child { border-bottom: none; }
.price { font-weight: 700; color: var(--color-primary); }

/* --- Agenda (Iframe) --- */
.calendar-wrapper {
    margin-top: 2rem;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
}

.calendar-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Style pour les Cartes Événements (différentes des Cartes Atouts) --- */
.card-event {
    padding: 30px;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
    border-bottom: 5px solid var(--color-primary); /* Bordure colorée en bas */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-event h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card-event ion-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.event-details {
    display: block;
    font-weight: 700;
    color: var(--color-secondary);
    margin-top: 10px;
    font-size: 0.95em;
}

.btn-small {
    padding: 8px 15px;
    font-size: 0.8rem;
}

/*
========================================
7. CONTACT & RÉSEAUX SOCIAUX
========================================
*/

.grid-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.contact-item {
    background-color: var(--color-white);
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-small);
}

.contact-item ion-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.contact-item h3 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--color-secondary);
}

.contact-item .text-link {
    color: var(--color-primary);
    font-weight: 700;
}
.contact-item .text-link:hover {
    color: var(--color-secondary);
}

.social-links {
    margin-top: 40px;
}

.social-links ion-icon {
    font-size: 2.5rem;
    margin: 0 15px;
    color: var(--color-secondary);
    transition: color 0.3s;
}

.social-links ion-icon:hover {
    color: var(--color-primary);
}

/*
========================================
8. FOOTER DÉTAILLÉ
========================================
*/
footer {
    background-color: var(--color-secondary);
    color: var(--color-bg-alt);
    padding: 60px 0;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    text-align: left;
}

.footer-col h3 {
    color: var(--color-white);
    font-size: 1.2rem;
    margin-bottom: 15px;
    /* Correction: enlever font-family: var(--font-body); pour rester cohérent si vous voulez la police de titre */
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 8px;
}

.footer-col a {
    color: var(--color-bg-alt);
}

.footer-col a:hover {
    color: var(--color-primary);
}

.footer-col.cta {
    text-align: center;
}

.footer-col.cta h3 {
    margin-bottom: 20px;
}

.footer-col .btn-primary {
    width: 100%;
    margin-bottom: 10px;
}

/* Surcharge du bouton dans le footer pour meilleur contraste */
footer .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

footer .btn-primary:hover {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-secondary);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
}


.mentions a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}
.copyright-mobile {
    display: none; 
    margin-top: 15px;
}

/* --- NOUVEAUX STYLES FOOTER CONTACT/SOCIAUX --- */

.social-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-footer h4 {
    color: var(--color-bg); /* Texte clair */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.social-links-footer ion-icon {
    font-size: 2.2rem; /* Taille un peu plus petite que les icônes de la section Contact */
    color: var(--color-bg-alt); /* Couleur claire par défaut */
    margin: 0 8px;
    transition: color 0.3s;
}

.social-links-footer ion-icon:hover {
    color: var(--color-primary); /* Brun doux au survol */
}

/* Ajustement responsive du footer pour le bloc social */
@media (max-width: 768px) {
    .social-links-footer {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
}


/*
========================================
9. PAGE INTERVENANTS (people.html)
========================================
*/
.intervenants-grid {
    display: grid;
    /* Grille responsive: 2 colonnes par défaut, 1 colonne sur très petit écran */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.intervenant-card {
    background-color: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    transition: transform 0.3s ease;
    border-top: 5px solid var(--color-primary); 
    display: flex;
    flex-direction: column; /* Permet à .description d'utiliser flex-grow: 1 */
    min-height: 520px;
}

.intervenant-card:hover {
    transform: translateY(-8px); 
}

.intervenant-card img {
    width: 150px; 
    height: 150px;
    border-radius: 50%; 
    object-fit: cover; 
    margin: 0 auto 1.5rem; /* Centrer l'image */
    border: 3px solid var(--color-bg-alt); 
    box-shadow: var(--shadow-small);
}

.intervenant-card h3 {
    font-size: 1.8rem;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.intervenant-card .specialty {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    font-style: italic;
}

.intervenant-card .description {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--color-text);
    flex-grow: 1; /* Assure que toutes les cartes ont la même hauteur */
}

.intervenant-links {
    display: flex;
    justify-content: center;
    gap: 20px; 
    margin-top: auto; /* Pousse les liens vers le bas de la carte */
}

.intervenant-links ion-icon {
    font-size: 1.8rem; 
    color: var(--color-secondary); 
    transition: color 0.3s ease;
}

.intervenant-links ion-icon:hover {
    color: var(--color-primary); 
}

/* --- 10. GALERIE D'IMAGES (Grille) --- */

.grid-galerie {
    /* La grille affichera 2 colonnes sur mobile et 4 colonnes sur desktop */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px; /* Limiter la largeur totale */
    margin: 0 auto;
}

.grid-galerie figure {
    margin: 0; /* Réinitialiser la marge par défaut de la balise figure */
    overflow: hidden; /* Assure que rien ne dépasse du cadre */
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
}

.grid-galerie img {
    display: block;
    width: 100%;
    /* On donne une hauteur fixe pour que toutes les images soient bien alignées,
       ou on laisse 'auto' si le ratio est le même pour toutes les images.
       Je suggère une hauteur pour l'uniformité visuelle : */
    height: 250px; 
    object-fit: cover; /* Recadre l'image pour qu'elle remplisse l'espace */
    transition: transform 0.5s ease-in-out;
}

/* Effet de zoom léger au survol (optionnel, pour rendre la section interactive) */
.grid-galerie img:hover {
    transform: scale(1.15);
}

/* Sur mobile, on affiche les images sur toute la largeur */
@media (max-width: 600px) {
    .grid-galerie {
        /* On passe à 2 colonnes maximum sur les petits écrans */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    }
}

/*
========================================
10. RESPONSIVE & MOBILE NAVIGATION
========================================
*/
@media (max-width: 992px) {
    .grid-2 { 
        gap: 3rem; /* Réduire l'espace entre les colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }
    
    .hero h1 { 
        font-size: 2.4rem;
    }
    
    h2 { 
        font-size: 2rem; 
    }
    
    /* Activer le burger */
    .hamburger {
        display: block; 
    }

    /* Animation du burger en croix quand actif */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Menu Nav en plein écran */
    .main-nav {
        position: fixed;
        left: -100%;
        top: var(--nav-height);
        flex-direction: column;
        background-color: var(--color-bg);
        width: 100%;
        height: calc(100vh - var(--nav-height));
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0,0,0,0.05);
        overflow-y: auto; /* Permet de scroller si le menu est très long */
    }

    .main-nav.active {
        left: 0;
    }

    .main-nav ul {
        flex-direction: column;
        padding-top: 2rem;
        gap: 2rem;
    }

    .main-nav a:not(.btn) {
        font-size: 1.5rem;
    }

    .main-nav a:not(.btn)::after {
        display: none;
    }
    
    .main-nav li:last-child {
        margin-top: 20px;
    }
    
    .main-nav .btn {
        width: 90%;
        max-width: 350px;
        font-size: 1.1rem;
        padding: 18px 24px;
    }
    
    .hero-content .btn-primary {
        width: 90%; 
        max-width: 300px;
    }

    .grid-2 { 
        grid-template-columns: 1fr; 
        gap: 2rem; 
    }
    
    .pricing-table { padding: 1rem; }
    
    /* Responsive Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-col {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .footer-col:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    .footer-col.about {
        order: 3;
    }
    .footer-col.cta {
        order: 1;
    }
    .footer-col.links {
        order: 2;
    }
    .copyright-mobile {
        display: block;
    }
    
    .grid-contact {
        gap: 20px;
    }
    
    .intervenants-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 2rem;
    }

    .intervenant-card {
        padding: 1.5rem;
    }
}

/* --- 13. PAGE FAQ (Accordéon Sémantique) --- */

.faq-item {
    background: var(--color-white);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-small);
    overflow: hidden; /* Important pour l'animation */
    border-left: 5px solid transparent; /* Bordure invisible par défaut */
    transition: all 0.3s ease;
}

/* Style de la question (visible tout le temps) */
.faq-item summary {
    padding: 20px;
    cursor: pointer;
    font-weight: 700;
    color: var(--color-secondary);
    list-style: none; /* Enlève le petit triangle par défaut des navigateurs */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

/* Enlever le marqueur par défaut sur certains navigateurs (Safari/Chrome) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Icône de la flèche */
.faq-item summary ion-icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

/* Style du contenu (réponse) */
.faq-content {
    padding: 0 20px 20px 20px;
    color: var(--color-text);
    line-height: 1.6;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.faq-content ul {
    margin-left: 20px;
    margin-top: 10px;
}

/* --- État Ouvert (Quand on clique) --- */

/* Rotation de la flèche */
.faq-item[open] summary ion-icon {
    transform: rotate(180deg);
}

/* Ajout d'une bordure colorée quand ouvert */
.faq-item[open] {
    border-left-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
}