/* 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; display: flex; flex-direction: column; }
.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.2em; }

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

/*CORPS*/
main { min-height: calc(100vh - 8em); padding-top: 9em; flex: 1; display: flex; justify-content: center; align-items: center; }

.login { display: flex; flex-direction: column; align-items:center; }
.login form { display:flex; flex-direction:column; width:500px; font-size: 1.2em; }
.login form input {height:2.3em; border: 1px #ffffff solid; border-radius: 10px; background: #252525; font-size: 0.9em; color: #ffffff; padding: 5px; margin-bottom:20px; }
.login form input[type=date] { height:3em; font-size: 1.2em; }
.login button { height:2.5em; border: 2px #CC00CC solid; border-radius:10px; background: #CC00CC; color: #ffffff; font-size: 0.9em; margin-top: 20px; margin-bottom:50px; }
.login button:hover { background: #252525; color: #CC00CC; }

/*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;}

  /*Slider*/
  .slider-wrapper { width: 90%; }      /* slider prend toute la largeur */
  .slider { width: 300%; }              /* reste pour les 3 slides */
  .hero { width: 100%; }                /* chaque slide occupe 100% */
  .hero h2 { width: 100%; font-size: 1em; }          /* réduction titre */
  .hero p { width: 100%; font-size: 0.8em; }

  /*Actuality*/
  .actuality-section { flex-direction: column; align-items: center; gap: 20px; }

  /*News*/
  .news { width: 90%; }

  /*Calendar*/
  .container-calendar-instagram { width: 90%; }

  /*Groupe*/
  .groupe { width:90%; }
  .groupe img { max-width: 160px; }
  .container-groupe a { font-size: 0.8em; }

  .instagram { width: 100%; }
  /*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; }
}