/* ==========================================================================
   LastHighTech - Stylesheet Professionnel Minimaliste & Efficace
   Palette :
   - Fond : #F2F2F2
   - Accent Conversion / Urgence : #CDFC56 (Lime Électrique)
   - Accent Tech : #0194E2 (Bleu Digital)
   - Blanc (#FFFFFF) & Noir (#0A0A0A)
   ========================================================================== */

:root {
  --color-bg-page: #F2F2F2;
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  --color-black-soft: #141414;
  --color-accent-lime: #CDFC56;
  --color-tech-blue: #0194E2;
  --color-tech-blue-soft: #E0F2FE;
  
  --color-text-main: #0A0A0A;
  --color-text-muted: #666666;
  --color-text-light: #8E8E93;
  --color-border: #E5E5E5;
  --color-border-light: #EEEEEE;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --container-max: 1260px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08);

  --transition-quick: 0.18s ease;
  --transition-normal: 0.28s ease;
}

/* Reset Global */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.bg-soft-grey {
  background-color: var(--color-bg-page);
}

.bg-pure-white {
  background-color: var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   2) BANDE D'ANNONCE ÉVÉNEMENT & COMPTE À REBOURS
   ========================================================================== */
.top-announcement-bar {
  background-color: var(--color-black);
  color: #FFFFFF;
  padding: 9px 0;
  font-size: 0.86rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1001;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.announcement-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-lime {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
}

.announcement-text strong {
  color: #FFFFFF;
}

.announcement-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.announcement-timer {
  font-size: 0.8rem;
  color: #A3A3A3;
}

.announcement-timer strong {
  color: var(--color-accent-lime);
  font-weight: 800;
}

.btn-bar-action {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  transition: transform var(--transition-quick), filter var(--transition-quick);
  letter-spacing: 0.5px;
}

.btn-bar-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ==========================================================================
   1) HEADER STICKY & MENU RESPONSIVE (Rester sur l'écran)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: box-shadow var(--transition-quick);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Mobile Toggle */
.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-quick);
}

.nav-toggle-btn:hover {
  background-color: #EAEAEA;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  background-color: var(--color-black);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.5px;
  transition: transform var(--transition-quick);
}

.brand-logo:hover .logo-mark {
  transform: scale(1.05);
}

.logo-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-black);
}

.logo-dot {
  color: var(--color-tech-blue);
}

/* Nav Menu */
.main-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #333333;
  border-radius: var(--radius-sm);
  transition: color var(--transition-quick), background-color var(--transition-quick);
  white-space: nowrap;
}

.chevron-icon {
  transition: transform var(--transition-quick);
}

.nav-item:hover .chevron-icon {
  transform: rotate(180deg);
}

.nav-link:hover, .nav-item.active .nav-link {
  color: var(--color-black);
  background-color: #ECECEC;
}

/* Dropdown Panel */
.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 520px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-quick), transform var(--transition-quick), visibility var(--transition-quick);
  z-index: 1100;
}

.dropdown-tag {
  display: inline-block;
  background-color: var(--color-tech-blue-soft);
  color: var(--color-tech-blue);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.dropdown-col h5 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.dropdown-col p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 14px;
}

.dropdown-all-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-tech-blue);
}

.dropdown-sub-heading {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

.dropdown-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dropdown-links-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.84rem;
  color: var(--color-text-main);
  transition: background-color var(--transition-quick);
}

.dropdown-links-col a:hover {
  background-color: var(--color-bg-page);
  color: var(--color-tech-blue);
}

.dropdown-links-col .count {
  font-size: 0.72rem;
  color: var(--color-text-light);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  position: relative;
  transition: background-color var(--transition-quick);
}

.header-action-btn:hover {
  background-color: #ECECEC;
}

.cart-pill-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.68rem;
  font-weight: 900;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
}

.search-overlay.open {
  display: flex;
}

.search-overlay-card {
  width: 100%;
  max-width: 680px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.search-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--color-black);
  padding-bottom: 12px;
}

.search-input-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--color-black);
}

.close-search-btn {
  font-size: 1.6rem;
  color: var(--color-text-muted);
}

.search-quick-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.tag-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.quick-pill {
  font-size: 0.76rem;
  font-weight: 600;
  background-color: var(--color-bg-page);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  color: #333333;
  transition: background-color var(--transition-quick);
}

.quick-pill:hover {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
}

.search-live-results {
  max-height: 300px;
  overflow-y: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background-color: #FFFFFF;
  z-index: 2500;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.15rem;
}

.close-drawer-btn {
  font-size: 1.8rem;
  color: var(--color-black);
}

.mobile-drawer-content {
  padding: 18px 20px;
}

.mobile-nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-light);
  letter-spacing: 0.5px;
  margin-top: 14px;
}

.mobile-nav-menu a {
  display: block;
  padding: 8px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-black);
}

.mobile-nav-menu a.active {
  color: var(--color-tech-blue);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2400;
  display: none;
}

.drawer-backdrop.open {
  display: block;
}

/* ==========================================================================
   3) HERO SECTION (4 Slides)
   ========================================================================== */
.hero-section {
  position: relative;
  background-color: var(--color-black);
  color: #FFFFFF;
  overflow: hidden;
}

.hero-slider {
  position: relative;
  min-height: 480px;
}

.hero-slide {
  display: none;
  padding: 60px 0 80px;
  background: linear-gradient(135deg, #0A0A0A 0%, #171717 100%);
}

.hero-slide.active {
  display: block;
  animation: fadeSlide 0.35s ease-out;
}

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

.hero-backdrop-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

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

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent-lime);
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 14px;
}

.hero-description {
  font-size: 1rem;
  color: #D4D4D4;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 26px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-hero-lime {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-weight: 900;
  font-size: 0.92rem;
  padding: 13px 28px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform var(--transition-quick), filter var(--transition-quick);
  display: inline-block;
}

.btn-hero-lime:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.hero-badge-outline {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12px 18px;
  border-radius: var(--radius-xs);
  font-size: 0.84rem;
  font-weight: 700;
}

.hero-visual-card {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.hero-main-img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.floating-lime-tag {
  position: absolute;
  bottom: -12px;
  right: -12px;
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-black);
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.tag-bold {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.tag-sub {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--transition-quick);
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.35);
}

.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.hero-progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.hero-progress-bar {
  height: 100%;
  width: 25%;
  background-color: var(--color-accent-lime);
  transition: width 0.3s ease, margin-left 0.3s ease;
}

.hero-dots {
  position: absolute;
  bottom: 14px;
  right: 30px;
  display: flex;
  gap: 6px;
  z-index: 11;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all var(--transition-quick);
}

.hero-dot.active {
  background: var(--color-accent-lime);
  width: 22px;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   4) SECTION CATÉGORIES CIRCULAIRES
   ========================================================================== */
.section-categories-icons {
  padding: 38px 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}

.categories-scroll-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.category-circle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 100px;
  text-decoration: none;
  transition: transform var(--transition-quick);
}

.category-circle-card:hover {
  transform: translateY(-3px);
}

.circle-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--color-bg-page);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--transition-quick);
}

.category-circle-card:hover .circle-avatar {
  border-color: var(--color-black);
}

.circle-avatar img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.circle-avatar-lime {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--color-accent-lime);
  border: 1px solid #B8E83D;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percent-sign {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-black);
}

.circle-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-black);
}

/* ==========================================================================
   5) SECTION OFFRES DU MOMENT
   ========================================================================== */
.section-offers-block {
  padding: 56px 0;
}

.section-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.modern-heading {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--color-black);
}

.slider-arrows-pair {
  display: flex;
  gap: 8px;
}

.arrow-pill-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-black);
  transition: all var(--transition-quick);
}

.arrow-pill-btn:hover {
  background-color: var(--color-black);
  color: #FFFFFF;
  border-color: var(--color-black);
}

.offers-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.clean-offer-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}

.clean-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.offer-card-media {
  height: 180px;
  overflow: hidden;
  background-color: #EFEFEF;
}

.offer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.clean-offer-card:hover .offer-card-media img {
  transform: scale(1.05);
}

.offer-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.badge-lime-pill {
  align-self: flex-start;
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.offer-headline {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-black);
  margin-bottom: 8px;
  min-height: 42px;
}

.offer-paragraph {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.btn-black-action {
  background-color: var(--color-black);
  color: #FFFFFF;
  padding: 9px 16px;
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--transition-quick);
}

.btn-black-action:hover {
  background-color: #262626;
}

/* ==========================================================================
   10) SECTION VENTE FLASH & COMPTE À REBOURS
   ========================================================================== */
.section-flash-showcase {
  padding: 56px 0;
  background-color: #FFFFFF;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.flash-header-banner {
  background-color: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.flash-left-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.flash-bolt-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent-lime);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash-sub-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #B91C1C;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.flash-title-bold {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-black);
}

.flash-countdown-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cd-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.cd-timer-digits {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cd-box {
  background-color: var(--color-black);
  color: #FFFFFF;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}

.cd-box span {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.cd-box small {
  font-size: 0.58rem;
  color: #A3A3A3;
  text-transform: uppercase;
}

.cd-col {
  font-weight: 900;
}

/* ==========================================================================
   GRILLES DE PRODUITS (4 Colonnes)
   ========================================================================== */
.section-shelf {
  padding: 56px 0;
}

.section-label-blue {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-tech-blue);
  background-color: var(--color-tech-blue-soft);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.link-view-all {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-black);
}

.link-view-all:hover {
  color: var(--color-tech-blue);
}

.products-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.clean-product-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
  position: relative;
}

.clean-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.card-badge-header {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.badge-black-pill {
  background-color: var(--color-black);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.stock-badge-red {
  background-color: #FEE2E2;
  color: #DC2626;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.discount-sub-pill {
  background-color: var(--color-bg-page);
  color: var(--color-black);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.card-img-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 14px;
}

.card-img-container img {
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transition-quick);
}

.clean-product-card:hover .card-img-container img {
  transform: scale(1.04);
}

.clean-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-category-sub {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.card-item-title {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-black);
  margin-bottom: 6px;
  min-height: 40px;
}

.card-item-title a:hover {
  color: var(--color-tech-blue);
}

.card-rating-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.gold-stars {
  color: #EAB308;
}

.rating-note {
  color: var(--color-text-light);
  font-weight: 600;
}

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.p-current {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-black);
}

.p-old {
  font-size: 0.82rem;
  color: var(--color-text-light);
  text-decoration: line-through;
}

.stock-progress-unit {
  margin-bottom: 12px;
}

.stock-progress-track {
  height: 5px;
  background-color: #EAEAEA;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 3px;
}

.stock-progress-fill {
  height: 100%;
  background-color: var(--color-black);
}

.stock-status-text {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.card-button-dual {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.btn-card-amazon {
  flex: 1;
  background-color: var(--color-black);
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  transition: background-color var(--transition-quick);
}

.btn-card-amazon:hover {
  background-color: #262626;
}

.btn-card-preview {
  background-color: var(--color-bg-page);
  color: var(--color-black);
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   8) UNIVERS THÉMATIQUES & POURQUOI NOUS
   ========================================================================== */
.center-head-block {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}

.section-sub-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.universe-quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.universe-tile {
  position: relative;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  color: #FFFFFF;
  transition: transform var(--transition-quick);
}

.universe-tile:hover {
  transform: translateY(-3px);
}

.universe-tile.u-desk { background: url('https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&auto=format&fit=crop&q=80') center/cover; }
.universe-tile.u-play { background: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&auto=format&fit=crop&q=80') center/cover; }
.universe-tile.u-sound { background: url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=80') center/cover; }
.universe-tile.u-cinema { background: url('https://images.unsplash.com/photo-1593784991095-a205069470b6?w=800&auto=format&fit=crop&q=80') center/cover; }

.tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.tile-info {
  position: relative;
  z-index: 2;
}

.tile-tag {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: 6px;
}

.tile-info h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.tile-info p {
  font-size: 0.85rem;
  color: #E5E5E5;
  margin-bottom: 8px;
}

.tile-cta {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-lime);
}

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

.pillar-card {
  background-color: var(--color-bg-page);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.pillar-icon-box {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.pillar-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: 8px;
}

.pillar-card p {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   11) AVIS & 12) BLOG
   ========================================================================== */
.trustpilot-simple-badge {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars-green {
  color: #00B67A;
}

.reviews-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.review-simple-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}

.rev-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rev-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.rev-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-black);
}

.rev-status {
  font-size: 0.7rem;
  color: #16A34A;
  font-weight: 700;
  display: block;
}

.rev-time {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--color-text-light);
}

.rev-stars {
  color: #EAB308;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.rev-item-tag {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  background: var(--color-bg-page);
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
  font-weight: 600;
}

.rev-quote {
  font-size: 0.82rem;
  color: #333333;
  line-height: 1.45;
}

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

.clean-blog-card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-media-wrap {
  height: 190px;
  position: relative;
  overflow: hidden;
}

.blog-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-badge-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--color-black);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

.blog-text-wrap {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-info-meta {
  font-size: 0.74rem;
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.blog-card-heading {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 8px;
}

.blog-card-excerpt {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
  flex: 1;
}

.blog-link-cta {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-tech-blue);
}

/* ==========================================================================
   PAGE PRODUIT (Référence Image 1 & Image 4)
   ========================================================================== */
.breadcrumb-container {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  background-color: #FFFFFF;
}

.clean-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.bc-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.bc-link:hover {
  color: var(--color-black);
}

.bc-sep {
  color: var(--color-text-light);
}

.bc-current {
  color: var(--color-black);
  font-weight: 700;
}

.product-details-page {
  padding: 40px 0 80px;
}

.product-two-cols {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 46px;
  margin-bottom: 60px;
}

/* Gallery (Image 1) */
.product-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-image-frame {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.main-image-frame img {
  max-height: 85%;
  max-width: 85%;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.main-image-frame:hover img {
  transform: scale(1.03);
}

.badge-product-floating {
  position: absolute;
  top: 18px;
  left: 18px;
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

.thumbnails-strip {
  display: flex;
  gap: 12px;
}

.thumb-btn {
  flex: 1;
  height: 96px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  transition: border-color var(--transition-quick);
}

.thumb-btn.active, .thumb-btn:hover {
  border-color: var(--color-black);
  border-width: 2px;
}

.thumb-btn img {
  max-height: 100%;
  object-fit: contain;
}

/* Right Info (Image 1 & 4) */
.product-info-side {
  display: flex;
  flex-direction: column;
}

.product-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pill-category-tag {
  background-color: #EAEAEA;
  color: var(--color-black);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.product-asin {
  font-size: 0.74rem;
  color: var(--color-text-light);
}

.product-page-title {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-black);
  margin-bottom: 12px;
}

.product-price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.main-price-val {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-black);
}

.old-price-val {
  font-size: 1.15rem;
  color: var(--color-text-light);
  text-decoration: line-through;
}

.discount-pill-lime {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

/* Urgency Delivery (Image 1) */
.urgency-delivery-box {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Urgency Stock */
.urgency-stock-box {
  background-color: #FEF2F2;
  border: 1px solid #FEE2E2;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.stock-text-line {
  font-size: 0.82rem;
  color: #DC2626;
  margin-bottom: 6px;
}

.stock-visual-bar {
  height: 6px;
  background-color: #FCA5A5;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.stock-visual-fill {
  height: 100%;
  background-color: #DC2626;
}

/* Special Offer (1 acheté 1 offert) */
.special-promo-card {
  background-color: #FFFFFF;
  border: 1px dashed var(--color-accent-lime);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}

.promo-card-badge {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--color-black);
  background-color: var(--color-accent-lime);
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  margin-bottom: 4px;
}

.promo-card-desc {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-black);
}

/* Variants (Image 1) */
.variants-selector-box {
  margin-bottom: 22px;
}

.variants-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.v-title {
  font-weight: 800;
  color: var(--color-black);
}

.v-hint {
  color: #16A34A;
  font-weight: 700;
}

.variants-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.variant-pill {
  padding: 8px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-black);
  transition: all var(--transition-quick);
}

.variant-pill.active, .variant-pill:hover {
  background-color: var(--color-black);
  color: #FFFFFF;
  border-color: var(--color-black);
}

/* Action CTA (Image 1) */
.cta-action-row {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
}

.btn-black-add-to-cart {
  flex: 1;
  background-color: var(--color-black);
  color: #FFFFFF;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  transition: background-color var(--transition-quick), transform var(--transition-quick);
}

.btn-black-add-to-cart:hover {
  background-color: #262626;
  transform: translateY(-1px);
}

.btn-wishlist-heart {
  width: 52px;
  height: 52px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: border-color var(--transition-quick), color var(--transition-quick);
}

.btn-wishlist-heart:hover, .btn-wishlist-heart.active {
  border-color: #DC2626;
  color: #DC2626;
}

/* STEP TRACKER LIVRAISON (Exactement Référence Image 4) */
.delivery-timeline-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #F5F5F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  margin-bottom: 4px;
}

.step-circle.amazon-circle {
  background-color: #F3F3E8;
}

.timeline-connector {
  flex: 1;
  height: 2px;
  background-color: var(--color-black);
  margin: 0 14px;
  margin-bottom: 26px;
}

.step-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.step-date {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-black);
}

/* Accordions (Image 1) */
.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clean-accordion {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-black);
  cursor: pointer;
  list-style: none;
}

.accordion-head::-webkit-details-marker {
  display: none;
}

.acc-chevron {
  transition: transform var(--transition-quick);
}

.clean-accordion[open] .acc-chevron {
  transform: rotate(180deg);
}

.accordion-content {
  padding-top: 14px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.acc-bullets {
  list-style: disc;
  padding-left: 20px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shipping-perks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.perk-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.perk-icon {
  font-size: 1.4rem;
}

.perk-title {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.perk-val {
  font-size: 0.82rem;
  color: var(--color-black);
}

/* Rating & Reviews Section (Image 1) */
.rating-reviews-section {
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
  margin-bottom: 60px;
}

.sub-heading-clean {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 24px;
}

.rating-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 30px;
}

.rating-breakdown-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.score-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 2px;
}

.score-number {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-black);
}

.score-max {
  font-size: 1.3rem;
  color: var(--color-text-light);
  font-weight: 700;
}

.score-subcount {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 20px;
}

.star-bars-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.star-label {
  font-size: 0.78rem;
  font-weight: 700;
  width: 28px;
}

.bar-track {
  flex: 1;
  height: 6px;
  background-color: #EFEFEF;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background-color: var(--color-black);
}

.review-testimonial-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.testi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.testi-author {
  font-size: 1rem;
  font-weight: 800;
}

.stars-gold {
  color: #EAB308;
  font-size: 0.85rem;
}

.testi-date {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.testi-quote {
  font-size: 0.9rem;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

.testi-avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.slider-dot-indicators {
  display: flex;
  gap: 6px;
}

.dot-bar {
  width: 18px;
  height: 4px;
  background-color: #E5E5E5;
  border-radius: var(--radius-full);
}

.dot-bar.active {
  background-color: var(--color-black);
}

/* You might also like (Image 1) */
.you-might-like-section {
  padding-top: 20px;
}

.center-title-bold {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 30px;
}

.btn-card-amazon-link {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-tech-blue);
  margin-top: 6px;
  display: inline-block;
}

/* ==========================================================================
   PAGE CATÉGORIE (Référence Image 3)
   ========================================================================== */
.category-page-content {
  padding: 30px 0 80px;
}

.category-hero-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 30px;
  margin-bottom: 24px;
  overflow: hidden;
}

.cat-hero-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-tech-blue);
  letter-spacing: 0.5px;
}

.cat-hero-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 6px 0 10px;
}

.cat-hero-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.btn-cat-hero-action {
  background-color: var(--color-black);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: var(--radius-xs);
  display: inline-block;
}

.cat-hero-visual {
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cat-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subcategories Pills Row (Image 3) */
.subcategory-pills-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 26px;
}

.sub-pill {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
  transition: all var(--transition-quick);
}

.sub-pill.active, .sub-pill:hover {
  background-color: var(--color-black);
  color: #FFFFFF;
  border-color: var(--color-black);
}

/* Layout Split (Image 3) */
.category-layout-split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
}

/* Left Sidebar Filters */
.filters-sidebar-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  height: fit-content;
}

.filters-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
}

.filters-title {
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}

.filters-reset-link {
  font-size: 0.74rem;
  color: var(--color-text-light);
}

.filters-reset-link:hover {
  color: var(--color-black);
}

.filter-block {
  margin-bottom: 22px;
}

.filter-block-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: #333333;
  cursor: pointer;
}

.custom-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-black);
}

.color-palette-dots {
  display: flex;
  gap: 10px;
}

.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.color-dot.c-white { background-color: #FFFFFF; border-color: #D4D4D4; }
.color-dot.c-beige { background-color: #D4B996; }
.color-dot.c-grey  { background-color: #9CA3AF; }
.color-dot.c-black { background-color: #0A0A0A; }
.color-dot.c-blue  { background-color: var(--color-tech-blue); }

.color-dot.active {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-black);
}

.clean-slider {
  width: 100%;
  accent-color: var(--color-black);
}

.price-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 4px;
}

/* Right Main Catalog Toolbar */
.catalog-top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.results-count-text {
  font-size: 0.95rem;
  color: var(--color-black);
}

.count-sub {
  color: var(--color-text-muted);
}

.sort-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
}

.clean-select {
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.84rem;
  outline: none;
}

/* 3-Column Catalog Grid (Image 3) */
.catalog-tri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.clean-grid-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-quick);
}

.clean-grid-card:hover {
  transform: translateY(-3px);
}

.grid-card-img-wrap {
  position: relative;
  height: 220px;
  background-color: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.grid-card-img-wrap img {
  max-height: 100%;
  object-fit: contain;
}

.card-pill-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--color-bg-page);
  color: var(--color-black);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.card-heart-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--color-text-light);
}

.card-heart-btn:hover {
  color: #DC2626;
}

.grid-card-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grid-card-title {
  font-size: 0.94rem;
  font-weight: 800;
  margin-bottom: 6px;
  min-height: 40px;
}

.grid-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.grid-price-now {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-black);
}

.grid-price-old {
  font-size: 0.8rem;
  color: var(--color-text-light);
  text-decoration: line-through;
}

.badge-saving-tag {
  background-color: var(--color-accent-lime);
  color: var(--color-black);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.grid-card-colors {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.tiny-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.btn-grid-amazon {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-tech-blue);
  margin-top: auto;
}

/* ==========================================================================
   FOOTER (Référence Image 2 - Minimaliste, Efficace, Élégant)
   ========================================================================== */
.site-footer {
  background-color: #FFFFFF;
  border-top: 1px solid var(--color-border);
  padding: 60px 0 30px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.logo-circle-black {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-black);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
}

.footer-brand-title {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.footer-about-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 300px;
  margin-bottom: 18px;
}

.footer-social-icons {
  display: flex;
  gap: 10px;
}

.social-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: #FFFFFF;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-quick);
}

.social-circle-btn:hover {
  background-color: var(--color-black);
  color: #FFFFFF;
  border-color: var(--color-black);
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-black);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-clean-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-clean-links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: color var(--transition-quick);
}

.footer-clean-links a:hover {
  color: var(--color-black);
}

.footer-disclosure-strip {
  background-color: var(--color-bg-page);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 26px;
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-top: 22px;
  flex-wrap: wrap;
  gap: 16px;
}

.copyright-note {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.payment-trust-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pay-badge {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pay-badge.mc {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
}

.mc-c1, .mc-c2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mc-c1 { background-color: #EB001B; margin-right: -4px; }
.mc-c2 { background-color: #F79E1B; opacity: 0.9; }

/* Selection / Cart Drawer */
.selection-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  max-width: 88vw;
  height: 100%;
  background-color: #FFFFFF;
  z-index: 2600;
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.selection-drawer.open {
  transform: translateX(0);
}

.sel-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.sel-drawer-header h5 {
  font-size: 1.05rem;
  font-weight: 800;
}

.close-sel-drawer {
  font-size: 1.6rem;
  color: var(--color-black);
}

.sel-drawer-body {
  padding: 18px 20px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sel-item {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.sel-item img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.sel-info h6 {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.sel-price {
  font-size: 0.92rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.sel-price .old-p {
  font-size: 0.74rem;
  color: var(--color-text-light);
  text-decoration: line-through;
  margin-left: 4px;
}

.btn-side-amazon {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--color-tech-blue);
}

.sel-drawer-footer {
  padding: 18px 20px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-page);
}

.sel-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.sel-total-row strong {
  font-size: 1.2rem;
}

.prime-free-deliv {
  font-size: 0.72rem;
  color: #16A34A;
  font-weight: 700;
}

.sel-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2550;
  display: none;
}

.sel-drawer-backdrop.open {
  display: block;
}

/* ==========================================================================
   RESPONSIVE MOBILE & TABLETTES (Zéro débordement, fluide)
   ========================================================================== */
@media (max-width: 1080px) {
  .main-nav {
    display: none;
  }
  .products-quad-grid, .offers-cards-row, .why-pillars-grid, .reviews-quad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .universe-quad-grid {
    grid-template-columns: 1fr;
  }
  .category-layout-split {
    grid-template-columns: 1fr;
  }
  .catalog-tri-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-two-cols {
    grid-template-columns: 1fr;
  }
  .rating-reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .announcement-inner {
    flex-direction: column;
    text-align: center;
  }
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-arrow {
    display: none;
  }
  .products-quad-grid, .offers-cards-row, .why-pillars-grid, .reviews-quad-grid, .blog-tri-grid, .catalog-tri-grid {
    grid-template-columns: 1fr;
  }
  .category-hero-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .category-hero-card .cat-hero-visual {
    display: none;
  }
  .main-image-frame {
    height: 340px;
  }
  .delivery-timeline-card {
    flex-direction: column;
    gap: 14px;
  }
  .timeline-connector {
    width: 2px;
    height: 18px;
    margin: 0;
  }
  .cta-action-row {
    flex-direction: column;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   A) BRIQUES COMMUNES : pages intérieures, titres centrés, boutons
   ========================================================================== */
.page-container, .page-content-wrapper { padding: 34px 0 72px; }
.breadcrumb-bar { padding: 14px 0; border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.breadcrumb-inner { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--color-text-muted); flex-wrap: wrap; }
.breadcrumb-inner a:hover, .clean-breadcrumb a:hover { color: var(--color-tech-blue); }
.breadcrumb-inner .current, .clean-breadcrumb .bc-current { color: var(--color-black); font-weight: 600; }
.clean-breadcrumb .bc-sep { color: var(--color-text-light); }
.page-header-block { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.page-title { font-size: 2.4rem; font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin: 10px 0 12px; }
.page-lead { font-size: 1.05rem; color: var(--color-text-muted); }
.section-pill-tag { display: inline-block; background: var(--color-accent-lime); color: var(--color-black); font-size: 0.74rem; font-weight: 800; padding: 4px 12px; border-radius: var(--radius-full); letter-spacing: 0.4px; }
.center-title-header { text-align: center; max-width: 720px; margin: 0 auto 34px; }

.btn-outline-discover { display: inline-block; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-black); border-bottom: 2px solid var(--color-black); padding-bottom: 2px; transition: color var(--transition-quick), border-color var(--transition-quick); }
.btn-outline-discover:hover { color: var(--color-tech-blue); border-color: var(--color-tech-blue); }
.btn-outline-hp, .btn-outline-contact { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-black); border: 1.5px solid var(--color-black); border-radius: var(--radius-xs); padding: 10px 18px; transition: all var(--transition-quick); }
.btn-outline-hp:hover, .btn-outline-contact:hover { background: var(--color-black); color: #fff; }
.btn-dark-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--color-black); color: #fff; font-size: 0.9rem; font-weight: 800; padding: 14px 22px; border-radius: var(--radius-sm); transition: background var(--transition-quick); }
.btn-dark-cta:hover { background: #262626; }
.btn-dark-cta.full-width { width: 100%; }
.blog-all-link { text-align: center; margin-top: 30px; }

/* ==========================================================================
   B) SECTION 7 : NOUVEAUTÉS (bannière panoramique)
   ========================================================================== */
.section-panoramic-novelty { padding: 56px 0 24px; }
.panoramic-banner-container { position: relative; height: 440px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #0A0A0A, #1f2937 60%, #0b3b5c); }
.panoramic-banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.panoramic-banner-slide.active { opacity: 1; visibility: visible; }
.panoramic-image-backdrop, .panoramic-image-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panoramic-image-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0) 80%); }
.panoramic-card-overlay { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); max-width: 460px; color: #fff; z-index: 2; }
.panoramic-kicker { display: inline-block; background: var(--color-accent-lime); color: var(--color-black); font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 14px; }
.panoramic-main-title { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.8px; line-height: 1.12; margin-bottom: 12px; }
.panoramic-sub-text { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn-panoramic-white { display: inline-block; background: #fff; color: var(--color-black); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; padding: 13px 26px; border-radius: var(--radius-xs); transition: background var(--transition-quick); }
.btn-panoramic-white:hover { background: var(--color-accent-lime); }
.panoramic-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--color-black); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background var(--transition-quick); }
.panoramic-nav-arrow:hover { background: var(--color-accent-lime); }
.panoramic-nav-arrow.prev { right: 76px; left: auto; top: auto; bottom: 24px; transform: none; }
.panoramic-nav-arrow.next { right: 24px; top: auto; bottom: 24px; transform: none; }
.panoramic-dots { position: absolute; left: 56px; bottom: 28px; display: flex; gap: 8px; z-index: 3; }
.panoramic-dot { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.35); transition: background var(--transition-quick); }
.panoramic-dot.active { background: var(--color-accent-lime); }

/* ==========================================================================
   C) SECTION 9 : UNIVERS TECH (4 cartes, lien souligné)
   ========================================================================== */
.consumables-quad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.consumable-card { display: flex; flex-direction: column; }
.consumable-img-wrap { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #E6E6E6, #D4D4D4); margin-bottom: 16px; }
.consumable-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.consumable-card:hover .consumable-img-wrap img { transform: scale(1.05); }
.consumable-body { display: flex; flex-direction: column; flex: 1; }
.consumable-title { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; }
.consumable-text { font-size: 0.92rem; color: var(--color-text-muted); margin-bottom: 16px; flex: 1; }
.consumable-body .btn-outline-discover { align-self: flex-start; }

/* ==========================================================================
   D) SECTION 10 : POURQUOI LASTHIGHTECH
   ========================================================================== */
.why-hp-style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
.why-hp-card { background: var(--color-bg-page); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.why-hp-media { position: relative; height: 190px; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); }
.why-hp-media img { width: 100%; height: 100%; object-fit: cover; }
.why-badge-round { position: absolute; right: 14px; bottom: -16px; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-lime); color: var(--color-black); display: flex; align-items: center; justify-content: center; font-weight: 900; box-shadow: var(--shadow-card); }
.why-hp-info { padding: 26px 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.why-hp-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.why-hp-text { font-size: 0.9rem; color: var(--color-text-muted); flex: 1; }
.why-hp-info .btn-outline-hp { align-self: flex-start; margin-top: 6px; }
.why-advice-box { background: var(--color-tech-blue-soft); border-radius: var(--radius-md); padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.advice-box-title { font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.advice-box-text { font-size: 0.92rem; color: #334155; }
.advice-schedule { font-size: 0.85rem; font-weight: 700; color: var(--color-tech-blue); }
.why-advice-box .btn-outline-contact { align-self: flex-start; background: #fff; }

/* ==========================================================================
   E) SECTION 11 : VENTE FLASH « BON PLAN »
   ========================================================================== */
.flash-header-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--color-black); color: #fff; border-radius: var(--radius-lg); padding: 24px 30px; margin-bottom: 22px; }
.flash-left-info { display: flex; align-items: center; gap: 16px; }
.flash-bolt-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--color-accent-lime); color: var(--color-black); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.flash-sub-tag { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-accent-lime); margin-bottom: 4px; }
.flash-title-bold { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.5px; line-height: 1.2; }
.flash-countdown-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cd-label { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.cd-timer-digits { display: flex; align-items: center; gap: 6px; }
.cd-box { min-width: 58px; background: #fff; color: var(--color-black); border-radius: var(--radius-sm); padding: 7px 6px 5px; text-align: center; }
.cd-box span { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-box small { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); }
.cd-col { font-weight: 900; color: #fff; }
.tech-quad-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tech-dark-card { position: relative; min-height: 290px; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: #111; }
.c-phone { background: linear-gradient(150deg, #0b1220 0%, #1e3a8a 100%); }
.c-audio { background: linear-gradient(150deg, #111111 0%, #5b21b6 100%); }
.c-pc { background: linear-gradient(150deg, #0a0a0a 0%, #0e7490 100%); }
.c-gaming { background: linear-gradient(150deg, #0a0a0a 0%, #9f1239 100%); }
.dark-card-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(205,252,86,0.22), transparent 55%); }
.dark-card-content { position: relative; padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.dark-card-tag { align-self: flex-start; background: var(--color-accent-lime); color: var(--color-black); font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-full); }
.dark-card-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.dark-card-text { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.btn-dark-card-outline { align-self: flex-start; margin-top: 6px; border: 1.5px solid #fff; color: #fff; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 9px 16px; border-radius: var(--radius-xs); transition: all var(--transition-quick); }
.btn-dark-card-outline:hover { background: #fff; color: var(--color-black); }

/* ==========================================================================
   F) SECTION 12 : BLOG (1 grande carte + 1 carte accent + 3 verticales)
   ========================================================================== */
.our-blog-mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-featured-card { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-page); border-radius: var(--radius-md); overflow: hidden; }
.bf-image { display: block; min-height: 280px; background: linear-gradient(135deg, #D9D9D9, #BDBDBD); }
.bf-image img { width: 100%; height: 100%; object-fit: cover; }
.bf-body { padding: 28px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.bf-cat { align-self: flex-start; font-size: 0.72rem; font-weight: 800; color: var(--color-tech-blue); background: var(--color-tech-blue-soft); padding: 3px 9px; border-radius: var(--radius-full); }
.bf-title { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.4px; line-height: 1.2; }
.bf-title a:hover, .bv-title a:hover { color: var(--color-tech-blue); }
.bf-excerpt { font-size: 0.93rem; color: var(--color-text-muted); }
.bf-author-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bf-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-black); color: var(--color-accent-lime); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bf-author-row strong { display: block; font-size: 0.86rem; }
.bf-author-row span:not(.bf-avatar) { font-size: 0.78rem; color: var(--color-text-muted); }
.blog-accent-card { border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; background: var(--color-tech-blue); color: #fff; }
.ba-image { display: block; flex: 1; min-height: 190px; background: linear-gradient(135deg, #C9D6E2, #9FB4C7); }
.ba-image img { width: 100%; height: 100%; object-fit: cover; }
.ba-footer { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.ba-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.ba-author { font-size: 0.78rem; opacity: 0.85; }
.blog-vertical-card { display: flex; flex-direction: column; }
.bv-image { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #E6E6E6, #D0D0D0); margin-bottom: 14px; }
.bv-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.blog-vertical-card:hover .bv-image img { transform: scale(1.05); }
.bv-title { font-size: 1.02rem; font-weight: 800; line-height: 1.3; margin-bottom: 6px; }
.bv-meta { font-size: 0.78rem; color: var(--color-text-muted); }

/* ==========================================================================
   G) PAGE BLOG (liste + article)
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-quick), box-shadow var(--transition-quick); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.blog-img-wrap { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); overflow: hidden; }
.blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.blog-cat-tag { position: absolute; left: 14px; top: 14px; background: var(--color-accent-lime); color: var(--color-black); font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); }
.blog-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.blog-meta { display: flex; gap: 8px; font-size: 0.78rem; color: var(--color-text-light); }
.blog-title { font-size: 1.12rem; font-weight: 800; line-height: 1.3; }
.blog-title a:hover { color: var(--color-tech-blue); }
.blog-excerpt { font-size: 0.9rem; color: var(--color-text-muted); flex: 1; }
.blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--color-border-light); font-size: 0.8rem; }
.blog-author { color: var(--color-text-muted); }
.blog-read-more { font-weight: 800; color: var(--color-black); white-space: nowrap; }
.blog-read-more:hover { color: var(--color-tech-blue); }
.blog-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.blog-full-article { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 38px 40px; }
.blog-cat-badge { display: inline-block; background: var(--color-accent-lime); font-size: 0.74rem; font-weight: 800; padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 14px; }
.blog-main-title { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 18px; }
.blog-author-bar { padding: 14px 0; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); margin-bottom: 24px; }
.author-details { display: flex; flex-direction: column; gap: 2px; }
.author-name { font-weight: 800; font-size: 0.92rem; }
.post-date { font-size: 0.8rem; color: var(--color-text-muted); }
.blog-featured-image { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); }
.blog-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-article-content, .article-rich-body { font-size: 1.02rem; line-height: 1.75; color: #262626; max-width: 72ch; }
.blog-article-content p, .article-rich-body p { margin-bottom: 18px; }
.blog-article-content h3, .article-rich-body h3 { font-size: 1.3rem; font-weight: 800; margin: 28px 0 10px; letter-spacing: -0.3px; }
.blog-article-content a, .article-rich-body a { color: var(--color-tech-blue); font-weight: 600; text-decoration: underline; }
.blog-article-content ul, .article-rich-body ul { margin: 0 0 18px 22px; }
.blog-affiliate-note { margin-top: 34px; padding: 16px 18px; background: var(--color-tech-blue-soft); border-radius: var(--radius-sm); font-size: 0.86rem; color: #334155; }
.blog-sidebar, .article-sidebar-layout > aside { position: sticky; top: 100px; }
.sidebar-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; }
.sidebar-card h4 { font-size: 1rem; font-weight: 800; margin-bottom: 16px; }
.sidebar-blog-list { display: flex; flex-direction: column; gap: 16px; }
.side-blog-item { display: flex; gap: 12px; align-items: center; }
.side-blog-item img { width: 76px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 76px; background: #E6E6E6; }
.side-blog-item h6 { font-size: 0.88rem; font-weight: 700; line-height: 1.3; }
.side-blog-item h6 a:hover { color: var(--color-tech-blue); }
.side-date { font-size: 0.74rem; color: var(--color-text-light); }

/* ==========================================================================
   H) PAGES GUIDES (liste + guide)
   ========================================================================== */
.page-hero-banner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--color-black); color: #fff; border-radius: var(--radius-lg); padding: 38px 44px; margin-bottom: 26px; background-image: radial-gradient(circle at 90% 10%, rgba(205,252,86,0.18), transparent 50%); }
.ph-info { max-width: 680px; }
.ph-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.8px; line-height: 1.12; margin: 12px 0; }
.ph-desc { color: rgba(255,255,255,0.8); font-size: 1rem; }
.ph-stat-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); padding: 10px 18px; font-size: 0.86rem; }
.ph-stat-pill strong { color: var(--color-accent-lime); }
.sub-filter-pills { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; scrollbar-width: none; }
.sub-filter-pills::-webkit-scrollbar { display: none; }
.guides-mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.clean-guide-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform var(--transition-quick), box-shadow var(--transition-quick); }
.clean-guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guide-badge-pill { background: var(--color-tech-blue-soft); color: var(--color-tech-blue); font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); }
.guide-read-time { font-size: 0.78rem; color: var(--color-text-muted); }
.guide-card-heading { font-size: 1.2rem; font-weight: 900; line-height: 1.25; letter-spacing: -0.3px; }
.guide-card-heading a:hover { color: var(--color-tech-blue); }
.guide-card-intro { font-size: 0.9rem; color: var(--color-text-muted); }
.guide-criteria-box { background: var(--color-bg-page); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.crit-box-title { font-size: 0.78rem; font-weight: 800; color: var(--color-text-muted); }
.crit-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
.crit-budget { font-weight: 700; color: var(--color-tech-blue); white-space: nowrap; }
.crit-desc { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }
.guide-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; font-size: 0.82rem; }
.btn-guide-read { font-weight: 800; color: var(--color-black); }
.btn-guide-read:hover { color: var(--color-tech-blue); }
.article-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
.single-article-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 38px 40px; }
.article-header-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 16px; }
.single-article-title { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 14px; }
.article-lead-text { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 26px; max-width: 70ch; }
.custom-table-container { margin: 0 0 28px; overflow-x: auto; }
.table-block-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; }
.styled-clean-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
.styled-clean-table th { text-align: left; background: var(--color-black); color: #fff; font-size: 0.78rem; letter-spacing: 0.4px; padding: 12px 14px; }
.styled-clean-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.styled-clean-table th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.styled-clean-table td { padding: 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.styled-clean-table tr:hover td { background: #FAFAFA; }
.table-budget-pill { display: inline-block; background: var(--color-accent-lime); font-weight: 800; font-size: 0.78rem; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.article-trust-banner { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; background: var(--color-tech-blue-soft); border-radius: var(--radius-sm); font-size: 0.86rem; color: #334155; }
.trust-icon { font-size: 1.3rem; }
.article-side-panel { display: flex; flex-direction: column; gap: 18px; }
.side-sticky-box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; }
.side-box-heading { font-size: 1rem; font-weight: 800; margin-bottom: 16px; }
.side-products-stack { display: flex; flex-direction: column; gap: 16px; }
.side-item-product { display: flex; gap: 12px; align-items: center; }
.side-prod-img { width: 70px; height: 70px; flex: 0 0 70px; border-radius: var(--radius-sm); background: #EFEFEF; overflow: hidden; }
.side-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.side-prod-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.side-prod-title { font-size: 0.86rem; font-weight: 700; line-height: 1.3; }
.side-prod-price { font-size: 0.86rem; font-weight: 800; }
.side-amazon-link { font-size: 0.78rem; font-weight: 800; color: var(--color-tech-blue); }

/* ==========================================================================
   I) À PROPOS & CONTACT & 404
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.about-text-content { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 38px 40px; font-size: 1rem; line-height: 1.75; }
.about-text-content h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.4px; margin: 28px 0 10px; }
.about-text-content h3:first-child { margin-top: 0; }
.about-text-content p { margin-bottom: 14px; color: #262626; }
.about-text-content ul { margin: 0 0 14px 22px; }
.about-text-content li { margin-bottom: 8px; }
.about-stats-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.stat-box { background: var(--color-black); color: #fff; border-radius: var(--radius-md); padding: 24px; }
.stat-number { display: block; font-size: 2.2rem; font-weight: 900; color: var(--color-accent-lime); letter-spacing: -1px; line-height: 1.1; }
.stat-label { font-size: 0.88rem; color: rgba(255,255,255,0.8); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.contact-form-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-group label { font-size: 0.84rem; font-weight: 700; }
.form-group input, .form-group select, .form-group textarea { width: 100%; font: inherit; font-size: 0.94rem; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #FAFAFA; color: var(--color-black); transition: border-color var(--transition-quick), background var(--transition-quick); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-tech-blue); background: #fff; }
.form-group textarea { resize: vertical; min-height: 130px; }
.alert-success-box { display: flex; gap: 12px; align-items: flex-start; background: #ECFCCB; border: 1px solid #BEF264; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 22px; font-size: 0.9rem; }
.contact-info-aside { display: flex; flex-direction: column; gap: 18px; }
.info-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; }
.info-card h4 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.info-card p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 12px; }
.contact-method { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; margin-top: 12px; }
.highlight-card { background: var(--color-black); color: #fff; border-color: var(--color-black); }
.highlight-card p { color: rgba(255,255,255,0.8); }
.link-bold { font-weight: 800; color: var(--color-accent-lime); }
.notfound-box { max-width: 560px; margin: 0 auto; text-align: center; padding: 40px 0; }
.error-number { font-size: 6rem; font-weight: 900; letter-spacing: -4px; line-height: 1; }
.error-title { font-size: 1.6rem; font-weight: 900; margin: 10px 0; }
.error-text { color: var(--color-text-muted); margin-bottom: 24px; }
.notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-banner { display: inline-block; background: var(--color-black); color: #fff; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 800; font-size: 0.88rem; }
.badge-pill-light { display: inline-block; background: var(--color-accent-lime); font-size: 0.74rem; font-weight: 800; padding: 4px 12px; border-radius: var(--radius-full); }
.text-center-404 { text-align: center; }

/* Petits manques catégorie / produit */
.empty-state-box { background: #fff; border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 40px; text-align: center; color: var(--color-text-muted); }
.cat-hero-text { max-width: 620px; }
.catalog-main-area { min-width: 0; }
.p-badge-discount { display: inline-block; }

/* ==========================================================================
   J) CARROUSELS MOBILES : tout bloc à plusieurs cartes défile en glissant
   ========================================================================== */
.carousel-dots { display: none; }
@media (max-width: 1080px) {
  .consumables-quad-grid, .why-hp-style-grid, .tech-quad-cards { grid-template-columns: repeat(2, 1fr); }
  .blog-grid, .guides-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .our-blog-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured-card { grid-column: span 2; }
  .blog-single-layout, .article-sidebar-layout, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .blog-sidebar, .article-sidebar-layout > aside, .about-stats-aside { position: static; }
  .panoramic-banner-container { height: 380px; }
}
@media (max-width: 768px) {
  .mobile-carousel { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; margin-left: -24px; margin-right: -24px; padding: 4px 24px 16px; scroll-padding-left: 24px; scrollbar-width: none; }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel > .carousel-item { flex: 0 0 80%; max-width: 80%; min-width: 0; scroll-snap-align: start; }
  .mobile-carousel > .blog-featured-card.carousel-item { grid-column: auto; display: flex; flex-direction: column; }
  .mobile-carousel > .blog-featured-card .bf-image { min-height: 190px; }
  .categories-scroll-wrapper.mobile-carousel { justify-content: flex-start; gap: 14px; }
  .categories-scroll-wrapper.mobile-carousel > .category-circle-card { flex: 0 0 auto; scroll-snap-align: start; }
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: #CFCFCF; transition: all var(--transition-quick); }
  .carousel-dot.active { width: 20px; border-radius: 4px; background: var(--color-black); }
  .page-title, .blog-main-title, .single-article-title, .ph-title { font-size: 1.7rem; }
  .page-container, .page-content-wrapper { padding: 24px 0 52px; }
  .page-hero-banner { padding: 26px 22px; }
  .blog-full-article, .single-article-card, .about-text-content, .contact-form-card { padding: 24px 20px; }
  .panoramic-banner-container { height: 400px; }
  .panoramic-card-overlay { left: 22px; right: 22px; top: auto; bottom: 74px; transform: none; max-width: none; }
  .panoramic-main-title { font-size: 1.5rem; }
  .panoramic-image-backdrop::after { background: linear-gradient(0deg, rgba(10,10,10,0.88) 25%, rgba(10,10,10,0.1) 100%); }
  .panoramic-dots { left: 22px; bottom: 36px; }
  .panoramic-nav-arrow { width: 38px; height: 38px; bottom: 20px !important; }
  .panoramic-nav-arrow.prev { right: 66px; }
  .panoramic-nav-arrow.next { right: 20px; }
  .flash-header-banner { padding: 20px 18px; }
  .flash-title-bold { font-size: 1.15rem; }
  .cd-box { min-width: 50px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .tech-dark-card { min-height: 250px; }
}

/* ==========================================================================
   K) CORRECTIFS LARGEUR : header mobile + grilles sans débordement
   ========================================================================== */
.about-grid > *, .contact-grid > *, .article-sidebar-layout > *, .blog-single-layout > *, .guides-mosaic-grid > *, .blog-grid > * { min-width: 0; }
@media (max-width: 1080px) {
  .blog-single-layout, .article-sidebar-layout, .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .header-inner { padding: 0 14px; gap: 8px; }
  .header-actions { gap: 0; }
  .header-action-btn { width: 34px; height: 34px; }
  .brand-logo .logo-name { font-size: 1.02rem; }
  .nav-toggle-btn { margin-right: 0; }
  .article-header-meta { gap: 8px; }
}

/* Titre de la vente flash : lisible sur fond noir */
.flash-title-bold { color: #fff; }
.flash-header-banner .flash-sub-tag { color: var(--color-accent-lime); }


/* ==========================================================================
   L) AJUSTEMENTS SUR LES IMAGES DE RÉFÉRENCE (sections 7, 9, 10, 11)
   ========================================================================== */
.center-title-header .modern-heading { font-weight: 400; font-size: 2.3rem; letter-spacing: -0.6px; color: #2b2f36; }
.center-title-header .section-sub-desc { font-size: 0.9rem; color: #2b2f36; }
.center-title-header { margin-bottom: 28px; }

/* Boutons à contour (images 2 et 3) */
.btn-outline-discover, .btn-outline-hp, .btn-outline-contact { display: inline-block; background: #fff; color: #1a1a1a; border: 1px solid #4a4a4a; border-radius: 2px; padding: 8px 22px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.btn-outline-discover:hover, .btn-outline-hp:hover, .btn-outline-contact:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* 7) Nouveautés : section réduite de moitié (image 1) */
.section-panoramic-novelty { padding: 26px 0 10px; }
.section-panoramic-novelty .center-title-header { margin-bottom: 14px; }
.section-panoramic-novelty .modern-heading { font-size: 1.6rem; }
.panoramic-banner-container { height: 230px; border-radius: 16px; }
.panoramic-image-backdrop::after { background: linear-gradient(90deg, rgba(32,30,30,0.9) 0%, rgba(32,30,30,0.55) 40%, rgba(0,0,0,0) 75%); }
.panoramic-card-overlay { left: 68px; max-width: 420px; }
.panoramic-main-title { font-size: 1.55rem; font-weight: 400; letter-spacing: -0.3px; margin-bottom: 6px; }
.panoramic-sub-text { font-size: 0.88rem; margin-bottom: 14px; -webkit-line-clamp: 2; }
.btn-panoramic-white { padding: 9px 20px; font-size: 0.74rem; border-radius: 2px; }
.panoramic-nav-arrow { width: 34px; height: 34px; border-radius: 6px; font-size: 1.25rem; top: 50%; bottom: auto; transform: translateY(-50%); }
.panoramic-nav-arrow.prev { left: 14px; right: auto; }
.panoramic-nav-arrow.next { right: 14px; left: auto; }

/* 9) Univers tech : image 2 */
.consumables-quad-grid { gap: 22px; }
.consumable-img-wrap { aspect-ratio: 219 / 130; border-radius: 8px; margin-bottom: 12px; }
.consumable-title { font-size: 0.95rem; font-weight: 500; color: #2b2f36; margin-bottom: 6px; }
.consumable-text { font-size: 0.82rem; line-height: 1.4; color: #2b2f36; margin-bottom: 16px; }

/* 10) Pourquoi LastHighTech : image 3 */
.why-hp-card { background: transparent; border-radius: 0; overflow: visible; }
.why-hp-media { height: auto; aspect-ratio: 233 / 130; border-radius: 10px; overflow: hidden; background: #E5E5E5; }
.why-badge-round { right: 12px; top: 12px; bottom: auto; width: 34px; height: 34px; background: #a78bfa; color: #fff; font-size: 0.9rem; }
.why-hp-info { padding: 14px 0 0; gap: 8px; }
.why-hp-title { font-size: 0.95rem; font-weight: 500; color: #2b2f36; }
.why-hp-text { font-size: 0.82rem; line-height: 1.4; color: #2b2f36; }
.why-advice-box { background: #EFEFEF; border-radius: 10px; padding: 28px 26px; justify-content: flex-start; }
.advice-box-title { font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: #2b2f36; }
.advice-box-text { font-size: 0.82rem; color: #2b2f36; }
.advice-schedule { font-size: 0.82rem; font-weight: 400; color: #2b2f36; }

/* 11) Tuiles « Bon plan » : image 4 */
.tech-quad-cards { gap: 14px; }
.tech-dark-card { aspect-ratio: 1 / 1; min-height: 0; border-radius: 8px; }
.tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark-card-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.05) 85%); }
.dark-card-content { padding: 18px; gap: 8px; }
.dark-card-title { font-size: 0.98rem; font-weight: 700; }
.dark-card-text { font-size: 0.82rem; }
.btn-dark-card-outline { background: #fff; color: #111; border: 1px solid #fff; border-radius: 2px; padding: 8px 18px; font-size: 0.72rem; font-weight: 700; margin-top: 4px; }
.btn-dark-card-outline:hover { background: #E5E5E5; color: #111; }

@media (max-width: 768px) {
  .center-title-header .modern-heading { font-size: 1.7rem; }
  .section-panoramic-novelty .modern-heading { font-size: 1.35rem; }
  .panoramic-banner-container { height: 250px; }
  .panoramic-card-overlay { left: 52px; right: 52px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .panoramic-main-title { font-size: 1.2rem; }
  .panoramic-image-backdrop::after { background: linear-gradient(90deg, rgba(32,30,30,0.9) 0%, rgba(32,30,30,0.6) 60%, rgba(0,0,0,0.2) 100%); }
  .panoramic-nav-arrow { width: 30px; height: 30px; top: 50% !important; bottom: auto !important; }
  .panoramic-nav-arrow.prev { left: 10px; right: auto; }
  .panoramic-nav-arrow.next { right: 10px; left: auto; }
  .tech-dark-card { min-height: 0; }
}


/* ==========================================================================
   M) PAGE PRODUIT : blocs de contenu (description, critique, comparaison, guide…)
   ========================================================================== */
.pm-section { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 38px 40px; margin-top: 28px; }
.pm-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; margin-bottom: 12px; }
.pm-sub { font-size: 1.15rem; font-weight: 800; margin: 30px 0 14px; }
.pm-lead { font-size: 1rem; color: var(--color-text-muted); max-width: 72ch; margin-bottom: 22px; }
.pm-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 26px 0; }
.pm-block.reverse .pm-block-img { order: 2; }
.pm-block-img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); }
.pm-block-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-block-num { display: inline-block; font-size: 0.8rem; font-weight: 800; color: var(--color-tech-blue); letter-spacing: 1px; margin-bottom: 8px; }
.pm-block-text h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 12px; }
.pm-block-text p { font-size: 1rem; line-height: 1.7; color: #333; }
.pm-specs { margin-top: 18px; border-top: 1px solid var(--color-border-light); padding-top: 14px; }
.pm-specs summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.pm-specs ul { margin: 12px 0 0 20px; font-size: 0.92rem; color: #333; line-height: 1.7; }
.pm-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-pm-amazon { display: inline-flex; align-items: center; justify-content: center; background: var(--color-black); color: #fff; font-size: 0.88rem; font-weight: 800; padding: 12px 22px; border-radius: var(--radius-sm); border: 2px solid var(--color-black); transition: background var(--transition-quick), color var(--transition-quick); }
.btn-pm-amazon:hover { background: var(--color-accent-lime); color: var(--color-black); border-color: var(--color-accent-lime); }
.btn-pm-outline { background: #fff; color: var(--color-black); }
.pm-verdict-box { background: var(--color-tech-blue-soft); border-left: 4px solid var(--color-tech-blue); border-radius: var(--radius-sm); padding: 18px 20px; margin: 18px 0; }
.pm-verdict-box strong { display: block; font-size: 0.8rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-tech-blue); margin-bottom: 6px; }
.pm-verdict-box p { margin: 0; line-height: 1.65; }
.pm-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.pm-col { background: var(--color-bg-page); border-radius: var(--radius-md); padding: 18px 20px; }
.pm-col h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 8px; }
.pm-col p, .pm-col li { font-size: 0.92rem; line-height: 1.6; color: #333; }
.pm-col ul { margin-left: 18px; }
.pm-pros { background: #F1FBE0; }
.pm-cons { background: #FFF3E8; }
.pm-crit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.pm-crit-5 { grid-template-columns: repeat(3, 1fr); }
.pm-crit { position: relative; background: var(--color-bg-page); border-radius: var(--radius-md); padding: 18px 20px; }
.pm-crit h4 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; }
.pm-crit p { font-size: 0.9rem; line-height: 1.6; color: #333; }
.pm-crit-n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--color-black); color: var(--color-accent-lime); font-size: 0.8rem; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 8px; }
.pm-table-wrap { overflow-x: auto; margin: 14px 0; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.pm-table th { text-align: left; background: var(--color-black); color: #fff; font-size: 0.76rem; letter-spacing: 0.4px; padding: 12px 14px; }
.pm-table td { padding: 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.pm-table ul { margin-left: 16px; line-height: 1.55; }
.pm-td-prod { min-width: 190px; }
.pm-td-prod img { display: block; width: 84px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: #E6E6E6; margin-bottom: 8px; }
.pm-table .btn-pm-amazon { padding: 9px 14px; font-size: 0.78rem; white-space: nowrap; }
.pm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pm-step { background: var(--color-bg-page); border-radius: var(--radius-md); padding: 20px; }
.pm-step span { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-lime); font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.pm-step h4 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; }
.pm-step p { font-size: 0.9rem; line-height: 1.6; color: #333; }
.pm-accordion details { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 18px; margin-bottom: 10px; background: #fff; }
.pm-accordion summary { cursor: pointer; font-weight: 700; padding: 16px 0; }
.pm-accordion p { padding: 0 0 16px; line-height: 1.65; color: #333; }
.pm-vip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pm-vip-card { background: var(--color-bg-page); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pm-vip-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: #E0E0E0; }
.pm-vip-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-vip-card h4 { font-size: 0.98rem; font-weight: 800; line-height: 1.3; }
.pm-vip-card p { font-size: 0.88rem; color: var(--color-text-muted); flex: 1; }
.pm-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.pm-before-after img { width: 100%; border-radius: var(--radius-md); }
.pm-before-after figcaption { text-align: center; font-weight: 700; font-size: 0.85rem; margin-top: 6px; }
@media (max-width: 900px) {
  .pm-section { padding: 24px 20px; }
  .pm-block { grid-template-columns: 1fr; gap: 16px; }
  .pm-block.reverse .pm-block-img { order: 0; }
  .pm-two-cols, .pm-crit-grid, .pm-crit-5, .pm-steps { grid-template-columns: 1fr; }
  .pm-title { font-size: 1.4rem; }
  .pm-vip-grid.mobile-carousel > .carousel-item { flex: 0 0 80%; }
}

/* Description & fiche technique : 3 colonnes « image, titre, texte » côte à côte */
.pm-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 8px; }
.pm-card { display: flex; flex-direction: column; }
.pm-card-img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); margin-bottom: 16px; }
.pm-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-card h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; margin-bottom: 8px; }
.pm-card p { font-size: 0.94rem; line-height: 1.65; color: #333; }
@media (max-width: 900px) { .pm-trio { grid-template-columns: none; } }

/* Description & fiche technique : 3 blocs « image, titre, texte » l'un après l'autre */
.pm-stack { display: flex; flex-direction: column; gap: 34px; margin: 26px 0 8px; }
.pm-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; }
.pm-row-img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #E6E6E6, #CFCFCF); }
.pm-row-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-row-text h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 12px; }
.pm-row-text p { font-size: 1rem; line-height: 1.7; color: #333; }
@media (max-width: 900px) { .pm-row { grid-template-columns: 1fr; gap: 14px; } .pm-stack { gap: 28px; } }

/* Description & fiche technique : alternance gauche / droite / gauche */
.pm-stack { gap: 44px; }
.pm-row-img { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); }
.pm-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pm-row:nth-child(even) .pm-row-img { order: 2; }
.pm-row-text h3 { position: relative; padding-bottom: 12px; }
.pm-row-text h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--color-accent-lime); }
@media (max-width: 900px) {
  .pm-row, .pm-row:nth-child(even) { grid-template-columns: 1fr; }
  .pm-row:nth-child(even) .pm-row-img { order: 0; }
}