/* 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; display: flex; flex-direction: column; align-items: center; }

section div { margin-bottom:20px; }
section h2 { color:#CC00CC; font-size:2em; }

.manifestation { width:100%; display:flex; flex-direction:row; align-items: center; background:#303030; padding:10px; border-radius:20px; }
.manifestation .texte90 {  transform: rotate(-90deg); color:#CC00CC; font-size: 1.5em; width: 200px; text-align: center; }

.selector-container { display: flex; flex-direction:row; gap: 15px; }
.manifestation-Jour { display:flex; flex-direction:column; align-items:center; }
.option-box { position: relative; padding: 20px; border: 2px solid #CCCCCC; border-radius: 10px; cursor: pointer; width: 300px; transition: all 0.3s ease; }
.complet { position: relative; padding: 20px; border: 2px solid #CC0000; border-radius: 10px; cursor: pointer; width: 300px; transition: all 0.3s ease; }

.tranche-info { display:flex; flex-direction:row; justify-content: space-between; margin-bottom:0px; }
.tranche-info h3 { font-size:1em; }
.option-box h4 { font-size:0.9em; margin-bottom: 20px;}
.option-box p { font-size:0.8em; }
.complet .tranche-info { color: #CC0000; }
.complet h4 { font-size:0.9em; margin-bottom: 20px; color: #CC0000; }
.complet p { font-size:0.8em; color: #CC0000; }
.tranche-benevole { display:flex; flex-direction:row; align-items: center; gap: 5px; }
.tranche-benevole img { width:25px; height:25px; }
.option-box.selected { border-color:#00AA00; background:#252C25; }

/* ✔ (invisible par défaut) */
.checkmark {position: absolute; top: -8px; right: -8px; background:#252525; border: 2px solid green; border-radius: 50%; width: 22px; height: 22px; font-size: 14px; color:#00AA00; display: flex; align-items: center; justify-content: center; font-weight: bold; /* Animations */ opacity: 0; transform: scale(0.5); transition: all 0.3s ease; }

/* Quand sélectionné → ✔ visible + animé */
.option-box.selected .checkmark { opacity: 1; transform: scale(1); }

.select { display: flex; flex-direction: row; justify-content: right; }
.select button { border: 2px #CC00CC solid; border-radius:10px; background: #CC00CC; color: #ffffff; width: 150px; font-size: 1.2em; padding: 10px; margin-top: 20px; }
.select button:hover { background: #252525; color: #CC00CC; }


/*Formulaire*/
.register { width:80%; display:flex; flex-direction: column; align-items: center; }

.register-box { width: 500px; display: flex; flex-direction: row; align-items: center; gap: 40px; background: #353535; border-radius: 15px; padding: 10px;}
.register-box .delete { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.register-box .delete img { width: 25px; padding: 4px; border-radius: 10px; background: #ffffff; }
.register-box .delete img:hover { background: #CC00CC; }
.register-tranche { display: flex; flex-direction: column; width: 400px; }
.register-date { display: flex; flex-direction: row; justify-content: space-between; width: 100%; }

.register-from { display:flex; flex-direction:column; width:500px; font-size: 1.2em; }
.register-from input {height:2.3em; border: 1px #ffffff solid; border-radius: 10px; background: #252525; font-size: 0.9em; color: #ffffff; padding: 5px; margin-bottom:20px; }
.register-from input[type=date] { height:3em; font-size: 1.2em; }

.radio-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; }
.radio-line { display: flex; align-items: center; gap: 10px; }
/* Radio propre sans casser le rendu natif */
.register-from input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #CC00CC; flex-shrink: 0; cursor: pointer; }
/* IMPORTANT : annule la règle générique input */
.register-from input:not([type="radio"]) { height: 2.3em; }
/* Label */
.radio-line label { cursor: pointer; line-height: 1.2;}

.register-from select {height:2.3em; border: 1px #ffffff solid; border-radius: 10px; background: #252525; font-size: 0.9em; color: #ffffff; padding: 5px; margin-bottom:20px; }

.register-from 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; }
.register-from 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 MOBILE
   ========================= */
@media (max-width: 768px) {

  /* HEADER */
  .site-header { height: 5em; }
  .site-header img { width: 50px; height: auto; }
  .site-header h1 a { font-size: 0.5em; }

  /* Réduire la taille de la barre de Menu */
  .site-header.shrink { height: 5em; }
  .site-header.shrink img { height: 50px; }
  .site-header.shrink h1 a { font-size: 0.5em; }

  /* Bouton hamburger */
  #menu-toggle { font-size: 1em; }

  main { margin-top: 6em; width: 100%; }

  section { width: 100%; padding: 0 10px; }

  /* MANIFESTATION */
  .manifestation { flex-direction: column; align-items: stretch; padding: 15px; }

  /* Catégorie (plus de rotation) */
  .manifestation .texte90 { transform: none; width: 100%; text-align: center; font-size: 1.4em; margin-bottom: 10px; }

  /* Jours */
  .selector-container { flex-direction: column; gap: 20px; }
  .manifestation-Jour { width: 100%; }
  .manifestation-Jour h3 { margin-bottom: 10px; font-size: 1.2em; }

  /* Tranches */
  .option-box,
  .complet { width: 100%; padding: 15px; }
  .tranche-info h3 { font-size: 1em; }
  .option-box h4,
  .complet h4 { font-size: 1em; }
  .option-box p,
  .complet p { font-size: 0.9em; }

  /* Bouton inscription */
  .select { justify-content: center; }

  .select button { width: 100%; max-width: 300px; font-size: 1.1em; }

  /*Formulaire*/
  .register { width:80%; display:flex; flex-direction: column; align-items: center; }
  .register-box { width: 100%;}
  .register-tranche { display: flex; flex-direction: column; width: 400px; }
  .register-from { width:100%; font-size: 1em; }
  .register-from input {height:2em; }
  .register-from input[type=date] { height:2.3em; font-size: 1em; }

  /* IMPORTANT : annule la règle générique input */
  .register-from input:not([type="radio"]) { height: 2em; }
  .register-from select {height:2em; }
  .register-from button { height:2em; }

  /* FOOTER */
  .site-footer .container { flex-direction: column; gap: 10px; text-align: center; }
  .site-footer .contact-info { text-align: center; }
}