\
/* --- responsive.css : added by ChatGPT --- */
/* Basic responsive helpers */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;}
img,video,iframe,embed,object{max-width:100%;height:auto;display:block;}

/* Keep main containers fluid */
.container, .wrapper, .site, #main, .content{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%;}

/* Make simple grid responsive */
.row{display:flex;flex-wrap:wrap;align-items:stretch;}
.col, [class*="col-"]{flex:1 1 0;min-width:0;}

/* Make tables scroll horizontally on small screens */
.table-responsive{overflow-x:auto;}

/* Forms and buttons scale on mobile */
input, textarea, select, button{max-width:100%;width:100%;box-sizing:border-box;}

/* Try to prevent fixed-width inline styles from overflowing */
[style*="width:"]{max-width:100% !important;}

/* Small helpers */
.logo, .brand img{max-width:220px;height:auto;display:block;}

/* Breakpoints */
@media (max-width:1024px){
  html{font-size:15px;}
  .col-2{flex-basis:50%;}
  .col-3{flex-basis:33.3333%;}
}
@media (max-width:768px){
  html{font-size:14px;}
  .col-2,.col-3,.col-4{flex-basis:100%;}
  nav ul{flex-direction:column;gap:8px;}
  .menu-toggle{display:block;}
}
@media (max-width:480px){
  html{font-size:13px;}
  .container{padding-left:12px;padding-right:12px;}
}
/* End of responsive helpers */


/* --- Ajout menu hamburger --- */
.menu-toggle {
  display:none;
  cursor:pointer;
  font-size:28px;
  background:none;
  border:none;
  color:#333;
}

@media (max-width:768px){
  nav ul {
    display:none;
    flex-direction:column;
    background:#fff;
    position:absolute;
    top:60px;
    right:10px;
    padding:10px;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }
  nav ul.open { display:flex; }
  .menu-toggle { display:block; }
}


/* --- Corrections demandées --- */

/* Menu hamburger style corrigé */
@media (max-width:768px){
  nav ul {
    display:none;
    flex-direction:column;
    background:#fff;
    position:relative;
    top:0;
    right:0;
    width:100%;
    padding:10px;
    border-radius:0;
    box-shadow:none;
  }
  nav ul.open { display:flex; }
  .menu-toggle { display:block; margin-left:auto; }
}

/* Police inchangée sur PC, ajustée seulement sur mobile */
@media (max-width:768px){
  body { font-size:14px; }
}



/* --- ChatGPT Overrides --- */

/* Hide nav on small screens */
@media (max-width:768px){
  nav ul {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  nav ul.open { display:flex !important; }
  .menu-toggle { display:block !important; }
  nav ul li { width:100% !important; }
  nav ul li a { display:block !important; padding:10px 6px !important; }
  #nos-offres .packs-container { display:flex !important; flex-direction:column !important; gap:16px !important; }
  #nos-offres .pack { width:100% !important; max-width:100% !important; }
}

/* Fix pack order */
@media (max-width:1140px){
  #nos-offres .pack-initial { order:0 !important; }
  #nos-offres .pack-standard { order:1 !important; }
  #nos-offres .pack-pro { order:2 !important; }
}



@media (max-width:768px){
  #nos-offres .pack {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
  }
}



/* --- Strong overrides to ensure packs occupy ~80% and are centered on mobile --- */
@media (max-width:768px){
  /* Force the nos-offres container to use full width */
  #nos-offres, 
  #nos-offres .nos-wrapper, 
  #nos-offres .container, 
  #nos-offres .packs-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure packs stack vertically and are centered */
  #nos-offres .packs-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  /* Each pack takes ~80% width and is centered */
  #nos-offres .pack,
  #nos-offres .packs-container > .pack {
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* If any inline or other rule sets a fixed width, override it */
  #nos-offres .pack[style] { width: 80% !important; max-width: 80% !important; }

  /* Fallback: if pack uses flex-basis, override */
  #nos-offres .pack { flex: 0 0 auto !important; }

  /* Remove potential negative margins pushing packs to edges */
  #nos-offres .pack, #nos-offres .packs-container, #nos-offres .nos-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Ensure ordering remains correct on mobile too */
@media (max-width:1140px){
  #nos-offres .pack-initial { order:0 !important; }
  #nos-offres .pack-standard { order:1 !important; }
  #nos-offres .pack-pro { order:2 !important; }
}

html { scroll-behavior: smooth; }


/* Lightbox fixes added by assistant */
body.no-scroll { overflow: hidden; }

#lightbox-modal {
  position: fixed;
  z-index: 2147483646;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#lightbox-modal.open {
  opacity: 1;
  visibility: visible;
}

#lightbox-modal img.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}
/* End assistant CSS */

/* Ensure videos 


/* ULTRA-FORCED Tecno mobile fix */
@media (max-width: 767px) {
  .mobile-ctas {
    display: block !important;
    width: 100% !important;
    margin-top: 2.5rem !important;
    margin-bottom: 3rem !important;
    padding: 0 !important;
    clear: both !important;
    float: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1000 !important;
    background: #fff !important;
  }

  .mobile-ctas a.btn {
    display: inline-block !important;
    margin: 0.5rem 0.25rem !important;
    position: relative !important;
    z-index: 1001 !important;
  }

  #videos {
    position: relative !important;
    top: 0 !important;
    margin-top: 4rem !important;
    clear: both !important;
    z-index: 0 !important;
  }
}


/* ancienne règle supprimée */
@media (max-width: 768px) {
  .dropdown-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff !important;
    z-index: 9999 !important;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }

  .dropdown-menu a {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
  }
}


/* ===== Dropdown mobile corrigé : s'affiche juste sous le header ===== */
@media (max-width: 768px) {
  .dropdown-menu {
    position: absolute !important;
    top: 100%; /* juste sous le bouton Contact dans le header */
    left: 0;
    width: 100%;
    background: #ffffff !important;
    z-index: 9999 !important;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }

  .dropdown-menu a {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
  }
}


/* Mobile contact container injected */

/* ===== Mobile contact container - ensures the contact menu appears ABOVE the long video on mobile ===== */
@media (max-width: 768px) {
  /* container fixed to viewport, positioned just under the header */
  

  

  /* Hide the original inline menu on mobile (we'll show the mobile one instead) */
  .contact-dropdown .contact-menu {
    display: none !important;
  }

  /* When container has .open, allow it to receive clicks */
  

  

  
}



@media (max-width: 768px) {
    position: fixed !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
    z-index: 2147483647 !important;
    padding: 6px !important;
    min-width: 120px;
    max-width: 220px;
    overflow: visible !important;
  }



  /* Ensure original inline desktop menu is hidden on mobile to avoid duplicates */
  .contact-dropdown .contact-menu {
    display: none !important;
  }
}


/* === FIX: Add breathing space below hero and before Montage Vidéo on mobile === */
@media (max-width: 768px) {
  body #videos {
    margin-top: 80px !important;
    padding-top: 20px !important;
  }
}

#nos-offres .pack + .pack {
  margin-left: 28px; /* fix spacing between packs */
}

@media (max-width: 768px) {
  #nos-offres .pack {
    margin-bottom: 20px; /* uniform spacing on mobile */
  }
}


/* FORCED SPACING FIX ADDED */

/* ===== FORCE: uniform spacing between packs (override conflicting rules) ===== */
#nos-offres .packs-container { display: block !important; }
#nos-offres .packs-container > .pack { display: block !important; margin-bottom: 22px !important; }
#nos-offres .packs-container > .pack:last-child { margin-bottom: 0 !important; }

/* On larger screens, keep horizontal layout with gap */
@media (min-width: 992px) {
  #nos-offres .packs-container { display: flex !important; gap: 28px !important; align-items: stretch !important; justify-content: center !important; flex-wrap: nowrap !important; }
  #nos-offres .packs-container > .pack { margin-bottom: 0 !important; }
}
/* End force spacing fix */



/* ===== HOTFIX: remove unexpected blue bar from #quel-pack-choisir ===== */
#quel-pack-choisir {
  background-color: transparent !important;
  background: transparent !important;
  display: none !important; /* hide this empty spacer section; spacing is handled by .pack margins */
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
/* End hotfix */