/*=====================================
  RESPONSIVE STYLES
  Ce fichier contient toutes les media queries
  pour l'adaptation du site aux différentes 
  tailles d'écrans
====================================*/

/*=====================================
  1. POUR TOUS LES APPAREILS AVEC HOVER
====================================*/
@media (hover: hover) {
  /* Animations seulement sur appareils avec hover */
  .btn-primary:hover,
  .btn-secondary:hover {
    background: var(--color-accent-red);
    color: var(--color-white);
  }

  .info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(175, 5, 26, 0.3);
  }

  .testimonial:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  }

  .testimonial:nth-child(1):hover {
    transform: rotate(0) translateY(-10px);
  }

  .testimonial:nth-child(2):hover {
    transform: translateY(-5px);
  }

  .testimonial:nth-child(3):hover {
    transform: rotate(0) translateY(-10px);
  }

  .slot.open:hover {
    background: var(--color-accent-red);
    color: #fff;
    border-color: var(--color-accent-red);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(175, 5, 26, 0.3);
  }

  .team-member:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(175, 5, 26, 0.3);
  }

  .category-tab:hover {
    background: rgba(175, 5, 26, 0.15);
  }

  .player-chip:hover {
    border-color: var(--color-accent-red);
    transform: none;
    box-shadow: 0 6px 18px rgba(175, 5, 26, 0.2);
  }

  /* Transitions pour les liens de navigation */
  .nav-links a:hover::after {
    width: 100%;
    opacity: 1;
  }

  /* Effet hover pour footer et liens légaux */
  .footer-links ul li a:hover {
    color: var(--color-accent-red);
  }

  .legal-toc-table a:hover {
    color: var(--color-accent-red);
  }

  .legal-footer a:hover {
    background-color: var(--color-accent-red);
    color: white;
    text-decoration: none;
  }

  /* Hover pour la section communauté */
  .community-benefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(175, 5, 26, 0.3);
  }

  .discord-button:hover {
    background-color: #5e78d5;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(114, 137, 218, 0.4);
  }

  .discord-button:active {
    transform: translateY(1px);
  }
}

/*=====================================
  2. TRÈS GRANDS ÉCRANS (1600px+)
====================================*/
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }

  .hero-title {
    font-size: 5rem;
  }

  .testimonials,
  .about-team,
  .community {
    padding: 10rem 2rem;
  }

  .about-team-content,
  .community-container {
    max-width: 1400px;
  }

  .info-container {
    max-width: 1300px;
    grid-template-columns: repeat(4, 1fr);
  }
}

/*=====================================
  2b. GRANDS ÉCRANS (1400px-1599px)
====================================*/
@media (min-width: 1400px) and (max-width: 1599px) {
  .container {
    max-width: 1320px;
  }

  .hero-title {
    font-size: 4.5rem;
  }

  .testimonials,
  .about-team,
  .community {
    padding: 8rem 2rem;
  }

  .about-team-content,
  .community-container {
    max-width: 1200px;
  }
}

/*=====================================
  3. ÉCRANS MOYENS (1200px-1399px)
====================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .container {
    max-width: 1140px;
  }

  .hero-overlay {
    min-height: calc(85vh - 100px);
  }

  .testimonials,
  .about-team,
  .community {
    padding: 7rem 2rem;
  }
}

/*=====================================
  4. ÉCRANS PORTABLES/PETITS DESKTOPS (992px-1199px)
====================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .testimonials,
  .about-team,
  .community {
    padding: 6rem 2rem;
  }

  .order-summary,
  .pay-form {
    padding: 1.5rem;
  }

  /* Navigation plus compacte */
  .nav-links li {
    margin-left: 1.5rem;
  }

  /* Agenda plus compact */
  .reservation-layout {
    padding: 1.5rem;
  }

  /* Formulaires ajustés */
  .contact-form {
    padding: 1.75rem;
  }

  /* Mentions légales */
  .legal-content {
    padding: 2rem 2.5rem;
  }
}

/*=====================================
  5. TABLETTE LARGE & PETIT DESKTOP (901px-991px)
====================================*/
@media (min-width: 901px) and (max-width: 991px) {
  .container {
    max-width: 900px;
    padding: 0 1.25rem;
  }

  .hero-title {
    font-size: 3.25rem;
  }

  .nav-links li {
    margin-left: 1.25rem;
  }

  .nav-links a {
    padding: 0.5rem 0.75rem;
  }

  .testimonials,
  .about-team,
  .community {
    padding: 5rem 1.5rem;
  }

  .payment-layout {
    gap: 1rem;
  }

  .order-list li {
    font-size: 0.9rem;
  }

  /* Ajustement grilles et cartes */
  .team-grid-container {
    gap: 1.5rem;
  }

  .testimonial {
    padding: 1.75rem;
  }

  /* Formulaires */
  .form-group {
    margin-bottom: 1.25rem;
  }

  /* Mentions légales */
  .legal-content {
    max-width: 800px;
    padding: 1.75rem 2.25rem;
  }
}

@media (min-width: 901px) {
  .container {
    padding: 0 2rem;
  }

  .payment-layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Menu navigation */
  .nav-links {
    display: flex;
  }

  /* Agenda */
  .agenda-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/*=====================================
  8. MOBILE (481px-600px)
====================================*/
@media (min-width: 481px) and (max-width: 600px) {
  /* Layout général */
  body {
    font-size: 15px;
  }

  .container {
    padding: 0 1rem;
  }

  /* Hero */
  .hero-overlay {
    padding: 0 1rem;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .subhead {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  /* Sections principales */
  .testimonials,
  .about-team,
  .community {
    padding: 3rem 1rem;
  }

  /* Cards */
  .info-container {
    grid-template-columns: 1fr;
  }

  .testimonial,
  .team-member {
    padding: 1.5rem;
  }

  .community-benefit {
    padding: 1.5rem;
  }

  /* Navigation */
  .site-header {
    height: 70px;
    padding: 0 0.75rem;
  }

  .site-header .logo img {
    height: 42px;
  }

  /* Ajustements hamburger pour cette taille */
  .hamburger {
    height: 22px !important;
  }

  .hamburger span:nth-child(2),
  .hamburger span:nth-child(3) {
    top: 9px !important;
  }

  .hamburger span:nth-child(4) {
    top: 18px !important;
  }

  /* Animation du hamburger en X pour cette taille */
  .hamburger.toggle span:nth-child(1) {
    top: 9px !important;
  }

  .hamburger.toggle span:nth-child(4) {
    top: 9px !important;
  }

  /* Ajustement navigation */
  .nav-links {
    top: 70px !important;
  }
}

/*=====================================
  10. IMPRESSION, ORIENTATION & ÉCRANS HAUTE DENSITÉ
====================================*/
@media print {
  .site-header,
  .footer-content,
  .footer-bottom {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    margin: 2cm;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .page-header {
    margin-top: 0;
    padding: 0 0 1rem 0;
    text-align: center;
  }

  .reservation-layout,
  .payment-layout {
    margin-top: 1rem;
  }

  .agenda,
  .contact-form,
  .order-summary,
  .pay-form {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  /* Optimisations pour économiser l'encre */
  .btn-primary,
  .btn-secondary {
    border: 2px solid #000;
    color: #000;
    background: transparent;
    box-shadow: none;
  }

  .legal-container {
    box-shadow: none;
    padding: 0;
    border: none;
    background: transparent;
  }

  .legal-section h2 {
    color: #000;
    border-bottom-color: #ccc;
  }

  .legal-section h3 {
    color: #444;
  }

  .legal-section .highlight-box {
    border: 1px solid #ccc;
    background: #f5f5f5;
  }

  .legal-section .back-link {
    display: none;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-header,
  .payment-layout,
  .order-summary,
  .pay-form {
    background-attachment: scroll;
  }

  /* Autres optimisations pour écrans retina si nécessaire */
}

@media (prefers-color-scheme: dark) {
  /* Déjà en mode sombre par défaut, mais peut-être ajuster quelques contrastes */
  .info-item,
  .testimonial,
  .team-member {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

.legal-section .highlight-box {
  border: 1px solid #ccc;
  background: #f5f5f5;
}

.legal-section .back-link {
  display: none;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-header,
  .payment-layout,
  .order-summary,
  .pay-form {
    background-attachment: scroll;
  }

  /* Autres optimisations pour écrans retina si nécessaire */
}

@media (prefers-color-scheme: dark) {
  /* Déjà en mode sombre par défaut, mais peut-être ajuster quelques contrastes */
  .info-item,
  .testimonial,
  .team-member {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
.legal-toc-items {
  flex-direction: column;
  gap: 0.5rem;
}

.legal-content {
  padding: 1.5rem;
}

.legal-section h2 {
  font-size: 1.5rem;
}

.legal-section h3 {
  font-size: 1.2rem;
}

/* Page header (mentions légales, etc.) */
.page-header {
  padding: 1.5rem;
}

.page-header h1 {
  font-size: 2rem;
}

.legal-page .legal-date {
  font-size: 0.85rem;
}

/*=====================================
  9. PETIT MOBILE (320px-480px)
====================================*/
@media (max-width: 480px) {
  /* Layout général */
  body {
    font-size: 14px;
  }

  .container {
    padding: 0 0.75rem;
  }

  /* Header / Navigation */
  .site-header {
    height: 65px;
    padding: 0 0.5rem;
  }

  .site-header .logo img {
    height: 38px;
  }

  .hamburger {
    width: 28px !important;
    height: 22px !important;
    padding: 0 !important;
    margin-right: 0.4rem !important;
  }

  .hamburger span:nth-child(1) {
    top: 0px !important;
  }

  .hamburger span:nth-child(2),
  .hamburger span:nth-child(3) {
    top: 9px !important;
  }

  .hamburger span:nth-child(4) {
    top: 18px !important;
  }

  /* Menu navigation sur mobile */
  .nav-links {
    top: 65px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  }

  .nav-links a {
    padding: 0.85rem;
    font-size: 0.95rem;
  }

  /* Hero - Améliorations du centrage sur petits écrans */
  .hero {
    padding-top: 65px;
  }

  .hero-overlay {
    padding: 0 0.75rem;
    margin-top: -30px; /* Ajustement pour petits écrans */
    justify-content: center;
  }

  .hero-content {
    padding: 1rem 0; /* Ajoute un peu d'espace au-dessus et en dessous */
  }

  .hero-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .subhead {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .cta-group {
    gap: 0.5rem;
  }

  .social-proof {
    font-size: 0.85rem;
  }

  .social-proof .dot {
    padding: 0 0.3rem;
  }

  .scroll-cue {
    margin-top: 1rem;
  }

  /* Sections */
  .testimonials,
  .about-team,
  .community {
    padding: 2.5rem 0.75rem;
  }

  .community h2,
  .testimonials h2,
  .about-team-header h2 {
    font-size: 1.8rem;
  }

  /* Cards et grilles */
  .info-container {
    gap: 1rem;
  }

  .info-item {
    padding: 1.25rem;
  }

  .testimonial {
    max-width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .team-grid-container {
    gap: 1.25rem;
  }

  .team-member {
    padding: 1.5rem 1.25rem;
  }

  .about-vision {
    padding: 1.75rem 1.25rem;
  }

  /* Reservation */
  .agenda {
    padding: 1.25rem 0.5rem;
    margin-bottom: 1rem;
  }

  .agenda-head {
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .agenda-head .btn-secondary {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.85rem;
  }

  .agenda-title {
    order: -1;
    margin-bottom: 0.5rem;
  }

  /* Formulaires */
  .contact-form {
    padding: 1.25rem;
  }

  .form-group {
    margin-bottom: 0.9rem;
  }

  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  input,
  textarea,
  select {
    padding: 0.65rem 0.8rem;
    font-size: 0.9rem;
  }

  /* Page header */
  .page-header {
    margin-top: 65px;
    padding: 1.1rem 0.75rem;
  }

  .page-header h1 {
    font-size: 1.6rem;
  }

  /* Paiement */
  .payment-layout {
    gap: 1rem;
  }

  .order-summary,
  .pay-form {
    padding: 1.1rem;
  }

  .order-summary h2,
  .pay-form h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
  }

  /* Buttons */
  .btn-secondary {
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
  }

  /* Mentions légales */
  .legal-content {
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 8px;
  }

  .legal-section h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
  }

  .legal-section h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
  }

  /* About stats - réduction taille texte */
  .about-stats {
    gap: 0.5rem;
  }

  .about-stats li {
    font-size: 0.8rem;
  }

  .about-stats li strong {
    font-size: 1rem;
    margin-bottom: 0.15rem;
  }

  .about-stats li span {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}

/* Ajustements supplémentaires pour les très petits écrans */
@media (max-width: 360px) {
  .hero-overlay {
    padding: 0 0.5rem;
  }

  .hero-title {
    font-size: 1.7rem;
  }

  /* Boutons plus compacts dans le hero */
  .hero .btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
  }

  .cta-group {
    flex-direction: column; /* Empile les boutons verticalement */
    width: 100%; /* Prend toute la largeur */
    max-width: 280px; /* Limite la largeur maximale */
  }

  .cta-group .btn {
    width: 100%; /* Les boutons prennent toute la largeur */
    margin-bottom: 0.5rem;
  }

  /* About stats - réduction supplémentaire */
  .about-stats li strong {
    font-size: 0.95rem;
  }

  .about-stats li span {
    font-size: 0.7rem;
  }
}

/* Ajustement pour écrans en mode paysage avec hauteur limitée */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 500px;
    padding-top: 65px;
  }

  .hero-overlay {
    min-height: 400px;
    margin-top: 0;
    justify-content: center;
  }

  .hero-title {
    font-size: 2rem;
  }

  .subhead {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .cta-group {
    margin: 0.25rem 0 0.5rem;
  }
}

/*=====================================
  6. TABLETTE (768px-900px)
====================================*/
@media (max-width: 900px) {
  /* Layout */
  .container {
    padding: 0 1rem;
  }

  /* Navigation par hamburger - Style unifié */
  .hamburger {
    display: block !important;
    width: 32px !important;
    height: 24px !important;
    position: relative !important;
    cursor: pointer !important;
    z-index: 110 !important;
    transition: all 0.3s !important;
  }

  .hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    background: var(--color-accent-red) !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    left: 0 !important;
    transform: rotate(0deg) !important;
    transition: 0.25s ease-in-out !important;
  }

  .hamburger span:nth-child(1) {
    top: 0px !important;
  }

  .hamburger span:nth-child(2),
  .hamburger span:nth-child(3) {
    top: 10px !important;
  }

  .hamburger span:nth-child(4) {
    top: 20px !important;
  }

  /* Animation du hamburger en X */
  .hamburger.toggle span:nth-child(1) {
    top: 10px !important;
    width: 0% !important;
    left: 50% !important;
    opacity: 0 !important;
  }

  .hamburger.toggle span:nth-child(2) {
    transform: rotate(45deg) !important;
  }

  .hamburger.toggle span:nth-child(3) {
    transform: rotate(-45deg) !important;
  }

  .hamburger.toggle span:nth-child(4) {
    top: 10px !important;
    width: 0% !important;
    left: 50% !important;
    opacity: 0 !important;
  }

  /* Navigation menu styles uniformes */
  .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    background: rgba(0, 0, 0, 0.95) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important;
    z-index: 100 !important;
    padding: 0 !important;
  }

  .nav-links li {
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .nav-links li a {
    padding: 1rem !important;
    width: 100% !important;
    display: block !important;
  }

  .nav-links.nav-active {
    display: flex !important;
    animation: navFadeIn 0.5s ease forwards !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }

  @keyframes navFadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Animation des liens du menu */
  .nav-links li {
    opacity: 0;
    animation: navLinkFade 0.5s ease forwards;
    animation-delay: 0.2s;
  }

  .nav-links.nav-active li {
    opacity: 1;
  }

  .nav-links li:nth-child(2) {
    animation-delay: 0.3s;
  }
  .nav-links li:nth-child(3) {
    animation-delay: 0.4s;
  }
  .nav-links li:nth-child(4) {
    animation-delay: 0.5s;
  }

  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Page header ajusté */
  .page-header {
    margin-top: 80px;
    padding: 1.75rem 1.5rem;
  }

  /* Autres styles tablette */
  .intro-grid {
    grid-template-columns: 1fr;
  }

  /* Paiement */
  .payment-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .order-summary,
  .pay-form {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
  }

  /* Sections principales */
  .testimonials,
  .about-team,
  .community {
    padding: 4rem 1.5rem;
  }

  /* Hero */
  .hero-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
  }

  .subhead {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
  }

  /* Réservation */
  .reservation-layout {
    padding: 1.5rem 1rem;
    width: 100%;
    overflow-x: hidden; /* Empêcher tout débordement horizontal du conteneur */
  }

  .agenda {
    padding: 1.5rem;
    width: 100%;
    overflow-x: hidden; /* Pas de scroll sur le conteneur agenda */
  }

  .agenda-grid {
    min-width: auto; /* Supprimer la largeur minimale fixe */
    display: none; /* Cacher toutes les grilles par défaut */
  }

  .agenda-grid.active {
    display: grid; /* Afficher uniquement la grille active */
    grid-template-columns: repeat(
      7,
      minmax(90px, 1fr)
    ); /* Colonnes égales avec taille minimale */
    overflow-x: auto; /* Permettre le défilement horizontal sur la grille active */
    -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
  }

  /* Contrôleurs de navigation des jours */
  .agenda-day-nav {
    display: none; /* Masqué sur grand écran */
  }

  /* Autres éléments */
  .timeslot-categories,
  .agenda-head,
  .agenda-legend {
    width: 100%;
    overflow-x: hidden;
  }

  /* Formulaires ajustés */
  .contact-form {
    padding: 1.75rem;
  }

  /* Mentions légales */
  .legal-content {
    padding: 2rem 2.5rem;
  }
}

/*=====================================
  7. MOBILE PLUS (601px-767px)
====================================*/
@media (min-width: 601px) and (max-width: 767px) {
  /* Navigation */
  .site-header {
    padding: 0 0.75rem;
  }

  /* Hero */
  .hero-title {
    font-size: 2.75rem;
  }

  .subhead {
    font-size: 1.05rem;
  }

  /* Sections */
  .testimonials,
  .about-team,
  .community {
    padding: 3.5rem 1.25rem;
  }

  /* Cartes plus verticales */
  .info-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Formulaires */
  .form-group {
    margin-bottom: 1rem;
  }

  input,
  textarea,
  select {
    padding: 0.7rem 0.9rem;
  }

  /* Ajuster le layout de réservation */
  .reservation-row {
    gap: 1.25rem;
  }

  /* Page header (mentions légales, etc.) */
  .page-header {
    padding: 1.5rem 1rem;
  }
}

/*=====================================
  RESPONSIVE STYLES
=====================================*/

/* Ajustement de base pour tous les écrans - visibilité contrôlée par .active */
.agenda-grid {
  display: none; /* Masquer toutes les grilles par défaut */
  gap: 2px;
}
.agenda-grid.active {
  display: grid; /* Afficher uniquement la grille active */
}

.agenda-grid .day-head,
.agenda-grid .slot {
  min-width: 90px; /* Largeur minimale pour chaque colonne */
  width: 1fr;      /* Répartition égale de l'espace disponible */
  text-align: center;
}