/* ===== STYLE COMPLET AUTONOME ===== */
:root {
--primary: #F16E00;
--primary-dark: #D86200;
--dark: #121212;
--light: #FFFFFF;
--gray: #F5F5F5;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--navbar-height: 70px;
}
body {
padding-top: var(--navbar-height);
}
.es-nav-container {
background-color: var(--light);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 0 5%;
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
}
.es-logo {
display: none;
}
.es-logo img {
height: 40px;
width: auto;
}
/* ===== VERSION DESKTOP ===== */
.es-desktop-menu {
display: flex;
gap: 10px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.es-desktop-menu > li {
position: relative;
display: flex;
align-items: center;
}
.es-desktop-link {
color: var(--dark);
text-decoration: none;
padding: 10px 15px;
transition: var(--transition);
font-weight: 500;
font-size: 0.95rem;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.es-desktop-link:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Dropdown desktop */
.es-dropdown-content {
position: absolute;
top: 100%;
left: 0;
background-color: var(--light);
min-width: 240px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
list-style: none;
padding: 5px 0;
}
.es-dropdown:hover .es-dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.es-dropdown-content a {
padding: 12px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.es-dropdown-content a:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Bouton CTA */
.es-cta-button {
background-color: var(--primary);
color: white !important;
margin-left: 10px;
padding: 10px 20px !important;
border-radius: 50px !important;
transition: var(--transition);
}
.es-cta-button:hover {
background-color: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(241, 110, 0, 0.3);
}
/* Badges */
.es-badge {
position: relative;
}
.es-badge::after {
content: "Nouveau";
position: absolute;
background-color: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
font-weight: bold;
}
.es-badge-date::after { content: "Nouvelles dates"; }
.es-badge-testimonial::after { content: "Nouveaux témoignages de spectateurs"; }
.es-badge-association::after { content: "Nouveaux témoignages de spectateurs"; }
/* Position badges desktop */
@media (min-width: 1025px) {
.es-badge-date::after {
bottom: -15px;
left: 70%;
transform: translateX(-50%);
}
.es-badge-testimonial::after {
top: 5px;
right: -110px;
}
.es-badge-association::after {
top: 40px;
right: -90px;
}
}
/* ===== VERSION MOBILE ===== */
.es-mobile-trigger {
display: none;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
align-items: center;
gap: 8px;
padding: 10px 15px;
}
.es-mobile-trigger span {
font-weight: 500;
display: block;
}
.es-burger-icon {
display: flex;
flex-direction: column;
gap: 5px;
}
.es-burger-icon span {
display: block;
width: 25px;
height: 3px;
background-color: var(--dark);
transition: var(--transition);
}
.es-mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: var(--light);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 9999;
transition: right 0.3s ease;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.es-mobile-menu.active {
right: 0;
}
.es-mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.es-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.es-mobile-header {
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
margin-bottom: 20px;
}
.es-mobile-close {
font-size: 1.5rem;
cursor: pointer;
color: var(--dark);
}
.es-mobile-link {
display: flex;
align-items: center;
padding: 12px 15px;
color: var(--dark);
text-decoration: none;
gap: 10px;
border-radius: 6px;
transition: var(--transition);
}
.es-mobile-link:hover {
background-color: rgba(241, 110, 0, 0.05);
}
.es-mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 15px;
background-color: rgba(241, 110, 0, 0.03);
border-radius: 8px;
margin: 5px 0;
}
/* Badges mobile */
.es-mobile-badge {
background: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
margin-left: 10px;
font-weight: bold;
}
/* Animation burger */
.es-mobile-trigger.active .es-burger-icon span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(2) {
opacity: 0;
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ===== MEDIA QUERIES ===== */
@media (max-width: 1024px) {
.es-desktop-menu {
display: none;
}
.es-mobile-trigger {
display: flex;
}
}
@media (min-width: 1025px) {
.es-mobile-trigger,
.es-mobile-menu,
.es-mobile-overlay {
display: none;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Éléments du menu
const mobileBtn = document.querySelector('.es-mobile-trigger');
const mobileMenu = document.querySelector('.es-mobile-menu');
const mobileOverlay = document.querySelector('.es-mobile-overlay');
const mobileClose = document.querySelector('.es-mobile-close');
// Fonction pour ouvrir/fermer le menu
function toggleMenu() {
mobileBtn.classList.toggle('active');
mobileMenu.classList.toggle('active');
mobileOverlay.classList.toggle('active');
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : 'auto';
}
// Fonction pour fermer le menu
function closeMenu() {
mobileBtn.classList.remove('active');
mobileMenu.classList.remove('active');
mobileOverlay.classList.remove('active');
document.body.style.overflow = 'auto';
// Fermer tous les sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(submenu => {
submenu.style.maxHeight = null;
const icon = submenu.previousElementSibling.querySelector('.fa-chevron-down');
if (icon) icon.style.transform = 'rotate(0deg)';
});
}
// Bouton burger principal
if (mobileBtn) {
mobileBtn.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});
}
// Bouton fermeture
if (mobileClose) {
mobileClose.addEventListener('click', closeMenu);
}
// Overlay
if (mobileOverlay) {
mobileOverlay.addEventListener('click', closeMenu);
}
// Gestion des sous-menus mobiles
document.querySelectorAll('.es-menu-trigger').forEach(trigger => {
trigger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const submenu = this.nextElementSibling;
const icon = this.querySelector('.fa-chevron-down');
// Fermer les autres sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(sm => {
if (sm !== submenu) {
sm.style.maxHeight = null;
const otherIcon = sm.previousElementSibling.querySelector('.fa-chevron-down');
if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
}
});
// Ouvrir/fermer le sous-menu actuel
if (submenu.style.maxHeight) {
submenu.style.maxHeight = null;
if (icon) icon.style.transform = 'rotate(0deg)';
} else {
submenu.style.maxHeight = submenu.scrollHeight + 'px';
if (icon) icon.style.transform = 'rotate(180deg)';
}
});
});
// Fermer le menu après clic sur un lien
document.querySelectorAll('.es-mobile-link:not(.es-menu-trigger)').forEach(link => {
link.addEventListener('click', closeMenu);
});
// Empêcher la propagation des clics dans le menu
if (mobileMenu) {
mobileMenu.addEventListener('click', function(e) {
e.stopPropagation();
});
}
});
80+
ans d’histoire
50
membres actifs
20+
spectacles/an
100%
bénévoles
Notre histoire
L’Équipe Spéciale est composée d’une trentaine d’athlètes répartis dans les différentes casernes de la région lyonnaise. Cette association du SDMIS, vieille de 90 ans d’existence, regroupe des sapeurs-pompiers professionnels, des sapeurs-pompiers volontaires et des jeunes sapeurs-pompiers.
Origines
Initialement, les gymnastes étaient recrutés dans les casernes pour leur agilité et leur tonicité pour assurer des missions toujours plus polyvalentes. La gymnastique était donc un critère de sélection qui a marqué durablement l’histoire des sapeurs-pompiers.
Notre spectacle
Le Show actuel de l’Équipe Spéciale vous propose, pendant 1h45, une animation variée autour de plusieurs univers :
Acrobaties
Avec d’anciens gymnastes de haut niveau et des membres de la sélection actuelle de l’équipe de France
Mouvements d’ensemble
Réalisés en interne par nos gymnastes
Humour
Avec des numéros comiques et une animation en direct
Pyrotechnie
Avec nos cracheurs de feu et effets de scène
Esprit de groupe
Avec une interactivité continue avec le public
Notre mission
- Promouvoir les valeurs des pompiers auprès du public
- Faire rayonner le SDMIS et la tradition pompier
- Créer un moment convivial et fédérateur lors des événements locaux
Saviez-vous ?
Notre équipe est entièrement composée de sapeurs-pompiers en activité qui consacrent leur temps libre à préparer ces spectacles. Chaque membre participe bénévolement, après ses heures de service, pour porter les valeurs des sapeurs-pompiers à travers la France.
Valeurs transmises
Solidarité
Entraide
Discipline
Dépassement de soi
Courage
Engagement
Nos Passages
Découvrez tous les lieux que nous avons visités ces dernières années.
Cliquez sur les punaises pour en savoir plus sur nos actions.
/* ===== STYLES COMPLETS ===== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Styles pour le popup */
.es-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
display: none;
justify-content: center;
align-items: center;
animation: es-fadeIn 0.3s ease;
}
@keyframes es-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.es-popup-container {
background-color: white;
width: 90%;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0,0,0,0.2);
overflow: hidden;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.es-popup-header {
padding: 15px 20px;
background-color: #F16E00;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.es-popup-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.es-popup-close {
font-size: 24px;
cursor: pointer;
background: none;
border: none;
color: white;
line-height: 1;
padding: 5px;
}
.es-popup-content {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.es-popup-text {
margin-bottom: 20px;
text-align: center;
}
.es-popup-buttons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
/* Styles pour le formulaire */
.es-form-group {
margin-bottom: 20px;
}
.es-form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
font-size: 14px;
}
.es-form-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
transition: border-color 0.3s;
}
.es-form-input:focus {
border-color: #F16E00;
outline: none;
}
.es-form-input::placeholder {
color: #aaa;
}
textarea.es-form-input {
min-height: 100px;
resize: vertical;
}
.es-form-submit {
background-color: #F16E00;
color: white;
border: none;
padding: 14px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
width: 100%;
margin-top: 10px;
transition: background-color 0.3s;
font-size: 16px;
}
.es-form-submit:hover {
background-color: #D86200;
}
.es-checkbox-container {
display: flex;
align-items: center;
margin: 15px 0;
}
.es-checkbox-label {
margin-left: 10px;
font-size: 14px;
}
/* Version mobile */
@media (max-width: 768px) {
.es-popup-container {
width: 95%;
max-width: 95%;
max-height: 85vh;
}
.es-popup-buttons {
flex-direction: column;
}
.es-popup-content {
padding: 15px;
}
}
/* Bouton Devis */
.es-devis-button {
background-color: #ff6b00;
color: white;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.es-devis-button:hover {
background-color: #e05e00;
transform: translateY(-2px);
}
/* ===== STYLE COMPLET AUTONOME ===== */
:root {
--primary: #F16E00;
--primary-dark: #D86200;
--dark: #121212;
--light: #FFFFFF;
--gray: #F5F5F5;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--navbar-height: 70px;
}
body {
padding-top: var(--navbar-height);
}
.es-nav-container {
background-color: var(--light);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 0 5%;
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
}
.es-logo {
display: none;
}
.es-logo img {
height: 40px;
width: auto;
}
/* ===== VERSION DESKTOP ===== */
.es-desktop-menu {
display: flex;
gap: 10px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.es-desktop-menu > li {
position: relative;
display: flex;
align-items: center;
}
.es-desktop-link {
color: var(--dark);
text-decoration: none;
padding: 10px 15px;
transition: var(--transition);
font-weight: 500;
font-size: 0.95rem;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.es-desktop-link:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Dropdown desktop */
.es-dropdown-content {
position: absolute;
top: 100%;
left: 0;
background-color: var(--light);
min-width: 240px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
list-style: none;
padding: 5px 0;
}
.es-dropdown:hover .es-dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.es-dropdown-content a {
padding: 12px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.es-dropdown-content a:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Bouton CTA */
.es-cta-button {
background-color: var(--primary);
color: white !important;
margin-left: 10px;
padding: 10px 20px !important;
border-radius: 50px !important;
transition: var(--transition);
}
.es-cta-button:hover {
background-color: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(241, 110, 0, 0.3);
}
/* Badges */
.es-badge {
position: relative;
}
.es-badge::after {
content: "Nouveau";
position: absolute;
background-color: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
font-weight: bold;
}
.es-badge-date::after { content: "Nouvelles dates"; }
.es-badge-testimonial::after { content: "Nouveaux témoignages de spectateurs"; }
.es-badge-association::after { content: "Nouveaux témoignages de spectateurs"; }
/* Position badges desktop */
@media (min-width: 1025px) {
.es-badge-date::after {
bottom: -15px;
left: 70%;
transform: translateX(-50%);
}
.es-badge-testimonial::after {
top: 5px;
right: -110px;
}
.es-badge-association::after {
top: 40px;
right: -90px;
}
}
/* ===== VERSION MOBILE ===== */
.es-mobile-trigger {
display: none;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
align-items: center;
gap: 8px;
padding: 10px 15px;
}
.es-mobile-trigger span {
font-weight: 500;
display: block;
}
.es-burger-icon {
display: flex;
flex-direction: column;
gap: 5px;
}
.es-burger-icon span {
display: block;
width: 25px;
height: 3px;
background-color: var(--dark);
transition: var(--transition);
}
.es-mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: var(--light);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 9999;
transition: right 0.3s ease;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.es-mobile-menu.active {
right: 0;
}
.es-mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.es-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.es-mobile-header {
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
margin-bottom: 20px;
}
.es-mobile-close {
font-size: 1.5rem;
cursor: pointer;
color: var(--dark);
}
.es-mobile-link {
display: flex;
align-items: center;
padding: 12px 15px;
color: var(--dark);
text-decoration: none;
gap: 10px;
border-radius: 6px;
transition: var(--transition);
}
.es-mobile-link:hover {
background-color: rgba(241, 110, 0, 0.05);
}
.es-mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 15px;
background-color: rgba(241, 110, 0, 0.03);
border-radius: 8px;
margin: 5px 0;
}
/* Badges mobile */
.es-mobile-badge {
background: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
margin-left: 10px;
font-weight: bold;
}
/* Animation burger */
.es-mobile-trigger.active .es-burger-icon span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(2) {
opacity: 0;
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ===== MEDIA QUERIES ===== */
@media (max-width: 1024px) {
.es-desktop-menu {
display: none;
}
.es-mobile-trigger {
display: flex;
}
}
@media (min-width: 1025px) {
.es-mobile-trigger,
.es-mobile-menu,
.es-mobile-overlay {
display: none;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Éléments du menu
const mobileBtn = document.querySelector('.es-mobile-trigger');
const mobileMenu = document.querySelector('.es-mobile-menu');
const mobileOverlay = document.querySelector('.es-mobile-overlay');
const mobileClose = document.querySelector('.es-mobile-close');
// Fonction pour ouvrir/fermer le menu
function toggleMenu() {
mobileBtn.classList.toggle('active');
mobileMenu.classList.toggle('active');
mobileOverlay.classList.toggle('active');
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : 'auto';
}
// Fonction pour fermer le menu
function closeMenu() {
mobileBtn.classList.remove('active');
mobileMenu.classList.remove('active');
mobileOverlay.classList.remove('active');
document.body.style.overflow = 'auto';
// Fermer tous les sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(submenu => {
submenu.style.maxHeight = null;
const icon = submenu.previousElementSibling.querySelector('.fa-chevron-down');
if (icon) icon.style.transform = 'rotate(0deg)';
});
}
// Bouton burger principal
if (mobileBtn) {
mobileBtn.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});
}
// Bouton fermeture
if (mobileClose) {
mobileClose.addEventListener('click', closeMenu);
}
// Overlay
if (mobileOverlay) {
mobileOverlay.addEventListener('click', closeMenu);
}
// Gestion des sous-menus mobiles
document.querySelectorAll('.es-menu-trigger').forEach(trigger => {
trigger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const submenu = this.nextElementSibling;
const icon = this.querySelector('.fa-chevron-down');
// Fermer les autres sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(sm => {
if (sm !== submenu) {
sm.style.maxHeight = null;
const otherIcon = sm.previousElementSibling.querySelector('.fa-chevron-down');
if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
}
});
// Ouvrir/fermer le sous-menu actuel
if (submenu.style.maxHeight) {
submenu.style.maxHeight = null;
if (icon) icon.style.transform = 'rotate(0deg)';
} else {
submenu.style.maxHeight = submenu.scrollHeight + 'px';
if (icon) icon.style.transform = 'rotate(180deg)';
}
});
});
// Fermer le menu après clic sur un lien
document.querySelectorAll('.es-mobile-link:not(.es-menu-trigger)').forEach(link => {
link.addEventListener('click', closeMenu);
});
// Empêcher la propagation des clics dans le menu
if (mobileMenu) {
mobileMenu.addEventListener('click', function(e) {
e.stopPropagation();
});
}
});