/* COMMUN À TOUTES LES PAGES*/
/* CORPS DU TEXTE */
body 
    {
        font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
        font-weight: 300;
        line-height: 1.8;
        letter-spacing: 0.5px; 
        font-size: 1rem;
        margin: 0px;
        padding: 1px;
    }


/* HEADER */
header 
    {
        position: relative;
        width: 100%;
        height: 200px;
    }

header h1 
    {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        color: black;
        font-size: 30px;
        font-weight: normal; 
        margin: 0;
        z-index: 0; 
    }

.subtitle
    {
        position: absolute;
        top: 165px; 
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: rgb(74, 74, 74); 
        font-weight: normal; 
        margin: 0;
    }


/* LOGO */
#logo 
    {
        position: absolute;
        top: 10px; 
        left: 50%;
        transform: translateX(-50%); 
        width: 220px; 
        height: auto; 
        z-index: 1; 
    }

   
/* MENU DE NAVIGATION */
.menu 
    {
        display: flex;
        justify-content: center; 
        align-items: center; 
        position: relative;
        padding: 10px; 
        border-top: 2px solid #ddd;
        border-bottom: 2px solid #ddd;
    }

.menu ul 
    {
        list-style-type: none;
        display: flex;
        justify-content: center;
        margin: 0px;
        padding: 0px;
    }

.menu ul li 
    {
        text-align: center;
        color: rgb(218, 218, 220);
        margin: 10px;
        position: relative;
    }

.menu ul li a 
    {
        text-decoration: none;
        color: #002790;
        font-weight: bold;
    }

.menu ul li a:link, .menu ul li a:visited 
    {
        color: black;
        text-decoration: none;
        transition: background-color 0.3s, color 0.3s;
    }

.menu ul li a:active, .menu ul li a:hover 
    {
        color: #007bff;
        text-decoration: underline;
        transition: background-color 0.3s, color 0.3s;
    }

nav.menu .liste-menu 
    {
        font-size: 14px;
    }


/* SOMMAIRE */
#sommaire 
    {
        display: none; 
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 10;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }

.menu li:hover #sommaire 
    {
        display: block; 
    }
  
.sommaire ul 
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
  
.sommaire ul li 
    {
        margin-bottom: 10px;
    }
  
.sommaire ul li a 
    {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
        transition: color 0.3s ease;
    }
  
.sommaire ul li a:hover 
    {
        color: #007bff;
    }
  
#closeSommaire 
    {
        margin-top: 5px;
        padding: 3px 5px;
        background-color: #ff6347;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
  
#closeSommaire:hover 
    {
        background-color:#007bff;
    }
  

/*CONTENU PRINCIPAL*/
main 
    {
        padding: 20px;
        max-width: 1200px;
        margin: auto;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

h2 
    {
        text-align: center;
        margin: 0px;
        padding: 1px;
    }

h3 
    {
        text-align: left;
        margin: 0px;
        padding: 1px;
    }

h4 
    {
        text-decoration: underline;
    }

p 
    {
        margin-bottom: 14px;
        text-align: left;
    }

.separation 
    {
        margin: 30px auto;
        border-top: 2px solid #ddd; 
        width: 50%;
    }


/* FOOTER */
footer 
    {
        background-color: #111;
        color: #eee;
        padding: 40px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }

.footer-logo img 
    {
        max-width: 200px;
        margin-bottom: 15px;
        margin-left: 50px;
    }

.footer div 
    {
        flex: 1 1 250px;
        min-width: 200px;
    }

.footer h4 
    {
        font-size: 1.1rem;
        margin-bottom: 15px;
        color: #00bcd4;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.footer-contact p,
.footer-reseau a,
.footer-autre p,
.footer-mentions a
    {
        margin: 6px 0;
        font-size: 0.95rem;
        margin-right: 50px;
    }

.footer-contact a,
.footer-reseau a
    {
        color: #ddd;
        text-decoration: none;
        transition: color 0.3s;
    }

.footer-contact a:hover,
.footer-reseau a:hover,
.footer-mentions a:hover
    {
        color: #00bcd4;
    }

.instagram-logo 
    {
        width: 22px;
        height: 22px;
        margin-right: 6px;
        vertical-align: middle;
    }

.footer-autre
    {
        width: 100%;
        text-align: center;
        margin-top: 30px;
        border-top: 1px solid #444;
        padding-top: 20px;
        font-size: 0.85rem;
        color: whitesmoke;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.footer-nav 
    {
        position: relative;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
    }

    .footer-mentions {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.9rem;
      }
      
.footer-mentions a 
    {
        color: white; 
        text-decoration: underline;
    }
      
.mentions-legales .label 
    {
        text-decoration: underline;
    }
      
      


    

    
    
/* LIENS */
a 
    {
        color: black;
    }

a:hover 
    {
        color: blue;
    }

a:focus
    {
        outline: 2px dashed #4CAF50;
    }




/*PAGE ACCUEIL*/
.slogan 
    {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 20px;
        font-style: italic; 
        color: #2c3e50;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    }


/* GALERIE VIDEOS */
.media-gallery 
    {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
       justify-content: center;
    }
    
.media-item 
    {
        width: 250px;
        background-color: #f7f7f7;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
.media-item img 
    {
        width: 100%;
        height: auto;
        display: block;
    }
    

    
.media-item p 
    {
        padding: 0 10px 10px;
        font-size: 0.9rem;
        color: #333;
    }
    


/* GALERIE PHOTOS */
.gallery-container 
    {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

.gallery 
    {
        display: flex;
        transition: transform 0.3s ease;
        
    }

.gallery-images 
    {
        display: flex;
        justify-content: space-between; 
        gap: 5px; 
        padding: 0 10px;
        flex-shrink: 0; 
        width: 100%;
        margin-top: 20px; 
        margin-bottom: 20px;
    }

.gallery-image 
    {
        max-width: 32%; 
        height: auto;
        border-radius: 8px; 
        object-fit: cover;
    }

.arrow 
    {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

.left 
    {
        left: 0px;
    }

.right 
    {
        right: 0px;
    }

/* Style pour la lightbox */
.lightbox 
    {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        align-items: center;
        justify-content: center;
        z-index: 1000;
        overflow: hidden;
    }

.lightbox-images 
    {
        max-width: 90%;
        max-height: 80%;
        margin: auto;
        display: block;
    }

/* Bouton de fermeture */
.close-lightbox 
    {
        position: absolute;
        top: 20px;
        right: 20px;
        color: white;
        font-size: 40px;
        cursor: pointer;
    }

.intro-section, .goals-section
    {
        background-color: #f9f9f9;
        padding: 30px;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    
.objectifs-list 
    {
        list-style: none;
        padding: 0;
    }
    
.objectifs-list li 
    {
        margin-bottom: 10px;
        font-size: 1.1rem;
        line-height: 1.6;
    }

.video-section 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 900px;
        margin: 2rem auto;
        padding: 1rem;
        text-align: center;
    }
      
.video-section video 
    {
        width: 100%;
        max-width: 800px;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
      
      
      
    




/*PAGE CONCOURS*/
/* COACHS */
.coach 
    {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

.coach-photo 
    {
        flex-shrink: 0; 
        margin-right: 20px;
    }

.coach-photo img 
    {
        width: 120px; 
        height: auto;
    }

.coach-info 
    {
        flex-grow: 1;
    }

/*Partie organisation et participation*/
.content 
    {
        display: flex; 
        justify-content: space-between; 
        gap: 20px; 
        padding: 20px;
    }

/* Style des boîtes */
.box 
    {
        background-color: #f2f2f2; 
        padding: 20px;
        border-radius: 10px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        flex: 1; 
    }

/* Style spécifique pour la boîte de gauche (partie "participation") */
.gauche 
    {
        background-color: #e7f7ff; 
    }

/* Style spécifique pour la boîte de droite (partie "organisation") */
.droit 
    {
        background-color: rgba(247, 6, 6, 0.131); 
    }




/*PAGE AGENDA*/
.events-list 
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        padding: 10px 20px;
    }

.event-card 
    {
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.event-card:hover 
    {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

.event-card img 
    {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-bottom: 1px solid #eee;
    }

.event-card-content 
    {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.event-card h3 
    {
        font-size: 20px;
        color: #2c3e50;
        margin: 0 0 10px;
    }

.event-card p 
    {
        color: #2c3e50;
        font-size: 15px;
        margin: 6px 0;
    }

.event-card .event-date
    {
        font-weight: 600;
        color: #2c3e50;
    }

.event-card .event-location
    {
        font-weight: 600;
        color: rgb(103, 103, 103) !important;
        background-color: transparent; 
        text-shadow: none; 
        opacity: 1; 
    }
    

.event-card .event-status 
    {
        text-align: right;
        font-style: italic;
        color: #535a5a;
        margin-top: auto;
    }

.event-card a 
    {
        display: block;
        text-align: center;
        background-color: #20618c;
        color: white;
        text-decoration: none;
        padding: 10px;
        border-radius: 0 0 16px 16px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

.event-card a:hover 
    {
        background-color:#20618c;
    }

.event-detail-image 
    {
        text-align: center;
        margin: 20px 0;
    }

.event-detail-image img 
    {
        max-width: 30%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }








/* PAGE PARTENAIRES */
.appel-don 
    {
        background: linear-gradient(145deg, #e0f2ff, #f0f7ff);
        border-left: 6px solid #1d4ed8;
        padding: 2rem;
        margin-top: 3rem;
        border-radius: 8px;
        text-align: left;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }
  
  
.appel-don p 
    {
        color: #333;
        line-height: 1.6;
        margin: 1rem 0;
        font-size: 1rem;
    }
  
  
.logos-container 
    {
        display: grid;
        grid-template-columns: repeat(3, auto); 
        gap: 20px;  
        justify-items: center;  
        align-items: center;   
    }

.logos-container img 
    {
        height: 100px;  
        margin-top: 20px; 
        margin-bottom: 20px; 
    }



/* ADMINISTRATION */
/* TABLEAU EVENEMENTS */
.table-container 
    {
        width: 100%;
        overflow-x: auto;
    }

table 
    {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
        font-size: 12px;
        text-align: left;
    }

th, td 
    {
        border: 1px solid black;
        padding: 10px 12px;
    }

th 
    {
        background-color: #e0e0e0;
        color: #000;
        text-align: center;
    }

td 
    {
        line-height: 1.5;
    }



/* SE CONNECTER ADMINISTRATION */
#admin-button 
    {
        position: absolute;
        top: 50%;
        left: 3rem;
        text-align: center;
        min-width: 135px; 
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        padding: 0.75rem 2rem;
        font-size: 0.9rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0.25rem;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
    }
  
#admin-button:hover,
#admin-button:focus 
    {
        background-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 0.4);
    }

#admin-nav 
    {
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
    }
      
#admin-deconnecter 
    {
        background-color: gainsboro; 
        color: black;
        padding: 0.6rem 1.2rem;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        font-size: 0.95rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }
      
#admin-deconnecter:hover 
    {
        background-color:  rgb(189, 189, 189); 
    }
      
      


/* BUTTON INSCRIPTION */
/* CONTENEUR POUR CENTRER LE BOUTON */
#inscript-nav 
    {
        /* Choix 1 : centrer */
        text-align: center;
        margin-top: 1.5rem;
    }
  
#inscript-button 
    {
        display: inline-block;
        background-color: #3f6c8b;    
        color: #fff;                  
        text-decoration: none;        
        padding: 0.75rem 1.5rem;      
        font-size: 1rem;
        font-weight: bold;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: transform 0.2s, background-color 0.2s;
    }
    
#inscript-button:hover,
#inscript-button:focus 
    {
        transform: translateY(-2px);
        background-color: #4e8eb9;  
    }
  

      


/* LES BOUTONS */
/* BACK TO TOP */
#btnTop
    {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 15px 20px;
        font-size: 20px;
        cursor: pointer;
        display: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s;
    }

#btnTop:hover 
    {
        background-color: #007bff;
    }




/* ZOOM */
.controls 
    {
        position: absolute;
        top: 0; 
        left: 20px; 
        padding: 5px 5px;
        display: flex; 
        gap: 0px; 
        z-index: 1000; 
    }

.controls button 
    {
        padding: 15px 10px;
        font-size: 18px;
        color: black;
        background-color: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-right: 10px;
        transition: background-color 0.3s;
    }

.controls button:hover 
    {
        background-color: #007bff;
    }






/* RECHERCHES */
/* Conteneur pour la barre de recherche */
.search-container 
    {
        display: none; 
        position: absolute;
        right: 60px;
        max-width: 200px;
        font-size: 10px;
        transform: translateY(-13%);
    }

/* focus sur la barre de recherche */
#search-form 
    {
        background-color: #fff;
        border-radius: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1px 3px;
        transition: box-shadow 0.3s ease;
        border: 1px solid #ccc;
    }

#search-form:focus-within 
    {
        box-shadow: 0 0 0 2px #007BFF33;
    }
  
#search-bar 
    {
        border: none;
        outline: none;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-size: 1rem;
        width: 130px;
    }
  

/* Apparition de la barre de recherche lorsqu'elle est activée */
.search-container.active 
    {
        display: block;
        animation: slideIn 0.3s ease-in-out; 
    }

/* Animation pour faire glisser la barre de recherche */
@keyframes slideIn 
    {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

/* Icône de loupe */
.search-toggle 
    {
        background: none;
        border: none;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        right: 20px; 
    }

/* Effet au survol de l'icône */
.search-toggle:hover 
    {
        opacity: 0.8;
    }

.highlight
    {
        background:#3b8fe9; 
        border-bottom:2px inset grey;
        border-radius:5px;
        font-size:120%;
    }

.visually-hidden 
    {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }


/* CHANGER DE MODE */
.mode 
    {
        position: absolute; 
        top: 5px; 
        left: 100px; 
        padding: 5px 5px; 
        display: flex;
        gap: 0px;
        z-index: 1000;
    }

.mode button 
    {
        padding: 10px 20px;
        border: none;
        color: black;
        left: 0px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
        background-color: transparent;
    }

.mode button:hover 
    {
        background-color: #007BFF;
    }








/* FORMULAIRES */
form 
    {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        border-radius: 5px;
    }

form label
    {
        font-weight: normal;
        margin-bottom: 5px;
        display: block;
    }

form input, form select, form textarea 
    {
        width: 95%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1rem;
    }

form .form-page 
    {
        display: none;
    }

form .form-page.active 
    {
        display: block;
    }

form p 
    {
        margin-bottom: 15px;
        font-size: 1rem;
    }

form fieldset 
    {
        border: 1px solid #535252;
        padding: 10px;
        margin-bottom: 20px;
    }

form legend
    {
        font-weight: bold;
        font-size: 16px;
    }

form input[type="text"], input[type="email"], textarea, select, input[type="number"], input[type="file"]
    {
        width: 98%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 10px;
        margin: 5px 0 15px;
    }

input[type="checkbox"]
    {
        margin-right: 10px;
    }

button[type="button"], input[type="reset"], input[type="submit"] 
    {
        width: auto;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }



.btn-soumettre
    {
        background-color: blue; 
        color: white;              
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
    }
      
.btn-soumettre:hover 
    {
        background-color: black; 
    }



/*barre de progression*/
.progress-bar-container 
    {
        width: 100%;
        background-color: #f3f3f3;
        background-color: #f3f3f3;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 20px 0;
        overflow: hidden;
        height: 20px;
    }

.progress-bar
    {
        height: 100%;
        width: 0;
        background-color: blue;
        transition: width 0.3s ease;    
    }

.success 
    {
        color: black;
        font-weight: bold;
        margin-bottom: 15px;
    }


/* Conteneur des liens */
.nav_ajout 
    {
        display: flex;
        align-items: center; 
        padding: 10px;
        gap: 10px;
    }

/* Liens individuels */
.nav_ajout a 
    {
        color: #333;
        text-decoration: none;
        padding: 15px 15px;
        margin: 10px 0;
        border: 2px solid black;
        border-radius: 10px; 
        background-color: #f9f9f9;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
        transition: background-color 0.3s, color 0.3s;
        font-size: 1.1rem;
        text-align: center;
    }

/* Mise en évidence des liens actifs */
.nav_ajout a.active 
    {
        font-weight: bold;
        color: #fff;
        background-color: blue; 
    }

/* Effet au survol des liens */
.nav_ajout a:hover 
    {
        background-color: blue;
        color: white;
    }









/* MODE SOMBRE */
body.sombre 
    {
        background-color: #121212;
        color: white;
    }

body.sombre h1, body.sombre h2
    {
        color: white; 
    }

body.sombre .menu 
    {  
        background-color: #333;  
        border-top: 2px solid #444;  
        border-bottom: 2px solid #444;  
    }

body.sombre .menu ul li a 
    {
        color: white; 
    }

body.sombre .menu ul li a:link, body.sombre .menu ul li a:visited
    {
        color: white;
    }

body.sombre .menu ul li a:active, body.sombre .menu ul li a:hover 
    {
        color: white;  
        text-decoration: underline;
    }

body.sombre nav a 
    {
        color: white; 
    }

body.sombre button 
    {
        background-color: #444;
        color: white;
    }

body.sombre .gauche 
    {
        background-color: rgb(120, 36, 36);
    }

body.sombre a 
    {
        color: white;
    }

/*body.sombre a:hover 
    {
        color: #007BFF;
    }*/

body.sombre .burger .bar 
    {
        background-color: white;
    }

body.sombre #admin-button 
    {
        background-color: #444;
        color: #fff;
    }

body.sombre #inscript-button 
    {
        background-color: #444;
        color: #fff;
    }

body.sombre .nav_ajout a 
    {
        background-color: #444;
        color: #fff;
    }

body.sombre .nav-ajout a:hover 
    {
        background-color: blue;
    }


body.sombre .event-card 
    {
        background-color: #333; 
        border: 1px solid #555; 
    }

body.sombre .event-card h3 
    {
        color: #f9f9f9; 
    }

body.sombre .event-card p 
    {
        color: #ddd;
    }

body.sombre .event-card .event-date,
.event-card .event-location
    {
        color: #bbb; 
    }

body.sombre .event-card .event-status 
    {
        color: #ddd; 
    }

body.sombre .event-card a 
    {
        background-color: white;
        color: #000;
    }

body.sombre .intro-section, body.sombre .goals-section
    {
        background-color: rgb(73, 73, 73);
        color: white;
    }

body.sombre .event-card .event-location
    {
        font-weight: 600;
        color: rgb(193, 193, 193) !important;
        background-color: transparent; 
        text-shadow: none; 
        opacity: 1; 
    }

body.sombre #retour, body.sombre #action
    {
        color: white;
    }

body.sombre .media-item
    {
        background-color: rgb(73, 73, 73);
    }

body.sombre .media-item p
    {
        color: white;
    }

body.sombre .media-item h4
    {
        color: white;
    }

















/* RESPONSIVE */
/* Style du menu burger */
.burger 
    {
        display: none; 
        cursor: pointer;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        top: 215px;
        align-items: center;
        left: 50%;
    }

.burger .bar 
    {
        width: 30px;
        height: 4px;
        background-color: black;
        border-radius: 5px;
    }

/* Style du menu burger quand il est visible */
.burger-menu 
    {
        display: none; 
        position: absolute;
        background-color:#333;
        left: 50%;
        width: 50%;
        padding: 20px;
        z-index: 999;
        transform: translateX(-50%); 
        border-radius: 10px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        opacity: 0; 
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        text-align: center;
    }

.burger-menu ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

.burger-menu li 
    {
        margin-bottom: 15px;
        transition: transform 0.3s ease; 
    }

.burger-menu a 
    {
        color: #fff; 
        text-decoration: none;
        font-size: 18px; 
        transition: color 0.3s ease;
        align-items: center;
    }

.burger-menu li:hover 
    {
        transform: scale(1.05);
    }

/* Lorsque le menu burger est affiché */
.burger-menu.show 
    {
        display: block; 
        opacity: 1; 
        transform: translateX(-50%) translateY(0); 
    }

/* Afficher l'icône burger uniquement sur téléphone */
@media (max-width: 900px) {
    .menu .main-menu 
        {
            display: none;
        }

    .menu 
        {
            padding: 30px;
        }
    
    .burger 
        {
            display: flex;
        }

    header h1 
        {
            font-size: 25px;
        }

    table 
        {
            font-size: 10px; 
        }

    th, td 
        {
            padding: 8px 10px; 
        }

    /* Faire défiler horizontalement le tableau sur les petits écrans */
    .table-wrapper 
        {
            overflow-x: auto;  
            -webkit-overflow-scrolling: touch; 
        }

    th, td 
        {
            width: auto;
        }

    .sommaire 
        {
            display: none;
        }

    .content 
        {
            flex-direction: column;
        }
    
}



@media (max-width: 480px) {
    table 
        {
            font-size: 9px;  
        }

    th, td 
        {
            padding: 6px 8px;  
        }

    #logo 
        {
            width: 120px;
        }
    
    header h1 
        {
            font-size: 16px;
        }

    .subtitle 
        {
            font-size: 10px;
        }

    #admin-button 
        {
            top: 30px;
            padding: 5px 15px;
            font-size: 16px;
            left: 3rem;
            text-align: center;
            min-width: 200px; 
        }
    
    /* BUTTON INSCRIPTION */
    #inscript-button 
        {
            top: 60px;
            padding: 5px 21px;
            font-size: 15px;
        }

    #admin-button, #inscript-button 
        {
            display: inline-block;
            text-decoration: none;
        }

    .slogan 
        {
            font-size: 12px;
        }

    .search-container 
        {
            max-width: 90px;
        }

    #search-bar 
        {
            max-width: 50px;
        }

    .coach 
        {
            flex-direction: column;
        }

    .coach-photo 
        {
            display: none;
        }

    .logos-container 
        {
            grid-template-columns: 1fr; 
        }

    .nav_ajout 
        {
            flex-direction: column; 
            align-items: stretch; 
            gap: 15px; 
        }

    html, body 
        {
            overflow-x: auto;
            max-width: 100%;
            box-sizing: border-box;
        }
    
    * 
        {
            box-sizing: border-box;
            max-width: 100%;
            word-wrap: break-word;
        }

    /* Conteneur des cards */
    .events-list 
        {
            display: flex;
            flex-wrap: wrap; 
            gap: 20px;
            justify-content: center;
            max-width: 100%;
            overflow-x: hidden;
            padding: 10px;
        }

/* Card individuelle */
    .event-card 
        {
            flex: 1 1 300px; 
            max-width: 100%;
            box-sizing: border-box;
        }

}