/* ============================================================
   Polices AUTO-HÉBERGÉES (éco-conception + RGPD : aucune
   requête vers Google Fonts). Fichiers dans view/fonts/.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/vt323-400.woff2') format('woff2');
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary-color: #d1b023; /* Couleur jaune principale tirée de la maquette */
  --bg-color: #111;
  --text-light: #f5f5f5;
  --text-dark: #1a1a1a;
  --font-hero: 'VT323', monospace;
  --font-nav: 'Montserrat', sans-serif; /* menu/titres : police large géométrique (comme la maquette) */
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text-light);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* MÊME fond liminal sur TOUTES les pages, voile léger (on voit bien le décor) */
  background-color: var(--bg-color);
  background-image:
    linear-gradient(rgba(13, 12, 9, 0.62), rgba(13, 12, 9, 0.70)),
    url('../img/fond.jpg');
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* L'accueil et le concept héritent désormais du fond global (identique partout) */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

/* Navbar — transparente sur toutes les pages, laisse voir le fond.
   Léger dégradé sombre vers le haut juste pour la lisibilité du menu. */
.site-header {
  padding: 30px 40px;
  background: linear-gradient(to bottom, rgba(8, 8, 6, 0.95) 0%, rgba(8, 8, 6, 0.6) 55%, rgba(8, 8, 6, 0) 100%);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Logo image (wordmark BACKROOMS de la maquette) */
.logo-img {
  height: 50px;
  width: auto;
  display: block;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
}

/* Menu hamburger (caché sur desktop, affiché en responsive) */
.menu-toggle { display: none; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 28px; height: 3px; background: var(--primary-color); border-radius: 2px; transition: 0.3s; }

.main-nav a {
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-hero);   /* VT323 pixel, comme BACKROOMS / CONCEPT */
  font-size: 1.55rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

/* Poids des titres/boutons en Montserrat (présence comme sur la maquette) */
.btn, .carte h2, .carte h3, .mini-carte h3, .pillar h3, .footer-col h4,
.section-titre, .quick-link, .info-label, .diff-label { font-weight: 600; }

.main-nav a:hover, .main-nav a.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-nav);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-outline:hover {
  background-color: rgba(209, 176, 35, 0.1);
  box-shadow: 0 0 10px rgba(209, 176, 35, 0.3);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-dark);
  border: 1px solid var(--primary-color);
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #e6c533;
  box-shadow: 0 0 15px rgba(209, 176, 35, 0.4);
}

.btn-link {
  color: var(--primary-color);
  text-decoration: none;
  font-family: var(--font-nav);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 2px;
  margin-left: 25px;
  transition: color 0.3s;
}

.btn-link:hover {
  color: #e6c533;
  text-shadow: 0 0 5px rgba(209, 176, 35, 0.4);
}

/* Home Page Content */
.home-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px 60px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  /* Le hero remplit l'écran -> le footer passe sous la ligne de flottaison */
  min-height: calc(100vh - 112px);
  min-height: calc(100dvh - 112px);
}

.home-content {
  max-width: 650px;
}

.hero-title {
  font-family: var(--font-hero);
  font-size: 6rem;
  color: var(--text-light);
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-shadow: 0px 4px 15px rgba(0,0,0,0.5);
}

.hero-text {
  color: #eaeaea;
  margin-bottom: 40px;
  font-family: Georgia, 'Times New Roman', serif; /* intro en italique serif, comme la maquette */
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  text-align: left;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.hero-buttons {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
}

/* Features */
.hero-features {
  display: flex;
  gap: 50px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--primary-color);
  text-decoration: none;
  font-family: var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.3s, text-shadow 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
  text-shadow: 0 0 8px rgba(209, 176, 35, 0.4);
}

.feature-icon {
  width: auto;
  height: 52px;
  margin-bottom: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.feature-item span {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ===================== FOOTER (toutes les pages) ===================== */
.site-footer {
  background: #0d0d0a;
  border-top: 2px solid var(--primary-color);
  margin-top: auto;
  color: #cfcfcf;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr 1fr;
  gap: 32px;
  padding: 44px 30px 30px;
}
.footer-col h4 {
  font-family: var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary-color);
  font-size: 1rem;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; line-height: 1.4; }
.footer-col a { color: #cfcfcf; text-decoration: none; transition: color 0.25s; }
.footer-col a:hover { color: var(--primary-color); }
.footer-logo { height: 44px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: #b8b8b0; font-style: italic; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid #333;
  padding: 16px 30px;
  text-align: center;
  font-size: 0.9rem;
  color: #b0b0a8;
}
.footer-bottom a { color: var(--primary-color); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-logo { margin: 0 auto 16px; }
}

/* Responsive */
/* ========== RESPONSIVE : menu hamburger sous 1200px ========== */
@media (max-width: 1200px) {
  .burger { display: flex; }
  .header-container { flex-wrap: wrap; }
  /* Nav + actions masquées, dépliées au clic sur le hamburger */
  .main-nav, .header-actions { display: none; width: 100%; }
  #menu-toggle:checked ~ .main-nav,
  #menu-toggle:checked ~ .header-actions { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .main-nav li { border-top: 1px solid #2a2a2a; }
  .main-nav a { display: block; padding: 13px 4px; border-bottom: none; }
  .header-actions { flex-direction: column; gap: 10px; padding: 12px 0 4px; align-items: stretch; }
  .header-actions .btn, .header-actions .btn-link { text-align: center; }
  .hero-title { font-size: 5rem; }
  .home-main { padding: 20px 30px; }
}

@media (max-width: 768px) {
  .home-content { max-width: 100%; }
  .hero-features { flex-wrap: wrap; gap: 30px; }
  .logo-img { height: 40px; }
  .hero-title { font-size: 3.4rem; }
  .hero-buttons { flex-wrap: wrap; gap: 14px; }
}

/* ======================================================================
   PAGES INTÉRIEURES (concept, infos, règles, réservation, profil…)
   ====================================================================== */

/* Le <main> occupe l'espace pour coller le footer en bas de page */
main { flex: 1 0 auto; }

.page-contenu { max-width: 1000px; padding: 40px 20px 70px; }

.page-contenu h1 {
  font-family: var(--font-nav);
  font-size: 2.4rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.page-contenu h1::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: var(--primary-color);
  margin-top: 10px;
}

.page-intro { font-size: 1.1rem; color: #cfcfcf; max-width: 72ch; margin-bottom: 30px; }

.section-titre {
  font-family: var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary-color);
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
  margin: 45px 0 20px;
}

/* Cartes (grille responsive) */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 25px 0;
}
.carte {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 24px;
}
.carte h2 {
  font-family: var(--font-nav);
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.carte h3 { font-family: var(--font-nav); color: #fff; margin-bottom: 10px; }
.carte ul { padding-left: 20px; }
.carte li { margin-bottom: 8px; color: #dcdcdc; }
.carte p { color: #dcdcdc; }

/* Salles */
.salle-tag {
  display: inline-block;
  background: var(--primary-color);
  color: #1a1a1a;
  font-family: var(--font-nav);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.salle-tag--hard { background: #c0392b; color: #fff; }
.salle-meta { color: #9a9a9a; font-size: .9rem; margin-top: 12px; }

/* Bloc d'appel à l'action */
.cta-bloc { text-align: center; margin: 45px 0 10px; }
.cta-bloc p { margin-bottom: 15px; font-size: 1.1rem; }

/* Formulaires */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-nav);
  letter-spacing: .5px;
  color: #eaeaea;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-bloc input,
.form-bloc select {
  width: 100%;
  padding: 11px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-bloc input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 6px rgba(209, 176, 35, 0.25);
}

/* Messages d'alerte */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-family: var(--font-nav); }
.alert-error { background: rgba(192, 57, 43, 0.15); border: 1px solid #c0392b; color: #ff9b8f; }
.alert-success { background: rgba(39, 174, 96, 0.15); border: 1px solid #27ae60; color: #7ee2a8; }

/* Avis */
.avis-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.avis-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 20px; }
.avis-note { color: var(--primary-color); letter-spacing: 2px; margin-bottom: 10px; }
.avis-card blockquote { font-style: italic; color: #ddd; margin: 0 0 12px; }
.avis-card figcaption { color: var(--primary-color); font-family: var(--font-nav); }

/* Tableaux (réservations, scores) */
.tableau { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tableau th, .tableau td { border: 1px solid #2f2f2f; padding: 10px 12px; text-align: left; }
.tableau th { background: #222; color: var(--primary-color); font-family: var(--font-nav); letter-spacing: .5px; }
.tableau td { color: #dcdcdc; }

/* Badges de statut */
.badge { padding: 3px 10px; border-radius: 12px; font-size: .8rem; color: #fff; text-transform: capitalize; white-space: nowrap; }
.badge-en_attente { background: #e67e22; }
.badge-confirmee { background: #27ae60; }
.badge-annulee { background: #c0392b; }

/* Code d'invitation d'équipe */
.code-invite {
  font-family: var(--font-hero);
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--primary-color);
  background: #000;
  padding: 2px 14px;
  border-radius: 6px;
}
.equipe-entete h2 { color: var(--primary-color); }

@media (max-width: 600px) {
  .page-contenu h1 { font-size: 1.9rem; }
  .tableau { font-size: .85rem; }
  .tableau th, .tableau td { padding: 7px 8px; }
}

/* ======================================================================
   PAGE CONCEPT (À PROPOS) — d'après la maquette (DA Entreprise)
   ====================================================================== */

/* Fond liminal sombre sur toute la page, fixe au défilement */
/* Lisibilité du texte « nu » par-dessus le fond visible */
.concept-lead, .pillar p, .pillar h3, .sec-sub,
.page-intro, .page-contenu h1, .container h1, .container h2, .container > p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

/* ===================== PAGE MENTIONS LÉGALES (maquette) ===================== */
.mentions-page p, .mentions-page li {
  font-style: italic;             /* corps de texte en italique, comme la maquette */
  color: #e3e3e3;
  max-width: 80ch;
  margin-bottom: 14px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.mentions-titre {
  font-family: var(--font-hero);  /* titres de sections en pixel VT323 */
  font-size: 1.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 34px 0 12px;
}
.mentions-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: start; }
.mentions-grid .mentions-titre { margin-top: 20px; }
.mentions-page a { color: var(--primary-color); }
.mentions-droits { list-style: none; padding-left: 0; }
.mentions-droits li { margin-bottom: 4px; }
.mentions-maj { margin-top: 40px; font-size: .85rem; color: #9a9a8a; }
@media (max-width: 760px) { .mentions-grid { grid-template-columns: 1fr; gap: 0; } }

.concept-page { max-width: 1120px; margin: 0 auto; padding: 0 20px 50px; }
.concept-section { padding: 48px 0; }

.sec-title {
  font-family: var(--font-hero);
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--text-light);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}
.sec-sub {
  font-family: var(--font-nav);
  font-style: italic;
  letter-spacing: 1px;
  color: var(--primary-color);
  margin: 4px 0 30px;
}

.concept-lead { font-size: 1.12rem; color: #dcdcdc; max-width: 78ch; line-height: 1.6; }
.lead-objectif { color: var(--primary-color); font-weight: 600; }

/* Icônes SVG (jaunes via currentColor) */
.ic { width: 46px; height: 46px; color: var(--primary-color); }

/* Section 1 : piliers */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.pillar { text-align: center; padding: 6px; }
.pillar h3 { font-family: var(--font-nav); color: var(--primary-color); letter-spacing: 1px; margin: 14px 0 8px; }
.pillar p { color: #cfcfcf; font-size: .95rem; line-height: 1.45; }

/* Section 2 : mini-cartes */
.mini-cartes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.mini-carte {
  background: rgba(22, 20, 14, 0.72);
  border: 1px solid #3a3320;
  border-radius: 8px;
  padding: 22px 14px;
  text-align: center;
}
.mini-carte .ic { width: 40px; height: 40px; }
.mini-carte h3 {
  font-family: var(--font-nav);
  color: var(--primary-color);
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 12px 0 8px;
}
.mini-carte p { color: #c4c4c4; font-size: .85rem; line-height: 1.45; }

/* Section 3 : statistiques */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
  padding: 30px 16px;
  background: rgba(0, 0, 0, 0.35);
}
.stat-item { text-align: center; }
.stat-item .ic { width: 40px; height: 40px; }
.stat-num { display: block; font-family: var(--font-hero); font-size: 2.7rem; line-height: 1; color: var(--primary-color); margin: 8px 0 4px; }
.stat-lbl { display: block; color: #cfcfcf; font-size: .82rem; line-height: 1.3; }

/* Section 4 : règles de survie */
.rules-box {
  border: 1px solid var(--primary-color);
  border-radius: 12px;
  padding: 26px 30px;
  background: rgba(0, 0, 0, 0.42);
  max-width: 780px;
}
.rules-box h3 { font-family: var(--font-nav); text-transform: uppercase; color: var(--primary-color); letter-spacing: 1px; margin-bottom: 16px; }
.rules-list { list-style: none; }
.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  color: #e3e3e3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.warn { width: 22px; height: 22px; color: var(--primary-color); flex-shrink: 0; margin-top: 1px; }
.rules-link { margin-top: 18px; }

@media (max-width: 900px) {
  .pillars, .mini-cartes, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-title { font-size: 2.6rem; }
}
@media (max-width: 540px) {
  .pillars, .mini-cartes, .stats-grid { grid-template-columns: 1fr; }
  .sec-title { font-size: 2.2rem; }
}

/* ===================== PAGE INFOS PRATIQUES ===================== */
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.quick-link {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--primary-color); border-radius: 8px;
  padding: 16px 18px; color: var(--text-light); text-decoration: none;
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: .5px;
  background: rgba(0, 0, 0, 0.35); transition: background .25s, transform .25s;
}
.quick-link:hover { background: rgba(209, 176, 35, 0.12); transform: translateY(-3px); }
.quick-link .ic { width: 30px; height: 30px; flex-shrink: 0; }

.loc-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: start; }
.loc-info { display: flex; flex-direction: column; gap: 16px; }
.info-field { background: rgba(20, 20, 14, 0.7); border: 1px solid #3a3320; border-left: 3px solid var(--primary-color); border-radius: 6px; padding: 12px 16px; }
.info-label { display: block; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color); font-size: .8rem; margin-bottom: 4px; }
.info-field p { color: #e6e6e6; }
.loc-map iframe, #map-backrooms { width: 100%; height: 320px; border: 1px solid var(--primary-color); border-radius: 8px; display: block; }
.loc-form { display: flex; flex-direction: column; gap: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid #3a3320; border-radius: 8px; padding: 20px; }
.loc-form .form-group { margin: 0; }
.loc-form input, .loc-form textarea { background: #1c1c16; }

.tarif-card { display: flex; flex-direction: column; }
.tarif-prix { font-family: var(--font-hero); font-size: 2.2rem; color: var(--primary-color); margin: 14px 0 12px; }
.tarif-prix span { font-family: var(--font-body); font-size: .9rem; color: #9a9a9a; margin-left: 6px; }
.diff { margin-top: auto; text-align: center; }
.diff-label { display: block; font-size: .8rem; color: #9a9a9a; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
/* Jauge de difficulté en demi-cercle (comme la maquette) */
.gauge { width: 150px; height: auto; display: block; margin: 4px auto 2px; }
.diff-niv { display: block; font-family: var(--font-hero); font-size: 1.35rem; color: var(--primary-color); letter-spacing: 1px; }

.interdits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.interdit { text-align: center; }
.interdit span { display: block; margin-top: 12px; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: .5px; color: #d8d8d8; font-size: .85rem; }
/* Pictogrammes d'interdiction (le cercle barré est déjà dans l'image) */
.interdit-ic { width: 96px; height: 96px; margin: 0 auto; display: block; object-fit: contain; }

@media (max-width: 900px) {
  .quick-links { grid-template-columns: repeat(2, 1fr); }
  .loc-grid { grid-template-columns: 1fr; }
  .interdits-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .quick-links { grid-template-columns: 1fr; }
  .interdits-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Formulaires « nus » (inscription / connexion) : panneau sombre lisible sur le fond */
.container form {
  background: rgba(12, 11, 8, 0.66);
  border: 1px solid #2a2a20;
  border-radius: 10px;
  padding: 26px;
  max-width: 640px;
}
.form-switch { margin-top: 16px; color: #cfcfcf; }
.form-switch a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.form-switch a:hover { text-decoration: underline; }

/* Tarifs : toujours les 3 salles côte à côte (1 colonne en petit mobile) */
.cartes-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cartes-3 { grid-template-columns: 1fr; } }

/* Pages "formulaire" centrées au milieu de la page (contact, réservation) */
.form-page { max-width: 720px; }
.form-page > h1, .form-page > h2, .form-page > p, .form-page .form-switch { text-align: center; }
.form-page form { margin-left: auto; margin-right: auto; }

/* =====================================================================
   PAGE RÉSERVATION / INSCRIPTION (maquette : infos, calendrier, santé, paiement)
   ===================================================================== */
.resa-page .concept-section { padding: 38px 0; }

/* Champs sombres avec libellé en placeholder jaune */
.resa-field {
  width: 100%;
  padding: 14px 16px;
  background: rgba(20, 19, 14, 0.88);
  border: 1px solid #3a3320;
  border-radius: 8px;
  color: var(--text-light);
  font-family: var(--font-nav);
  letter-spacing: 1px;
  font-size: .95rem;
}
.resa-field::placeholder { color: #c9b86a; text-transform: uppercase; letter-spacing: 1px; opacity: .9; }
.resa-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 6px rgba(209, 176, 35, .25); }
select.resa-field { cursor: pointer; }

.resa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.resa-col { display: flex; flex-direction: column; gap: 16px; }
.resa-dob-label { color: #c9b86a; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-nav); font-weight: 600; font-size: .85rem; }
.resa-dob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Calendrier des disponibilités */
.calendrier { max-width: 640px; margin: 10px auto 0; }
.cal-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-mois { font-family: var(--font-hero); font-size: 1.7rem; color: var(--primary-color); text-transform: capitalize; }
.cal-nav { color: var(--primary-color); font-size: 1.5rem; line-height: 1; text-decoration: none; padding: 4px 14px; border: 1px solid #3a3320; border-radius: 6px; }
.cal-nav:hover { background: rgba(209, 176, 35, .12); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-jour { text-align: center; font-family: var(--font-nav); font-weight: 600; color: #9a9a8a; font-size: .68rem; text-transform: uppercase; padding-bottom: 4px; letter-spacing: .3px; }
.cal-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; }
.cal-pagination .btn-link { margin-left: 0; }
/* Boutons de navigation du calendrier : même apparence que les liens */
.cal-btn { background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; }
.cal-case {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: rgba(20, 19, 14, 0.82);
  border: 1px solid #3a3320; border-radius: 6px;
  color: #e6e6e6; font-family: var(--font-hero); font-size: 1.3rem;
  cursor: pointer; transition: .15s;
}
.cal-case:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cal-passe { opacity: .28; cursor: not-allowed; }
.cal-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-radio:checked + .cal-case { background: var(--primary-color); color: #1a1a1a; border-color: var(--primary-color); }
.cal-aide { text-align: center; color: #9a9a8a; font-size: .85rem; margin-top: 10px; }

/* Questionnaire santé */
.sante-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); flex-wrap: wrap; }
.sante-libelle { color: #e3e3e3; }
.ouinon { display: flex; gap: 10px; flex-shrink: 0; }
.ouinon label { display: inline-flex; align-items: center; gap: 6px; background: rgba(20, 19, 14, .85); border: 1px solid #3a3320; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-family: var(--font-nav); font-weight: 600; color: #cfcfcf; }
.ouinon input { accent-color: var(--primary-color); }

/* Paiement */
.paiement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pay-col { background: rgba(0, 0, 0, .42); border: 1px solid #3a3320; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.pay-titre { font-family: var(--font-nav); color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px; font-size: 1.05rem; font-weight: 600; }
.pay-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-info { color: #bdbdb2; }
.pay-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pay-logos span { border: 1px solid #4a4330; border-radius: 6px; padding: 6px 10px; font-family: var(--font-nav); font-weight: 600; font-size: .8rem; color: #d8d8d8; background: #15140f; }
.pay-btn { width: 100%; text-align: center; }

@media (max-width: 760px) {
  .resa-grid, .paiement-grid { grid-template-columns: 1fr; }
  .cal-case { font-size: 1.05rem; }
  .sante-q { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   PAGE MON PROFIL (espace privé, maquette)
   ===================================================================== */
.profil-bloc { display: flex; gap: 28px; align-items: flex-start; margin-top: 22px; }
.profil-avatar { flex-shrink: 0; width: 140px; text-align: center; }
.avatar-cercle {
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(20, 19, 14, 0.85); border: 2px solid var(--primary-color);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.avatar-cercle svg { width: 46px; height: 46px; color: var(--primary-color); }
.avatar-changer { display: block; margin-top: 10px; font-size: .78rem; color: #9a9a8a; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: .5px; }
.profil-champs { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.champ {
  display: flex; align-items: center; gap: 14px;
  background: rgba(20, 19, 14, 0.85); border: 1px solid #3a3320; border-radius: 8px;
  padding: 4px 16px;
}
.champ-label { color: #c9b86a; font-family: var(--font-nav); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; min-width: 150px; }
.champ input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-light); font-family: var(--font-nav); font-size: .95rem; padding: 12px 0; }
.champ input::placeholder { color: #7a7a70; }
.champ-val { flex: 1; color: var(--text-light); font-family: var(--font-nav); padding: 12px 0; }
.profil-champs .btn { align-self: flex-start; margin-top: 4px; }

/* Zone sécurité */
.zone-lien {
  display: flex; align-items: center; gap: 16px;
  background: rgba(20, 19, 14, 0.85); border: 1px solid #3a3320; border-radius: 8px;
  padding: 16px 20px; text-decoration: none; color: var(--text-light);
  margin-bottom: 12px; transition: .2s;
}
.zone-lien:hover { border-color: var(--primary-color); background: rgba(209, 176, 35, .08); }
.zone-lien > svg { width: 26px; height: 26px; color: var(--primary-color); flex-shrink: 0; }
.zone-lien strong { color: var(--primary-color); font-family: var(--font-nav); text-transform: uppercase; letter-spacing: .5px; }
.zone-lien small { color: #9a9a8a; }
.zone-fleche { margin-left: auto; color: var(--primary-color); font-size: 1.6rem; }

@media (max-width: 640px) {
  .profil-bloc { flex-direction: column; align-items: center; }
  .profil-champs { width: 100%; }
  .champ { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
  .champ-label { min-width: 0; }
  .champ input, .champ-val { padding: 4px 0; width: 100%; }
}

/* =====================================================================
   POLICE PIXEL (VT323) sur TOUT l'habillage — comme les 3 maquettes
   (boutons, libellés d'icônes, titres de sections et de cartes…)
   ===================================================================== */
.feature-item, .feature-item span,
.page-contenu h1, .section-titre,
.carte h2, .mini-carte h3, .pillar h3,
.quick-link, .salle-tag {
  font-family: var(--font-hero);
  letter-spacing: 1px;
}
/* Boutons : police NETTE et lisible (Montserrat gras), pas le pixel */
.btn { font-family: var(--font-nav); font-weight: 600; font-size: 1.05rem; letter-spacing: 1.5px; }
.btn-link { font-family: var(--font-nav); font-weight: 600; font-size: 1rem; }
.feature-item span { font-size: 1.15rem; }
.page-contenu h1 { font-size: 2.8rem; }
.section-titre { font-size: 2rem; }
.carte h2 { font-size: 1.55rem; }
.mini-carte h3 { font-size: 1.3rem; }
.pillar h3 { font-size: 1.45rem; }
.quick-link { font-size: 1.3rem; }
.salle-tag { font-size: 1.1rem; padding: 2px 12px; }
.footer-col h4 { font-size: 1.05rem; font-weight: 600; }

/* =====================================================================
   RESPONSIVE RENFORCÉ (mobile / tablette)
   ===================================================================== */
/* Fond fiable sur mobile : on enlève le "fixed" (bug iOS / zoom) */
@media (max-width: 900px) {
  body { background-attachment: scroll; }
}

/* Menu déroulant mobile lisible (panneau sombre derrière) */
@media (max-width: 1200px) {
  #menu-toggle:checked ~ .main-nav,
  #menu-toggle:checked ~ .header-actions {
    background: rgba(8, 8, 6, 0.96);
    padding-left: 6px; padding-right: 6px;
  }
}

@media (max-width: 768px) {
  .site-header { padding: 16px 18px; }
  .home-main { padding: 28px 20px; }
  .page-contenu, .concept-page { padding-left: 16px; padding-right: 16px; }
  .concept-section { padding: 34px 0; }
  .hero-title { font-size: 3rem; }
  .page-contenu h1 { font-size: 2.3rem; }
  .feature-icon { height: 46px; }
  .loc-map iframe { height: 260px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.5rem; }
  .hero-buttons { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn-link { margin-left: 0; }
  .hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
  .feature-item span { font-size: 0.9rem; }
  .feature-icon { height: 38px; }
  .sec-title { font-size: 1.8rem; }
  .page-contenu h1 { font-size: 2rem; }
  .container { padding: 16px; }
  .rules-box, .mentions { padding: 20px 18px; }
  .stats-grid { padding: 22px 12px; }
  .footer-grid { padding: 30px 20px 24px; }
}


/* =====================================================================
   Neutralise le fond JAUNE de l'autofill du navigateur (email / mot de passe)
   ===================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-light) !important;
  -webkit-box-shadow: 0 0 0 1000px #1d1c15 inset !important;
  box-shadow: 0 0 0 1000px #1d1c15 inset !important;
  caret-color: var(--text-light);
  transition: background-color 9999s ease-in-out 0s;
}
input:autofill {            /* version standard (Firefox récent) */
  -webkit-text-fill-color: var(--text-light);
  box-shadow: 0 0 0 1000px #1d1c15 inset;
}

/* ===================== "Les règles de survie" : un seul triangle, à côté du titre ===================== */
.rules-titre { display: flex; align-items: center; gap: 12px; }
.rules-titre .warn { width: 26px; height: 26px; }
.rules-list li { padding-left: 4px; }

/* Stats du profil : 4 colonnes, responsives */
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid--4 { grid-template-columns: 1fr; } }

/* Tableaux : scroll horizontal sur mobile au lieu de déborder */
@media (max-width: 600px) {
  .tableau { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   RESPONSIVE GLOBAL — derniers ajustements toutes pages
   ===================================================================== */
img, svg, iframe { max-width: 100%; }

@media (max-width: 480px) {
  /* Calendrier : en-têtes de jours abrégés visuellement (taille réduite) */
  .cal-jour { font-size: .55rem; }
  .cal-grille { gap: 4px; }
  .cal-pagination { flex-direction: column; align-items: stretch; text-align: center; }
  /* Sections plus denses sur petit mobile */
  .concept-page { padding-left: 12px; padding-right: 12px; }
  .resa-dob { grid-template-columns: 1fr; }
  .pay-ligne { grid-template-columns: 1fr; }
  .ouinon { width: 100%; }
  .ouinon label { flex: 1; justify-content: center; }
  /* Boutons pleine largeur sur mobile (meilleure zone tactile) */
  .cta-bloc .btn, .profil-champs .btn { width: 100%; text-align: center; }
}

/* Onglets du profil (pages mot de passe / avis) : retour à la ligne sur mobile */
.profil-onglets { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }

/* ===================== PAGE CLASSEMENT ===================== */
.classement-table td:first-child { font-size: 1.2rem; text-align: center; width: 64px; }
.classement-table .podium td { background: rgba(209, 176, 35, 0.08); }
.classement-table .podium td:nth-child(2) { color: var(--primary-color); font-weight: 600; }

/* ===================== Vignettes de salles + annulation (Mes parties) ===================== */
.session-cell { display: flex; align-items: center; gap: 10px; }
.salle-thumb { width: 72px; height: 42px; object-fit: cover; border-radius: 5px; border: 1px solid #3a3320; }
.btn-annuler { font-size: .85rem; padding: 5px 12px; }

/* Jour complet dans le calendrier (les 3 salles réservées) */
.cal-complet {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
  border-color: #5a2020;
  color: #c98a8a;
}

/* ===================== Photo de profil (avatar) ===================== */
.avatar-cercle { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-input { display: none; }              /* le label "Changer la photo" sert de bouton */
.avatar-changer:hover { color: var(--primary-color); }

/* Avatar dans les avis */
.avis-auteur { display: flex; align-items: center; gap: 10px; }
.avis-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--primary-color); }
.avis-avatar--vide { display: inline-flex; align-items: center; justify-content: center; background: #2a2a20; font-size: 1rem; }

/* ===================== Tarifs : tableau dégressif + calculateur ===================== */
.tarif-grille { margin-top: 6px; }
.tarif-note { margin-top: 14px; color: #cfcfcf; line-height: 1.6; }
.calc-tarif { background: rgba(0,0,0,.42); border: 1px solid var(--primary-color); border-radius: 10px; padding: 22px; }
.calc-resultat { margin-top: 14px; text-align: center; min-height: 60px; }
.calc-pp { display: block; color: #cfcfcf; font-family: var(--font-nav); letter-spacing: .5px; }
.calc-total { display: block; font-family: var(--font-hero); font-size: 2.3rem; color: var(--primary-color); margin-top: 4px; }
.resa-prix { color: var(--primary-color); font-family: var(--font-nav); font-weight: 600; margin-top: -4px; min-height: 1.2em; }
.carte-picto { width: 58px; height: 58px; object-fit: contain; display: block; margin-bottom: 10px; }

/* --- Partage du score sur les réseaux sociaux (page profil) --- */
.profil-partage { margin-top: 26px; text-align: center; }
.partage-titre { font-family: var(--font-nav); letter-spacing: .5px; color: #cfcfcf; margin-bottom: 12px; }
.partage-liens { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.partage-btn {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--primary-color);
  border-radius: 4px; color: var(--primary-color); text-decoration: none;
  font-family: var(--font-nav); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.partage-btn:hover { background: var(--primary-color); color: #14130d; }