/* ================================================================
   PAULSAB GAMING — style.css v3.4
   Mobile-first. Breakpoints : 480 / 640 / 768 / 900 / 1200
================================================================ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --bg:             #0a0a0c;
  --bg-surface:     transparent; /* sections transparentes pour laisser passer le dégradé */
  --fg:             #f0f0f2;
  --fg-muted:       rgba(240,240,242,.48);
  --fg-subtle:      rgba(240,240,242,.18);
  --red:            #f5444c;
  --blue:           #75c6fb;
  --glass-bg:       rgba(255,255,255,.045);
  --glass-bg-hover: rgba(255,255,255,.085);
  --glass-border:   rgba(255,255,255,.12);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  --glass-blur:     20px;
  --nav-bg:         rgba(10,10,14,.88);
  --border:         rgba(255,255,255,.08);
  --font-display:   'Syne', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --space-xs: .5rem;  --space-sm: 1rem;
  --space-md: 2rem;   --space-lg: 3.5rem;  --space-xl: 6rem;
  --r-sm: 8px;  --r-md: 16px;  --r-lg: 24px;  --r-pill: 999px;
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 180ms;  --dur-mid: 340ms;  --dur-slow: 600ms;
}
[data-theme="light"] {
  --bg:#f5f5f7; --bg-surface:rgba(255,255,255,.4); --fg:#1a1a1e;
  --fg-muted:rgba(26,26,30,.52); --fg-subtle:rgba(26,26,30,.18);
  --border:rgba(0,0,0,.08);
  --glass-bg:rgba(255,255,255,.6); --glass-bg-hover:rgba(255,255,255,.82);
  --glass-border:rgba(0,0,0,.10);
  --glass-shadow:0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.8);
  --nav-bg:rgba(245,245,247,.94);
}

/* ── Fond global avec dégradé ambiant sur toute la page ── */
html { background-color: var(--bg); }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 8%   15%, rgba(245,68,76,.18)  0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92%  85%, rgba(117,198,251,.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10%  70%, rgba(245,68,76,.08)  0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 90%  30%, rgba(117,198,251,.08) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--fg);
}
/* Tous les wrappers Gutenberg transparents — le dégradé body traverse tout */
.site-main,
.wp-site-blocks,
.entry-content,
.wp-block-group,
.wp-block-group__inner-container,
article { background: transparent !important; color: var(--fg); }

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  background-color:var(--bg); color:var(--fg);
  line-height:1.6; letter-spacing:.01em; overflow-x:hidden;
  transition:background var(--dur-slow) var(--ease-out),
             color     var(--dur-slow) var(--ease-out);
}
a      { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul     { list-style:none; }
img    { display:block; max-width:100%; height:auto; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container { width:min(1200px, 100% - 2rem); margin-inline:auto; }
.site-main  { position:relative; z-index:1; }

/* ── AMBIENT ─────────────────────────────────────────────────── */
/* Orbes ambient supprimés — remplacés par le dégradé body */
.ambient { display:none; }

/* ── GLASS ───────────────────────────────────────────────────── */
.glass {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--glass-shadow);
  transition:background var(--dur-mid) var(--ease-out),
             box-shadow  var(--dur-mid) var(--ease-out);
  position:relative;
}
.glass::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%);
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — mobile-first
   Structure : [LOGO] [links…] [toggle] [btn Réservations] [burger]
   Sur mobile  : [LOGO ← flex auto →] [toggle] [burger fixe droite]
════════════════════════════════════════════════════════════════ */
.nav-wrap {
  position:sticky; top:0; z-index:100;
  padding:.6rem 1rem;
}
.nav {
  width:min(1200px,100% - 2rem); margin-inline:auto;
  border-radius:var(--r-lg); padding:.7rem 1.2rem;
  /* Layout : logo | liens | spacer | actions | burger */
  display:grid;
  grid-template-columns: auto 1fr auto auto auto;
  grid-template-areas: "logo links space actions burger";
  align-items:center; gap:.75rem;
  background:var(--nav-bg) !important;
  transition:background var(--dur-mid);
}

/* ── Logo ── */
.nav__logo {
  grid-area:logo;
  display:flex; align-items:center; flex-shrink:0;
}
.nav__logo-img {
  height:40px; width:auto;
  filter:drop-shadow(0 0 10px rgba(245,68,76,.3));
  transition:filter var(--dur-mid);
}
.nav__logo:hover .nav__logo-img { filter:drop-shadow(0 0 18px rgba(245,68,76,.55)); }
.nav__logo .custom-logo { height:40px; width:auto; }
.nav__logo-text {
  font-family:var(--font-display); font-weight:800; font-size:1.2rem; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--red),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Liens desktop ── */
.nav__links {
  grid-area:links;
  display:flex; gap:1.5rem; align-items:center;
  /* centrage dans la zone links */
  justify-content:center;
}
.nav__link {
  font-size:.875rem; font-weight:400; color:var(--fg-muted);
  letter-spacing:.02em; white-space:nowrap;
  transition:color var(--dur-fast); position:relative;
}
.nav__link::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:var(--fg);
  transition:width var(--dur-mid) var(--ease-out);
}
.nav__link:hover,.nav__link--active { color:var(--fg); }
.nav__link:hover::after,.nav__link--active::after { width:100%; }

/* ── Actions (toggle + btn Réservations) ── */
.nav__actions {
  grid-area:actions;
  display:flex; align-items:center; gap:.6rem; flex-shrink:0;
}

/* Theme toggle */
.theme-toggle {
  width:36px; height:36px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--fg-muted); font-size:1rem; flex-shrink:0;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.theme-toggle:hover { color:var(--fg); background:var(--glass-bg-hover); }

/* ── Burger — toujours à droite, jamais déplacé ── */
.nav__burger {
  grid-area:burger;
  display:none; flex-direction:column; justify-content:center;
  gap:5px; padding:.5rem;
  /* taille de tap confortable sur mobile */
  width:40px; height:40px;
  flex-shrink:0; margin-left:0;
  border-radius:10px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  transition:background var(--dur-fast);
}
.nav__burger:hover { background:var(--glass-bg-hover); }
.nav__burger span {
  display:block; width:18px; height:1.5px;
  background:var(--fg); border-radius:2px;
  margin:0 auto;
  transition:transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid);
}
.nav__burger.open span:first-child { transform:rotate(45deg) translate(3px,3px); }
.nav__burger.open span:last-child  { transform:rotate(-45deg) translate(3px,-3px); }

/* ── MENU MOBILE (dropdown) ─────────────────────────────────── */
.nav__mobile {
  display:none; flex-direction:column; gap:0;
  padding:.5rem .75rem .75rem;
  border-radius:var(--r-lg);
  margin:.2rem .75rem .4rem;
  overflow:hidden;
  /* Fond opaque pour lisibilité sur fond clair ou image lumineuse */
  background: rgba(12,12,16,.96) !important;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
/* Thème clair : fond blanc très opaque */
html[data-theme="light"] .nav__mobile,
[data-theme="light"] .nav__mobile {
  background: rgba(245,245,247,.97) !important;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.nav__mobile.open { display:flex; }

.nav__mobile-link {
  display:flex; align-items:center;
  width:100%; color:var(--fg);
  font-size:1rem; font-weight:500;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color var(--dur-fast), background var(--dur-fast);
  line-height:1.3;
  min-height:48px;
}
html[data-theme="light"] .nav__mobile-link,
[data-theme="light"] .nav__mobile-link {
  color: #1a1a1e;
  border-bottom-color: rgba(0,0,0,.06);
}
.nav__mobile-link:last-of-type { border-bottom:none; }
.nav__mobile-link:hover,
.nav__mobile-link.nav__link--active {
  color:var(--fg); background:rgba(255,255,255,.05);
  border-radius:10px;
}

/* CTA "Réservations" dans le menu mobile */
.nav__mobile-cta {
  display:flex; align-items:center; justify-content:center;
  margin-top:.65rem; padding:.8rem 1rem;
  /* hérite des styles .btn .btn--primary via les classes WP */
}

/* ── BREAKPOINTS ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .nav-wrap { padding:.5rem .75rem; }
  .nav { padding:.6rem 1rem; gap:.75rem; }
}

@media (max-width:768px) {
  .nav {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo space actions burger";
  }
  .nav__links  { display:none; }   /* masqué, accessible via burger */
  .nav__burger { display:flex; }
  /* Bouton Réservations desktop visible jusqu'à 768px */
  .nav__actions .btn--primary { font-size:.8rem; padding:.5rem 1rem; }
}

@media (max-width:430px) {
  /* iPhone standard et plus petits : on masque le bouton desktop,
     le lien Réservations reste dans le menu burger */
  .nav__actions .btn--primary { display:none; }
  .nav {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo space actions burger";
    padding:.5rem .75rem; border-radius:14px;
  }
  .nav-wrap { padding:.3rem .5rem; }
  .nav__logo-img { height:34px; }
  /* Toggle visible même sur petit écran */
  .nav__actions { gap:.4rem; }
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.875rem; font-weight:500;
  letter-spacing:.01em; padding:.625rem 1.25rem;
  border-radius:var(--r-pill);
  transition:background var(--dur-fast),
             box-shadow  var(--dur-mid) var(--ease-out),
             transform   var(--dur-fast) var(--ease-spring);
  cursor:pointer; text-decoration:none; border:none;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn:active { transform:scale(.97); }
.btn--primary { background:var(--fg); color:var(--bg); }
.btn--primary:hover { box-shadow:0 0 0 3px rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.3); }
.btn--ghost {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--fg-muted); backdrop-filter:blur(10px);
}
.btn--ghost:hover  { background:var(--glass-bg-hover); color:var(--fg); }
.btn--large  { font-size:1rem; padding:.875rem 1.75rem; }
.btn--sm     { font-size:.8rem; padding:.4rem 1rem; }
.btn--full   { width:100%; justify-content:center; }
.btn--pill   { border-radius:var(--r-pill); }

@media (max-width:480px) {
  .btn--large { font-size:.9rem; padding:.75rem 1.4rem; }
}

/* ── UTILITAIRES ─────────────────────────────────────────────── */
.section      { padding:var(--space-xl) 0; }
.section--alt { background:var(--bg-surface); }
.section__head{ margin-bottom:var(--space-lg); }
.section__title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800; letter-spacing:-.02em; line-height:1;
}
.section__sub { margin-top:.5rem; color:var(--fg-muted); font-size:1rem; font-weight:300; }

.section-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin-bottom:.75rem;
}
.section-badge::before { content:''; display:block; width:20px; height:2px; background:var(--red); }

.text-gradient {
  background:linear-gradient(90deg,var(--red),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-red  { color:var(--red); }
.text-blue { color:var(--blue); }

/* ── HOURS DOT ───────────────────────────────────────────────── */
.hero__hours-dot { width:7px;height:7px;border-radius:50%;background:#888;transition:all var(--dur-mid); }
.hero__hours-dot.open   { background:#3ddc84;box-shadow:0 0 12px #3ddc84;animation:pulse-dot 2s infinite; }
.hero__hours-dot.soon   { background:#ff9500;box-shadow:0 0 12px #ff9500; }
.hero__hours-dot.closed { background:#666;box-shadow:none; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 4px #3ddc84}50%{box-shadow:0 0 14px #3ddc84} }

/* ── STATS ───────────────────────────────────────────────────── */
.stat { border-radius:var(--r-md);padding:1rem 1.5rem;text-align:center;min-width:100px; }
.stat__val { display:block;font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1; }
.stat__lbl { display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);margin-top:.25rem; }

/* ── REVEAL ──────────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════════════════════
   FOOTER — sans carte, responsive
════════════════════════════════════════════════════════════════ */
.footer {
  padding:var(--space-lg) 0 var(--space-md);
  background:transparent; border-top:none;
  position:relative; z-index:1;
}
.footer__bottom {
  display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem;
}
.footer__logo-link { display:flex; align-items:center; }
.footer__logo-img  { height:36px; width:auto; }
.footer__logo-text {
  font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--red),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.footer__logo-link .custom-logo { height:36px; width:auto; }

.footer__links { display:flex; gap:1.5rem; flex-wrap:wrap; margin-left:auto; }
.footer__links a {
  font-size:.8rem; color:var(--fg-muted); letter-spacing:.03em;
  transition:color var(--dur-fast);
}
.footer__links a:hover { color:var(--fg); }

.footer__copy {
  width:100%; font-size:.75rem; color:var(--fg-subtle);
  padding-top:1.25rem; border-top:none;
  text-align:center;
}

/* Footer mobile */
@media (max-width:640px) {
  .footer__bottom    { flex-direction:column; align-items:center; text-align:center; gap:1rem; }
  .footer__links     { margin-left:0; justify-content:center; gap:1.25rem; }
  .footer__logo-link { margin:0 auto; }
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--fg-subtle); border-radius:3px; }
:focus-visible { outline:2px solid var(--fg-muted); outline-offset:3px; border-radius:3px; }

/* ── RÉDUIT SUR TRÈS PETIT ÉCRAN ─────────────────────────────── */
@media (max-width:640px) {
  :root { --space-xl:3.5rem; --space-lg:2.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Pas de ligne autour des blocs WP */
.wp-block { border: none !important; }

/* ── Supprimer les espaces entre blocs Gutenberg ── */
.wp-block-group + .wp-block-group,
.entry-content > * + *,
.wp-site-blocks > * { margin-top: 0 !important; }
.entry-content > .wp-block-html { display: block; margin: 0 !important; padding: 0 !important; }

/* ── Suppression ciblée des séparations inter-sections ── */
.wp-block-html,
.wp-block-group,
.wp-block-group__inner-container {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Gutenberg ajoute parfois un fond sur ces wrappers */
.wp-block-html { background: transparent !important; }

/* Blocs Gutenberg consécutifs — pas d'espace entre eux */
.entry-content .wp-block-html + .wp-block-html,
.entry-content .wp-block-html {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Supprime l'espace/fond entre blocs Gutenberg ── */
.wp-block-group { background: transparent !important; }
.wp-site-blocks > .wp-block { margin-top: 0 !important; margin-bottom: 0 !important; }
.entry-content > * + * { margin-top: 0 !important; }
.is-layout-flow > * + * { margin-top: 0 !important; }

/* Pas de bordure entre blocs Gutenberg */
.wp-block + .wp-block { border-top: none !important; }

/* Supprime uniquement les bordures des wrappers de page — pas des composants */
.wp-block-group { border: none !important; outline: none !important; }
.entry-content > .wp-block-group { border: none !important; }

/* ── Wrappers de page transparents (pas de fond, pas de bordure) ── */
.wp-block-group:not(.has-background),
.wp-block-group__inner-container,
.entry-content,
.site-main,
.wp-site-blocks {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Suppression des séparations entre blocs/sections WP uniquement */
.wp-block-group { border: none !important; }
.wp-block-separator { display: none !important; }
.entry-content hr { display: none !important; }

/* Suppression des espaces/marges entre blocs Gutenberg */
.wp-block { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-site-blocks > * + * { margin-top: 0 !important; }
.entry-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }