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

/*PAGE*/
body { font-family:Exo 2, sans-serif; line-height:1.6;  background:#252525; color:#ffffff; display: flex; flex-direction: column; min-height: 100vh; }
.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; flex: 1; display: flex; flex-direction: column; }

section { width: 80%; margin: 0 auto; display: flex; flex-direction: column; flex: 1; }
form { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 20px 0; }
section h2 { color:#CC00CC; font-size:2.5em; text-align: center; width: 100%; }

button { width: 280px; height: 50px; border: 2px solid #CC00CC; border-radius: 10px; background: #CC00CC; color: #ffffff; font-size: 1.2em; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center;}
button:hover {background: #252525; color: #CC00CC;}

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

/* =========================
   RESPONSIVE MOBILE
   ========================= */
@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; }

  main { margin-top: 5.5em; }
  section h2 { font-size: 1.2em; }
  
  /* FOOTER */
  .site-footer .container { flex-direction: column; gap: 10px; text-align: center; }
  .site-footer .contact-info { text-align: center; }
}