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

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

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

/*Slider*/
.slider-wrapper { position: relative; overflow: hidden; width: 65%; margin: auto; }
.slider { display: flex; transition: transform 2s ease-in-out; /*transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);*/ width: 300%; /* 3 slides */ }

.hero { width: 35%; position: relative; text-align: center; color:#ffffff; }
.hero a { color:#ffffff; text-decoration:none; }
.hero img { width: 100%; height: auto; display: block; filter: brightness(50%); }

.hero-text-1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 1;}
.hero-text-2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 1;}
.hero-text-3 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 1;}

/* Boutons slider */
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; font-size: 1.2em; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 15; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 1; /* Ça évite les décalages verticaux */ font-family: Arial, sans-serif; /* Choix d'une police plus régulière */ transition: opacity 0.3s, background 0.3s; }
.slider-btn:hover { background: rgba(255, 255, 255, 0.2); }
.slider-wrapper:hover .slider-btn { opacity: 1; pointer-events: auto; }
.slider-btn.prev { left: 10px;}
.slider-btn.next { right: 10px; }

/*Indicateur Slide*/
.slider-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.dot { display: inline-block; width: 8px; height: 8px; margin: 0 3px; background: #666; border-radius: 50%; cursor: pointer; transition: background 0.3s; z-index: 10; }
.dot.active { background: #ffffff; }

/*Actuality*/
.actuality-section { display:flex; gap:5%; flex-wrap: wrap; margin-top: 20px; }
.actuality-section h3 { text-align:center; }

/*News*/
.news h3, .calendar h3, .instagram h3, .groupe h3 { color: #CC00CC; font-size: 1.8em; text-align:center;}
.news { width: 65%; }
.news-img { text-align:center; border: 1px #ffffff solid; border-bottom: none; }
.news-img h4 { font-size: 1.3em; }
.news img { width:90%; filter: brightness(80%); }
.news-btn { text-align:center; border: 1px #ffffff solid; border-top: none;}
.news-btn button { background: #CC00CC; margin-bottom: 7px; padding: 7px; border-radius: 10px; border: none; color: #ffffff; text-decoration: none; }
.news-btn button:hover { background: #202020; padding: 5px; border: 2px solid #CC00CC; border-radius: 10px; color: #ffffff; text-decoration: none; }

/*Calendar*/
.container-calendar-instagram { width: 30%; }
.event { display:flex; flex-direction:row; text-align: center; text-decoration: none; color: #ffffff; border: 1px #ffffff solid;}
.event:hover { color: #CC00CC; }
.date { width: 30%; border-right: 1px #ffffff solid; }
.event-name { width: 70%; }

/*Instagram*/
.instagram { flex: 1; min-width: 200px; margin-top: 20px; }
.instagram iframe { width: 100%; border-radius: 10px; }

/*Groupe*/
.groupe { width:80%; margin:auto; margin-top: 20px; }
.container-groupe { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around; text-align: center; }
.groupe img { width: 100%; max-width: 450px; height: auto; filter: brightness(60%); transition: filter 0.3s ease; }
.container-groupe h4 { position:relative; top:-50%; left:50%; transform:translate(-50%,-50%); z-index: 1; }
.container-groupe a { z-index: 1; text-decoration: none; font-size: 1.5em; color: #ffffff; }
.container-groupe a:hover img { filter: brightness(100%); transition: filter 0.3s ease;}

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