/* Variables de couleurs */ :root { --primary-blue: #2b6cb0; --secondary-blue: #3182ce; --light-blue: #ebf8ff; --primary-green: #38a169; --secondary-green: #48bb78; --light-green: #f0fff4; --white: #ffffff; --light-gray: #f7fafc; --medium-gray: #e2e8f0; --dark-gray: #2d3748; --text-color: #2d3748; --header-bg: #ffffff; --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08); --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 15px 40px rgba(0, 0, 0, 0.2); /* --- Ajout de variables d'espacement pour plus de cohérence --- */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-2xl: 4rem; /* 64px */ /* --- Rayons des bordures (si non définies) --- */ --border-radius-sm: 0.25rem; /* 4px */ --border-radius-md: 0.5rem; /* 8px */ --border-radius-lg: 0.75rem; /* 12px */ --border-radius-xl: 1rem; /* 16px */ } /* Reset et base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--white); color: var(--text-color); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 3rem; } /* --- Images Slider with Overlay - Using IDs for specificity --- */ #hero-slider { position: relative; width: 100%; height: 80vh; overflow: hidden; padding: 0; } #hero-carousel-wrapper { position: relative; width: 100%; height: 100%; /* Inherit height from parent */ } #hero-carousel { width: 100%; height: 100%; } #hero-carousel img { display: block; width: 100%; height: auto; object-fit: cover; /* Ensure image covers the area without distortion */ } #hero-carousel img { filter: brightness(0.7) blur(0.5px); transition: filter 0.4s; } #hero-carousel img:hover { filter: brightness(0.85) blur(0px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } #hero-slogan, #hero-sub-slogan, .hero-btn { animation: fadeInUp 1s both; } #hero-sub-slogan { animation-delay: 0.3s; } .hero-btn { animation-delay: 0.6s; } @media (max-width: 600px) { #hero-slider { height: 80vh; min-height: 320px; } #hero-slogan { font-size: 1.4rem; } #hero-sub-slogan { font-size: 1rem; } } #hero-overlay { color: white; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Dégradé subtil pour l'overlay */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white); padding: var(--spacing-lg); z-index: 10; /* Ensure overlay is above the image */ } .hero-btn { display: inline-block; margin-top: 2rem; padding: 1rem 2.5rem; font-size: 1.2rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-blue), var(--primary-green)); border: none; border-radius: 50px; box-shadow: 0 4px 16px rgba(43, 108, 176, 0.18); transition: background 0.3s, transform 0.2s; text-decoration: none; } .hero-btn:hover { background: linear-gradient(135deg, var(--secondary-blue), var(--secondary-green)); transform: translateY(-3px) scale(1.04); } #hero-slogan { color: whitesmoke; font-size: 3.2rem; font-weight: 700; margin-bottom: var(--spacing-sm); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); line-height: 1.1; font-family: 'Poppins', sans-serif; /* Make sure Poppins is imported in your HTML */ letter-spacing: 0.05em; } #hero-sub-slogan { font-size: 1.6rem; font-weight: 400; margin-bottom: var(--spacing-xl); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); line-height: 1.5; max-width: 800px; } /* --- Responsive adjustments for the slider overlay --- */ @media (max-width: 768px) { #hero-overlay,#hero-carousel img{ height: 100%; } #hero-slogan { font-size: 2.7rem; } #hero-sub-slogan { font-size: 1.3rem; } } @media (max-width: 480px) { #hero-slogan { font-size: 2.2rem; } #hero-sub-slogan { font-size: 1.1rem; padding: 0 var(--spacing-sm); } } .container { width: 100%; max-width: 1200px; margin: 0 auto; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } .nav-wrapper { display: flex; align-items: center; gap: 2.5rem; } .main-nav { display: flex; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2.5rem; } .nav-links li a { text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 1.05rem; position: relative; padding: 0.5rem 0; transition: color 0.3s ease; } .nav-links li a:hover, .nav-links li a:focus { color: var(--primary-blue); outline: none; } .nav-links li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--primary-blue); transition: width 0.3s ease; } .nav-links li a:hover::after, .nav-links li a:focus::after { width: 100%; } /* --- Sections communes --- */ section { padding: var(--spacing-2xl) 0; } .section-header { text-align: center; margin-bottom: var(--spacing-xl); } h1 { font-size: 3.5rem; color: var(--text-color); margin-bottom: var(--spacing-sm); line-height: 1.2; } h2 { font-size: 2.8rem; margin-bottom: var(--spacing-md); color: var(--text-color); text-align: center; position: relative; } h2::after { content: ''; display: block; width: 90px; height: 4px; background: linear-gradient(to right, var(--primary-blue), var(--primary-green)); margin: var(--spacing-xs) auto 0; border-radius: 2px; } .section-subtitle { font-size: 1.15rem; color: #555; max-width: 800px; margin: var(--spacing-sm) auto 0; line-height: 1.6; } /* --- Hero Section --- */ .hero-section { background-image: url('https://images.unsplash.com/photo-1517400508000-dc081e7a6b8f?fit=crop&w=1400&q=80'); background-size: cover; background-position: center; color: var(--white); text-align: center; padding: 10rem 0; position: relative; z-index: 1; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } .hero-content { max-width: 900px; margin: 0 auto; padding: 0 20px; } .hero-content h1 { font-size: 3.8rem; margin-bottom: 1.5rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .hero-content p { font-size: 1.4rem; max-width: 700px; margin: 0 auto; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* --- Section Événements (Refactored for Text Overlay) --- */ .events { background-color: var(--light-gray); text-align: center; } .event-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); max-width: 1200px; margin: var(--spacing-lg) auto 0 auto; /* NOUVEAU: Ajout du défilement horizontal pour les petits écrans */ @media (max-width: 768px) { display: flex; /* Passe en flexbox pour le défilement */ overflow-x: auto; /* Active le défilement horizontal */ -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */ scroll-snap-type: x mandatory; /* Force le "snap" sur les cartes */ padding-bottom: 1rem; /* Espace pour la barre de défilement */ padding-left: var(--spacing-md); /* Un peu d'espace sur la gauche au début */ padding-right: var(--spacing-md); /* Et sur la droite à la fin */ margin-left: 0; /* Supprime la marge auto pour le flex */ margin-right: 0; } } .event-card { border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-medium); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; height: 420px; display: flex; flex-direction: column; /* La colonne permet de pousser le contenu vers le bas */ justify-content: flex-end; /* Pousse le contenu vers le bas */ border: 1px solid var(--medium-gray); /* NOUVEAU: Taille fixe pour les cartes en défilement horizontal */ @media (max-width: 768px) { flex-shrink: 0; /* Empêche la carte de rétrécir */ width: 300px; /* Largeur fixe pour les cartes individuelles */ scroll-snap-align: start; /* S'aligne au début de chaque carte */ margin-right: var(--spacing-lg); /* Espacement entre les cartes en mode scroll */ } } .event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); border-color: var(--primary-blue); } .event-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; /* Image sous le contenu et l'overlay */ } /* Dégradé pour la lisibilité du texte - Plus intense en bas */ .event-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Dégradé de noir intense en bas à transparent plus haut */ background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%); z-index: 2; /* Couche de l'overlay, entre l'image et le texte */ pointer-events: none; /* Permet aux clics de passer à travers */ } .event-card-content { position: relative; /* Reste au-dessus de l'image et de l'overlay */ z-index: 3; /* Couche du contenu */ padding: var(--spacing-md); color: var(--white); text-align: left; display: flex; /* Utilise flexbox pour empiler les éléments de contenu */ flex-direction: column; /* Empile les éléments verticalement */ /* NOUVEAU: Fond légèrement plus opaque pour une meilleure lisibilité */ } .event-date { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.98); /* Couleur plus lumineuse pour la date */ display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .event-date i { color: var(--primary-green); font-size: 1.1em; } .event-card h3 { font-size: 1.8rem; font-weight: 700; margin: 0; /* Supprime la marge par défaut du titre */ color: var(--white); line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); display: -webkit-box; -webkit-line-clamp: 2; /* Limite le titre à 2 lignes */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .event-card .event-details-btn { /* NOUVEAU: Marge-top auto pour pousser le bouton en bas du contenu textuel */ margin-top: var(--spacing-md); /* Espacement au-dessus du bouton */ align-self: flex-start; /* Aligne le bouton à gauche du bloc de texte */ background-color: var(--primary-blue); color: var(--white); border: none; padding: 0.8rem 1.8rem; border-radius: var(--border-radius-md); font-size: 0.95rem; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .event-card .event-details-btn:hover { background-color: var(--secondary-blue); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* Variables (Assurez-vous que ces variables sont définies dans votre CSS global ou un fichier de variables) */ :root { --light-gray: #f8f9fa; --medium-gray: #e9ecef; --primary-blue: #007bff; /* Exemple de couleur primaire bleue */ --secondary-blue: #0056b3; /* Exemple de couleur secondaire bleue */ --primary-green: #28a745; /* Exemple de couleur primaire verte */ --white: #ffffff; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --border-radius-md: 0.5rem; --border-radius-lg: 0.75rem; --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.2); } /* --- Section Activités (Refactored for Text Overlay) --- */ .activities { background-color: var(--light-blue); padding: 0 0; text-align: center; } .activities p { max-width: 800px; font-size: 1.15rem; color: #555; } .activities-grid { display: grid; /* Adjust minmax to make cards slightly wider */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-xl); max-width: 1200px; margin: var(--spacing-lg) auto 0 auto; margin-bottom: 3rem; } .activity-card { border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-medium); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; /* Essential for absolute positioning of children */ height: 420px; /* Slightly increased height for consistency */ display: flex; /* Ensures content fills height */ flex-direction: column; /* Stacks content */ justify-content: flex-end; /* Pushes content to the bottom */ border: 1px solid var(--medium-gray); } .activity-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); border-color: var(--primary-blue); } .activity-image { /* Now used as background-image for the entire card */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; /* Image layer */ } /* Gradient Overlay for text readability - SLIGHTLY DARKER */ .activity-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Make the gradient start darker and extend further up */ background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%); z-index: 2; /* Overlay layer */ pointer-events: none; /* Allow clicks to pass through */ } .activity-content { position: relative; z-index: 3; /* Content layer on top */ padding: var(--spacing-md); /* Increased padding */ color: var(--white); /* White text for contrast */ text-align: left; display: flex; flex-direction: column; gap: var(--spacing-xs); flex-grow: 1; justify-content: flex-end; /* Ensures content is at the bottom */ /* NEW: Add a semi-transparent dark background directly to the content area */ background-color: rgba(0, 0, 0, 0.2); /* Adjust opacity as needed */ padding-bottom: calc(var(--spacing-md) + 5px); /* Add a little extra padding at the bottom for visual balance */ } .activity-card h3 { font-size: 1.8rem; /* Slightly larger title */ font-weight: 700; /* Bolder title */ margin-top: 0; margin-bottom: var(--spacing-xs); color: var(--white); line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); /* Stronger, slightly larger text shadow */ display: -webkit-box; -webkit-line-clamp: 2; /* Limit title to 2 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .activity-card .activity-date { font-size: 1rem; /* Slightly larger date font */ font-weight: 500; color: rgba(255, 255, 255, 0.95); display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Stronger text shadow */ } .activity-card .activity-date i { color: var(--primary-green); font-size: 1.1em; } .activity-card p { font-size: 1.05rem; /* Slightly larger description */ color: rgba(255, 255, 255, 0.85); flex-grow: 0; text-align: left; line-height: 1.5; /* Improved line height */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Stronger text shadow */ display: -webkit-box; -webkit-line-clamp: 3; /* Limit text to 3 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .activity-features { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); color: rgba(255, 255, 255, 0.95); /* Brighter white for features */ text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Stronger text shadow */ } .activity-features li { margin-bottom: var(--spacing-xs); font-size: 0.95rem; /* Slightly smaller for detailed features */ font-weight: 400; /* Regular weight */ display: flex; align-items: flex-start; gap: 0.6rem; } .activity-features li i { color: var(--primary-green); font-size: 1.1em; flex-shrink: 0; padding-top: 3px; } .activity-btn { align-self: flex-start; margin-top: auto; background-color: var(--primary-blue); color: var(--white); border: none; padding: 0.8rem 1.8rem; border-radius: var(--border-radius-md); font-size: 0.95rem; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .activity-btn:hover { background-color: var(--secondary-blue); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* Highlight card (ensure compatibility with overlay) */ .highlight-card { border: 2px solid var(--primary-blue); /* Still works */ position: relative; } .activity-badge { position: absolute; top: 15px; right: 15px; background-color: var(--primary-green); color: var(--white); padding: 0.4rem 0.8rem; border-radius: 5px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; z-index: 10; /* Ensure badge is on top */ } /* --- Section À propos --- */ .about-mini { background-color: var(--light-green); text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); } .about-mini p { max-width: 800px; margin: 0 auto var(--spacing-xl); font-size: 1.15rem; color: #555; } /* --- Section Partenaires --- (Kept original structure for clarity of logos) */ .partners-section { background-color: #f7fafc; padding: var(--spacing-2xl) 0; position: relative; } .partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Slightly wider minmax */ gap: 30px; } .partner-card { display: block; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; text-decoration: none; color: inherit; border: 1px solid #e2e8f0; height: 100%; } .partner-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); border-color: var(--primary-blue); } .card-logo { height: 150px; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; } .card-logo img { max-height: 100%; max-width: 100%; object-fit: contain; opacity: 0.8; transition: all 0.3s ease; } .partner-card:hover .card-logo img { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } .card-content { padding: 25px; text-align: center; } .card-content h3 { color: var(--primary-blue); font-size: 1.35rem; /* Slightly larger title */ margin-bottom: 10px; font-weight: 600; } .card-content p { color: #4a5568; font-size: 1rem; /* Slightly larger paragraph */ line-height: 1.6; /* Improved line height */ margin-bottom: 15px; } .visit-link { display: inline-flex; align-items: center; color: var(--secondary-blue); font-size: 0.95rem; /* Slightly larger link text */ font-weight: 500; transition: all 0.2s ease; } .partner-card:hover .visit-link { color: var(--primary-blue); } .visit-link i { margin-left: 5px; font-size: 0.8rem; transition: transform 0.2s ease; } .partner-card:hover .visit-link i { transform: translateX(3px); } .contact-form-container { background-color: var(--light-gray); padding: var(--spacing-2xl) var(--spacing-lg); display: flex; justify-content: center; align-items: center; } .contact-form { background-color: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); padding: var(--spacing-xl); max-width: 600px; width: 100%; text-align: center; } .contact-form h3 { font-size: 2rem; color: var(--primary-blue); margin-bottom: var(--spacing-lg); font-weight: 700; } .form-group { margin-bottom: var(--spacing-md); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--medium-gray); border-radius: var(--border-radius-md); font-size: 1rem; color: var(--text-color); background-color: var(--light-gray); /* Slightly tinted background */ transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.2); /* Soft blue glow */ outline: none; background-color: var(--white); /* White background on focus */ } .contact-form textarea { resize: vertical; /* Allow vertical resizing only */ min-height: 120px; } .submit-btn { display: inline-block; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600; color: var(--white); background: linear-gradient(135deg, var(--primary-blue), var(--primary-green)); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(56, 161, 105, 0.3); } /* Hover : élévation + ombre */ .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(56, 161, 105, 0.5); } /* --- Section Carte --- */ .section-block#carte { padding: var(--spacing-2xl) 0; background-color: var(--white); /* Consistent background */ text-align: center; } .map-container { width: 90%; max-width: 900px; /* Adjust max-width for the map */ height: 450px; /* Fixed height for the map */ margin: var(--spacing-xl) auto 0; border-radius: var(--border-radius-lg); overflow: hidden; /* Ensures the iframe respects border-radius */ box-shadow: var(--shadow-medium); /* Add shadow to the map container */ } .map-container iframe { width: 100%; height: 100%; border: 0; /* Remove default iframe border */ } .adresse-association { text-align: center; margin-top: 15px; font-size: 1.05rem; color: var(--dark-gray); } /* --- Footer --- */ footer { background-color: var(--dark-gray); color: var(--white); padding: 2rem 0; text-align: center; } .footer-section a { color: var(--white); font-size: 1.5rem; margin: 0 0.5rem; transition: color 0.3s ease; } .footer-section a:hover { color: var(--secondary-green); } .footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Section Contact */ .footer-section { background-color: var(--dark-gray); color: var(--white); padding: 3rem 0; text-align: center; } .footer-section h3 { margin-bottom: 1rem; color: var(--white); } .footer-section p { margin-bottom: 0.5rem; } .footer-section i { margin-right: 0.5rem; color: var(--secondary-green); } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .partners-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; } } @media (max-width: 768px) { body { padding-top: 6rem; } .header-container { height: auto; min-height: 5rem; } .main-nav { position: fixed; top: 0; right: -100%; width: 85%; max-width: 320px; height: 100vh; background-color: var(--white); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15); transition: right 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); padding-top: 6rem; z-index: 999; overflow-y: auto; } .main-nav.active { right: 0; } .nav-links { flex-direction: column; padding: 0 var(--spacing-lg); gap: 1.8rem; align-items: flex-start; } .nav-links li { width: 100%; } .nav-links li a { font-size: 1.3rem; color: var(--text-color); padding: 0.8rem 0; width: 100%; } .nav-links li a:hover, .nav-links li a:focus { color: var(--primary-blue); } .nav-links li a::after { height: 2px; } .nav-wrapper { gap: 1.5rem; } section { padding: var(--spacing-xl) 0; } .hero-content h1 { font-size: 2.8rem; } .hero-content p { font-size: 1.1rem; } h2 { font-size: 2.2rem; margin-bottom: var(--spacing-sm); } h2::after { width: 70px; margin: 0.6rem auto 0; } .section-subtitle, .activities p, .about-mini p { font-size: 1rem; } /* --- Horizontal Scrolling for Cards --- */ .event-cards, .activities-grid, .partners-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 10px; padding-left: var(--spacing-md); padding-right: var(--spacing-md); gap: 1rem; max-width: none; margin-left: 0; margin-right: 0; } /* Hide scrollbar for a cleaner look */ .event-cards::-webkit-scrollbar, .activities-grid::-webkit-scrollbar, .partners-grid::-webkit-scrollbar { display: none; } .event-cards, .activities-grid, .partners-grid { scrollbar-width: none; } /* Ensure individual cards within these containers are sized for mobile swipe */ .event-card, .activity-card { flex: 0 0 90%; /* Base width 90% for swiping */ max-width: 380px; /* Slightly increased max-width for content */ scroll-snap-align: start; min-height: 400px; /* Adjusted height for mobile */ height: 400px; /* Fixed height for overlay cards */ } .partner-card { /* Partners kept original structure, but still responsive */ flex: 0 0 90%; max-width: 350px; scroll-snap-align: start; min-height: 300px; /* Adjust if needed for partner cards */ } /* Adjustments for the 'En savoir plus' button below activities on mobile */ .activities .btn-section { display: block; margin-left: 3em; margin-right: 3em; text-align: center; padding: auto; } /* CARD-SPECIFIC HEIGHT CONTROLS FOR 768px (for overlay cards) */ /* Images are now background for activity-card, or absolute for event-card, so their size is controlled by the card's height directly */ .partner-card .card-logo { height: 120px; padding: 15px; } .partner-card .card-content { padding: var(--spacing-sm); } .partner-card .card-content h3 { font-size: 1.2rem; } .partner-card .card-content p { font-size: 0.9rem; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .partner-card .visit-link { font-size: 0.85rem; } /* Overlay Card Specific Adjustments */ .event-card-content, .activity-content { padding: var(--spacing-sm); gap: var(--spacing-xs); } .event-card h3, .activity-card h3 { font-size: 1.6rem; /* Slightly smaller titles on mobile */ margin-bottom: var(--spacing-xs); line-height: 1.2; -webkit-line-clamp: 2; /* Limit title to 2 lines */ } .event-card .event-date, .activity-card .activity-date { font-size: 0.9rem; /* Smaller date font on mobile */ margin-bottom: var(--spacing-xs); } .event-card p, .activity-card p { font-size: 0.95rem; /* Slightly smaller description */ margin-bottom: var(--spacing-sm); line-height: 1.4; -webkit-line-clamp: 3; /* Limit description to 3 lines */ } .activity-features li { font-size: 0.9rem; /* Smaller for detailed features on mobile */ margin-bottom: var(--spacing-xs); gap: 0.5rem; } .event-card .event-details-btn, .activity-btn { padding: 0.7rem 1.5rem; font-size: 0.85rem; } /* Contact Form Mobile Adjustments */ .contact-form-container { padding: var(--spacing-lg) var(--spacing-sm); } .contact-form { padding: var(--spacing-lg); } .contact-form h3 { font-size: 1.8rem; } .submit-btn { padding: 0.9rem 2rem; font-size: 1rem; } .footer-section { margin-bottom: var(--spacing-lg); } .footer-section h3 { font-size: 1.6rem; } .footer-social-links a { font-size: 1.5rem; } #carte.section-block { padding: var(--spacing-xl) 0; } .map-container { width: 95%; height: 350px; margin-top: var(--spacing-lg); } } /* Even smaller screens (e.g., iPhone SE) */ @media (max-width: 480px) { .logo a img { height: 50px; width: 50px; } .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: 1rem; } h2 { font-size: 1.8rem; } .section-subtitle { font-size: 0.95rem; } .nav-links li a { font-size: 1.15rem; } .main-nav { width: 100%; max-width: none; } /* CARD-SPECIFIC HEIGHT CONTROLS FOR 480px (for overlay cards) */ .event-card, .activity-card { flex: 0 0 95%; /* Make cards almost full width */ max-width: none; min-height: 350px; /* Adjusted height for tiny screens */ height: 350px; } .partner-card { flex: 0 0 95%; max-width: none; min-height: 280px; /* Adjust if needed for partner cards */ } /* Overlay Card Specific Adjustments */ .event-card-content, .activity-content { padding: var(--spacing-sm); /* Slightly more padding for very small screens */ gap: 0.4rem; } .event-card h3, .activity-card h3 { font-size: 1.4rem; /* Smaller titles on tiny screens */ margin-bottom: 0.3rem; -webkit-line-clamp: 2; /* Limit title to 2 lines */ } .event-card .event-date, .activity-card .activity-date { font-size: 0.85rem; margin-bottom: 0.6rem; } .event-card p, .activity-card p { font-size: 0.9rem; margin-bottom: var(--spacing-sm); line-height: 1.4; -webkit-line-clamp: 3; /* Limit description to 3 lines */ } .activity-features li { font-size: 0.85rem; margin-bottom: 0.4rem; } .event-card .event-details-btn, .activity-btn { padding: 0.6rem 1.4rem; font-size: 0.85rem; } .partner-card .card-logo { height: 100px; padding: 10px; } .partner-card .card-content h3 { font-size: 1.1rem; } .partner-card .card-content p { font-size: 0.85rem; -webkit-line-clamp: 2; } .map-container { height: 280px; border-radius: var(--border-radius-md); } /* Further reduce padding for contact form on very small screens */ .contact-form { padding: var(--spacing-md); } .contact-form h3 { font-size: 1.6rem; } .submit-btn { padding: 0.8rem 1.8rem; font-size: 0.9rem; } } /* bouton */ .btn-section { display: inline-block; padding: 12px 25px; font-size: 1.1rem; font-weight: 500; color: var(--white); text-decoration: none; border: none; border-radius: 50px; background: linear-gradient(135deg, var(--primary-blue), var(--primary-green)); position: relative; overflow: hidden; z-index: 1; transition: all 0.4s ease; box-shadow: 0 4px 10px rgba(56, 161, 105, 0.3); } .btn-section::before { display: none; } .btn-section:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(56, 161, 105, 0.5); } .btn-section.active { font-weight: 600; box-shadow: 0 6px 20px rgba(56, 161, 105, 0.6); } /* Responsive */ @media (max-width: 576px) { .btn-section { padding: 10px 18px; font-size: 1rem; } } /* --- Section Annonce --- */ .annonce-banner { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 2rem; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); margin: 1rem auto; border-radius: 12px; max-width: 900px; animation: fadeIn 0.8s ease-out; /* Ensure children are visible by default */ min-height: 100px; /* Give it a base height even if content is hidden initially */ } .annonce-banner h3 { margin: 0; font-size: 1.2rem; color: #2f855a; display: flex; align-items: center; gap: 0.5rem; } /* Targets the paragraph element which likely holds the text content */ .annonce-banner p { font-size: 1rem; color: #2d3748; } /* Targets the video element */ .annonce-banner video { max-width: 100%; border-radius: 10px; margin-top: 0.5rem; display: block; /* Ensure video takes up space when visible */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* --- Annonce Type Specific Styles (New) --- */ /* If it's a video type announcement, hide the text content */ .annonce-banner.type-video .annonce-content-text { display: none; } /* If it's a text type announcement, hide the video element */ .annonce-banner.type-texte .annonce-content-video { display: none; } /* If it's a mixed type, both should be visible (default behavior, no specific hide rule needed) */ /* .annonce-banner.type-mixte {} */ /* General styling for content and video wrappers inside the banner (You'll need to add .annonce-content-text and .annonce-content-video wrappers in your HTML) */ .annonce-content-text, .annonce-content-video { /* You might add subtle transitions here for a smoother hide/show */ transition: opacity 0.3s ease, max-height 0.3s ease; overflow: hidden; /* Prevent content overflow during transitions */ } .annonce-content-text p { /* Specific styling for the actual text inside the banner if needed */ margin-bottom: 0; /* Adjust as per your layout */ } /* Responsive adjustments for annonce banner if needed */ @media (max-width: 768px) { .annonce-banner { padding: 1rem 1.5rem; margin: 0.5rem auto; border-radius: 8px; } .annonce-banner h3 { font-size: 1.1rem; } .annonce-banner p { font-size: 0.95rem; } } @media (max-width: 480px) { .annonce-banner { padding: 0.8rem 1rem; gap: 0.8rem; } .annonce-banner h3 { font-size: 1rem; } .annonce-banner p { font-size: 0.9rem; } }