/* ==================== EN-TÊTE DE PAGE ==================== */
	.page-header {
	    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	    color: white;
	    padding: 4rem 0 2rem;
	    text-align: center;
	    position: relative;
	    overflow: hidden;
	}

	.page-header::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><ellipse fill="url(%23a)" cx="50" cy="0" rx="50" ry="20"/></svg>') repeat-x;
	    opacity: 0.3;
	}

	.page-header h1 {
	    font-size: 3rem;
	    margin-bottom: 1rem;
	    position: relative;
	    z-index: 1;
	    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.page-header p {
	    font-size: 1.2rem;
	    opacity: 0.9;
	    position: relative;
	    z-index: 1;
	}

	/* ==================== CONTENU PRINCIPAL ==================== */
	main {
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 1rem;
	    background: white;
	    margin-top: 2rem;
	    border-radius: 10px 10px 0 0;
	    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
	}

	/* ==================== BLOCS DE LOISIRS ==================== */
	.loisir-block {
	    width: 100%;
	    background: white;
	    border-radius: 5px;
	    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	    overflow: hidden;
	    margin-bottom: 3rem;
	    transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.loisir-block:hover {
	    transform: translateY(-5px);
	    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	}

	/* Disposition des blocs */
	.loisir-block.left-image {
	    display: flex;
	    align-items: stretch;
	}

	.loisir-block.right-image {
	    display: flex;
	    flex-direction: row-reverse;
	    align-items: stretch;
	}

	/* Image dans les blocs */
	.block-image {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
	    border-radius: 15px;
	    padding: 2rem;
	}

	.block-image img {
	    width: 100%;
	    height: 250px;
	    object-fit: cover;
	    border-radius: 10px;
	}

	/* Contenu des blocs */
	.block-content {
	    flex: 1;
	    padding: 2.5rem;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}

	/* En-tête des blocs */
	.block-header {
	    display: inline-block;
	    padding: 1rem 2rem;
	    border-radius: 10px;
	    font-weight: bold;
	    font-size: 1.2rem;
	    margin-bottom: 1rem;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    text-align: center;
	    color: white;
	    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.block-header.faith { background: linear-gradient(135deg, #FFD700, #FFA500); }
        .block-header.sport { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
        .block-header.coding { background: linear-gradient(135deg, #4ECDC4, #6EDDD6); }
        .block-header.learning { background: linear-gradient(135deg, #A8E6CF, #88D8A3); }
        
        .block-header.cacao { 
	    background: linear-gradient(135deg, #5C4033, #A0522D); 
	    color: #fff;
	}
	
	/* Étiquettes de caractéristiques */
	.loisir-features {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 1rem;
	    margin: 1.5rem 0;
	}

	.feature-tag {
	    color: white;
	    padding: 0.5rem 1rem;
	    border-radius: 20px;
	    font-size: 0.9rem;
	    font-weight: 500;
	    background: linear-gradient(135deg, #667eea, #764ba2);
	}

	.feature-tag.faith {
	    background: linear-gradient(135deg, #FFD700, #FFA500);
	}

	.feature-tag.sport {
	    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
	}

	.feature-tag.coding {
	    background: linear-gradient(135deg, #4ECDC4, #6EDDD6);
	}

	/* ==================== SECTION PASSION ==================== */
	.passion-section {
	    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	    padding: 4rem 2rem;
	    text-align: center;
	    margin: 4rem 0;
	}

	.passion-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	    gap: 2rem;
	    max-width: 1200px;
	    margin: 3rem auto 0;
	}

	.passion-card {
	    background: white;
	    padding: 2rem;
	    border-radius: 15px;
	    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	    transition: transform 0.3s ease;
	}

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

	.passion-icon {
	    font-size: 3rem;
	    margin-bottom: 1rem;
	}

	.passion-card h4 {
	    color: #333;
	    margin-bottom: 1rem;
	    font-size: 1.4rem;
	}

	.passion-card p {
	    color: #666;
	    line-height: 1.6;
	}

	/* ==================== ANIMATIONS ==================== */
	.fade-in-up {
	    opacity: 0;
	    transform: translateY(30px);
	    transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.fade-in-up.visible {
	    opacity: 1;
	    transform: translateY(0);
	}

	/* ==================== RESPONSIVE ==================== */
	@media (max-width: 768px) {
	    .page-header h1 {
		font-size: 2rem;
	    }
	    
	    .loisir-block.left-image,
	    .loisir-block.right-image {
		flex-direction: column;
	    }
	    
	    .block-image {
		flex: none;
		min-height: 200px;
		margin: 1rem;
	    }
	    
	    .block-content {
		padding: 2rem;
	    }
	    
	    .loisirs-blocks {
		margin: 2rem 1rem;
	    }
	    
	    .loisir-features {
		justify-content: center;
	    }
	    
	    .passion-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	    }
	}