/* ═══════════════════════════════════════════
   GBassQuest — Mobile Responsive
   À inclure dans TOUS les fichiers HTML :
   <link rel="stylesheet" href="mobile.css"/>
   (ou "../mobile.css" depuis un sous-dossier)

   ⚠️ IMPORTANT : supprimer width="720" de toutes
   les balises <img> de tablature et remplacer par
   class="tab-img"
═══════════════════════════════════════════ */

/* ── IMAGES DE TABLATURE — toutes tailles ── */
.tab-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════
   MOBILE — 768px et moins
═══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── NAV ── */
  nav {
    padding: 0 4vw !important;
    height: auto !important;
    min-height: 56px !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-logo img {
    width: 110px !important;
  }

  nav .btn-g {
    font-size: .32rem !important;
    padding: .5rem .9rem !important;
  }

  nav .nav-back {
    font-size: .5rem !important;
  }

  /* ── LANG SWITCHER ── */
  .lang-switch {
    flex-shrink: 0 !important;
    clip-path: none !important;
  }

  .lang-btn {
    font-size: .55rem !important;
    padding: .5rem .65rem !important;
    min-width: 28px !important;
    text-align: center !important;
  }

  /* ── HERO INDEX ── */
  #hero {
    padding: 80px 5vw 60px !important;
    min-height: auto !important;
  }

  .eyebrow {
    font-size: .3rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.6 !important;
    padding: .35rem .7rem !important;
  }

  h1 {
    font-size: clamp(.7rem, 5.5vw, 1rem) !important;
    line-height: 1.85 !important;
  }

  .hero-sub {
    font-size: .9rem !important;
    margin: 1.2rem auto 1.8rem !important;
  }

  .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: .8rem !important;
  }

  .btn-p, .btn-g {
    font-size: .36rem !important;
    padding: .75rem 1.4rem !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    clip-path: none !important;
  }

  /* ── SECTIONS GÉNÉRALES ── */
  section {
    padding: 60px 5vw !important;
  }

  h2 {
    font-size: clamp(.62rem, 4vw, .92rem) !important;
    line-height: 1.9 !important;
    max-width: 100% !important;
  }

  .stag {
    font-size: .3rem !important;
  }

  .slead {
    font-size: .9rem !important;
    max-width: 100% !important;
  }

  /* ── COMMENT CA MARCHE ── */
  .steps {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* ── TECHNIQUES ── */
  .tech-intro {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .tech-bass-wrap {
    display: none !important;
  }

  .tech-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── CATALOGUE filtres ── */
  .cat-tabs {
    gap: .4rem !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: .5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .cat-tabs::-webkit-scrollbar { display: none; }

  .cat-tab {
    font-size: .26rem !important;
    padding: .4rem .65rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── TRACKS ── */
  .tracks-grid {
    grid-template-columns: 1fr !important;
  }

  .track {
    clip-path: none !important;
  }

  .uni-name {
    font-size: .36rem !important;
  }

  .uni-header {
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }

  /* ── PROF ── */
  #prof {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 60px 5vw !important;
  }

  .prof-frame {
    width: 240px !important;
    height: 240px !important;
    clip-path: none !important;
  }

  .facts {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }

  .fval {
    font-size: .55rem !important;
  }

  .chips {
    gap: .5rem !important;
  }

  .chip {
    font-size: .26rem !important;
  }

  /* ── FAQ ── */
  .fq {
    font-size: .75rem !important;
    padding: 1rem 0 !important;
  }

  /* ── FOOTER ── */
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 2rem 5vw !important;
  }

  footer img {
    width: 110px !important;
  }

  .flinks {
    flex-wrap: wrap !important;
    gap: .8rem 1.2rem !important;
  }

  .flinks a {
    font-size: .6rem !important;
  }

  .fcopy {
    font-size: .55rem !important;
  }

  /* ═══════════════════════════════════════
     PAGES DE TRACK
  ═══════════════════════════════════════ */

  .track-hero {
    padding: 80px 5vw 40px !important;
  }

  .track-page-title {
    font-size: clamp(.72rem, 5vw, 1rem) !important;
    line-height: 1.75 !important;
  }

  .track-game-label {
    font-size: .26rem !important;
  }

  .breadcrumb {
    font-size: .24rem !important;
  }

  .meta-badge {
    font-size: .26rem !important;
    padding: .3rem .5rem !important;
  }

  .track-meta-row {
    gap: .5rem !important;
  }

  .hero-infos {
    flex-direction: column !important;
    gap: .75rem !important;
  }

  .hi span {
    font-size: .78rem !important;
  }

  .page-body {
    padding: 2rem 4vw 3rem !important;
  }

  .section-title {
    font-size: .36rem !important;
  }

  /* ── TABLATURES ── */
  .tab-block {
    padding: .5rem !important;
    overflow-x: hidden !important;
  }

  /* L'image prend exactement la largeur dispo, jamais plus */
  .tab-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .tab-notation {
    overflow-x: auto !important;
    padding: .75rem !important;
  }

  .tab-notation pre {
    font-size: .6rem !important;
    white-space: pre !important;
  }

  /* ── DEUX COLONNES → UNE ── */
  .two-col {
    grid-template-columns: 1fr !important;
  }

  .info-box {
    padding: 1.2rem !important;
  }

  .info-box li {
    font-size: .7rem !important;
  }

  /* ── BOUTON RETOUR ── */
  .back-btn {
    font-size: .3rem !important;
    padding: .7rem 1.1rem !important;
    clip-path: none !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
  }

  /* ═══════════════════════════════════════
     PAGE CONTACT
  ═══════════════════════════════════════ */

  .contact-hero {
    padding: 90px 5vw 40px !important;
    min-height: auto !important;
  }

  .contact-hero h1 {
    font-size: clamp(.68rem, 5vw, .95rem) !important;
  }

  .page-body {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .contact-info {
    position: static !important;
  }

  .contact-form-wrap {
    padding: 1.5rem !important;
    clip-path: none !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .ccard {
    padding: 1rem !important;
  }

  .ccard-val {
    font-size: .65rem !important;
  }

  .faq-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .faq-mini {
    grid-column: 1 !important;
  }

  .zone-badge-text {
    font-size: .62rem !important;
  }
}

/* ═══════════════════════════════════════════
   TRÈS PETIT — 480px et moins
═══════════════════════════════════════════ */

@media (max-width: 480px) {

  h1 {
    font-size: clamp(.6rem, 5.5vw, .85rem) !important;
  }

  h2 {
    font-size: clamp(.55rem, 4.5vw, .75rem) !important;
  }

  .eyebrow {
    font-size: .26rem !important;
  }

  .track-page-title {
    font-size: clamp(.62rem, 5.5vw, .88rem) !important;
  }

  .prof-frame {
    width: 200px !important;
    height: 200px !important;
  }

  .tab-img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tab-block {
    padding: .5rem !important;
  }

  .section-title {
    font-size: .3rem !important;
  }
}
@media (max-width: 768px) {

  .vp-icon {
    font-size: 2rem !important;
  }

  .vp-text {
    font-size: .6rem !important;
    padding: 0 1rem !important;
    line-height: 1.6 !important;
  }

  .vp-link {
    font-size: .28rem !important;
    padding: .5rem .9rem !important;
  }

  /* La hauteur du placeholder s'adapte au contenu */
  .video-placeholder {
    position: relative !important;
    padding: 2rem 1rem !important;
    gap: .75rem !important;
  }

  /* Le wrapper vidéo ne force plus une hauteur minimale trop grande */
  .video-wrap {
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 200px !important;
  }
}