/* ========================================
   FICHE PRODUIT — ENCART « EN SITUATION »
   ======================================== */
.product-usecase {
  margin-top: 48px;
  margin-bottom: 56px;
  padding: 46px 48px;
  border-radius: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #0f1740 0%, #141d54 60%, #0d1338 100%);
}
.product-usecase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 100% at 100% 0%, rgba(255,107,0,0.16), transparent 55%);
}
.product-usecase > * { position: relative; z-index: 1; }

/* Illustration sectorielle : filigrane de fond + médaillon */
.uc-illus {
  position: absolute;
  top: -26px;
  right: -18px;
  width: 240px;
  height: 240px;
  z-index: 0;
  color: #fff;
  opacity: 0.06;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.uc-medallion {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ff8a2b, var(--orange));
  box-shadow: 0 10px 26px rgba(255,107,0,0.30);
}
.uc-medallion svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 8px 18px;
  border-radius: 999px;
}
.uc-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

.product-usecase h2 {
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 18px 0 26px;
  color: #fff;
}

.usecase-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 34px;
  align-items: start;
}
.usecase-scenario p {
  color: rgba(255,255,255,0.82);
  line-height: 1.62;
  margin-bottom: 15px;
  font-size: 1.02rem;
}
.usecase-scenario p:last-child { margin-bottom: 0; }
.usecase-scenario p strong { color: var(--orange); font-weight: 700; }

.usecase-benefit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px 26px;
}
.uc-benefit-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.usecase-benefit p {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 10px 0 18px;
}
.uc-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-sectors span {
  font-size: 0.8rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  padding: 5px 13px;
  border-radius: 999px;
}

.uc-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
}
.uc-note a { color: var(--orange); font-weight: 700; white-space: nowrap; }
.uc-note a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .product-usecase { padding: 32px 24px; }
  .usecase-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-usecase h2 { font-size: 1.4rem; }
}

.footer-col h4 {
  font-size: 0.88em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a,
.footer-col span {
  font-size: 0.95em;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--orange);
}

.footer-bottom {
  padding: 28px 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.85em;
  color: rgba(255,255,255,0.35);
}

/* ========================================
   V2 — BOUTIQUE, PAGES SERVICES & DEVIS
   ======================================== */

/* ---- Page hero (pages intérieures) ---- */
.page-hero {
  position: relative;
  padding: 150px 0 40px;
  background: linear-gradient(180deg, #fff3e8 0%, var(--bg) 100%);
  overflow: hidden;
}

.page-hero h1 {
  font-size: 3.2em;
  margin-bottom: 20px;
  max-width: 800px;
}

.page-hero-desc {
  font-size: 1.15em;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 28px;
}

.page-hero .hero-actions {
  margin-bottom: 0;
}

.page-hero-compact {
  padding: 120px 0 12px;
  background: none;
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.88em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

/* Page hero spécifique : SIZ Immobilier (bleu + showcase logo) */
.page-hero-immo {
  background: linear-gradient(180deg, #eff6ff 0%, var(--bg) 100%);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.page-hero-logo-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-logo-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 70%);
  border-radius: 50%;
  filter: blur(28px);
  z-index: 1;
}

.ph-logo-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 32px;
  padding: 44px 52px;
  box-shadow: 
    0 24px 60px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(37, 99, 235, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.ph-logo-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 30px 75px rgba(15, 23, 42, 0.13),
    0 12px 30px rgba(37, 99, 235, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.98);
}

.ph-logo-img {
  max-width: 320px;
  max-height: 240px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(37, 99, 235, 0.16));
}

@media (max-width: 992px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .page-hero-logo-showcase {
    order: -1;
  }
  .ph-logo-card {
    padding: 32px 36px;
  }
  .ph-logo-img {
    max-width: 240px;
    max-height: 180px;
  }
}

/* Page hero avec image de fond */
.page-hero-img {
  padding: 140px 0 56px;
}

.page-hero-img .page-hero-bg {
  position: absolute;
  inset: 0;
}

.page-hero-img .page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 14, 26, 0.92) 20%, rgba(10, 14, 26, 0.6) 100%);
}

.page-hero-img .container {
  position: relative;
  z-index: 1;
}

.page-hero-img h1 {
  color: #fff;
}

.page-hero-img .page-hero-desc {
  color: rgba(255, 255, 255, 0.8);
}

.page-hero-img .page-hero-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(8px);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-ghost-light:hover {
  border-color: #fff;
}

/* ---- Fil d'Ariane ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 28px;
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb-light {
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Boutique Notice Animation ---- */
@keyframes noticeShimmer {
  0% { transform: translateX(-100%); }
  20%, 100% { transform: translateX(200%); }
}

@keyframes noticePulseIcon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255, 107, 0, 0); }
}

@keyframes noticeBorderGlow {
  0% { border-color: #ffd9b8; box-shadow: 0 4px 15px rgba(255, 107, 0, 0.08); }
  50% { border-color: var(--orange); box-shadow: 0 6px 22px rgba(255, 107, 0, 0.2); }
  100% { border-color: #ffd9b8; box-shadow: 0 4px 15px rgba(255, 107, 0, 0.08); }
}

.shop-notice {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #fffcf7, #fff7ed);
  border: 1.5px solid #ffd9b8;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  max-width: 100%;
  /* Était `nowrap` + `overflow:hidden` : toute phrase dépassant la largeur
     disponible était tronquée net, sans ellipse ni indice visuel. Le texte
     passe désormais à la ligne. L'overflow reste nécessaire au reflet animé. */
  white-space: normal;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
  animation: noticeBorderGlow 3s infinite ease-in-out;
  margin-top: 10px;
}

.shop-notice::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-20deg) translateX(-100%);
  animation: noticeShimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.notice-pulse-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  flex-shrink: 0;
  animation: noticePulseIcon 2s infinite;
}

.notice-text {
  color: var(--text);
}

.notice-text strong {
  color: var(--orange-dark);
  font-weight: 800;
}

.shop-section {
  padding-top: 60px;
}

.shop-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.shop-filter {
  padding: 12px 26px;
  border-radius: 60px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-xs);
  letter-spacing: 0.01em;
}

.shop-filter:hover {
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.shop-filter.active {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.shop-category-section {
  margin-bottom: 64px;
}

.shop-category-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.shop-category-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
}

.products-grid,
.featured-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 32px;
}

/* Une piste `1fr` a pour minimum automatique le min-content de son contenu :
   une carte au contenu large (gamme TETRA) élargissait donc sa colonne et
   faisait déborder la page de 93px, masqués par overflow-x:hidden. On autorise
   les pistes et les cartes à se comprimer sous ce minimum. */
.products-grid,
.featured-products-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.products-grid > *,
.featured-products-grid > * {
  min-width: 0;
}

/* Le `min-width: 0` doit descendre jusqu'au contenu : la carte est rendue
   dans un élément personnalisé (<sizeg-product-card>), et c'est l'<article>
   intérieur — puis ses rangées flex — qui imposaient encore leur min-content.
   Sous 430px la grille réclamait 423px pour 360px disponibles. */
.products-grid sizeg-product-card,
.products-grid .product-card,
.featured-products-grid sizeg-product-card,
.featured-products-grid .product-card { min-width: 0; }

.product-card > *,
.product-card .product-body > * { min-width: 0; }

/* Les références produit sont longues et sans espace : on les laisse casser
   plutôt qu'élargir la carte. */
.product-card .product-title,
.product-card .product-cat { overflow-wrap: anywhere; }

sizeg-product-grid {
  display: block;
  width: 100%;
}

sizeg-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

sizeg-product-card .product-card {
  flex: 1 1 auto;
  height: 100%;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: visible !important;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-executive);
  border-color: rgba(255, 107, 0, 0.4);
  z-index: 100 !important;
}

.product-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 270px;
  padding: 32px;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f8fafc 70%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
}

/* Transparence parfaite universelle des images équipements (Missions critiques, Sécurité, Satellites, Gamme MOTOTRBO) */
#heroProductImg,
#mainProductImg,
.product-img img,
.product-detail-img img,
.thumb-btn img,
.cart-item-img img,
article.product-card img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: normal;
  background-color: transparent !important;
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.12));
}

.product-card:hover .product-img img {
  transform: scale(1.08) translateY(-4px);
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18));
}

.product-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 14px;
  background: var(--text);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 99px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  z-index: 2;
}

.product-badge.badge-new {
  background: var(--orange);
  box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px;
}

.product-cat {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 8px;
}

.product-body h3 {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.product-body h3 a {
  transition: color var(--transition-fast);
}

.product-body h3 a:hover {
  color: var(--orange);
}

.product-body p {
  font-size: 0.94rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.65;
}

.product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  margin-top: auto;
}

.product-chips li {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
  transition: all var(--transition-fast);
  position: relative;
}

.product-chips li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px rgba(255, 107, 0, 0.6);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.product-chips li:hover {
  background: linear-gradient(135deg, #fffcf7, #fff7ed);
  border-color: var(--orange);
  color: var(--orange-dark);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.16);
}

.product-chips li:hover::before {
  transform: scale(1.4);
  background: #ea580c;
  box-shadow: 0 0 10px #ff6b00;
}

/* Mode icônes seules avec infobulles (Boutique & cartes produits épurées) */
.product-chips.product-chips-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  margin-top: auto;
}

.product-chips-icons li.chip-icon-only {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast) !important;
}

.product-chips-icons li.chip-icon-only::before {
  display: none !important;
}

.product-chips-icons li.chip-icon-only:hover {
  background: linear-gradient(135deg, #fffcf7, #fff7ed) !important;
  border-color: var(--orange) !important;
  color: #ff6b00 !important;
  transform: translateY(-3px) scale(1.12) !important;
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.22) !important;
  z-index: 200 !important;
}

/* Infobulle CSS instantanée au survol */
.product-chips-icons li.chip-icon-only::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  /* `display: none` au repos : une infobulle masquée par opacity/visibility
     gardait sa boîte (nowrap, ~150px) et, la carte étant en overflow:visible,
     élargissait le débordement horizontal de la page sur mobile (~63px à 375px).
     Elle n'apparaît qu'au survol, donc uniquement sur pointeur fin — aucune
     perte sur mobile où le survol n'existe pas. */
  display: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
  z-index: 300 !important;
}

.product-chips-icons li.chip-icon-only:hover::after {
  display: block;
}

/* Positionnement intelligent pour ne jamais déborder des bords de la carte (gauche et droite) */
.product-chips-icons li.chip-icon-only:first-child::after {
  left: -4px;
  transform: none;
}
.product-chips-icons li.chip-icon-only:last-child::after {
  left: auto;
  right: -4px;
  transform: none;
}

/* Couleurs & styles thématiques modernes pour chaque icône de caractéristique */
.product-chips-icons li.chip-cat-shield { color: #059669 !important; border-color: rgba(16, 185, 129, 0.35) !important; background: linear-gradient(135deg, #ecfdf5, #ffffff) !important; }
.product-chips-icons li.chip-cat-signal { color: #2563eb !important; border-color: rgba(59, 130, 246, 0.35) !important; background: linear-gradient(135deg, #eff6ff, #ffffff) !important; }
.product-chips-icons li.chip-cat-audio { color: #7c3aed !important; border-color: rgba(139, 92, 246, 0.35) !important; background: linear-gradient(135deg, #f5f3ff, #ffffff) !important; }
.product-chips-icons li.chip-cat-battery { color: #d97706 !important; border-color: rgba(245, 158, 11, 0.35) !important; background: linear-gradient(135deg, #fffbeb, #ffffff) !important; }
.product-chips-icons li.chip-cat-channels { color: #0284c7 !important; border-color: rgba(14, 165, 233, 0.35) !important; background: linear-gradient(135deg, #f0f9ff, #ffffff) !important; }
.product-chips-icons li.chip-cat-compact { color: #0d9488 !important; border-color: rgba(20, 184, 166, 0.35) !important; background: linear-gradient(135deg, #f0fdfa, #ffffff) !important; }
.product-chips-icons li.chip-cat-display { color: #4f46e5 !important; border-color: rgba(99, 102, 241, 0.35) !important; background: linear-gradient(135deg, #eef2ff, #ffffff) !important; }
.product-chips-icons li.chip-cat-camera { color: #e11d48 !important; border-color: rgba(244, 63, 94, 0.35) !important; background: linear-gradient(135deg, #fff1f2, #ffffff) !important; }
.product-chips-icons li.chip-cat-power { color: #ea580c !important; border-color: rgba(249, 115, 22, 0.35) !important; background: linear-gradient(135deg, #fff7ed, #ffffff) !important; }
.product-chips-icons li.chip-cat-safety { color: #dc2626 !important; border-color: rgba(239, 68, 68, 0.35) !important; background: linear-gradient(135deg, #fef2f2, #ffffff) !important; }
.product-chips-icons li.chip-cat-android { color: #15803d !important; border-color: rgba(34, 197, 94, 0.35) !important; background: linear-gradient(135deg, #f0fdf4, #ffffff) !important; }
.product-chips-icons li.chip-cat-install { color: #475569 !important; border-color: rgba(100, 116, 139, 0.35) !important; background: linear-gradient(135deg, #f8fafc, #ffffff) !important; }
.product-chips-icons li.chip-cat-bt { color: #1d4ed8 !important; border-color: rgba(37, 99, 235, 0.35) !important; background: linear-gradient(135deg, #eff6ff, #ffffff) !important; }
.product-chips-icons li.chip-cat-gps { color: #0891b2 !important; border-color: rgba(6, 182, 212, 0.35) !important; background: linear-gradient(135deg, #ecfeff, #ffffff) !important; }
.product-chips-icons li.chip-cat-default { color: #475569 !important; border-color: rgba(148, 163, 184, 0.35) !important; background: linear-gradient(135deg, #f8fafc, #ffffff) !important; }

/* Badges VIP dynamiques & spécialisés (MOTOTRBO ION et haut de gamme) */
.chip-android {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}
.chip-android::before { display: none !important; }
.chip-android:hover { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

.chip-lte {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}
.chip-lte::before { display: none !important; }
.chip-lte:hover { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

.chip-hazloc {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}
.chip-hazloc::before { display: none !important; }
.chip-hazloc:hover { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

.chip-screen {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border-color: #64748b !important;
  color: #334155 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.12);
}
.chip-screen::before { display: none !important; }
.chip-screen:hover { background: linear-gradient(135deg, #475569, #334155) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

.chip-battery {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-color: #22c55e !important;
  color: #15803d !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.15);
}
.chip-battery::before { display: none !important; }
.chip-battery:hover { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

.chip-audio {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;
  border-color: #a855f7 !important;
  color: #6b21a8 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
}
.chip-audio::before { display: none !important; }
.chip-audio:hover { background: linear-gradient(135deg, #a855f7, #9333ea) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); }

/* ---- Boutons d'actions carte produit (sur la même ligne) ---- */
.product-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

[hidden] {
  display: none !important;
}

.product-actions .btn,
.btn-sm {
  flex: 1 1 auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding: 10px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  height: 42px !important;
  border-radius: 50px !important;
  transition: all var(--transition-fast);
}

.product-actions .btn-outline {
  flex: 0 0 auto !important;
  background: var(--bg-white);
  color: var(--text);
  border: 1.5px solid var(--border) !important;
}

.product-actions .btn-outline:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  background: var(--orange-light) !important;
  transform: translateY(-2px);
}

.product-actions .btn-primary {
  flex: 1 1 auto !important;
  background: linear-gradient(135deg, #ff6b00, #ea580c) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.25) !important;
}

.product-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.45) !important;
  background: linear-gradient(135deg, #ff7a1a, #f97316) !important;
}

/* ---- Stepper dynamique Caddy + Quantité (- 🛒 1 +) ---- */
.btn-in-cart-stepper {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 42px !important;
  padding: 3px 5px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  transition: all var(--transition-fast);
  white-space: nowrap !important;
  overflow: hidden;
}

.btn-in-cart-stepper:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
  border-color: #cbd5e1 !important;
}

.stepper-action-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stepper-action-btn:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #ffffff !important;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.35) !important;
}

.stepper-caddy-center {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  padding: 0 6px !important;
  transition: transform 0.2s ease !important;
}

.stepper-caddy-center:hover {
  transform: scale(1.04);
}

.stepper-caddy-center svg {
  flex-shrink: 0;
  transition: stroke 0.2s ease;
}

.stepper-caddy-center:hover svg {
  stroke: var(--orange);
}

.caddy-count-circle {
  background: linear-gradient(135deg, #ff6b00, #ea580c);
  color: #ffffff;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.35);
}

.shop-more-note {
  margin-top: 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95em;
}

.shop-more-note a {
  color: var(--orange);
  font-weight: 700;
}

/* ---- Sections alternées & tableaux ---- */
.alt-section {
  background: var(--bg-white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
}

/* ---- Tableau comparatif sous onglets : affichage 100% intégral sans scroll ---- */
.compare-tab-pane .table-scroll {
  overflow-x: visible !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  background: var(--bg-white);
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9em;
  min-width: 800px;
}

.compare-tab-pane .compare-table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: fixed;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.compare-tab-pane .compare-table th,
.compare-tab-pane .compare-table td {
  white-space: normal !important;
  word-wrap: break-word;
  word-break: break-word;
  padding: 12px 14px;
  font-size: 0.83em;
  line-height: 1.45;
  vertical-align: middle;
}

.compare-tab-pane .compare-table th:first-child,
.compare-tab-pane .compare-table td:first-child {
  width: 20%;
}

.compare-table thead th {
  background: #f8fafc;
  color: var(--text);
  font-weight: 800;
  border-bottom: 2px solid var(--border);
}

.compare-table thead th a {
  color: var(--text);
}

.compare-table thead th a:hover {
  color: var(--orange);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Colonne figée (Critère) ---- */
.compare-table th:first-child,
.compare-table td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  border-right: 2px solid var(--border);
  box-shadow: 6px 0 16px rgba(0, 0, 0, 0.05);
}

.compare-tab-pane .compare-table th:first-child,
.compare-tab-pane .compare-table td:first-child {
  position: static !important;
  box-shadow: none !important;
}

.compare-table thead th:first-child {
  background: #f8fafc;
  color: var(--text);
  z-index: 3;
}

.compare-table tbody td:first-child {
  background: var(--bg-white);
  font-weight: 700;
  color: var(--text);
  z-index: 2;
}

.compare-table tbody td {
  color: var(--text-muted);
}

/* ---- Miniatures dans les en-têtes du tableau comparatif ---- */
.compare-table thead th.compare-th-item {
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  min-width: 105px;
}

.compare-tab-pane .compare-table thead th.compare-th-item {
  min-width: auto !important;
  padding: 12px 8px;
}

@media (max-width: 768px) {
  .compare-tab-pane .compare-table th,
  .compare-tab-pane .compare-table td {
    padding: 8px 6px;
    font-size: 0.76em;
  }
  .compare-th-box {
    width: 46px;
    height: 46px;
  }
}


.compare-th-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.compare-th-box {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-th-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: transform 0.25s ease;
}

.compare-th-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.compare-th-card:hover .compare-th-box {
  background: #ffffff;
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.18);
}

.compare-th-card:hover .compare-th-box img {
  transform: scale(1.12);
}

.compare-th-card:hover .compare-th-label {
  color: var(--orange);
}

/* Tooltip pro au survol */
.compare-th-card::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #111418;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 20;
}

.compare-th-card:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* ---- Onglets par famille - Tableau Comparatif ---- */
.compare-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.compare-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95em;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
}

.compare-tab-btn svg {
  color: var(--orange);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.compare-tab-btn:hover {
  border-color: var(--orange);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.compare-tab-btn:hover svg {
  transform: scale(1.15);
}

.compare-tab-btn.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(255, 107, 0, 0.28);
}

.compare-tab-btn.is-active svg {
  color: #ffffff;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--border-light);
  color: var(--text);
  transition: all 0.3s ease;
}

.compare-tab-btn.is-active .tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.compare-tab-pane {
  display: none;
  animation: fadeInPane 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-tab-pane.is-active {
  display: block;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---- Fiche produit ---- */
.product-detail-section {
  padding-top: 24px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: stretch;
  margin-bottom: 44px;
}

.product-detail-img-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.product-detail-info .product-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 0;
}

.product-detail-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, var(--bg-white) 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  flex: 1;
  min-height: 480px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.product-detail-img:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 30px rgba(255, 107, 0, 0.12);
}

.product-detail-img img {
  max-height: 440px;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform-origin 0.4s ease, opacity 0.2s ease;
  transform-origin: center center;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-color: transparent !important;
}

.product-detail-img.is-zooming img {
  transform: scale(2.2);
  transition: transform 0.15s ease-out, opacity 0.2s ease !important;
}

.btn-expand-hd {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-expand-hd:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}

.zoom-hint {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78em;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-detail-img:hover .zoom-hint {
  opacity: 0;
  transform: translateY(10px);
}

/* Gallery Thumbnails */
.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: auto;
}

.thumb-btn {
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all var(--transition);
  overflow: hidden;
  position: relative;
}

.thumb-btn img {
  height: 46px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.3s ease;
  mix-blend-mode: multiply;
  background-color: transparent !important;
}

.thumb-btn span {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

.thumb-btn:hover {
  border-color: #ffd9b8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.thumb-btn.active {
  border-color: var(--orange);
  background: var(--orange-light);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.15);
}

.thumb-btn.active span {
  color: var(--orange-dark);
}

/* ---- Lightbox Plein Écran Équipements ---- */
.eq-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.eq-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.eq-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
}

.eq-modal-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 96%;
  max-width: 1300px;
  height: 94vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.eq-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: #0f172a;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eq-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.eq-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eq-btn-tool {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eq-btn-tool:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.eq-btn-close {
  background: #ef4444;
  border: none;
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.eq-btn-close:hover {
  background: #dc2626;
  transform: scale(1.08);
}

.eq-modal-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 40px;
  background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
  position: relative;
}

.eq-modal-stage img {
  max-height: 75vh;
  max-width: 90vw;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.18));
}

.eq-modal-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.eq-thumb-pill {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.eq-thumb-pill img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.eq-thumb-pill:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.eq-thumb-pill.active {
  border-color: var(--orange);
  background: #fff4ec;
  color: var(--orange-dark);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}

/* ---- Cartes Téléchargement Fiche Technique & Brochure PDF ---- */
/* ---- Cartes Téléchargement Fiche Technique & Brochure PDF (Design Boutons Fins & Premium) ---- */
.product-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 0;
}

.doc-dl-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  position: relative;
  overflow: hidden;
}

.doc-dl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--orange);
  opacity: 1;
  transition: width 0.25s ease;
}

.doc-dl-card.doc-brochure::before {
  background: #4f46e5;
}

.doc-dl-card:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  background: #fffdfb;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.12);
}

.doc-dl-card.doc-brochure:hover {
  border-color: #4f46e5;
  background: #fcfcff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12);
}

.doc-dl-card:hover::before {
  width: 5px;
}

.doc-dl-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff4ec;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.doc-dl-card.doc-brochure .doc-dl-icon {
  background: #eef2ff;
  color: #4f46e5;
}

.doc-dl-card:hover .doc-dl-icon {
  transform: scale(1.08);
}

.doc-dl-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.doc-dl-info strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-dl-info span {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-dl-arrow {
  color: var(--text-muted);
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}

.doc-dl-card:hover .doc-dl-arrow {
  transform: translateY(2px);
  color: var(--orange);
}

.doc-dl-card.doc-brochure:hover .doc-dl-arrow {
  color: #4f46e5;
}

/* Commercial Video Section */
.product-video-section {
  padding: 40px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 44px;
}

.product-video-box {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.product-video-box .section-header {
  margin-bottom: 24px;
}

.video-player-container {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.video-cover:hover img {
  transform: scale(1.05);
  opacity: 0.5;
}

.video-overlay {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.btn-play-video {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  border: 4px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 107, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-left: 4px;
}

.video-cover:hover .btn-play-video {
  transform: scale(1.15);
  box-shadow: 0 16px 40px rgba(255, 107, 0, 0.6);
  background: linear-gradient(135deg, #ff8000, #d95700);
}

.video-overlay span {
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.02em;
}

.video-embed {
  width: 100%;
  height: 100%;
}

.video-embed iframe,
.video-embed video {
  width: 100%;
  height: 100%;
  border: none;
}

.product-detail-info h1 {
  font-size: 2.6em;
  margin: 8px 0 6px;
}

.product-motto {
  font-size: 0.95em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: 18px;
}

.product-detail-desc {
  font-size: 1.08em;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.product-detail-highlights {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.product-detail-highlights li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.98em;
}

.product-detail-highlights svg {
  color: var(--green);
  flex-shrink: 0;
}

.product-detail-sectors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.sectors-label {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text-light);
  margin-right: 4px;
}

.sector-chip {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--orange-dark);
  background: var(--orange-light);
  border: 1px solid #ffd9b8;
  padding: 6px 14px;
  border-radius: 50px;
}

.product-detail-buy {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.product-detail-qty {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-detail-qty label {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-muted);
}

.product-detail-qty input {
  width: 90px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}

.product-price-note {
  font-size: 0.88em;
  color: var(--text-light);
}

.product-specs {
  margin-bottom: 44px;
}

.product-specs h2,
.product-related h2 {
  font-size: 1.7em;
  margin-bottom: 28px;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.specs-table th,
.specs-table td {
  padding: 15px 22px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}

.specs-table tr:last-child th,
.specs-table tr:last-child td {
  border-bottom: none;
}

.specs-table th {
  width: 240px;
  color: var(--text);
  font-weight: 700;
  background: var(--border-light);
}

.specs-table td {
  color: var(--text-muted);
}

.specs-note {
  margin-top: 16px;
  font-size: 0.85em;
  color: var(--text-light);
}

.specs-note a {
  color: var(--orange);
  font-weight: 700;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  transition: all var(--transition);
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #ffd9b8;
}

.related-card img {
  width: 72px;
  height: 88px;
  object-fit: contain;
  flex-shrink: 0;
}

.related-card div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.related-card strong {
  font-size: 0.98em;
}

.related-tagline {
  font-size: 0.82em;
  color: var(--text-muted);
}

/* ---- Page devis ---- */
.devis-section {
  padding-top: 60px;
}

.devis-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
}

.devis-empty svg {
  color: var(--text-light);
  margin: 0 auto 20px;
}

.devis-empty h3 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: var(--text);
}

.devis-empty .btn {
  margin-top: 24px;
}

.devis-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}

.devis-col-title {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.devis-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
}

.devis-item-img {
  flex-shrink: 0;
  width: 76px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devis-item-img img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.devis-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.devis-item-cat {
  font-size: 0.72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--orange);
}

.devis-item-info strong {
  font-size: 0.98em;
}

.devis-item-tagline {
  font-size: 0.82em;
  color: var(--text-muted);
}

.devis-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-white);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}

.qty-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.devis-item-qty input {
  width: 56px;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
}

.devis-item-remove {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.devis-item-remove:hover {
  color: #dc2626;
  background: #fef2f2;
}

.devis-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.92em;
  font-weight: 700;
  color: var(--text-muted);
}

.devis-continue:hover {
  color: var(--orange);
}

.devis-form-note {
  margin-top: 14px;
  text-align: center;
  font-size: 0.85em;
  color: var(--text-light);
}

#devisEquipements {
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 0.9em;
}

/* ---- Accueil : produits vedettes ---- */
.featured-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.featured-cta {
  text-align: center;
}

/* ==========================================================================
   REFONTE ULTRA-PREMIUM 20 POINTS (APPLE / DJI / MOTOROLA SOLUTIONS)
   ========================================================================== */

/* 1. Hero Plein Écran Premium & Halo Lumineux */
.page-hero-product-premium {
  position: relative;
  background: radial-gradient(circle at 75% 30%, rgba(255, 107, 0, 0.15) 0%, rgba(0, 87, 255, 0.08) 45%, transparent 70%),
              linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #ffffff;
  padding: 60px 0 70px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-hero-product-premium::before {
  content: '';
  position: absolute;
  top: -150px;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.22) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: pulse-halo 6s infinite alternate ease-in-out;
}

@keyframes pulse-halo {
  0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
  100% { transform: scale(1.15) translate(-20px, 20px); opacity: 1; }
}

.hero-product-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero-breadcrumb {
  margin-bottom: 24px;
}

.hero-breadcrumb a, .hero-breadcrumb span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-breadcrumb a:hover {
  color: #ffffff;
}

.hero-product-cat {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  color: #F8FAFC;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-product-title {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 12px;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.hero-product-motto {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  background: linear-gradient(135deg, #FF8A00 0%, #FF5E00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

.hero-product-desc {
  font-size: 1.18rem;
  line-height: 1.7;
  color: #CBD5E1;
  max-width: 680px;
  margin-bottom: 34px;
}

.hero-product-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn-hero-primary {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 99px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(234, 88, 12, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px rgba(234, 88, 12, 0.48);
  background: linear-gradient(135deg, #FF7D1A 0%, #F97316 100%);
  color: #fff;
}

.btn-hero-outline {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 16px 28px;
  border-radius: 99px;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  transform: translateY(-2px);
  color: #fff;
}

/* 2. Bandeau de Confiance sous Hero */
.trust-banner-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
}

.trust-banner-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trust-partner-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-stars {
  color: #F59E0B;
  font-size: 1.15rem;
  letter-spacing: 2px;
}

.trust-partner-text {
  font-size: 0.96rem;
  font-weight: 800;
  color: #111827;
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.trust-pill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  background: #F8FAFC;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border);
}

.trust-pill-item svg {
  color: #10B981;
}

/* 3. ==========================================================================
   REFONTE ULTRA-PREMIUM (APPLE / DJI / MOTOROLA SOLUTIONS / CISCO / BOSCH)
   ========================================================================== */

:root {
  --p-primary: #0057FF;
  --p-accent: #2563EB;
  --p-bg: #F8F9FB;
  --p-text: #111827;
  --p-muted: #6B7280;
  --p-card-bg: #ffffff;
  --p-border: rgba(17, 24, 39, 0.08);
  --p-radius: 24px;
  --p-radius-lg: 30px;
  --p-radius-sm: 18px;
  --p-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
  --p-shadow-hover: 0 30px 60px rgba(0, 87, 255, 0.12);
  --p-transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.product-premium-page {
  background-color: var(--p-bg);
  color: var(--p-text);
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

/* 1. Hero Plein Écran Premium & Halo Lumineux */
.page-hero-product-premium {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 78% 45%, rgba(0, 87, 255, 0.28) 0%, rgba(37, 99, 235, 0.15) 45%, transparent 70%),
              radial-gradient(circle at 15% 85%, rgba(0, 87, 255, 0.12) 0%, transparent 50%),
              linear-gradient(135deg, #0A101D 0%, #111827 55%, #1E293B 100%);
  color: #ffffff;
  padding: 100px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-hero-product-premium::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.22) 0%, rgba(37, 99, 235, 0.08) 50%, transparent 70%);
  filter: blur(60px);
  transform: translateY(-50%);
  pointer-events: none;
  animation: pulse-halo 8s ease-in-out infinite alternate;
}

@keyframes pulse-halo {
  0% { transform: translateY(-50%) scale(1); opacity: 0.85; }
  100% { transform: translateY(-50%) scale(1.15); opacity: 1; }
}

.hero-product-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.hero-breadcrumb a:hover {
  color: #ffffff;
}

.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-badge-premium {
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 87, 255, 0.35);
}

.hero-badge-partner {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.hero-badge-stock {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #34D399;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #34D399;
  animation: pulse-dot-anim 2s infinite;
}

@keyframes pulse-dot-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-product-info h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero-product-motto {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: #93C5FD;
  margin: 0;
}

.hero-product-desc {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 600px;
}

/* Pills d'avantages rapides dans le Hero */
.hero-adv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.adv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--p-radius-sm);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.adv-pill svg {
  color: #60A5FA;
  flex-shrink: 0;
}

.hero-product-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--p-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 87, 255, 0.4);
  transition: var(--p-transition);
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 87, 255, 0.55);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--p-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: var(--p-transition);
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
}

/* Image principale du Hero (Flottante & Zoomable) */
.hero-product-image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Plaque claire sous le produit.
   Les visuels constructeur sont détourés POUR UN FOND BLANC : leurs zones
   blanches (corps de la caméra Avigilon, résidus sous les cordons de micro,
   halo du HazLoc) deviennent invisibles ou fantomatiques sur le navy du hero.
   Posés sur blanc, ils redeviennent corrects. Ne pas repasser en fond sombre
   sans avoir re-sourcé des visuels détourés pour fond noir. */
.hero-main-img-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 580px;
  padding: clamp(24px, 3vw, 40px);
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}

.hero-main-img {
  max-height: 520px;
  max-width: 100%;
  object-fit: contain;
  /* Note : cette déclaration est inerte — #heroProductImg (règle ~l.569)
     est plus spécifique et impose drop-shadow(0 12px 20px rgba(15,23,42,.12)),
     ombre légère qui convient à la plaque blanche. */
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
  animation: float-hero 6s ease-in-out infinite;
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-main-img:hover {
  transform: scale(1.04);
}

@keyframes float-hero {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

.hero-zoom-badge {
  position: absolute;
  bottom: 12px;
  right: 20px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* 2. Barre Flottante de Navigation Produit (Sticky Sub-Nav) */
.product-sticky-subnav {
  position: fixed;
  top: 106px;
  left: 0;
  right: 0;
  z-index: 998;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--p-border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.product-sticky-subnav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-subnav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.sticky-subnav-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--p-text);
  white-space: nowrap;
}

.sticky-dot {
  width: 8px;
  height: 8px;
  background-color: var(--p-primary);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px var(--p-primary);
}

.sticky-subnav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sticky-subnav-links::-webkit-scrollbar {
  display: none;
}

.sticky-subnav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--p-muted);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}

.sticky-subnav-links a:hover,
.sticky-subnav-links a.active {
  color: var(--p-primary);
  font-weight: 600;
}

.sticky-subnav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -21px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--p-primary);
  border-radius: 3px 3px 0 0;
}

.sticky-subnav-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-sticky-devis {
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.25);
  transition: var(--p-transition);
}

.btn-sticky-devis:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 87, 255, 0.4);
}

/* 3. Section Galerie & Showcase (#overview) */
.product-showcase-section {
  padding: 90px 0;
  position: relative;
}

.product-showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: start;
}

.product-glass-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 34px;
  box-shadow: var(--p-shadow);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.showcase-main-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  background: var(--p-bg);
  border-radius: var(--p-radius);
  padding: 28px;
  overflow: hidden;
}

.showcase-main-img img {
  max-height: 380px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: zoom-in;
}

.showcase-main-img:hover img {
  transform: scale(1.06);
}

.showcase-badge-top {
  position: absolute;
  top: 18px;
  left: 18px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 87, 255, 0.3);
}

.showcase-toolbar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
}

.showcase-tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--p-text);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: var(--p-transition);
}

.showcase-tool-btn:hover {
  background: var(--p-primary);
  color: #fff;
  transform: scale(1.08);
}

.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.thumb-btn {
  background: var(--p-bg);
  border: 2px solid transparent;
  border-radius: var(--p-radius-sm);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--p-transition);
}

.thumb-btn img {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.thumb-btn span {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--p-muted);
  text-align: center;
}

.thumb-btn:hover {
  background: rgba(0, 87, 255, 0.06);
  border-color: rgba(0, 87, 255, 0.3);
}

.thumb-btn.active {
  background: rgba(0, 87, 255, 0.08);
  border-color: var(--p-primary);
}

.thumb-btn.active span {
  color: var(--p-primary);
  font-weight: 600;
}

/* Colonne de droite: Avantages en Cartes & Achat (#overview) */
.product-detail-info-premium {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-header h2 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--p-text);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.info-header p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--p-muted);
  margin: 0;
}

/* Cartes d'avantages illustrées (au lieu d'une liste simple) */
.adv-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.adv-card-premium {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--p-transition);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

.adv-card-premium:hover {
  transform: translateY(-4px);
  border-color: var(--p-primary);
  box-shadow: 0 14px 30px rgba(0, 87, 255, 0.08);
}

.adv-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 87, 255, 0.1);
  color: var(--p-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-card-premium strong {
  font-size: 0.98rem;
  color: var(--p-text);
  font-weight: 700;
}

.adv-card-premium span {
  font-size: 0.85rem;
  color: var(--p-muted);
  line-height: 1.45;
}

/* Encadré d'action (Prix sur devis / Ajout au devis) */
.product-buy-box-premium {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 28px;
  box-shadow: var(--p-shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.buy-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buy-box-title span {
  font-size: 0.9rem;
  color: var(--p-muted);
  font-weight: 500;
}

.buy-box-title strong {
  font-size: 1.35rem;
  color: var(--p-primary);
  font-weight: 800;
}

.buy-box-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.quantity-selector-premium {
  display: flex;
  align-items: center;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  padding: 4px 8px;
}

.quantity-selector-premium input {
  width: 50px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 1rem;
  color: var(--p-text);
}

.btn-buy-primary {
  flex: 1;
  min-width: 200px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--p-radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(0, 87, 255, 0.35);
  transition: var(--p-transition);
}

.btn-buy-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 87, 255, 0.5);
}

/* Support Stepper quand ajouté */
.btn-in-cart-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--p-primary);
  color: #fff;
  border-radius: var(--p-radius-sm);
  padding: 10px 16px;
  font-weight: 700;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(0, 87, 255, 0.3);
}

.stepper-minus, .stepper-plus {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Note de réassurance sous le bouton */
.buy-box-reassurance {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--p-muted);
  border-top: 1px solid var(--p-border);
  padding-top: 16px;
}

.buy-box-reassurance svg {
  color: #10B981;
  flex-shrink: 0;
}

/* Carte Partenaire Motorola Solutions */
.partner-empower-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: #0F172A;
  border-radius: var(--p-radius);
  color: #ffffff;
}

.partner-empower-card img {
  height: 38px;
  width: auto;
}

.partner-empower-card div strong {
  display: block;
  font-size: 0.94rem;
  color: #ffffff;
}

.partner-empower-card div span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* 4. Chiffres Clés en Grand Format (.big-stats-section) */
.big-stats-section {
  padding: 80px 0;
  background: #111827;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.big-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.big-stat-item {
  position: relative;
  padding: 24px 16px;
}

.big-stat-number {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 900;
  color: #60A5FA;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.big-stat-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.big-stat-sub {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
}

/* 5. Pourquoi Choisir Ce Produit (.why-choose-section) */
.why-choose-section {
  padding: 100px 0;
}

.section-header-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(24px, 3.5vw, 40px);
}

.section-header-centered h2 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--p-text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.section-header-centered p {
  font-size: 1.1rem;
  color: var(--p-muted);
  line-height: 1.6;
  margin: 0;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.why-choose-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: var(--p-transition);
  box-shadow: var(--p-shadow);
}

.why-choose-card:hover {
  transform: translateY(-8px);
  border-color: var(--p-primary);
  box-shadow: var(--p-shadow-hover);
}

.why-choose-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 87, 255, 0.12), rgba(37, 99, 235, 0.05));
  color: var(--p-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-choose-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}

.why-choose-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--p-muted);
  margin: 0;
}

/* 6. Cas d'Usage en Situation (.timeline-usecase-section) */
.timeline-usecase-section {
  padding: 100px 0;
  background: var(--p-card-bg);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}

.timeline-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.timeline-step-card {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: var(--p-transition);
}

.timeline-step-card:hover {
  transform: translateY(-5px);
  border-color: var(--p-primary);
  box-shadow: var(--p-shadow);
}

.timeline-step-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--p-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 87, 255, 0.3);
}

.timeline-step-badge.is-solution {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.timeline-step-badge.is-result {
  background: #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.timeline-step-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}

.timeline-step-card p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--p-muted);
  margin: 0;
}

.usecase-sectors-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  justify-content: center;
}

.usecase-sector-chip {
  padding: 8px 18px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--p-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 7. Lecteur Vidéo Cinématique (#video) */
.video-cinematic-section {
  padding: 100px 0;
  background: #0A101D;
  color: #ffffff;
  text-align: center;
}

.video-cinematic-wrapper {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-cover-premium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.video-cover-premium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}

.video-cover-premium:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

.video-play-button-box {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.btn-play-90 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 14px rgba(0, 87, 255, 0.25), 0 15px 35px rgba(0, 0, 0, 0.5);
  transition: var(--p-transition);
}

.video-cover-premium:hover .btn-play-90 {
  transform: scale(1.1);
  box-shadow: 0 0 0 22px rgba(0, 87, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.6);
}

.video-play-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.video-embed-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-embed-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 8. Spécifications Techniques en Grille de Cartes (#specifications) */
.specs-grid-section {
  padding: 100px 0;
}

.specs-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.spec-group-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 34px;
  box-shadow: var(--p-shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spec-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--p-bg);
}

.spec-group-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 87, 255, 0.1);
  color: var(--p-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spec-group-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-item-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-muted);
}

.spec-item-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--p-text);
  line-height: 1.45;
}

/* 9. Documentation en Cartes Premium (#documentation) */
.documentation-section {
  padding: 90px 0;
  background: var(--p-card-bg);
  border-top: 1px solid var(--p-border);
}

.product-docs-grid-premium {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}

.doc-dl-card-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  text-decoration: none;
  transition: var(--p-transition);
}

.doc-dl-card-premium:hover {
  transform: translateY(-4px);
  border-color: var(--p-primary);
  box-shadow: var(--p-shadow);
  background: #ffffff;
}

.doc-card-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.doc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-card-info strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--p-text);
  margin-bottom: 4px;
}

.doc-card-info span {
  font-size: 0.88rem;
  color: var(--p-muted);
}

.btn-doc-download {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 87, 255, 0.1);
  color: var(--p-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--p-transition);
}

.doc-dl-card-premium:hover .btn-doc-download {
  background: var(--p-primary);
  color: #fff;
  transform: scale(1.1);
}

/* 10. Produits Similaires (.product-related-premium) */
.product-related-section {
  padding: 100px 0;
}

.related-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.related-card-premium {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--p-shadow);
  position: relative;
  overflow: hidden;
}

.related-card-premium:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 87, 255, 0.35);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.12);
}

.related-card-img-wrap {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-bg);
  border-radius: var(--p-radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.related-card-badge-top {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 2;
  letter-spacing: 0.02em;
}

.related-card-img-wrap img {
  max-height: 175px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.related-card-premium:hover .related-card-img-wrap img {
  transform: scale(1.08);
}

.related-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.related-card-cat {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--p-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.related-card-premium h3 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.related-card-premium:hover h3 {
  color: var(--p-primary);
}

.related-card-tagline {
  font-size: 0.9rem;
  color: var(--p-muted);
  line-height: 1.55;
  margin: 0;
}

.related-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.related-card-spec-pill {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  padding: 5px 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--p-border);
}

.related-card-spec-pill svg {
  color: var(--p-primary);
}

.related-card-action-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.related-card-action-circle svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.related-card-premium:hover .related-card-action-circle {
  background: var(--p-primary);
  border-color: var(--p-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 87, 255, 0.3);
}

.related-card-premium:hover .related-card-action-circle svg {
  transform: translate(2px, -2px);
}

/* 11. CTA Final / Conversion Banner (.footer-conversion-banner) */
.footer-conversion-banner {
  margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 56px);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--p-radius-lg);
  padding: clamp(36px, 5vw, 52px) clamp(24px, 4vw, 40px);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-conversion-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.3) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.footer-conversion-content {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-conversion-content h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}

.footer-conversion-content p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.footer-conversion-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}

/* 12. Responsive (Tablet & Mobile - Req 18) */
@media (max-width: 1024px) {
  .hero-product-grid,
  .product-showcase-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-main-img-box {
    max-width: 480px;
  }
  .big-stats-grid,
  .why-choose-grid,
  .timeline-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .specs-cards-grid,
  .related-grid-premium {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-hero-product-premium {
    padding: 90px 0 60px;
    min-height: auto;
  }
  .sticky-subnav-links {
    display: none;
  }
  .big-stats-grid,
  .why-choose-grid,
  .timeline-steps-grid,
  .specs-cards-grid,
  .product-docs-grid-premium,
  .related-grid-premium,
  .adv-cards-grid {
    grid-template-columns: 1fr;
  }
  .hero-product-ctas,
  .buy-box-actions,
  .footer-conversion-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-hero-primary,
  .btn-hero-outline,
  .btn-buy-primary {
    justify-content: center;
  }
  .product-glass-card,
  .product-buy-box-premium,
  .footer-conversion-banner {
    padding: 26px 20px;
  }
  .hero-product-info h1 {
    font-size: 2.2rem;
  }
}

/* 6. Section Devis Géante & Résumé des Points Forts */
.giant-cta-box {
  background: #ffffff;
  border: 2px solid #F1F5F9;
  border-radius: 24px;
  padding: 32px;
  margin-top: 32px;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
}

.giant-cta-btn {
  width: 100%;
  padding: 22px 36px;
  font-size: 1.18rem;
  font-weight: 900;
  border-radius: 18px;
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 14px 35px rgba(234, 88, 12, 0.28);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.giant-cta-btn:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 48px rgba(234, 88, 12, 0.42);
  background: linear-gradient(135deg, #FF7D1A 0%, #F97316 100%);
}

.giant-contact-sub {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
}

.giant-contact-sub a {
  color: var(--orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.giant-contact-sub a:hover {
  color: #EA580C;
  text-decoration: underline;
}

.quote-strengths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px dashed var(--border);
}

.quote-strength-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
}

.quote-strength-item svg {
  color: #10B981;
  flex-shrink: 0;
}

/* 7. Grands Chiffres d'Impact (Avant spécifications) */
.big-stats-section {
  padding: clamp(32px, 4vw, 48px) 0;
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 20px 0 clamp(24px, 4vw, 36px);
}

.big-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.big-stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.big-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border);
}

.big-stat-number {
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 900;
  background: linear-gradient(135deg, #111827 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  letter-spacing: -2px;
}

.big-stat-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.big-stat-sub {
  font-size: 0.88rem;
  color: #6B7280;
  font-weight: 600;
}

/* 8. "Pourquoi Choisir le R7 ?" (3 grandes cartes) */
.why-choose-section {
  padding: 90px 0;
  background: #F7F8FA;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.why-choose-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 32px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.why-choose-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
  border-color: var(--orange);
}

.why-choose-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #FFF4EC;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 6px;
}

.why-choose-card h3 {
  font-size: 1.35rem;
  font-weight: 900;
  color: #111827;
  margin: 0;
}

.why-choose-card p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #6B7280;
  margin: 0;
}

/* 9. Vidéo Cinématique & Bouton Rond 90px */
.video-cinematic-section {
  padding: 90px 0;
  background: #ffffff;
}

.video-cinematic-wrapper {
  max-width: 1040px;
  margin: 44px auto 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 35px 90px rgba(15, 23, 42, 0.15);
  position: relative;
  background: #0F172A;
}

.video-cinematic-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-cinematic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cinematic-cover:hover img {
  transform: scale(1.05);
}

.btn-play-90 {
  position: absolute;
  z-index: 5;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--orange);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 16px rgba(255, 107, 0, 0.28);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cinematic-cover:hover .btn-play-90 {
  transform: scale(1.12);
  box-shadow: 0 0 0 26px rgba(255, 107, 0, 0.38);
  background: #EA580C;
}

.video-label-bottom {
  position: absolute;
  bottom: 28px;
  left: 32px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  padding: 10px 22px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  border: 1px solid rgba(255,255,255,0.15);
}

/* 10. Cas d'Usage en Timeline */
.timeline-usecase-section {
  padding: 90px 0;
  background: #F7F8FA;
}

.timeline-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 54px;
}

.timeline-step-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 32px 24px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.02);
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-step-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: 0 16px 35px rgba(234, 88, 12, 0.08);
}

.timeline-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #1E293B;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.timeline-step-card.is-solution .timeline-step-badge {
  background: var(--orange);
}

.timeline-step-card.is-result .timeline-step-badge {
  background: #10B981;
}

.timeline-step-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

.timeline-step-card p {
  font-size: 0.92rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* 11. Spécifications en Grille de Cartes (Mobile-Friendly) */
.specs-grid-section {
  padding: 90px 0;
  background: #ffffff;
}

.specs-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px;
}

.spec-group-card {
  background: #F7F8FA;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
}

.spec-group-card:hover {
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
  border-color: #CBD5E1;
}

.spec-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.18rem;
  font-weight: 800;
  color: #111827;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 14px;
}

.spec-group-header svg {
  color: var(--orange);
}

.spec-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.94rem;
  padding: 10px 0;
  border-bottom: 1px dashed #E2E8F0;
}

.spec-row-item:last-child {
  border-bottom: none;
}

.spec-row-label {
  color: #64748B;
  font-weight: 600;
}

.spec-row-val {
  color: #111827;
  font-weight: 800;
  text-align: right;
}

/* 12. Tableau Comparatif R2 vs R5 vs R7 */
.comparison-section {
  padding: 90px 0;
  background: #F7F8FA;
}

.comparison-table-wrapper {
  margin-top: 50px;
  overflow-x: auto;
  border-radius: 26px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border);
  background: #ffffff;
}

.compare-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare-matrix-table th,
.compare-matrix-table td {
  padding: 22px 28px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.96rem;
}

.compare-matrix-table th {
  background: #F8FAFC;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}

.compare-matrix-table th.col-hero,
.compare-matrix-table td.col-hero {
  background: #FFF4EC;
  border-left: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  font-weight: 800;
  color: #111827;
}

.compare-matrix-table th.col-hero {
  border-top: 3px solid var(--orange);
  color: var(--orange);
  font-size: 1.15rem;
}

.compare-matrix-table tr:last-child td {
  border-bottom: none;
}

.check-yes {
  color: #10B981;
  font-weight: 800;
}

.check-no {
  color: #94A3B8;
}

/* 13. Bandeau de Conversion Final */
.footer-conversion-banner {
  background: radial-gradient(circle at 80% 50%, rgba(255, 107, 0, 0.2) 0%, transparent 60%),
              linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #ffffff;
  padding: clamp(36px, 5vw, 52px) clamp(24px, 4vw, 40px);
  border-radius: 32px;
  text-align: center;
  margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 56px);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22);
}

.footer-conversion-banner h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 14px;
}

.footer-conversion-banner p {
  font-size: 1.15rem;
  color: #CBD5E1;
  max-width: 600px;
  margin: 0 auto 34px;
}

.footer-conversion-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ==========================================================================
   RESPONSIVE MOBILE / TABLETTE POUR LA REFONTE 20 POINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .product-showcase-grid,
  .why-choose-grid,
  .specs-cards-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .big-stats-grid,
  .timeline-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .big-stat-item:not(:last-child)::after {
    display: none;
  }
  .sticky-subnav-links {
    display: none;
  }
}

@media (max-width: 768px) {
  .adv-cards-grid,
  .quote-strengths,
  .big-stats-grid,
  .timeline-steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-product-ctas,
  .trust-banner-content,
  .footer-conversion-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-hero-primary,
  .btn-hero-outline {
    justify-content: center;
  }
  .product-glass-card {
    padding: 24px;
  }
}

/* ==========================================================================
   NORMALISATION DU RYTHME VERTICAL — Fiches produit premium
   Resserre l'espace entre les sections (l'ancien 90–100px doublait à ~180px
   entre deux sections). Reste aéré, mais plus compact et cohérent.
   Placé en fin de fichier pour primer sur les définitions dupliquées.
   ========================================================================== */
.product-showcase-section,
.why-choose-section,
.comparison-section,
.timeline-usecase-section,
.video-cinematic-section,
.specs-grid-section,
.documentation-section {
  padding: 56px 0;
}

/* La section vidéo est conçue pour un fond sombre (titre en #fff, badge bleu
   clair). Une définition dupliquée plus haut la repassait en blanc, rendant le
   titre et le sous-titre invisibles. */
.video-cinematic-section {
  background: #0A101D;
  color: #ffffff;
  text-align: center;
}

.product-related-section {
  padding: 64px 0;
}

.big-stats-section {
  padding: 48px 0;
  margin: 0;
}

.footer-conversion-banner {
  margin: 40px 0 56px;
}

@media (max-width: 768px) {
  .product-showcase-section,
  .why-choose-section,
  .comparison-section,
  .timeline-usecase-section,
  .video-cinematic-section,
  .specs-grid-section,
  .documentation-section,
  .product-related-section {
    padding: 40px 0;
  }
  .big-stats-section {
    padding: 34px 0;
    margin: 0;
  }
  .footer-conversion-banner {
    margin: 28px 0 40px;
  }
}

/* ==========================================================================
   CARTES SUR UNE SEULE LIGNE — « Pourquoi choisir » (4 cartes)
   Aligne cette section sur la barre des chiffres clés (une rangée de 4).
   ========================================================================== */
.why-choose-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   CARTE PARTENAIRE MOTOROLA — mise en page
   Le logo est un bandeau 891×90 (ratio 10:1) : imposé à 38px de haut, il
   occupait 376px de large dans une colonne de 520px, ne laissant que 88px au
   texte (un mot par ligne, carte de 449px de haut). On empile.
   ========================================================================== */
.partner-empower-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Largeur fluide plutôt qu'une hauteur fixe : avec `height` figé, la contrainte
   max-width écrasait le bandeau sur écran étroit (ratio 8,45 au lieu de 9,9). */
.partner-empower-card img {
  width: min(340px, 100%);
  height: auto;
  flex-shrink: 0;
}

.partner-empower-card > div {
  min-width: 0;
}

/* ==========================================================================
   GALERIE FICHE PRODUIT — zoom au survol
   Le JS ajoute .is-zooming sur #mainImageContainer, qui porte la classe
   .showcase-main-img. La seule règle existante ciblait .product-detail-img,
   donc le zoom ne s'appliquait jamais sur les fiches premium.
   ========================================================================== */
.showcase-main-img {
  cursor: zoom-in;
}

.showcase-main-img.is-zooming img {
  transform: scale(2.2);
  transition: transform 0.15s ease-out, opacity 0.2s ease !important;
}

/* ==========================================================================
   BOUTIQUE — rythme vertical
   --section-pad vaut clamp(72px, 8vw, 120px), soit 102px sur un écran large :
   deux sections voisines créaient donc ~205px de vide. Resserré ici seulement
   (body.shop-page), pour ne pas toucher aux autres pages du site.
   ========================================================================== */
body.shop-page .section {
  padding: 56px 0;
}

body.shop-page .shop-category-section {
  margin-bottom: 40px;
}

body.shop-page .shop-filters {
  margin-bottom: 32px;
}

/* Recalé sur la navbar affinée (88px, 80px en mode burger). */
body.shop-page .page-hero {
  padding-top: 114px;
}

@media (max-width: 1200px) {
  body.shop-page .page-hero {
    padding-top: 106px;
  }
}

@media (max-width: 768px) {
  body.shop-page .section {
    padding: 40px 0;
  }
  body.shop-page .shop-category-section {
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   FILTRES BOUTIQUE — une seule ligne
   Les 6 boutons réclamaient 1178px pour 1168px disponibles : il ne manquait
   que 10px, d'où le renvoi de « Broadband / LTE » à la ligne. On resserre
   légèrement le rembourrage, et sur écran étroit la barre défile
   horizontalement au lieu de s'empiler.
   ========================================================================== */
.shop-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(6px, 0.65vw, 10px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shop-filters::-webkit-scrollbar {
  display: none;
}

.shop-filter {
  flex: 0 0 auto;
  padding: 10px clamp(11px, 1.1vw, 16px);
  font-size: clamp(0.79rem, 0.8vw + 0.08rem, 0.86rem);
  white-space: nowrap;
}

/* ==========================================================================
   CARTES PRODUIT (boutique) — densité
   Les cartes montaient à 755–887px : visuel de 270px, description non tronquée
   (3 à 6 lignes selon le produit) et puces sur 2 rangées. Comme la grille étire
   toutes les cartes sur la plus haute de la rangée, l'écart était comblé par le
   margin-top:auto des puces. On uniformise pour raccourcir la page.
   ========================================================================== */
.product-img {
  height: 200px;
  padding: 20px;
}

.product-body {
  padding: 20px 22px;
}

/* Description ramenée à 3 lignes : hauteur constante d'une carte à l'autre. */
.product-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
  margin-bottom: 14px;
}

.product-chips {
  gap: 6px;
  margin-bottom: 16px;
}

/* Maximum 3 puces (la liste complète reste sur la fiche produit). */
.product-chips > *:nth-child(n + 4) {
  display: none;
}

/* En mode icônes seules (.product-chips-icons), on affiche les 4 icônes et on garde leur format rond */
.product-chips.product-chips-icons > *:nth-child(n + 4) {
  display: inline-flex !important;
}
.product-chips.product-chips-icons > * {
  min-width: 36px !important;
  flex-shrink: 0;
}

/* Chaque puce tient sur une seule ligne : leurs libellés sont des phrases
   ("Détecteur « homme à terre »…") qui passaient sinon sur 2 lignes. */
.product-chips > * {
  flex-wrap: nowrap;
  min-width: 0;
}

.product-chips > * span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .product-img { height: 180px; }
}

/* ==========================================================================
   HERO FICHE PRODUIT — continuité avec le header + remontée du contenu
   ========================================================================== */

/* 1. Le header est géré par la variante `navbar-dark-top` (data-hero="dark"
   sur #app-navbar) : transparent sur le hero sombre, logo blanc, liens
   clairs, puis verre navy au scroll. Voir css/02-navbar.css. */

/* 2. L'image reprend la hauteur prévue par le design (520px). La règle
   #heroProductImg (sélecteur ID) la forçait à 100%, d'où une image de 800px,
   un hero de 1021px et un décentrage de 143px de la colonne texte. */
#heroProductImg {
  max-height: 520px;
}

/* 3. Le contenu remonte vers le header : ~32px sous la navbar (88px) au lieu
   des 136px d'origine. Valeurs recalées après l'affinage de la navbar. */
.page-hero-product-premium {
  padding-top: 120px;
}

@media (max-width: 1200px) {
  /* La navbar passe en mode burger, hauteur 80px. */
  .page-hero-product-premium { padding-top: 112px; }
}

@media (max-width: 768px) {
  .page-hero-product-premium { padding-top: 112px; }
  #heroProductImg { max-height: 360px; }
}

/* ==========================================================================
   CHIFFRES CLÉS — anti-déformation
   auto-fit : s'adapte si une fiche n'a que 3 chiffres réels, et se réorganise
   seul sur petit écran. .is-long : réduit la taille des valeurs de 7 à 9
   caractères (ex. « 4 400 mAh ») pour qu'elles tiennent sur une ligne.
   ========================================================================== */
.big-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.big-stat-number.is-long {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Sur petit écran, une seule colonne : en 2 colonnes la police minimale
   (2,6rem) déborde de la carte dès 5 caractères. */
@media (max-width: 640px) {
  .big-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TABLEAU COMPARATIF — miniatures produit dans l'en-tête
   ========================================================================== */
.compare-matrix-table thead th img {
  display: block;
  margin: 0 auto 10px;
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.compare-matrix-table thead th:not(:first-child),
.compare-matrix-table tbody td:not(:first-child) {
  text-align: center;
}

.compare-matrix-table thead th {
  vertical-align: bottom;
}

.compare-matrix-table tbody td:first-child {
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .compare-matrix-table thead th img { height: 52px; }
  .compare-matrix-table th,
  .compare-matrix-table td { padding: 14px 16px; font-size: 0.9rem; }
}
@media (max-width: 640px) {
  .why-choose-grid {
    grid-template-columns: 1fr;
  }
}