/* ============================================================
   RESPONSIVE FIXES — BaC 2027 (Promotion Andromède)
   Fichier partagé chargé APRÈS les <style> inline de chaque PHP.
   ============================================================ */

/* ============================================================
   CRITIQUE 1 : Grilles inline qui ne stackent pas sur mobile
   ============================================================ */

/* Upsell grid (cross-sell 2 colonnes) → 1 colonne sur tablette */
@media(max-width:768px){
  #upsell-grid{
    grid-template-columns:1fr !important;
    gap:1.25rem !important;
  }
}

/* Grilles 3 colonnes inline → 1 colonne sur petit écran */
@media(max-width:600px){
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"]{
    grid-template-columns:1fr !important;
    gap:.75rem !important;
  }
}

/* Grilles 2 colonnes inline → 1 colonne sur téléphone */
@media(max-width:480px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}


/* ============================================================
   CRITIQUE 2 : Tabbar — débordement horizontal
   ============================================================ */

@media(max-width:480px){
  .tabbar__tabs{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabbar__tabs::-webkit-scrollbar{
    display:none;
  }
  .tabbar__tab{
    padding:.5rem .4rem !important;
    font-size:.625rem !important;
  }
}
@media(max-width:375px){
  .tabbar__inner{
    padding:0 .5rem !important;
  }
}


/* ============================================================
   CRITIQUE 3 : Sidebar trop large à 768px
   ============================================================ */

@media(max-width:768px){
  .content-sidebar,
  .product-sidebar{
    max-width:100% !important;
    width:100% !important;
  }
  .sc{
    position:static !important;
  }
}


/* ============================================================
   HAUTE 4 : Showcase grid max-width trop étroit (280px → 360px)
   ============================================================ */

@media(max-width:768px){
  .showcase__grid{
    max-width:360px !important;
  }
}


/* ============================================================
   HAUTE 5 : Footer — passage en 1 colonne sous 480px
   ============================================================ */

@media(max-width:768px){
  .bf__brand{
    text-align:center !important;
  }
  .bf__brand img{
    display:block !important;
    margin:0 auto 1.25rem !important;
  }
  .bf__socials{
    justify-content:center !important;
  }
}

@media(max-width:480px){
  .bf__links{
    grid-template-columns:1fr !important;
    gap:1rem !important;
    text-align:center;
  }
  .bf__inner{
    gap:1.5rem !important;
  }
}


/* ============================================================
   HAUTE 6 : Éléments décoratifs nebula — réduction + overflow
   ============================================================ */

@media(max-width:768px){
  .sky__nebula{
    width:300px !important;
    height:300px !important;
  }
  .sky__nebula--center{
    width:400px !important;
    height:200px !important;
  }
}

/* Sécurité : clip sur les parents des étoiles */
.sky,
.starfield{
  overflow:hidden;
}


/* ============================================================
   MOYENNE 7 : Cases à cocher — cibles tactiles trop petites
   ============================================================ */

input[type="checkbox"][data-product-id]{
  width:20px !important;
  height:20px !important;
  min-width:20px;
  min-height:20px;
  cursor:pointer;
}


/* ============================================================
   MOYENNE 8 : Padding container réduit sur mobile
   ============================================================ */

@media(max-width:768px){
  .container{
    padding:0 1rem !important;
  }
}


/* ============================================================
   MOYENNE 10 : CTA overlay — pas de flash horizontal
   ============================================================ */

@media(max-width:480px){
  .cta-overlay__card{
    transform:scale(.9) translateX(0) !important;
  }
  .cta-overlay--active .cta-overlay__card{
    transform:scale(1) translateX(0) !important;
  }
}


/* ============================================================
   PAGE ARBRE : Parcours tabs — 3 colonnes → 1 sur tablette
   ============================================================ */

@media(max-width:768px){
  .parcours-tabs__bar{
    grid-template-columns:1fr !important;
    max-width:360px;
    margin:0 auto;
  }
}


/* ============================================================
   PAGE ARBRE : Divs pack corrections max-width:480px → 100%
   ============================================================ */

@media(max-width:480px){
  [style*="max-width:480px"]{
    max-width:100% !important;
    width:100% !important;
  }
}


/* ============================================================
   PAGE ARBRE : Calendly modal hauteur réduite sur téléphone
   ============================================================ */

@media(max-width:600px){
  .cal-body{
    min-height:400px !important;
  }
  .cal-body__frame{
    min-height:400px !important;
  }
}


/* ============================================================
   PAGE ARBRE : Images offer-card réduites sur téléphone
   ============================================================ */

@media(max-width:480px){
  .offer-card__img img{
    width:120px !important;
  }
}


/* ============================================================
   GLOBAL : Bouton burger — cible tactile 44px minimum
   ============================================================ */

@media(max-width:900px){
  .bh__burger{
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}


/* ============================================================
   GLOBAL : Liens footer — cibles tactiles suffisantes
   ============================================================ */

@media(max-width:768px){
  .bf__links a{
    padding:.5rem 0 !important;
    display:block !important;
  }
}


/* ============================================================
   GLOBAL : Boutons .vb — taille minimale sur mobile
   ============================================================ */

@media(max-width:480px){
  .vb{
    font-size:1rem !important;
    padding:.625rem 1.5rem !important;
    min-height:44px;
  }
}


/* ============================================================
   BASSE 11 : prefers-reduced-motion
   ============================================================ */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}