/* =========================================================
  IPGUYS USA — LIGHT BLUE STORYTELLING (DESKTOP)
  Palette:
  - Primary: #2C7BE5
  - Light BG: #F5F9FF
  - Text: #0B1B3A
========================================================= */

:root{
  --primary:#2C7BE5;
  --primary-dark:#1E63C6;
  --bg:#F5F9FF;
  --bg2:#FFFFFF;
  --text:#0B1B3A;
  --muted:#4E5D78;
  --card:#FFFFFF;
  --border:rgba(11,27,58,0.10);
  --shadow:0 18px 50px rgba(11,27,58,0.12);
  --radius:18px;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* container */
.lp-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------------------------------------------------------
  NAV
--------------------------------------------------------- */
.lp-nav{
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(11,27,58,0.06);
}

.site-logo-small{
  height: 78px !important;
  width: auto !important;
  max-height: none !important;
}

/* HEADER — autoriser logo plus grand */
.lp-nav,
.navbar{
  min-height: 92px !important; /* ← clé */
  align-items: center;
}
.navbar-brand{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}

.navbar .nav-link{
  color: var(--text) !important;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 12px !important;
}

.navbar .nav-link:hover{
  background: rgba(44,123,229,0.08);
}

.navbar .btn,
.navbar select{
  border-radius: 12px !important;
}

/* ---------------------------------------------------------
  BUTTONS
--------------------------------------------------------- */
.btn-primary{
  background: var(--primary) !important;
  border: 1px solid rgba(44,123,229,0.25) !important;
  color: #fff !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px rgba(44,123,229,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-primary:hover{
  background: var(--primary-dark) !important;
}

.btn-secondary{
  background: #fff !important;
  border: 1px solid rgba(44,123,229,0.30) !important;
  color: var(--primary-dark) !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-link{
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 700;
}

.btn-link:hover{ text-decoration: underline; }

/* ---------------------------------------------------------
  HERO
--------------------------------------------------------- */
.lp-hero{
  padding: 42px 0 24px;
  background:
    radial-gradient(1200px 520px at 80% 10%, rgba(44,123,229,0.22), transparent 60%),
    radial-gradient(900px 450px at 20% 30%, rgba(44,123,229,0.18), transparent 60%),
    linear-gradient(180deg, #FFFFFF, var(--bg));
}

.lp-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: stretch;
}

.lp-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(44,123,229,0.10);
  border: 1px solid rgba(44,123,229,0.18);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 13px;
}

.lp-h1{
  margin: 14px 0 8px;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 900;
}

.lp-subtitle{
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 600;
}

.lp-cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.lp-trust{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lp-trust-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(11,27,58,0.06);
  font-weight: 700;
  color: var(--text);
}

.lp-trust-item i{
  color: var(--primary-dark);
  font-size: 18px;
}

/* Right hero card */
.lp-hero-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow:hidden;
}

.lp-hero-card::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(44,123,229,0.25), transparent 60%);
  transform: rotate(18deg);
}

.lp-hero-card-top{
  position: relative;
  z-index: 1;
}

.lp-hero-card-title{
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 6px;
}

.lp-hero-card-note{
  color: var(--muted);
  font-weight: 600;
}

.lp-hero-card-actions{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.w-100{ width:100%; }

/* Hero photo placeholder (optional) */
.lp-hero-photo{
  margin-top: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(44,123,229,0.14), rgba(255,255,255,0.65)),
    url('/themes/ipguysusa/assets/img/hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 240px;
  box-shadow: 0 18px 50px rgba(11,27,58,0.10);
}

/* If hero.jpg doesn't exist, it will still look fine with gradient. */
.lp-hero-photo{
  background-blend-mode: overlay;
}

/* ---------------------------------------------------------
  SECTIONS
--------------------------------------------------------- */
.lp-section{
  padding: 56px 0;
  background: var(--bg2);
}

.lp-section-alt{
  background: var(--bg);
}

.lp-h2{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.lp-lead{
  color: var(--muted);
  font-weight: 600;
  font-size: 16px;
  max-width: 70ch;
  margin-bottom: 22px;
}

.lp-center{
  display:flex;
  justify-content:center;
  margin-top: 22px;
}

/* features grid */
.lp-features{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.lp-feature{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 14px 40px rgba(11,27,58,0.08);
}

.lp-feature i{
  font-size: 22px;
  color: var(--primary-dark);
}

.lp-feature h3{
  font-size: 16px;
  font-weight: 900;
  margin: 10px 0 6px;
}

.lp-feature p{
  color: var(--muted);
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
}

/* pricing */
.lp-pricing{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.lp-price-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration:none;
  color: var(--text);
  box-shadow: 0 16px 40px rgba(11,27,58,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.lp-price-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(11,27,58,0.12);
}

.lp-price-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 10px;
}

.lp-price-title{
  font-weight: 1000;
  font-size: 18px;
}

.lp-price-tag{
  font-weight: 900;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44,123,229,0.22);
  background: rgba(44,123,229,0.10);
  color: var(--primary-dark);
}

.lp-best{
  border: 2px solid rgba(44,123,229,0.55);
}

.lp-price-desc{
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.lp-price-cta{
  font-weight: 900;
  color: var(--primary-dark);
}

/* steps */
.lp-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lp-step{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 14px 40px rgba(11,27,58,0.08);
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.lp-step-num{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(44,123,229,0.12);
  border: 1px solid rgba(44,123,229,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: var(--primary-dark);
}

.lp-step h3{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 1000;
}

.lp-step p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
}

/* devices */
.lp-device-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.lp-device{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 12px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  box-shadow: 0 14px 40px rgba(11,27,58,0.06);
  font-weight: 900;
  color: var(--text);
}

.lp-device i{
  font-size: 22px;
  color: var(--primary-dark);
}

/* long text */
.lp-longtext{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 16px 44px rgba(11,27,58,0.08);
}

.lp-longtext p{
  color: var(--muted);
  font-weight: 600;
  line-height: 1.65;
  margin: 0 0 12px;
}
.lp-longtext p:last-child{ margin-bottom: 0; }

/* final CTA */
.lp-final{
  padding: 44px 0;
  background: linear-gradient(135deg, rgba(44,123,229,0.18), rgba(255,255,255,0.65));
  border-top: 1px solid var(--border);
}

.lp-final-inner{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 18px;
}

.lp-final-inner h2{
  margin:0 0 6px;
  font-weight: 1000;
  letter-spacing: -0.3px;
}

.lp-final-inner p{
  margin:0;
  color: var(--muted);
  font-weight: 600;
}

.lp-final-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* footer */
.lp-footer{
  background: #ffffff;
  border-top: 1px solid var(--border);
  padding: 18px 0;
}

.lp-footer-grid{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 16px;
}

.lp-footer-brand{
  font-weight: 1000;
}

.lp-footer-note,
.lp-footer-legal{
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}

/* ---------------------------------------------------------
  Responsive helpers (desktop file only)
--------------------------------------------------------- */
@media (max-width: 1200px){
  .lp-h1{ font-size: 48px; }
}
/* ---------------------------------------------------------
  Ajout header
--------------------------------------------------------- */
.lp-select{
  background:#fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  font-weight: 700;
}
.lp-select:focus{
  box-shadow: 0 0 0 .2rem rgba(44,123,229,0.18) !important;
  border-color: rgba(44,123,229,0.35) !important;
}
.lp-btn-outline{
  border-radius: 12px !important;
  font-weight: 800;
  border-color: rgba(44,123,229,0.30) !important;
  color: var(--primary-dark) !important;
  background: #fff !important;
}
.lp-btn-outline:hover{
  background: rgba(44,123,229,0.08) !important;
}

/* =========================================================
   HERO CATEGORIES (DESKTOP)
========================================================= */
.hero-streaming{
  background: radial-gradient(900px 420px at 15% 10%, rgba(44,123,229,.16), transparent 60%),
              linear-gradient(180deg, rgba(245,249,255,1), rgba(245,249,255,.65));
  padding-top: 34px;
  padding-bottom: 48px;
}

.hero-streaming .hero-wrapper{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 22px 0 18px;
}

.hero-streaming .hero-copy h1{
  margin: 0;
}

.categories-overlay{
  margin-top: 12px;
}

/* cards catégories */
.service-link{
  display:block;
}

.service-card{
  background:#fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
  overflow: hidden;

  display:flex;
  flex-direction:column;
}

.service-card img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display:block;
}

.service-card span{
  padding: 14px 16px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.service-link:hover .service-card{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 22px 60px rgba(15,23,42,.14);
}
/* =========================================================
   HEADER — FIX PANIER TROP GROS (DESKTOP + MOBILE)
   Objectif: le panier reste compact (auto width) et ne casse pas le header
========================================================= */

/* 1) Le container flex du header: on évite qu'un item prenne toute la largeur */
#mainNav .d-flex{
  align-items: center !important;
  gap: 10px !important;
}

/* 2) Sélecteurs "safe" pour attraper le lien panier même si la classe change */
#mainNav a[href*="/cart"],
#mainNav a[href*="cart"],
#mainNav .cart,
#mainNav .cart-link,
#mainNav .nav-cart,
#mainNav .header-cart{
  flex: 0 0 auto !important;     /* stop flex:1 */
  width: auto !important;        /* stop width:100% */
  max-width: 180px !important;   /* compact */
  white-space: nowrap !important;
}

/* 3) Look bouton compact (si c’est un <a> style btn/pill) */
#mainNav a[href*="/cart"],
#mainNav a[href*="cart"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
}

/* 4) Si ton panier est un "input-like" (form-control), on le limite aussi */
#mainNav .form-control,
#mainNav input[type="text"],
#mainNav input[type="search"]{
  max-width: 260px;
}
/* ===== CATEGORY PRODUCTS (desktop) ===== */
.products-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.product-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  padding: 16px;
  height: 100%;
}

.product-img-wrapper{
  border-radius: 14px;
  overflow: hidden;
  background: #f3f6fb;
  aspect-ratio: 16 / 10;
}

.product-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.product-title{
  font-weight: 950;
  font-size: 18px;
  margin: 12px 0 6px;
}

.product-desc{
  color: rgba(15,23,42,.72);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.product-price{
  display:flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 6px;
}

.old-price{
  text-decoration: line-through;
  color: rgba(15,23,42,.45);
  font-weight: 800;
}

.promo-price{
  color: #1e66c8;
  font-weight: 950;
  font-size: 18px;
}

.normal-price{
  color: #0f172a;
  font-weight: 950;
  font-size: 18px;
}

/* responsive desktop */
@media (max-width: 1200px){
  .products-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px){
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* =========================
   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;
}
/* =========================================================
   DEVICES PAGE — FIX images qui débordent (desktop + mobile)
========================================================= */

/* le hero ne doit jamais déborder */
.hero-devices,
.hero-devices *{
  max-width: 100%;
}

.hero-devices{
  overflow: hidden; /* stop tout débordement */
}

/* layout général */
.hero-devices-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
}

/* colonne gauche */
.hero-devices-content{
  min-width: 0; /* important pour éviter overflow grid */
}

/* stack des cards */
.devices-stack{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* card */
.device-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(15,23,42,.12));
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow, 0 18px 45px rgba(15,23,42,.10));
  padding: 14px;
  overflow: hidden;
}

/* image dans la carte = jamais gigantesque */
.device-card img{
  width: 100%;
  height: 140px;           /* desktop */
  object-fit: contain;     /* IMPORTANT */
  display: block;
}

/* texte */
.device-card span{
  margin-top: 10px;
  font-weight: 900;
  color: var(--text, #0f172a);
  text-align: center;
}

/* image/colonne droite (spacer) */
.hero-devices-spacer{
  min-height: 320px;
}
/* ✅ FIX: logos/images produit qui deviennent géants (listings + fiches) */
.product-card img,
.product-thumb img,
.product-image img,
.product-main img,
.product-gallery img {
  width: 100%;
  height: 220px;              /* ajuste si tu veux */
  object-fit: contain;        /* ✅ au lieu de cover */
  background: #fff;           /* rend le “padding” propre pour un logo */
  padding: 12px;
  border-radius: 12px;
  display: block;
}

/* Container safe (évite débordement) */
.product-card .thumb,
.product-thumb,
.product-image,
.product-main {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-hero-photo{
  min-height: 360px;
  border-radius: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* HEADER — bouton Connexion plus discret */
#mainNav a[href*="login"],
#mainNav a[href*="connexion"]{
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(44,123,229,0.25) !important;
  color: var(--primary-dark) !important;
  box-shadow: none !important;
}

/* hover clean */
#mainNav a[href*="login"]:hover,
#mainNav a[href*="connexion"]:hover{
  background: rgba(44,123,229,0.06) !important;
}
/* =========================================================
   HEADER — Connexion (DESKTOP ONLY)
   Plus petit que le panier, pas CTA
========================================================= */
@media (min-width: 992px){

  #mainNav a[href*="login"],
  #mainNav a[href*="connexion"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 7px 14px !important;   /* plus petit que panier */
    height: 40px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    background: #fff !important;
    color: var(--primary-dark) !important;
    border: 1px solid rgba(44,123,229,0.25) !important;
    border-radius: 999px !important;

    box-shadow: none !important;
    width: auto !important;
  }

  #mainNav a[href*="login"]:hover,
  #mainNav a[href*="connexion"]:hover{
    background: rgba(44,123,229,0.06) !important;
  }
}
/* =========================================================
   HERO — BENEFITS (HTML VISUAL)
========================================================= */
.lp-hero-benefits{
  margin-top: 16px;
  background: linear-gradient(
    135deg,
    rgba(44,123,229,.08),
    rgba(255,255,255,.95)
  );
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  box-shadow: 0 18px 50px rgba(11,27,58,.10);
}

.benefit-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(44,123,229,.12);
  border-radius: 18px;
  padding: 14px 16px;
}

.benefit-item i{
  font-size: 26px;
  color: var(--primary-dark);
  flex-shrink: 0;
}

.benefit-item h4{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.benefit-item p{
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
}