/* === Police unique globale (Roboto) === */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --btn-bg:#2984c2;
  --btn-bg-hover:#1976b0;
  --btn-text:#ffffff;
  --input-bg:#242d3d;
  --input-border:rgba(255,255,255,.12);
  --card-bg:#181f2a;
}

/* Typo globale */
html, body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea, nav a, .logo,
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family) !important; }
.fc, .fc * { font-family: var(--font-family) !important; }

/* ====== Design de base ====== */
body { background-color: #111; color: #fff; margin: 0; padding: 0; }
header, .site-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 30px; background:#0a0a0a; border-bottom:2px solid #e60023;
}
.logo { font-size:24px; color:#6ec1ff; letter-spacing:1px; font-weight:700; }
.site-nav { display:flex; gap:20px; align-items:center; }
.site-nav a { color:#fff; text-decoration:none; font-weight:bold; }
.site-nav a:hover { color:#e60023; }

.container {
  max-width: 600px; margin: 20px auto; padding: 20px;
  background:#181f2a; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.5);
}
h1 { text-align:center; color:#6ec1ff; margin-bottom:30px; }

/* Formulaires */
form input, form textarea {
  width:100%; padding:12px; margin-bottom:20px; border:none; border-radius:8px;
  background:var(--input-bg); color:#fff; font-size:1rem; box-sizing:border-box;
}
form textarea { resize:vertical; min-height:100px; }

/* Boutons */
button, .btn, .contact-btn, .booking-button {
  background:var(--btn-bg); color:var(--btn-text); border:none;
  padding:12px 24px; border-radius:30px; font-size:1rem; font-weight:700;
  cursor:pointer; transition:background-color .25s ease, transform .06s ease;
  display:inline-block; text-decoration:none; text-align:center;
}
button:hover, .btn:hover, .contact-btn:hover, .booking-button:hover { background:var(--btn-bg-hover); }
button:active, .btn:active, .contact-btn:active, .booking-button:active { transform:translateY(1px); }

/* Footer & réseaux */
footer { text-align:center; color:#888; font-size:.85rem; margin-top:40px; padding-bottom:20px; }
.social-links { display:flex; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap; }
.social-links a img { width:32px; height:32px; filter:brightness(0) invert(1); transition:transform .2s; }
.social-links a:hover img { transform:scale(1.15); }

/* Index image */
.main-photo {
  width:100%; height:auto; max-height:500px; border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.7); margin-bottom:30px;
}

/* Spectacles */
@media (max-width:800px){ .event-item{ padding:12px 14px; } }

/* Booking */
.fc .fc-col-header-cell-cushion{ color:#fff; text-transform:uppercase; font-weight:800; letter-spacing:.3px; }
.fc-daygrid-day-number{ color:#ddd; }

/* ====== NAV: hamburger (caché desktop, visible mobile) ====== */

/* caché en desktop */
.site-header .nav-toggle{
  display:none !important;
  width:48px; height:48px; border-radius:12px;
  background:#1b2433; border:1px solid rgba(255,255,255,.35);
  -webkit-tap-highlight-color:transparent;
  appearance:none; -webkit-appearance:none;
  outline:none;
  align-items:center; justify-content:center;
  position:relative; /* pour ::before */
}
/* masque toute ancienne icône (spans/SVG) afin d’éviter les “points” */
.site-header .nav-toggle svg,
.site-header .nav-toggle .bar { display:none !important; }

/* icône hamburger ultra-robuste : 3 barres blanches via ::before */
.site-header .nav-toggle::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:24px; height:2.6px; background:#fff !important; border-radius:2px;
  transform:translate(-50%,-50%);
  /* 3 barres: centrale + 2 via box-shadow */
  box-shadow: 0 -7px 0 0 #fff, 0 7px 0 0 #fff;
}
.site-header .nav-toggle:hover{ background:#223044; }

/* focus clavier (desktop) */
.site-header .nav-toggle:focus-visible{
  outline:2px solid #6ec1ff; outline-offset:3px;
}
/* environnement tactile: pas de halo bleu */
@media (hover:none) and (pointer:coarse){
  .site-header .nav-toggle:focus,
  .site-header .nav-toggle:focus-visible{
    outline:none !important; box-shadow:none !important;
  }
}

/* overlay + drawer mobile */
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999; display:none; }
.nav-overlay.open{ display:block; }

@media (max-width:900px){
  .site-header .nav-toggle{ display:flex !important; }
  .site-nav{
    position:fixed; z-index:1000; inset:0 0 0 auto; width:min(78vw,320px);
    background:#0a0a0a; border-left:1px solid rgba(255,255,255,.1);
    padding:72px 20px 20px; flex-direction:column; align-items:flex-start;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .site-nav.open{ transform:translateX(0%); }
  .site-nav a{ padding:12px 8px; width:100%; }
}

/* Containers responsive */
.container{ width:min(1100px,92vw); margin:24px auto; }
@media (max-width:768px){
  .container{ width:92vw; margin:16px auto; }
  h1{ font-size:1.5rem; }
}

/* Carrousel mobile */
@media (max-width:900px){
  .main-photo{ max-height:60vh; object-fit:cover; width:100%; }
}

/* Booking modal plein écran + FC compact */
@media (max-width:600px){
  .modal .card{ width:100vw; height:100dvh; max-height:100dvh; border-radius:0; display:flex; flex-direction:column; }
  .modal .card .grid{ flex:1; overflow:auto; }
  .fc .fc-toolbar-title{ font-size:1rem; }
  .fc .fc-prev-button, .fc .fc-next-button{ width:38px; height:38px; }
}
@media (max-width:430px){
  .fc .fc-col-header-cell-cushion{ font-size:.8rem; }
  .fc .fc-daygrid-day-number{ font-size:.9rem; }
}