Actualités – Équipe Spéciale
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px 15px;
line-height: 1.6;
}
.page-header {
text-align: center;
margin-bottom: 40px;
padding: 0 20px;
}
.page-title {
font-size: 4em;
font-weight: 900;
background: linear-gradient(135deg, #fff, #ffeaa7, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
letter-spacing: -1px;
}
.newsletters-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
gap: 30px;
}
.newsletter-article {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.newsletter-article.collapsed {
max-height: 180px;
overflow: hidden;
}
.newsletter-article.collapsed .newsletter-content {
display: none;
}
.toggle-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 14px;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10;
font-weight: 800;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.toggle-btn:hover {
background: white;
transform: scale(1.1) rotate(90deg);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.newsletter-header {
background: linear-gradient(135deg,
#ff6b6b 0%,
#ee5a24 25%,
#ff8e53 50%,
#ffa726 75%,
#ffd93d 100%);
color: white;
padding: 40px 30px;
text-align: center;
position: relative;
cursor: pointer;
overflow: hidden;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.newsletter-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg,
#ffd700,
#ff6b6b,
#ee5a24,
#ff8e53,
#ffd700);
}
.newsletter-date {
background: rgba(255, 255, 255, 0.25);
padding: 12px 28px;
border-radius: 40px;
display: inline-block;
margin-bottom: 15px;
font-weight: 700;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 1.1em;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.newsletter-title {
font-size: 2.2em;
font-weight: 900;
margin-bottom: 10px;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #fff, #ffeaa7, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
text-align: center;
line-height: 1.2;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.newsletter-subtitle {
font-size: 1.2em;
opacity: 0.95;
font-weight: 500;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
text-align: center;
margin-top: 5px;
}
.newsletter-content {
padding: 40px 30px;
}
.content-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 40px;
align-items: start;
}
.text-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.content-section {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
padding: 30px;
border-radius: 20px;
border-left: 5px solid #ff6b6b;
box-shadow:
0 6px 25px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.content-section p {
margin-bottom: 0;
font-size: 1.1em;
color: #2d3436;
line-height: 1.7;
font-weight: 450;
}
.events-section {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
padding: 35px;
border-radius: 20px;
margin-top: 20px;
box-shadow:
0 6px 25px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.events-title {
font-size: 1.8em;
font-weight: 800;
color: #2d3436;
margin-bottom: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
background: linear-gradient(135deg, #2d3436, #636e72);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.events-title::before {
content: '🗓️';
font-size: 1.3em;
}
.events-grid {
display: grid;
gap: 25px;
}
.event-card {
background: white;
border-radius: 18px;
padding: 30px;
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.event-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #00b894, #00a085, #00b894);
}
.event-card.telethon::before {
background: linear-gradient(90deg, #74b9ff, #0984e3, #74b9ff);
}
.event-date {
font-size: 1.1em;
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
color: #00b894;
letter-spacing: 0.5px;
}
.event-card.telethon .event-date {
color: #74b9ff;
}
.event-title {
font-size: 1.5em;
font-weight: 800;
margin-bottom: 15px;
color: #2d3436;
background: linear-gradient(135deg, #2d3436, #636e72);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.event-description {
color: #636e72;
line-height: 1.7;
font-size: 1.05em;
font-weight: 450;
}
.affiche-section {
position: sticky;
top: 30px;
}
.affiche-container {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 20px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.affiche-title {
font-size: 1.4em;
font-weight: 800;
color: #2d3436;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #2d3436, #636e72);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.affiche-image {
width: 100%;
border-radius: 16px;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.3);
}
.links-section {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-top: 40px;
}
.btn {
padding: 18px 30px;
border-radius: 16px;
text-decoration: none;
font-weight: 700;
text-align: center;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 1.1em;
border: none;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transition: left 0.6s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, #00b894, #00a085, #00b894);
color: white;
box-shadow:
0 10px 30px rgba(0, 184, 148, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, #00a085, #008f74, #00a085);
transform: translateY(-4px) scale(1.02);
box-shadow:
0 15px 40px rgba(0, 184, 148, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.fire-emoji {
animation: pulse 1.5s ease-in-out infinite;
display: inline-block;
}
@keyframes pulse {
0%, 100% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(1.2) rotate(5deg);
}
75% {
transform: scale(1.1) rotate(-5deg);
}
}
/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
.content-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.affiche-section {
position: static;
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
body {
padding: 15px 10px;
}
.newsletter-title {
font-size: 1.8em;
}
.newsletter-content {
padding: 30px 20px;
}
.content-grid {
gap: 30px;
}
.toggle-btn {
top: 15px;
right: 15px;
width: 42px;
height: 42px;
font-size: 1.2em;
}
.newsletter-header {
padding: 30px 20px;
min-height: 160px;
}
.newsletter-date {
padding: 10px 20px;
font-size: 1em;
}
.newsletter-subtitle {
font-size: 1.1em;
}
.content-section,
.events-section {
padding: 25px;
}
.events-title {
font-size: 1.5em;
margin-bottom: 25px;
}
.event-card {
padding: 25px;
}
.event-title {
font-size: 1.3em;
}
.affiche-container {
padding: 20px;
}
.affiche-title {
font-size: 1.2em;
}
.btn {
padding: 16px 25px;
font-size: 1em;
}
}
@media (max-width: 480px) {
.newsletter-title {
font-size: 1.5em;
}
.newsletter-header {
padding: 25px 15px;
min-height: 140px;
}
.content-section,
.events-section {
padding: 20px;
}
.event-card {
padding: 20px;
}
.events-title {
font-size: 1.3em;
flex-direction: column;
gap: 10px;
}
.affiche-container {
padding: 15px;
}
.newsletter-date {
font-size: 0.9em;
padding: 8px 16px;
}
.newsletter-subtitle {
font-size: 1em;
}
}
+
Ce dimanche 2 novembre, notre équipe s’est rendue dans la Loire, à L’Horme, pour y présenter son show (avec quelques nouveautés qui ont fait vibrer le public 🔥), peut-être étiez-vous là pour donner de la voix dans cette salle en feu ?
Le mois de novembre sera également marqué par notre assemblée générale. Elle se tiendra le samedi 22 novembre et s’en suivra notre traditionnel arbre de Noël ! 🎄
Événements à venir
🗓️ Samedi 22 novembre
Assemblée Générale
Elle se tiendra le samedi 22 novembre et s’en suivra notre traditionnel arbre de Noël ! 🎄
📅 Dimanche 11 janvier 2026
Show à Saint-Priest
Et pour bien commencer la nouvelle année, notez dès maintenant la date du dimanche 11 janvier 2026 :
📍 Prochain show à Saint-Priest !
Les bénéfices de ce spectacle seront d’ailleurs reversés à l’AFM-Téléthon… De quoi contribuer à la recherche contre les maladies rares.
📋 Affiche du spectacle
function toggleNewsletter(yearMonth) {
const article = document.getElementById(`newsletter-${yearMonth}`);
const button = article.querySelector('.toggle-btn');
if (article.classList.contains('collapsed')) {
article.classList.remove('collapsed');
button.textContent = '−';
} else {
article.classList.add('collapsed');
button.textContent = '+';
}
}
// Fermé par défaut au chargement
document.addEventListener('DOMContentLoaded', function() {
const article = document.getElementById('newsletter-2025-11');
article.classList.add('collapsed');
const button = article.querySelector('.toggle-btn');
button.textContent = '+';
});