/* ============================================
   CREASCOPE — MOBILE RESPONSIVE
   Mobile-first. Everything overridden for < 768px
   ============================================ */

@media (max-width: 768px) {

  /* ── RESET OVERFLOW ── */
  body { overflow-x: hidden; }
  * { max-width: 100%; box-sizing: border-box; }

  /* ── TYPOGRAPHY ── */
  body { font-size: 14px; }
  .label { font-size: 10px; letter-spacing: 2px; }

  /* ── CONTAINER ── */
  .container { padding: 0 18px !important; }

  /* ── NAV ── */
  .nav { padding: 14px 18px; }
  .nav-logo img { height: 26px; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 150;
    padding: 80px 0 40px;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    font-size: 17px;
    letter-spacing: 3px;
    padding: 16px 40px;
    width: 100%;
    text-align: center;
    border-bottom: 0.5px solid rgba(200,169,110,0.1);
    color: rgba(245,244,240,0.7);
    margin: 0;
  }
  .nav-links a.btn-gold {
    margin: 20px 40px 0;
    width: calc(100% - 80px);
    text-align: center;
    padding: 14px;
    font-size: 11px;
    border-bottom: none;
  }
  .nav-links .lang-switcher {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-left: none;
    border-top: 0.5px solid rgba(200,169,110,0.15);
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  .lang-btn { font-size: 12px; padding: 6px 12px; }

  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
    z-index: 160;
    position: relative;
  }
  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--gold);
    transition: all 0.3s ease;
  }
  .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

  /* ── HERO ── */
  .hero { height: 100svh; min-height: 580px; }
  .hero-bg img { object-position: center 30%; }
  .hero-content { padding: 0 18px 48px; }
  .hero-tag { font-size: 9px; letter-spacing: 2px; margin-bottom: 14px; }
  .hero-title { font-size: clamp(50px, 13vw, 68px) !important; white-space: normal; letter-spacing: -1.5px; margin-bottom: 18px; line-height: 0.9; }
  .hero-sub { font-size: 13px; margin-bottom: 26px; max-width: 100%; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas a, .hero-ctas .btn-gold, .hero-ctas .btn-ghost { width: 100%; text-align: center; padding: 15px; display: block; }
  .hero-scroll { display: none; }

  /* ── ANCHOR ── */
  .anchor { grid-template-columns: 1fr !important; }
  .anchor-item { padding: 24px 18px; display: flex; gap: 16px; align-items: flex-start; }
  .anchor-num { min-width: 22px; margin-bottom: 0; padding-top: 3px; font-size: 10px; }
  .anchor-title { font-size: 17px; margin-bottom: 5px; }
  .anchor-desc { font-size: 12px; line-height: 1.6; }

  /* ── EVENTS (homepage) ── */
  .events { padding: 48px 0 0; }
  .events .label { padding: 0 18px; display: block; }
  .events-grid { grid-template-columns: 1fr !important; gap: 2px; margin-top: 24px; }
  .event-card { height: 72vw; max-height: 380px; }
  .event-card img { object-position: center 20%; }
  .event-content { padding: 22px 18px; }
  .event-meta { font-size: 9px; margin-bottom: 8px; }
  .event-title { font-size: 24px; line-height: 1; margin-bottom: 12px; }
  .event-desc { font-size: 12px; max-width: 100%; margin-bottom: 14px; display: block; }
  .event-link { font-size: 10px; }

  /* ── ARTIST (homepage) ── */
  .artist { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
  .artist-img-wrap { height: 75vw; max-height: 400px; }
  .artist-img-wrap img { object-position: center top; }
  .artist-badge { top: 12px; left: 12px; font-size: 9px; padding: 5px 9px; }
  .artist > div:last-child { padding: 26px 18px 48px; }
  .artist-name { font-size: clamp(46px, 12vw, 60px) !important; letter-spacing: -1.5px; }
  .artist-credits { margin: 16px 0 20px; }
  .artist-credit-item { font-size: 11px; padding: 8px 0; line-height: 1.5; }
  .artist-desc { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
  .artist .btn-gold { display: block; width: 100%; text-align: center; padding: 15px; }

  /* ── OPEN(RE)SOURCE (homepage) ── */
  .opensource { grid-template-columns: 1fr !important; gap: 0 !important; padding: 48px 0 0 !important; }
  .opensource-title { font-size: clamp(40px, 11vw, 52px) !important; }
  .opensource-lead { font-size: 14px; }
  .opensource-desc { font-size: 13px; line-height: 1.8; }
  .opensource .btn-gold { display: block; width: 100%; text-align: center; padding: 15px; }
  .opensource > div:first-child { padding-bottom: 32px; }
  .opensource .video-embed, .opensource .video-caption { margin: 0 -18px; }

  /* ── SERVICES (homepage) ── */
  .services { padding: 48px 0; }
  .services-title { font-size: clamp(26px, 7vw, 34px) !important; margin-bottom: 28px; max-width: 100%; }
  .services-grid { grid-template-columns: 1fr !important; }
  .service-item { padding: 26px 18px; }
  .service-title { font-size: 17px; }
  .service-desc { font-size: 12px; line-height: 1.7; }
  .service-for { font-size: 9px; letter-spacing: 1px; }

  /* ── CTA FINAL ── */
  .cta-final { padding: 60px 18px; }
  .cta-pre { font-size: 9px; margin-bottom: 18px; }
  .cta-title { font-size: clamp(22px, 6vw, 28px) !important; letter-spacing: -0.5px; }
  .cta-sub { font-size: 13px; margin-bottom: 24px; }
  .cta-final a.btn-gold { display: inline-block; width: auto; min-width: 70%; padding: 15px 24px; font-size: 11px; }

  /* ── FOOTER ── */
  .footer { flex-direction: column; padding: 28px 18px; gap: 18px; }
  .footer-links { flex-wrap: wrap; gap: 10px 16px; }
  .footer-links a { font-size: 10px; }
  .footer-copy { font-size: 10px; }

  /* ── EVENEMENTS PAGE ── */
  .event-hero { height: 58vw; min-height: 260px; max-height: 400px; }
  .event-hero-bg img { object-position: center 30%; }
  .event-hero-content { padding: 0 18px 28px; }
  .event-hero-content h1 { font-size: clamp(28px, 8vw, 40px) !important; letter-spacing: -0.5px; line-height: 1.05; margin-bottom: 10px; }
  .event-hero-content p { font-size: 12px; line-height: 1.6; margin-bottom: 0; }

  .event-detail { padding: 36px 0; }
  .event-detail-grid { grid-template-columns: 1fr !important; gap: 0; }
  .event-detail-img { height: 60vw; max-height: 300px; margin: 0 -18px; width: calc(100% + 36px); }
  .event-detail-img .photo-ph { height: 100%; }
  .event-detail-info { padding: 24px 0 0; }
  .event-detail-title { font-size: clamp(26px, 7vw, 34px) !important; letter-spacing: -0.5px; margin-bottom: 18px; }
  .event-detail-body { font-size: 13px; line-height: 1.8; }
  .event-stats { grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 20px; }
  .event-stat { padding: 14px 12px; }
  .event-stat-num { font-size: 22px; }
  .event-stat-label { font-size: 9px; }

  /* Gallery 2-col stays 2-col on mobile */
  .gallery-2col { grid-template-columns: 1fr 1fr !important; }
  .gallery-2col > div { height: 38vw !important; max-height: 180px; }
  .gallery { grid-template-columns: 1fr 1fr !important; gap: 2px; margin-top: 2px; }
  .gallery-item { height: 38vw; max-height: 180px; }

  .sponsor-block { padding: 22px 16px; margin-top: 28px; }
  .sponsor-block-title { font-size: 17px; }
  .sponsor-block p { font-size: 12px; }
  .sponsor-block a { display: block; width: 100%; text-align: center; padding: 14px; margin-bottom: 10px; }
  .event-detail .btn-gold { display: block; width: 100%; text-align: center; padding: 14px; margin-top: 20px; }

  /* Partners badges */
  .event-detail div[style*="display:flex;gap:8px"] {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .event-detail div[style*="display:flex;gap:8px"] span {
    font-size: 9px !important;
    padding: 5px 8px !important;
    letter-spacing: 1px !important;
  }

  /* ── ARTISTES PAGE ── */
  .artist-page { padding: 0 0 48px; }
  .artist-page-hero { grid-template-columns: 1fr !important; gap: 0; margin-bottom: 36px; }
  .artist-page-img { position: static; }
  .artist-page-img-main { height: 75vw; max-height: 440px; position: relative; margin: 0 -18px; width: calc(100% + 36px); }
  .artist-page-img-secondary { height: 52vw; max-height: 260px; position: relative; margin: 2px -18px 0; width: calc(100% + 36px); }
  .artist-page-name { font-size: clamp(48px, 13vw, 64px) !important; letter-spacing: -1.5px; }
  .artist-page-tagline { font-size: 13px; line-height: 1.7; max-width: 100%; }
  .palmarès-item { flex-wrap: wrap; gap: 4px; padding: 9px 0; }
  .palmarès-label { font-size: 12px; flex: 1; min-width: 60%; }
  .palmarès-val { font-size: 9px; }
  .artist-bio { font-size: 13px; line-height: 1.85; }
  .booking-btns { flex-direction: column !important; gap: 10px !important; }
  .booking-btns a { width: 100% !important; text-align: center !important; padding: 15px !important; }

  /* Social links block */
  .artist-page div[style*="margin-top:28px;padding-top:28px"] { margin-top: 20px; }
  .artist-page div[style*="display:flex;gap:12px"] { gap: 10px; }

  .video-section { padding: 40px 0; }
  .video-section .label { display: block; margin-bottom: 14px; }
  .video-grid { grid-template-columns: 1fr !important; gap: 0; margin-top: 24px; }
  .video-main { margin: 0 -18px; }
  .video-main > div[style*="flex-direction:column"] { gap: 2px !important; }
  .video-info { padding: 24px 0 0; }
  .video-info h3 { font-size: 20px; margin-bottom: 12px; }
  .video-info p { font-size: 13px; }
  .video-info .btn-gold { display: block; width: 100%; text-align: center; padding: 14px; margin-top: 16px; }

  .next-artist { margin: 36px -18px 0; padding: 28px 18px; border-left: none; border-right: none; }
  .next-artist p { font-size: 13px; }

  /* ── OPEN(RE)SOURCE PAGE ── */
  .os-hero { padding: 36px 0 28px; }
  .os-hero-grid { grid-template-columns: 1fr !important; gap: 22px; }
  .os-title { font-size: clamp(50px, 14vw, 68px) !important; letter-spacing: -1.5px; line-height: 0.88; }
  .os-tagline { font-size: 15px; line-height: 1.4; margin-bottom: 14px; }
  .os-intro { font-size: 13px; line-height: 1.85; }
  .os-hero .tags { flex-wrap: wrap; gap: 6px; }

  .os-process { padding: 36px 0; }
  .os-process-grid { grid-template-columns: 1fr !important; }
  .os-step { padding: 24px 18px; }
  .os-step-title { font-size: 16px; }
  .os-step-desc { font-size: 12px; }

  .os-doc { padding: 36px 0; }
  .os-doc-grid { grid-template-columns: 1fr !important; gap: 0; }
  .os-doc-video { margin: 0 -18px; }
  .os-doc-info { padding-top: 24px; }
  .os-doc-info h3 { font-size: 24px; margin-bottom: 16px; }
  .os-doc-info p { font-size: 13px; line-height: 1.8; }
  .os-gallery { grid-template-columns: 1fr 1fr !important; gap: 2px; margin: 2px -18px 0; width: calc(100% + 36px); }
  .os-gallery-item { height: 38vw; max-height: 200px; }
  /* Bottom gallery row */
  div[style*="display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:3px"] {
    margin: 2px -18px 0 !important;
    width: calc(100% + 36px) !important;
    gap: 2px !important;
  }
  .gallery-2col { margin: 2px -18px 0 !important; width: calc(100% + 36px) !important; }

  .os-cta { padding: 36px 0; }
  .os-cta-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .os-cta h2 { font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.2; color: var(--dark); }
  .os-cta p { font-size: 13px; }
  .os-cta-img { height: 58vw; max-height: 280px; margin: 0 -18px; width: calc(100% + 36px); }
  .os-cta-img .photo-ph { height: 100%; }
  .os-cta button, .os-cta a.btn-dark { display: block; width: 100%; padding: 15px; }
  .os-team { padding: 16px; margin-top: 20px; }
  .os-team-item { font-size: 11px; }

  /* ── SERVICES PAGE ── */
  .services-page { padding: 36px 0 48px; }
  .services-intro { grid-template-columns: 1fr !important; gap: 14px; margin-bottom: 28px; }
  .services-intro h1 { font-size: clamp(36px, 10vw, 48px) !important; letter-spacing: -1px; }
  .services-intro p { font-size: 13px; line-height: 1.8; }
  .service-block { grid-template-columns: 1fr !important; gap: 0; padding: 28px 0; }
  .service-block-num { margin-bottom: 12px; }
  .service-block-title { font-size: 24px; margin-bottom: 14px; }
  .service-block-desc { font-size: 13px; max-width: 100%; }
  .service-for-block { max-width: 100%; padding: 16px; margin-bottom: 20px; }
  .service-for-list { font-size: 12px; }
  .service-examples { max-width: 100%; }
  .service-example-item { font-size: 11px; }
  .service-block a.btn-gold { display: block; width: 100%; text-align: center; padding: 14px; margin-top: 4px; }

  /* Services CTA section */
  section[style*="padding:80px 0"] .container { padding: 48px 18px; }
  section[style*="padding:80px 0"] h2 { font-size: 32px !important; }

  /* ── A PROPOS PAGE ── */
  .about-hero { grid-template-columns: 1fr !important; gap: 18px; padding: 36px 0 28px; }
  .about-hero h1 { font-size: clamp(42px, 12vw, 56px) !important; letter-spacing: -1.5px; }
  .about-intro { font-size: 14px; line-height: 1.75; }
  .about-body { font-size: 13px; line-height: 1.85; }
  .about-values { padding: 36px 0; }
  .about-values-grid { grid-template-columns: 1fr !important; }
  .about-value { padding: 24px 18px; }
  .about-value-word { font-size: 20px; }
  .about-value-desc { font-size: 12px; }
  .about-team { padding: 36px 0; }
  .about-team-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .about-team-img { height: 68vw; max-height: 360px; margin: 0 -18px; width: calc(100% + 36px); }
  .about-team-img .photo-ph { height: 100%; }
  .about-team > div:last-child { padding-top: 24px; }
  .about-team-name { font-size: clamp(34px, 9vw, 44px) !important; letter-spacing: -1px; }
  .about-team-role { font-size: 10px; margin-bottom: 18px; }
  .about-team-bio { font-size: 13px; line-height: 1.85; margin-bottom: 20px; }
  .about-team a.btn-gold { display: block; width: 100%; text-align: center; padding: 14px; }

  /* ── CONTACT PAGE ── */
  .contact-page { grid-template-columns: 1fr !important; gap: 36px; padding: 36px 0 48px; }
  .contact-info h1 { font-size: clamp(34px, 10vw, 44px) !important; letter-spacing: -1px; }
  .contact-info p { font-size: 13px; line-height: 1.8; }
  .contact-option { padding: 14px 0; }
  .contact-option-val { font-size: 13px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .contact-form-title { font-size: 20px; }
  .form-label { font-size: 9px; }
  .form-input, .form-select, .form-textarea { font-size: 16px !important; padding: 12px 14px; }
  .form-submit { font-size: 11px; padding: 16px; }

  /* ── BUTTONS ── */
  .btn-gold, .btn-ghost, .btn-dark { min-height: 46px; letter-spacing: 2px; }

  /* ── DIVIDER ── */
  .divider { margin: 18px 0; }

  /* ── TAGS ── */
  .tag { font-size: 9px !important; padding: 5px 10px !important; letter-spacing: 1px; }
}

/* ── DESKTOP: hamburger hidden ── */
@media (min-width: 769px) {
  .nav-hamburger { display: none !important; }
  .nav-links { display: flex !important; position: static; background: transparent; flex-direction: row; padding: 0; }
  .nav-links a { font-size: 11px; padding: 0; border: none; color: rgba(245,244,240,0.65); }
  .nav-links a.btn-gold { margin: 0 0 0 12px; padding: 10px 22px; width: auto; }
}

/* ── VERY SMALL PHONES ── */
@media (max-width: 360px) {
  .hero-title { font-size: 44px !important; }
  .artist-name { font-size: 40px !important; }
}