/* Reset minimal */
* { margin:0; padding:0; box-sizing:border-box; }
@import url('https://fonts.googleapis.com/css?family=Sofia|Montserrat|Rubik|Rajdhani|Anton|Orbitron|Teko|Poppins|Exo 2|Bebas Neue|Inter');

/*PAGE*/
body { font-family:Exo 2, sans-serif; line-height:1.6;  background:#252525; color:#ffffff; }
.container { width:80%; margin:auto; }

/*EN-TETE*/
.site-header {position: fixed; top:0; left:0; width:100%; height:9em; background:#252525; z-index: 1000; transition: height 0.3s ease, padding 0.3s ease;}
.site-header .container { display:flex; flex-direction: row; align-items:center; justify-content:space-between; padding:0.5em; }
.site-header img { width:100px; height:125px;}
.site-header h1 a {color:#ffffff; text-decoration: none; font-size:1.8em; }
.site-header nav ul { list-style:none; display:flex; gap:1rem; }
.site-header nav a { color:#ffffff; text-decoration:none; }
.site-header li a:hover { color:#CC00CC; }

/* Réduire la taille de la barre de Menu */
.site-header.shrink { height: 7em; }
.site-header .container { transition: padding 0.3s ease; }
.site-header.shrink img { height: 90px; width: auto; }
.site-header.shrink h1 a { font-size: 1.3em; }

/* Bouton hamburger */
#menu-toggle { font-size: 2em; background: none; border: none; color: #ffffff; cursor: pointer; }
#menu-toggle.open { visibility:hidden; }

/* Menu latéral */
.side-menu { position: fixed; top: 0; right: -200px; width: 200px; height: 100%; background: #252525;  box-shadow: -2px 0 5px rgba(0,0,0,0.5); padding: 2rem 1rem; transition: right 0.3s ease; z-index: 2000; display: flex; flex-direction: column; }
.side-menu.open { right: 0; /* visible */ }
.side-menu ul { list-style: none; margin-top: 2em; padding: 0; flex-grow: 1; display: flex; flex-direction: column; }
.side-menu li { margin-bottom: 0.2em; }
.side-menu a { color: #ffffff; text-decoration: none; font-size: 1.2rem; }

#menu-close { align-self: flex-end; font-size: 2em; background: none; border: none; color: #ffffff; cursor: pointer; }

/*CORPS*/
main { margin-top:9em; }
.container { width: 80%; }

section h2 { color: #CC00CC; margin-top: 2em; margin-bottom: 1.5em; font-size: 1.8em; }
section p { margin-top: 1.5em; margin-bottom: 1.5em; font-size: 1.2em; }

.presentation h2 { margin-top: 7em; }
.presentation p a { color: #CC00CC; }

.comite div { display: flex; flex-direction: row; gap: 5%; }
.comite img { width: 60%; }
.comite table {  width: 35%; border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */ }
.comite th, .comite td { border: 2px #FFFFFF solid; }
.comite th { font-size: 1.5em; }
.comite td { text-align: center; }
.comite td a { color: #CC00CC; }

.carte div { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.coordonnee a { color: #CC00CC; }

.imgGym-cent { display: flex; flex-direction: column; align-items: center; }
.imgGym-cent img { width: 40%; }
.Gym-cent a { color: #CC00CC; }

.sponsor-gird { display: grid; grid-template-columns: repeat(2, auto); gap: 3rem 9rem; /* espace vertical | horizontal */ justify-content: center; align-items: center; margin: 3rem auto; }
.sponsor-gird > div { display: flex; justify-content: center; align-items: center; }
.sponsor-gird img { max-width: 250px; height: auto; background: #FFFFFF; }

/*PIED*/
.site-footer { background:#303030; text-align:center; padding:0.2em; margin-top: 0.5em; font-size:1em; }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; padding:0.2em; }
.site-footer .contact-info  { text-align:left; }
.site-footer address a {color:#CC00CC; }

/* Responsive */
@media (max-width:800px) {
  /*En-Tête*/
  .site-header { height: 5em; }
  .container { width: 100%; margin:auto; }
  .site-header img { width: 60px; height: 75px;}
  .site-header h1 a { font-size: 0.8em; }

  .site-header.shrink { height: 5em; }
  .site-header.shrink img { height: 75px; width: auto; }
  .site-header.shrink h1 a { font-size: 0.8em; }

  /*CORPS*/
  main {margin-top: 5.5em;}

  section { display: flex; flex-direction: column; align-items: center; width: 100%; }
  section h2 { font-size: 1.5em; text-align: center; }
  section p { font-size: 1em; }

  .presentation p { align-items: center; width: 90%; text-align: justify; }
  .presentation h2 { lign-items: center; width: 90%; margin-top: 3em; }

  .comite div { display: flex; flex-direction: column; align-items: center; gap: 5%; }
  .comite img { width: 90%; }
  .comite table { margin-top: 30px; width: 90%; }
  .comite th { font-size: 1em; }
  .comite td { font-size: 0.8em; }

  iframe { width: 100%; height: 400px; }

  /*Pied*/
  .site-footer .container { 
    flex-direction: column;  /* au lieu de côte à côte */
    gap: 10px;
    text-align: center;
  }
  .site-footer .contact-info { text-align: center; }
}