/* ===== BODY - PAGE CENTRE DE FORMATION ===== */
body {
    padding-top: 70px;
}

/* ===== HEADER MASIA =====*/
.masia-header {
    background-color: #002d6f;      
    color: white;                 
    padding: 5rem 2rem;             
    text-align: center;             
}

.masia-header h1 {
    font-size: 3rem;
    font-weight: 900;               /* Texte en gras */
}

.masia-header p {
    font-size: 1.3rem;              
    color: #ccc;                  
    font-weight: 300;              
}

/* ===== SECTION INTRODUCTION =====*/
.masia-intro {
    margin-top: 6rem;                              
}

.intro-content {
    display: flex;                 
    gap: 3rem;                      /* Espace entre l'image et le texte */
    align-items: center;           
}

.intro-image {
    max-width: 400px;               /* Largeur maximale */
    border-radius: 12px;            /* Coins arrondis */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);  /* Ombre sous l'image (Repris de internet)*/
}

.intro-text h2 {
    color: #002d6f;               
    font-size: 2rem;                
    margin-bottom: 1.5rem;          
    font-weight: 700;               /* Texte semi-gras */
}

.intro-text p {
    color: #555;                  
    font-size: 1.1rem;              
    margin-bottom: 1.5rem;          /* Espace entre les paragraphes */
}

/* ===== SECTION PHILOSOPHIE =====*/
.masia-philosophy {
    padding-top: 4rem;            
}

.masia-philosophy h2 {
    text-align: center;             
    color: #002d6f;               
    font-size: 2.5rem;              
    margin-bottom: 2rem;
}

/* ===== GRILLE PHILOSOPHIE =====*/
.philosophy-grid {
    display: grid;                  /* Système de grille */
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    gap: 2rem;                     
}

.philosophy-item {
    padding: 2rem;                  
    border-radius: 12px;            /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Ombre légère (Repris de internet) */
    text-align: center;             
}

/* Effet au survol */
.philosophy-item:hover {
    transform: translateY(-5px);    /* Soulève légèrement la carte (Repris de internet) */
}

.philosophy-item h3 {
    color: #ffd54f;               
    font-size: 1.3rem;             
    margin-bottom: 1rem;            
}

.philosophy-item p {
    color: #666;                    
    font-size: 1rem;             
}

/* ===== SECTION LÉGENDES =====*/
.masia-legends {
    padding: 4rem 0;                
}

.masia-legends h2 {
    text-align: center;             
    color: #002d6f;                
    font-size: 2.5rem;              
    margin-bottom: 2rem;            
}

/* ===== GRILLE LÉGENDES ===== */
.legends-grid {
    display: grid;                 /* Système de grille */
    grid-template-columns: repeat(4, 1fr);  /* 4 colonnes égales */
    gap: 2rem;                      
}

.legend-card {
    background: #f8f9fa;            
    border-radius: 12px;            
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Ombre légère */
    text-align: center;             
}

/* Effet au survol */
.legend-card:hover {
    transform: translateY(-5px);    /* Soulève la carte */
}

.legend-card img {
    width: 100%;                    
    height: 200px;                  /* Hauteur fixe */
    object-fit: cover;              /* Remplit l'espace sans déformation */
}

.legend-card h3 {
    color: #002d6f;               
    font-size: 1.3rem;              
    margin-top: 1rem;
    margin-bottom: 0.5rem;          
    font-weight: 700;               
}

.legend-card p {
    color: #666;                  
    font-size: 0.95rem;             
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;           
}

/* ===== MEDIAQUERIES - TABLETTE =====
   À partir de 1024px, passe à 2 colonnes */
@media (max-width: 1024px) {
    .philosophy-grid, .legends-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
    }
    .intro-content {
        gap: 2rem;                  /* Espace réduit */
    }
    .masia-header h1 {
        font-size: 2.6rem;          /* Titre réduit */
    }
}

/* ===== RESPONSIVE - MOBILE =====
   À partir de 768px, adapte le layout */
@media (max-width: 768px) {
    .container {
        padding-right: 1rem;
        padding-left: 1rem;            /* Padding réduit */
    }
    .intro-content {
        flex-direction: column;     /* Image et texte en colonne */
        gap: 2rem;                  /* Espace vertical */
    }
    .intro-image {
        max-width: 100%;            /* Image remplit la largeur */
    }
    .intro-text h2 {
        font-size: 1.8rem;          /* Titre réduit */
    }
    .intro-text p {
        font-size: 1rem;            /* Texte réduit */
    }
    .masia-philosophy h2, .masia-legends h2 {
        font-size: 2rem;            /* Titres plus petits */
    }
    .philosophy-item, .legend-card {
        padding: 1.5rem;            /* Padding réduit */
    }
}

/* ===== MEDIAQUERIES - MOBILE =====
   À partir de 480px, une seule colonne */
@media (max-width: 480px) {
    .masia-header {
        padding-top: 3rem;
        padding-right: 1rem;
        padding-bottom: 3rem;
        padding-left: 1rem;         /* Padding réduit */
    }
    .masia-header h1 {
        font-size: 2rem;            /* Titre très réduit */
    }
    .masia-header p {
        font-size: 1rem;            /* Texte réduit */
    }
    .masia-intro, .masia-philosophy, .masia-legends {
        padding: 2rem 0;            /* Padding réduit */
    }
    .intro-text h2 {
        font-size: 1.6rem;
    }
    .intro-text p {
        font-size: 0.95rem;
    }
    .philosophy-item h3, .legend-card h3 {
        font-size: 1.2rem;          /* Titres réduits */
    }
    .philosophy-item p, .legend-card p {
        font-size: 0.9rem;          /* Texte très réduit */
    }
    .philosophy-grid, .legends-grid {
        grid-template-columns: 1fr; /* 1 seule colonne */
        gap: 1.5rem;                /* Espace réduit */
    }
}