/* =========================================================
   IPGUYS USA — MOBILE FIX (SAFE + AGGRESSIVE)
   - corrige les boutons "surlignés bleus" (absolute)
   - remet du spacing + cards + layout propre
========================================================= */

:root{
  --blue:#2C7BE5;
  --blue2:#1e66c8;
  --bg:#F5F9FF;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.12);
  --shadow:0 18px 45px rgba(15,23,42,.10);
  --radius:18px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
  overflow-x:hidden;
}

.bg-dark{ background: var(--bg) !important; }
.text-light{ color: var(--text) !important; }
.text-muted{ color: var(--muted) !important; }

.container{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* gros espace entre sections */
section{ padding: 34px 0 !important; }
section[id]{ scroll-margin-top: 92px; }

/* ===== NAV (light) ===== */
.navbar{
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky !important;
  top:0;
  z-index:10000;
  overflow: visible !important;
}
@media (max-width: 992px){
  .lp-nav, .navbar{
    min-height: 76px !important;
  }
  .site-logo-small{
    height: 78px !important;
  }
}

@media (max-width: 576px){
  .lp-nav, .navbar{
    min-height: 74px !important;
  }
}

.navbar .nav-link.active{ color: var(--blue) !important; }

#mainNav .d-flex{
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 10px;
}
#mainNav select.form-select{
  width:auto !important;
  border-radius:999px !important;
  border:1px solid rgba(44,123,229,.22) !important;
  background:#fff !important;
  color:var(--text) !important;
  font-weight:900 !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* ===== TYPO ===== */
h1{
  font-size: 34px !important;
  line-height: 1.06 !important;
  font-weight: 950 !important;
  letter-spacing: -0.6px;
  color: var(--text) !important;
}
h2{
  font-size: 26px !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: -0.4px;
  color: var(--text) !important;
}
p{
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* =========================================================
   ✅ FIX #1: BOUTONS "SUR LIGNÉS BLEUS"
   Si un ancien CSS met les CTA en absolute/fixed -> on annule.
========================================================= */
.btn,
a.btn,
.btn-primary,
a.btn-primary,
.btn-outline-primary,
a.btn-outline-primary,
.btn-secondary,
a.btn-secondary{
  position: relative !important;
  inset: auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  float:none !important;
  transform:none !important;

  display: inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-decoration:none !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 46px !important;
}

/* CTA full width sur mobile (plus beau + évite overlap) */
.btn,
a.btn,
.btn-primary,
a.btn-primary,
.btn-outline-primary,
a.btn-outline-primary{
  width: 100% !important;
}

/* styles */
.btn-primary, a.btn-primary{
  background: var(--blue) !important;
  border: none !important;
  color:#fff !important;
  box-shadow: 0 16px 30px rgba(44,123,229,.22) !important;
}
.btn-outline-primary, a.btn-outline-primary{
  background:#fff !important;
  border:1px solid rgba(44,123,229,.35) !important;
  color:var(--blue) !important;
}

/* si tu as des CTA en <a class="btn-primary"> sans .btn */
a.btn-primary{
  display:inline-flex !important;
}

/* espace entre 2 CTA consécutifs */
a.btn-primary + a,
a.btn + a,
button.btn + a,
a + a.btn{
  margin-top: 10px !important;
}

/* ===== HERO banner (si présent) ===== */
.hero-banner,
.banner-slider,
.slider-wrapper{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow:hidden !important;
}
.hero-banner{
  height: 180px !important;
  margin: 0 0 14px 0 !important;
}
.hero-banner img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* kill overlays dark */
.page-hero-overlay,
.hero-home-bg::before,
.hero-products::before{
  background: transparent !important;
  backdrop-filter:none !important;
}

/* ===== Footer light ===== */
footer{
  background:#fff !important;
  border-top:1px solid var(--border) !important;
  padding:18px 0 !important;
}
footer *{ color: var(--muted) !important; }

/* =========================================================
   ✅ FIX #2 (REFAIT): LP LAYOUT MOBILE (GUTTER + CARDS)
   - applique le spacing sur .lp-container (ton HTML)
   - pricing: vraie grille 1 colonne + cartes propres
========================================================= */

/* GUTTER GLOBAL (ton site utilise lp-container, pas container) */
.lp-container,
.container,
.container-fluid{
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sections LP respirent */
.lp-section{
  padding: 32px 0 !important;
}

/* =========================
   PRICING (section #plans)
========================= */
#plans .lp-pricing{
  /* IMPORTANT: on annule tout style "grosse card" éventuel */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

/* Carte pricing (les 1/3/6/12 mois) */
#plans a.lp-price-card{
  display: block !important;
  width: 100% !important;

  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;

  padding: 16px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  overflow: hidden !important;

  /* nettoie si un ancien style injecte des trucs */
  position: relative !important;
}

/* kill décorations/pseudo elements qui font des "traces" */
#plans a.lp-price-card::before,
#plans a.lp-price-card::after{
  content: none !important;
}

/* Header de la carte: titre + tag */
#plans .lp-price-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#plans .lp-price-title{
  font-weight: 950 !important;
  font-size: 18px !important;
  color: var(--text) !important;
}

#plans .lp-price-tag{
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(44,123,229,.10) !important;
  color: var(--blue) !important;
  white-space: nowrap !important;
}

/* Description + CTA */
#plans .lp-price-desc{
  margin-top: 10px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#plans .lp-price-cta{
  margin-top: 12px !important;
  font-weight: 900 !important;
  color: var(--blue) !important;
}

/* Carte "best" */
#plans a.lp-price-card.lp-best{
  border-color: rgba(44,123,229,.45) !important;
  box-shadow: 0 18px 45px rgba(44,123,229,.16) !important;
}

/* CTA du bas (Choisir mon forfait) */
#plans .lp-center{
  margin-top: 14px !important;
}
#plans .lp-center a.btn-primary{
  width: 100% !important;
}
.cart-total-row > th,
.cart-total-row > td{
  color:#fff !important;
  background:#2b3440 !important;
}

/* =========================================================
   MOBILE — GUTTERS + AIR COMME DESKTOP
========================================================= */
@media (max-width: 768px){

  /* 1) AIR GLOBAL POUR TOUT LE CONTENU */
  main.py-4{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2) évite double padding (ton HTML a déjà <main><div class="container">) */
  main.py-4 > .container,
  main.py-4 > .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) RESTORE gutters Bootstrap (TRÈS IMPORTANT) */
  .row{
    --bs-gutter-x: 1.25rem; /* ~20px, ajustable */
  }
  .row > *{
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }

  /* 4) sections respirent */
  section{
    padding: 28px 0 !important;
  }
}
/* =========================================================
   HERO CATEGORIES (MOBILE)
========================================================= */
.hero-streaming{
  padding-top: 22px !important;
  padding-bottom: 34px !important;
}

.hero-streaming .hero-wrapper{
  padding: 10px 0 10px !important;
}

.categories-overlay{
  margin-top: 10px !important;
}

.service-card img{
  height: 140px !important;
}

.service-card span{
  padding: 14px 14px !important;
  font-size: 16px !important;
}

/* =======================
   MOBILE: encore plus compact
======================= */
@media (max-width: 768px){
  #mainNav a[href*="/cart"],
  #mainNav a[href*="cart"],
  #mainNav .cart,
  #mainNav .cart-link,
  #mainNav .nav-cart,
  #mainNav .header-cart{
    max-width: 160px !important;
  }
  #mainNav a[href*="/cart"],
  #mainNav a[href*="cart"]{
    padding: 9px 12px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   CATEGORIES (mobile) — texte sous l'image (pas à droite)
========================================================= */
@media (max-width: 768px){

  .categories-overlay .service-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;

    gap: 12px !important;
    padding: 16px !important;
  }

  /* Si jamais c'était en grid/2 colonnes */
  .categories-overlay .service-card{
    grid-template-columns: 1fr !important;
  }

  .categories-overlay .service-card img{
    display: block !important;
    width: 100% !important;
    max-width: 360px !important; /* ajuste si tu veux plus gros */
    height: auto !important;
    border-radius: 14px !important;
  }

  .categories-overlay .service-card span{
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;

    position: static !important;
    float: none !important;

    font-weight: 900 !important;
    color: var(--text) !important;
  }
}
/* =========================================================
   CATEGORY PRODUCTS — MOBILE: image trop grosse (FIX)
========================================================= */
@media (max-width: 768px){

  /* card layout propre */
  .product-card{
    display: flex !important;
    flex-direction: column !important;
  }

  /* wrapper image: hauteur fixe safe (évite "immense") */
  .product-img-wrapper{
    width: 100% !important;
    height: 160px !important;        /* ajuste 140-180 si tu veux */
    min-height: 160px !important;
    max-height: 160px !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f3f6fb !important;

    aspect-ratio: auto !important;   /* important: neutralise si ça bug */
  }

  /* l'image doit "rentrer" dans le wrapper */
  .product-img,
  .product-img-wrapper img{
    width: 100% !important;
    height: 100% !important;
    max-height: 160px !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
  }

  /* optionnel: évite que le bouton remonte weird */
  .product-card .btn{
    margin-top: auto !important;
  }
}
/* =========================================================
   PRIX (regular vs promo) — MOBILE FIX
========================================================= */
@media (max-width: 768px){

  .product-price{
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;

    margin: 10px 0 4px 0 !important;
    font-weight: 950 !important;
  }

  /* prix régulier */
  .product-price .normal-price{
    font-size: 18px !important;
    color: #0f172a !important;
  }

  /* ancien prix */
  .product-price .old-price{
    font-size: 16px !important;
    color: #64748b !important;      /* gris */
    text-decoration: line-through !important;
    text-decoration-thickness: 2px !important;
    opacity: .9 !important;
  }

  /* promo */
  .product-price .promo-price{
    font-size: 19px !important;
    color: #0f172a !important;      /* tu peux mettre bleu si tu veux */
    letter-spacing: -0.2px !important;
  }

  /* évite que le prix "colle" au bouton */
  .product-card .btn{
    margin-top: 12px !important;
  }
}
/* =========================
   MAC INPUTS (3x 2 chars)
========================= */
.mac-inputs{
  display: flex !important;
  gap: 8px !important;
}

.mac-field{
  width: 46px !important;       /* visuel 2 chars */
  max-width: 46px !important;
  min-width: 46px !important;
  text-align: center !important;
  font-family: monospace !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 10px 0 !important;
  border-radius: 10px !important;
}

/* optionnel: focus plus clair */
.mac-field:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44,123,229,.25) !important;
}

/* mobile: un peu plus petit si besoin */
@media (max-width: 768px){
  .mac-field{
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    font-size: 15px !important;
    padding: 9px 0 !important;
  }
}
/* Prefix MAC (00:1A:79:) visible sur fond clair */
#macPrefix{
  display: inline-block !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #0f172a !important;          /* foncé */
  color: #ffffff !important;                /* texte blanc */
  border: 1px solid rgba(15,23,42,.25) !important;
  font-family: monospace !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
#macBlock > div[style*="display:flex"]{
  align-items: center !important;
}
/* ================================
   CART — couleurs propres (light)
================================ */
.cart-page{ color: var(--text) !important; }

.points-available-box{
  background: rgba(44,123,229,.10) !important;
  border-left: 4px solid var(--blue) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.points-available-num{
  color: var(--blue) !important;
  font-weight: 950 !important;
}

/* ================================
   CART — mobile: table -> cartes
================================ */
@media (max-width: 768px){

  /* évite le “wide” global */
  .cart-layout{ margin-left:0 !important; margin-right:0 !important; }
  .cart-layout > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }

  /* table devient des cards */
  .cart-desktop table{ width:100% !important; border-collapse: separate !important; border-spacing:0 12px !important; }
  .cart-desktop thead{ display:none !important; }

  .cart-desktop tbody tr{
    display:block !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 12px !important;
  }

  .cart-desktop tbody td{
    display:block !important;
    width:100% !important;
    border:0 !important;
    padding: 8px 0 !important;
    color: var(--text) !important;
  }

  /* image plus petite */
  .cart-desktop td img{
    max-width: 110px !important;
    max-height: 110px !important;
  }

  /* bouton delete + qty plus clean */
  .cart-desktop form.d-flex{
    justify-content:flex-start !important;
  }

  /* prix aligné gauche sur mobile */
  .cart-desktop td.text-end{ text-align:left !important; }
}
/* =========================================================
   CART — patch mobile (lisibilité + boutons pas full width)
========================================================= */
@media (max-width: 768px){

  /* 1) Neutralise "table-dark" seulement dans le panier */
  .cart-page table.table-dark{
    background: transparent !important;
    color: var(--text) !important;
  }

  .cart-page table.table-dark > :not(caption) > * > *{
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  /* 2) Nos cartes mobile doivent être BLANCHES + texte foncé */
  .cart-page .cart-desktop tbody tr{
    background: var(--card) !important;
  }
  .cart-page .cart-desktop tbody td{
    color: var(--text) !important;
  }

  /* 3) IMPORTANT: dans le panier, les petits boutons ne doivent PAS être width:100% */
  .cart-page .cart-desktop tbody form .btn,
  .cart-page .cart-desktop tbody form a.btn{
    width: auto !important;
    min-height: 40px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }

  /* Bouton delete : carré */
  .cart-page .cart-desktop tbody form .btn.btn-danger{
    width: 54px !important;
    justify-content: center !important;
  }

  /* Input quantité */
  .cart-page .cart-desktop tbody input[type="number"]{
    width: 72px !important;
  }

  /* 4) On garde le gros CTA "continuer" full width (si w-100) */
  .cart-page a.btn.w-100,
  .cart-page a.btn-primary.w-100{
    width: 100% !important;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  .hero-devices-inner{
    grid-template-columns: 1fr;
  }

  .devices-stack{
    grid-template-columns: 1fr;
  }

  .device-card img{
    height: 170px; /* un peu plus haut sur mobile */
  }

  .hero-devices-spacer{
    display: none; /* pas besoin sur mobile */
  }
}

/* Mobile */
@media (max-width: 768px){
  .product-card img,
  .product-thumb img,
  .product-image img,
  .product-main img,
  .product-gallery img {
    height: 180px;
    padding: 10px;
  }
}
/* Desktop (par défaut) */
.lp-hero-photo{
  min-height: 360px;
  border-radius: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Tablette */
@media (max-width: 992px){
  .lp-hero-photo{
    min-height: 300px;
  }
}

/* Mobile */
@media (max-width: 576px){
  .lp-hero-photo{
    min-height: 220px;
    border-radius: 16px;
  }
}
/* FIX: images trop zoomées dans les cartes produits (mobile) */
@media (max-width: 768px){

  .products-grid .product-img-wrapper{
    height: 170px;              /* ajuste: 150-220 selon ton goût */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;        /* si tu veux garder le style card */
    background: #fff;           /* optionnel (logo sur fond blanc) */
  }

  .products-grid .product-img{
    width: 100%;
    height: 100%;
    object-fit: contain !important;   /* IMPORTANT */
    object-position: center;
    display: block;
  }

}
/* HERO BENEFITS — MOBILE */
.lp-hero-benefits{
  padding: 16px !important;
  border-radius: 18px !important;
}

.benefit-item{
  padding: 12px 14px !important;
  gap: 12px !important;
}

.benefit-item i{
  font-size: 22px !important;
}

.benefit-item h4{
  font-size: 15px !important;
}

.benefit-item p{
  font-size: 13px !important;
}