/* =========================================================
   ELIKO Technology - style.css
   Design original inspiré e-commerce industriel Bootstrap
   ========================================================= */

:root {
  --eliko-primary: #e30613;
  --eliko-primary-dark: #a80009;
  --eliko-cyan: #ff3b3b;
  --eliko-dark: #0b1220;
  --eliko-dark-2: #111827;
  --eliko-text: #4b5563;
  --eliko-muted: #6b7280;
  --eliko-border: #e5e7eb;
  --eliko-soft: #fff4f4;
  --eliko-white: #ffffff;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;

  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 48px rgba(15, 23, 42, 0.14);
  --transition: all 0.25s ease;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--eliko-text);
  background: var(--eliko-white);
  line-height: 1.6;
}

a {
  color: var(--eliko-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--eliko-primary-dark);
}

.section {
  padding: 88px 0;
}

.section-soft {
  background: var(--eliko-soft);
}

.section-heading {
  max-width: 720px;
}

.section-heading span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--eliko-primary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.section-heading h2 {
  color: var(--eliko-dark);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin-bottom: 16px;
}

.section-heading p {
  color: var(--eliko-muted);
  margin-bottom: 0;
}

/* Topbar */
.topbar {
  padding: 9px 0;
  background: var(--eliko-dark);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
}

.topbar a {
  color: rgba(255, 255, 255, 0.82);
}

.topbar a:hover {
  color: var(--eliko-white);
}

.separator {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 14px;
  background: rgba(255, 255, 255, 0.24);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(229, 231, 235, 0.9);
  backdrop-filter: blur(14px);
  transition: var(--transition);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar {
  padding: 0;
}

.navbar-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--eliko-dark);
  font-weight: 900;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--eliko-white);
  background: linear-gradient(135deg, var(--eliko-primary), var(--eliko-cyan));
  box-shadow: 0 10px 22px rgba(227, 6, 19, 0.22);
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: -0.05em;
}

.brand-text span {
  color: var(--eliko-primary);
  font-size: 0.78em;
  letter-spacing: 0;
}

.navbar-nav .nav-link {
  padding: 24px 16px;
  color: var(--eliko-dark);
  font-weight: 750;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--eliko-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--eliko-border);
  border-radius: 50%;
  background: var(--eliko-white);
  color: var(--eliko-dark);
  font-size: 1.35rem;
  line-height: 1;
  transition: var(--transition);
}

.icon-btn:hover {
  border-color: transparent;
  background: var(--eliko-soft);
  color: var(--eliko-primary);
}

/* Buttons */
.btn-eliko,
.btn-eliko-light,
.btn-eliko-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  padding: 12px 22px;
  border: 1px solid transparent;
}

.btn-eliko {
  background: var(--eliko-primary);
  color: var(--eliko-white);
  border-color: var(--eliko-primary);
}

.btn-eliko:hover {
  background: var(--eliko-primary-dark);
  border-color: var(--eliko-primary-dark);
  color: var(--eliko-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-eliko-light {
  background: var(--eliko-white);
  color: var(--eliko-dark);
  border-color: var(--eliko-border);
}

.btn-eliko-light:hover {
  background: var(--eliko-soft);
  color: var(--eliko-primary);
}

.btn-eliko-white {
  background: var(--eliko-white);
  color: var(--eliko-primary);
}

.btn-eliko-white:hover {
  background: var(--eliko-soft);
  color: var(--eliko-primary-dark);
}

/* Mega Menu */
.mega-dropdown {
  position: static;
}

.mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  border: 0;
  border-radius: 0 0 28px 28px;
  padding: 28px 0;
  box-shadow: var(--shadow-md);
}

.mega-intro {
  padding: 22px;
  height: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--eliko-dark), #e30613);
  color: var(--eliko-white);
}

.mega-intro span {
  display: block;
  margin-bottom: 8px;
  color: var(--eliko-cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mega-intro h5 {
  font-weight: 900;
}

.mega-intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.mega-card {
  display: block;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--eliko-border);
  border-radius: var(--radius-md);
  background: var(--eliko-white);
}

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

.mega-card strong {
  display: block;
  color: var(--eliko-dark);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.mega-card small {
  color: var(--eliko-muted);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  
  background:
  radial-gradient(
    circle at top right,
    rgba(227,6,19,.08),
    transparent 18%
  ),

  radial-gradient(
    circle at bottom left,
    rgba(0,0,0,.04),
    transparent 24%
  ),

  linear-gradient(
    180deg,
    #f4f5f7 0%,
    #eceef2 100%
  );
}
.hero::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  right: -220px;
  bottom: -260px;
  border-radius: 50%;
  background: rgba(227, 6, 19, 0.08);
}

.hero-content {
  position: relative;
  z-index: 1;
   max-width:760px !important;
  width:100%;
}

.hero-label {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--eliko-white);
  color: var(--eliko-primary);
  border: 1px solid rgba(227, 6, 19, 0.12);
  font-size: 0.83rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero h1 {
  color: var(--eliko-dark);
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 950;
  margin-bottom: 24px;
}

.hero p {
  max-width: 620px;
  color: var(--eliko-muted);
  font-size: 1.13rem;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-trust div {
  min-width: 140px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(229, 231, 235, 0.9);
}

.hero-trust strong {
  display: block;
  color: var(--eliko-dark);
  font-size: 1.1rem;
  line-height: 1.1;
}

.hero-trust span {
  color: var(--eliko-muted);
  font-size: 0.85rem;
}

.hero-showcase {
  position: relative;
  min-height: 540px;
}

.showcase-card {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: var(--eliko-white);
  box-shadow: var(--shadow-md);
}

.main-product {
  padding: 34px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-visual {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motor-shape {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 26%, transparent 27%),
    conic-gradient(from 20deg, #ffe1e1, #e30613, #ff3b3b, #ffe1e1);
  box-shadow: inset 0 0 0 24px #fff0f0, 0 28px 55px rgba(227, 6, 19, 0.18);
}

.motor-shape::before,
.motor-shape::after {
  content: "";
  position: absolute;
  inset: 54px;
  border-radius: 50%;
  border: 16px solid rgba(11, 18, 32, 0.08);
}

.motor-shape span {
  position: absolute;
  inset: 104px;
  border-radius: 50%;
  background: var(--eliko-dark);
}

.showcase-info span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--eliko-primary);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.showcase-info h3 {
  color: var(--eliko-dark);
  font-weight: 950;
  font-size: 2rem;
}

.showcase-info p {
  margin: 0;
  color: var(--eliko-muted);
}

.floating-card {
  position: absolute;
  max-width: 230px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--eliko-dark);
  color: var(--eliko-white);
  box-shadow: var(--shadow-md);
}

.floating-card strong {
  display: block;
  margin-bottom: 5px;
}

.floating-card span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.card-a {
  top: 48px;
  right: -18px;
}

.card-b {
  left: -22px;
  bottom: 70px;
  background: var(--eliko-primary);
}

/* Benefits */
.benefit-card {
  height: 100%;
  padding: 28px;
  border: 1px solid var(--eliko-border);
  border-radius: var(--radius-lg);
  background: var(--eliko-white);
  transition: var(--transition);
}

.benefit-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
}

.benefit-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 18px;
  background: var(--eliko-soft);
  color: var(--eliko-primary);
  font-weight: 950;
}

.benefit-card h3 {
  color: var(--eliko-dark);
  font-weight: 900;
  font-size: 1.18rem;
}

.benefit-card p {
  margin: 0;
  color: var(--eliko-muted);
}

/* Categories */
.category-tile{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  min-height:420px;

  padding:34px;

  border-radius:30px;

  color:#ffffff;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
  
  
}
.category-tile::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,0)
    );

  pointer-events:none;
}
.category-tile:hover {
  color: var(--eliko-white);
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
}

.category-tile:hover .category-image img{
  transform:
    translateY(-6px)
    scale(1.05);

  filter:
    drop-shadow(0 34px 50px rgba(0,0,0,.34));
}

.category-tile::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.category-tile div {
  position: relative;
  z-index: 1;
}

.category-tile span {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.category-tile h3 {
  font-size: 2rem;
  font-weight: 950;
}

.category-tile p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.tile-blue {
  background: linear-gradient(135deg, #e30613, #a80009);
}

.tile-dark {
  background: linear-gradient(135deg, #0b1220, #1f2937);
}

.tile-cyan {
  background: linear-gradient(135deg, #e30613, #e30613);
}
.category-image{
  position:relative;

  width:100%;

  display:flex;
  justify-content:center;
  align-items:center;

  min-height:250px;

  margin-bottom:34px;
}

.category-image::before{
  content:"";

  position:absolute;

  width:280px;
  height:220px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(245,245,245,.94)
    );

  box-shadow:
    0 24px 50px rgba(0,0,0,.18);

  transform:rotate(-2deg);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.category-image img{
  position:relative;
  z-index:2;

  max-width:240px;
  width:100%;
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(0 22px 28px rgba(0,0,0,.22));

  transition:
    transform .4s ease,
    filter .4s ease;
}

.category-tile:hover .category-image::before{
  transform:
    rotate(0deg)
    translateY(-4px);

  box-shadow:
    0 34px 70px rgba(0,0,0,.22);
}

.category-tile:hover .category-image img{
  transform:
    translateY(-8px)
    scale(1.04);

  filter:
    drop-shadow(0 34px 40px rgba(0,0,0,.3));
}


/* Product filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: var(--eliko-soft);
  border: 1px solid var(--eliko-border);
}

.filter-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--eliko-dark);
  padding: 10px 16px;
  font-weight: 800;
  transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--eliko-primary);
  color: var(--eliko-white);
}

.product-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--eliko-border);
  border-radius: var(--radius-lg);
  background: var(--eliko-white);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(227, 6, 19, 0.26);
  box-shadow: var(--shadow-md);
}

.product-featured {
  border-color: rgba(227, 6, 19, 0.35);
}

.product-top {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(255, 59, 59, 0.14), transparent 38%),
    linear-gradient(135deg, #fffafa, #fff0f0);
}

.product-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--eliko-white);
  background: var(--eliko-primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.motor-mini {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 28%, transparent 29%),
    conic-gradient(#ffe1e1, var(--eliko-primary), var(--eliko-cyan), #ffe1e1);
  box-shadow: inset 0 0 0 14px #fff3f3, 0 16px 28px rgba(227, 6, 19, 0.13);
}

.product-body {
  padding: 24px;
}

.product-family {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--eliko-primary);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-body h3 {
  min-height: 56px;
  color: var(--eliko-dark);
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.product-body ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  color: var(--eliko-muted);
  font-size: 0.92rem;
}

.product-body li::before {
  content: "•";
  color: var(--eliko-primary);
  font-weight: 900;
  margin-right: 8px;
}

.product-link {
  color: var(--eliko-dark);
  font-weight: 900;
}

.product-link:hover {
  color: var(--eliko-primary);
}

/* Applications */
.applications {
  background: var(--eliko-dark);
}

.applications .section-heading h2 {
  color: var(--eliko-white);
}

.applications .section-heading p {
  color: rgba(255, 255, 255, 0.68);
}


.application-card {
  height: 100%;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--eliko-white);
   display:flex;
  align-items:center;   /* IMPORTANT */
  gap:24px;
}

.application-card h3 {
  font-weight: 900;
}

.application-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.application-icon{
  flex-shrink:0;

  width:78px;
  height:78px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:22px;

  background:#ffffff;

  color:#000000;

  font-size:2rem;
}

/* CTA */
.cta-section {
  padding-top: 0;
}

.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 54px;
  border-radius: 34px;
  color: var(--eliko-white);
  background:
    radial-gradient(circle at top right, rgba(255, 59, 59, 0.38), transparent 32%),
    linear-gradient(135deg, var(--eliko-primary), var(--eliko-dark));
}

.cta-box span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--eliko-cyan);
  font-weight: 900;
  text-transform: uppercase;
}

.cta-box h2 {
  max-width: 800px;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 950;
  letter-spacing: -0.05em;
}

.cta-box p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

/* Contact */
.contact-info {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.contact-info div,
.contact-form {
  padding: 24px;
  border: 1px solid var(--eliko-border);
  border-radius: var(--radius-md);
  background: var(--eliko-white);
  box-shadow: var(--shadow-sm);
}

.contact-info strong {
  display: block;
  color: var(--eliko-dark);
}

.contact-info span {
  color: var(--eliko-muted);
}

.form-control,
.form-select {
  min-height: 50px;
  border-color: var(--eliko-border);
  border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--eliko-primary);
  box-shadow: 0 0 0 0.22rem rgba(227, 6, 19, 0.12);
}

/* Footer */
.site-footer {
  padding: 70px 0 28px;
  background: var(--eliko-dark);
  color: rgba(255, 255, 255, 0.72);
}

.site-footer .brand-text,
.site-footer h5 {
  color: var(--eliko-white);
}

.site-footer p {
  max-width: 360px;
  margin-top: 18px;
}

.site-footer ul {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover {
  color: var(--eliko-white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--eliko-primary);
  color: var(--eliko-white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.search-hint {
  color: var(--eliko-muted);
}

/* Responsive */
@media (max-width: 991px) {
  .navbar {
    padding: 14px 0;
  }

  .navbar-nav .nav-link {
    padding: 10px 0;
  }

  .header-actions {
    margin-top: 16px;
  }

  .mega-menu {
    padding: 16px;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .hero {
    padding: 72px 0;
  }

  .hero-showcase {
    min-height: auto;
  }

  .floating-card {
    position: static;
    margin-top: 14px;
    max-width: 100%;
  }

  .cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px;
  }
}

@media (max-width: 575px) {
  .section {
    padding: 64px 0;
  }

  .hero h1 {
    font-size: 2.65rem;
  }

  .hero-trust div {
    width: 100%;
  }

  .filter-bar {
    border-radius: 20px;
  }

  .filter-btn {
    width: 100%;
  }
}

/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--red);
  color:#fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

  .hero{
    padding:80px 0 70px;
  }

  .floating-card{
    display:none;
  }

  .cta-box{
    flex-direction:column;
    align-items:flex-start;
    padding:34px;
  }

}

@media(max-width:575px){

  .hero h1{
    font-size:3.2rem;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-trust{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   Catalogue ELIKO
   ========================================================= */

.catalogue-hero {
  padding: 76px 0 58px;
  background:
    radial-gradient(circle at top right, rgba(227, 6, 19, 0.18), transparent 32%),
    linear-gradient(135deg, #111111 0%, #1b1b1b 55%, #330004 100%);
  color: #ffffff;
}

.catalogue-hero h1 {
  max-width: 860px;
  margin: 18px 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.catalogue-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
}

.catalogue-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.catalogue-summary div {
  padding: 22px 16px;
  text-align: center;
}

.catalogue-summary div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.catalogue-summary strong {
  display: block;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 950;
}

.catalogue-summary span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}

.catalogue-section {
  background: #ffffff;
}

.catalogue-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

.catalogue-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
}

.filter-panel {
  max-height: calc(100vh - 110px);
  overflow-y: auto;

  padding: 24px;
  border-radius: 26px;

  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
  border: 1px solid rgba(0,0,0,.06);

  box-shadow:
    0 6px 18px rgba(0,0,0,.04),
    0 18px 40px rgba(0,0,0,.05);
}

.filter-panel::-webkit-scrollbar {
  width: 6px;
}

.filter-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.16);
  border-radius: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;

  margin-bottom: 18px;
  padding-bottom: 18px;

  border-bottom: 1px solid rgba(0,0,0,.07);
}

.filter-header span {
  display: block;
  margin-bottom: 4px;

  color: var(--red);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.filter-header h2 {
  margin: 0;

  color: var(--black);
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -.04em;
}

.filter-reset {
  border: 0;
  background: #fff1f1;
  color: var(--red);

  padding: 8px 12px;
  border-radius: 999px;

  font-size: .78rem;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.filter-reset:hover {
  background: var(--red);
  color: #000000;

  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(227,6,19,.22);
}

.filter-reset:active {
  transform: translateY(0);
}

.filter-group {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.filter-toggle {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0;

  border: 0;
  background: transparent;

  color: var(--black);
  font-size: .96rem;
  font-weight: 950;
  text-align: left;

  cursor: pointer;
}

.filter-toggle span {
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
}

.filter-toggle span::before,
.filter-toggle span::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 20px;
  transition: .25s ease;
}

.filter-toggle span::before {
  width: 14px;
  height: 2px;
  top: 8px;
  left: 2px;
}

.filter-toggle span::after {
  width: 2px;
  height: 14px;
  top: 2px;
  left: 8px;
}

.filter-group.open .filter-toggle span::after {
  transform: rotate(90deg);
  opacity: 0;
}

.filter-content {
  display: none;
  padding-top: 14px;
}

.filter-group.open .filter-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-search {
  width: 100%;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(0,0,0,.12);
  outline: none;

  color: var(--black);
  font-size: .92rem;
}

.filter-search:focus {
  border-color: rgba(227,6,19,.35);
  box-shadow: 0 0 0 4px rgba(227,6,19,.08);
}

.catalogue-filter {
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;

  color: var(--muted);

  padding: 9px 12px;
  border-radius: 999px;

  font-size: .82rem;
  font-weight: 850;

  cursor: pointer;
  transition: .2s ease;
}

.catalogue-filter:hover {
  border-color: rgba(227,6,19,.25);
  color: var(--red);
  background: #fff7f7;
}

.catalogue-filter.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.filter-help-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 18px;
  padding: 13px 18px;

  border-radius: 999px;
  background: #111827;
  color: #fff;

  text-decoration: none;
  font-weight: 950;
  font-size: .9rem;

  transition: .25s ease;
}

.filter-help-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 12px 26px rgba(227,6,19,.22);
}

@media (max-width: 991px) {
  .catalogue-layout {
    display: block;
  }

  .catalogue-sidebar {
    position: static;
    margin-bottom: 24px;
  }

  .filter-panel {
    max-height: none;
    overflow: visible;
    padding: 20px;
  }

  .filter-group:not(.open) .filter-content {
    display: none;
  }
}

.catalogue-filter {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-weight: 800;
  text-align: left;
  transition: var(--transition);
}

.catalogue-filter:hover,
.catalogue-filter.active {
  border-color: var(--eliko-primary);
  background: var(--eliko-primary);
  color: #ffffff;
}

.catalogue-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.catalogue-toolbar strong {
  display: block;
  color: var(--eliko-dark);
  font-weight: 950;
}

.catalogue-toolbar span {
  color: var(--eliko-muted);
  font-size: 0.92rem;
}

.catalogue-sort {
  max-width: 260px;
}
.catalogue-card {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #e6e9ee;
  background: #ffffff;
  transition: all .35s ease;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.04),
    0 12px 40px rgba(15, 23, 42, 0.06);
}

.catalogue-card:hover {
  transform: translateY(-6px);
  border-color: #d8dde5;
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.08),
    0 24px 60px rgba(15, 23, 42, 0.12);
}

.catalogue-card.highlight {
  border-color: #e6e9ee;
}

.catalogue-card-top {
  position: relative;
  min-height: 210px;
  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(
      circle at top right,
      rgba(15, 23, 42, 0.04),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #fafbfc 0%,
      #f3f5f7 100%
    );

  border-bottom: 1px solid #e8ebef;
}

.catalogue-card-top img {
  max-height: 180px;
  object-fit: contain;
  transition: transform .35s ease;
    position: relative;
  z-index: 0;
}

.catalogue-card:hover .catalogue-card-top img {
  transform: scale(1.03);
}

.catalogue-card-top span {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
    z-index: 10;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.catalogue-card-body {
  cursor: pointer;
  padding: 24px;
}

.catalogue-card-body small {
  display: inline-block;
  margin-bottom: 7px;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalogue-card-body h3 {
  margin-bottom: 16px;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 700;
}

.catalogue-card-body dl {
  margin: 0;
}

.catalogue-card-body dt {
  color: #6b7280;
  font-weight: 500;
}

.catalogue-card-body dd {
  color: #111827;
  font-weight: 700;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #111827;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
}

.product-link:hover {
  color: var(--eliko-primary);
  transform: translateX(3px);
}
.catalogue-card-body h3 {
  min-height: 54px;
  color: #111111;
  font-size: 1.12rem;
  font-weight: 950;
  margin-bottom: 18px;
}

.catalogue-card dl {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
}

.catalogue-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eeeeee;
}

.catalogue-card dt {
  color: #6b7280;
  font-weight: 700;
}

.catalogue-card dd {
  margin: 0;
  color: #111111;
  font-weight: 900;
  text-align: right;
}

.catalogue-product.is-hidden {
  display: none !important;
}

@media (max-width: 991px) {
  .catalogue-layout {
    grid-template-columns: 1fr;
  }

  .catalogue-sidebar {
    position: static;
  }

  .catalogue-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .catalogue-sort {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .catalogue-summary {
    grid-template-columns: 1fr;
  }

  .catalogue-summary div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* Hero */
.catalog-hero {
  padding: 64px 0 64px;
  background:
    radial-gradient(circle at 86% 16%, rgba(227,6,19,.28), transparent 28%),
    linear-gradient(135deg, #09090b 0%, #151518 58%, #300004 100%);
  color: var(--white);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #ff7078;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow.red {
  color: var(--red);
}

.catalog-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.5rem,5vw,4.8rem);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.075em;
  color: #fff;
}

.catalog-hero p {
  max-width: 680px;
  color: rgba(255,255,255,.72);
  font-size: 1.13rem;
  margin-bottom: 30px;
}



.spec-panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}

.spec-panel div {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
}

.spec-panel div + div {
  border-top: 1px solid rgba(255,255,255,.1);
}

.spec-panel span {
  color: rgba(255,255,255,.58);
}

.spec-panel strong {
  color: #ffffff;
  text-align: right;
}

/* Intro */
.catalog-intro {
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

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

.intro-card{
  position:relative;
  overflow:hidden;

  padding:32px;
  border-radius:26px;

  background:
    linear-gradient(180deg,#ffffff 0%,#fcfcfc 100%);

  border:1px solid rgba(0,0,0,.06);

  box-shadow:
    0 6px 18px rgba(0,0,0,.04),
    0 18px 40px rgba(0,0,0,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.intro-card:hover{
  transform:translateY(-6px);

  border-color:rgba(227,6,19,.18);

  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 24px 55px rgba(0,0,0,.08);
}

.intro-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:4px;

  background:linear-gradient(
    90deg,
    var(--red),
    #ff5a64
  );
}

.intro-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;

  margin-bottom:22px;

  border-radius:12px;

  background:#fff1f1;

  color:var(--red);

  font-size:.9rem;
  font-weight:950;
}

.intro-card h2{
  margin-bottom:14px;

  color:var(--black);

  font-size:1.25rem;
  line-height:1.2;
  font-weight:900;

  letter-spacing:-.03em;
}

.intro-card p{
  margin:0;

  color:var(--muted);

  font-size:.98rem;
  line-height:1.7;
}
.intro-card span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--red);
  font-weight: 950;
}

.intro-card h2 {
  color: var(--black);
  font-size: 1.14rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.intro-card p {
  margin: 0;
  color: var(--muted);
}
.btn-red{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;
  padding:12px 24px;

  border:none;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #e30613 0%,
      #c1000c 100%
    );

  color:#ffffff;

  font-size:.95rem;
  font-weight:850;
  letter-spacing:-.01em;

  box-shadow:
    0 10px 24px rgba(227,6,19,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;

  text-decoration:none;
  cursor:pointer;
}

.btn-red:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #f10a18 0%,
      #a80009 100%
    );

  box-shadow:
    0 14px 30px rgba(227,6,19,.24);

  color:#ffffff;
}

.btn-red:active{
  transform:translateY(0);
}

.btn-red:focus{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(227,6,19,.14),
    0 12px 28px rgba(227,6,19,.22);
}

.btn-vert{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;
  padding:12px 24px;

  border:none;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #16a34a 0%,
      #15803d 100%
    );

  color:#ffffff;

  font-size:.95rem;
  font-weight:850;
  letter-spacing:-.01em;

  box-shadow:
    0 10px 24px rgba(22,163,74,.20);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;

  text-decoration:none;
  cursor:pointer;
}

.btn-vert:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #22c55e 0%,
      #15803d 100%
    );

  box-shadow:
    0 14px 30px rgba(22,163,74,.28);

  color:#ffffff;
}

.btn-vert:active{
  transform:translateY(0);
}

.btn-vert:focus{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(22,163,74,.15),
    0 12px 28px rgba(22,163,74,.22);
}

.btn-outline-dark-custom{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;
  padding:12px 24px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.04);

  backdrop-filter:blur(10px);

  color:#ffffff;

  font-size:.95rem;
  font-weight:850;
  letter-spacing:-.01em;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;

  text-decoration:none;
  cursor:pointer;
}

.btn-outline-dark-custom:hover{
  transform:translateY(-2px);

  background:#ffffff;

  border-color:#ffffff;

  color:#111111;

  box-shadow:
    0 14px 30px rgba(0,0,0,.14);
}

.btn-outline-dark-custom:active{
  transform:translateY(0);
}

.btn-outline-dark-custom:focus{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.12),
    0 12px 28px rgba(0,0,0,.12);
}

.cta-inner{
  position:relative;
  overflow:hidden;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;

  padding:56px;

  border-radius:36px;

  background:
    radial-gradient(
      circle at top right,
      rgba(227,6,19,.22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #0d0d0f 0%,
      #18181c 52%,
      #320004 100%
    );

  border:1px solid rgba(255,255,255,.06);

  box-shadow:
    0 18px 50px rgba(0,0,0,.16);

  color:#ffffff;
}

.cta-inner::before{
  content:"";

  position:absolute;
  top:-120px;
  right:-120px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(227,6,19,.18),
      transparent 70%
    );
}

.cta-inner > *{
  position:relative;
  z-index:2;
}

.cta-inner span{
  display:inline-block;

  margin-bottom:14px;

  color:#ff8f96;

  font-size:.8rem;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.cta-inner h2{
  margin:0 0 18px;

  max-width:720px;

  font-size:clamp(2rem,4vw,4rem);
  line-height:.98;
  font-weight:950;

  letter-spacing:-.06em;

  color:#ffffff;
}

.cta-inner p{
  margin:0;

  max-width:640px;

  color:rgba(255,255,255,.72);

  font-size:1.05rem;
  line-height:1.75;
}

@media(max-width:991px){

  .cta-inner{
    flex-direction:column;
    align-items:flex-start;

    padding:38px 30px;
  }

}

.footer-logo{
  max-width:294px;
  width:100%;
  height:auto;

  opacity:.92;

  transition:opacity .25s ease;
}

.footer-logo:hover{
  opacity:1;
}

.header-logo{
  max-width:294px;
  width:100%;
  height:auto;

  display:block;

  transition:
    transform .25s ease,
    opacity .25s ease;
}

.navbar-brand:hover .header-logo{
  transform:translateY(-1px);
  opacity:.95;
}

@media(max-width:575px){

  .header-logo{
    max-width:135px;
  }

}

.mega-all-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:18px;

  color:var(--eliko-primary);

  font-size:.92rem;
  font-weight:900;

  transition:
    transform .25s ease,
    color .25s ease;
}

.mega-all-link:hover{
  transform:translateX(4px);

  color:#b8000c;
}

.mega-catalog-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:22px;

  min-height:46px;
  padding:12px 20px;

  border-radius:999px;

  background:#ffffff;

  color:#981d25;

  font-size:.92rem;
  font-weight:900;
  letter-spacing:-.01em;

  box-shadow:
    0 10px 24px rgba(227,6,19,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.mega-catalog-btn:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #f10a18,
      #980008
    );

  box-shadow:
    0 14px 30px rgba(227,6,19,.24);

  color:#ffffff;
}

.mega-catalog-btn span{
  font-size:1rem;
  line-height:1;

  transition:transform .25s ease;
}

.mega-catalog-btn:hover span{
  transform:translateX(4px);
}

.simple-cta-section{
  padding:70px 0;
  background:#ffffff;
}

.simple-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;

  padding:38px 42px;

  border:1px solid var(--eliko-border);
  border-radius:24px;

  background:#ffffff;

  box-shadow:var(--shadow-sm);
}

.simple-cta span{
  display:inline-block;
  margin-bottom:8px;

  color:var(--eliko-primary);

  font-size:.8rem;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.simple-cta h2{
  margin:0 0 10px;

  color:var(--eliko-dark);

  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.1;
  font-weight:900;

  letter-spacing:-.04em;
}

.simple-cta p{
  margin:0;

  color:var(--eliko-muted);

  font-size:1rem;
}

@media(max-width:768px){

  .simple-cta{
    flex-direction:column;
    align-items:flex-start;

    padding:30px;
  }

}
.product-visual img{
  max-width:545px;
}

/* HERO */
.hero-fa{
  position:relative;
  overflow:hidden;

  min-height:660px;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      180deg,
      #f3f4f6 0%,
      #eceff3 100%
    );

  border-bottom:1px solid #d9dee5;
}

/* texture légère industrielle */
.hero-fa::before{
  content:"";

  position:absolute;
  inset:0;

  background:

    radial-gradient(
      circle at top right,
      rgba(227,6,19,.05),
      transparent 18%
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,0) 24%
    );

  pointer-events:none;
}

.hero-fa-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:48% 52%;
  align-items:center;
  min-height:660px;
}

.hero-fa-content{
  max-width:760px;
  color:#111827;
  padding-right:20px;
}

.hero-label-premium{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:30px;
}

.hero-label-line{
  width:46px;
  height:3px;
  background:#e30613;
  border-radius:999px;
}

.hero-label-text{
  display:flex;
  align-items:center;
  color:#e30613;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-fa-content h1{
  max-width:760px;

  margin:0 0 28px;

  color:#111827;

  font-size:clamp(3rem,4.6vw,5rem);

  line-height:1.02;

  font-weight:500;

  letter-spacing:-.065em;
}

.hero-fa-content p{
  max-width:560px;
  margin:0 0 34px;
  color:#4b5563;
  font-size:1.12rem;
  line-height:1.65;
}

.hero-fa-visual{
  position:relative;
  height:660px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.hero-fa-red{
  position:absolute;

  right:8%;
  top:-120px;

  width:140px;
  height:120%;

  background:
    linear-gradient(
      180deg,
      rgba(227,6,19,.58),
      rgba(227,6,19,.08)
    );

  transform:skewX(-18deg);

  filter:blur(.2px);
}

.hero-fa-img{
  position:relative;
  z-index:3;
  width:112%;
  max-width:980px;
  height:auto;
  object-fit:contain;
  margin-left:-80px;
  margin-right:-80px;
  filter:drop-shadow(0 28px 40px rgba(15,23,42,.22));
}

.btn-red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:13px 28px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#e30613 0%,#c1000c 100%);
  color:#fff;
  font-size:.95rem;
  font-weight:850;
  box-shadow:0 10px 24px rgba(227,6,19,.18);
  text-decoration:none;
  cursor:pointer;
}

.btn-red:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(227,6,19,.26);
}

@media(max-width:991px){
  .hero-fa{
    min-height:auto;
    padding:70px 0;
  }

  .hero-fa-inner{
    grid-template-columns:1fr;
    min-height:auto;
    gap:34px;
  }

  .hero-fa-content{
    max-width:100%;
  }

  .hero-fa-visual{
    height:auto;
  }

  .hero-fa-red{
    display:none;
  }

  .hero-fa-img{
    width:100%;
    max-width:720px;
    margin:0;
  }
}
/* =========================================================
   PAGE PRODUIT - ELIKO
   ========================================================= */

.range-hero{
  padding:40px 0;
  background:linear-gradient(135deg,#10101f 0%,#8d0616 45%,#ff0717 100%);
  color:#ffffff;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:40px;
  align-items:center;
}

.range-kicker{
  display:inline-block;
  color:#ff8087;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.hero-content h1{
  font-size:42px;
  line-height:1;
  margin:0 0 12px;
  color:#ffffff;
}

.hero-content p{
  font-size:16px;
  line-height:1.5;
  opacity:.88;
  max-width:600px;
  margin-bottom:20px;
}

.hero-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:20px;
}

.hero-kpi{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 14px;
}

.hero-kpi small{
  display:block;
  color:rgba(255,255,255,.7);
  margin-bottom:4px;
  font-size:11px;
}

.hero-kpi strong{
  display:block;
  font-size:18px;
  color:#ffffff;
}

.range-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  transition:.25s ease;
}

.btn-primary{
  background:#ffffff;
  color:#c20f1f;
}

.btn-primary:hover{
  transform:translateY(-2px);
  color:#c20f1f;
}

.btn-secondary{
  border:1px solid rgba(255,255,255,.2);
  color:#ffffff;
  background:rgba(255,255,255,.08);
}

.btn-secondary:hover{
  background:rgba(255,255,255,.15);
  color:#ffffff;
}

.hero-image{
  text-align:center;
}

.hero-image img{
  width:100%;
  max-width:340px;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.38));
}

/* NAV PRODUIT */

.product-sticky-nav{
  position:sticky;
  top:73px;
  z-index:900;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--eliko-border);
}

.product-sticky-nav .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:12px;
  padding-bottom:12px;
}

.product-sticky-nav strong{
  color:var(--eliko-dark);
  font-weight:950;
  letter-spacing:-.035em;
}

.product-sticky-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.product-sticky-links a{
  padding:9px 14px;
  border-radius:999px;
  color:var(--eliko-dark);
  font-size:.86rem;
  font-weight:850;
}

.product-sticky-links a:hover{
  background:var(--eliko-soft);
  color:var(--eliko-primary);
}

/* CONTENU TECHNIQUE */

.product-tech-section{
  padding:86px 0;
  background:#f7f8fb;
}

.product-tech-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:30px;
  align-items:start;
}

.tech-block{
  overflow:hidden;
  margin-bottom:26px;
  border:1px solid var(--eliko-border);
  border-radius:30px;
  background:var(--eliko-white);
  box-shadow:var(--shadow-sm);
}

.tech-block-header{
  padding:30px 32px 22px;
  border-bottom:1px solid var(--eliko-border);
}

.tech-block-header span,
.doc-kicker{
  display:inline-block;
  margin-bottom:8px;
  color:var(--eliko-primary);
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tech-block-header h2,
.product-download-card h2{
  margin:0;
  color:var(--eliko-dark);
  font-weight:950;
  letter-spacing:-.045em;
}

.tech-block-header p{
  max-width:620px;
  margin:8px 0 0;
  color:var(--eliko-muted);
}

.product-summary-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.product-summary-tile{
  padding:26px 28px;
  border-right:1px solid var(--eliko-border);
}

.product-summary-tile:last-child{
  border-right:0;
}

.product-summary-tile small{
  display:block;
  margin-bottom:10px;
  color:var(--eliko-muted);
  font-weight:800;
}

.product-summary-tile strong{
  display:block;
  color:var(--eliko-dark);
  font-size:1.35rem;
  line-height:1.15;
  font-weight:950;
}

/* TABLEAU */

.spec-table-scroll{
  max-height:620px;
  overflow:auto;
}

.spec-table-clean{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
}

.spec-table-clean th{
  position:sticky;
  top:0;
  z-index:2;
  padding:15px 20px;
  background:var(--eliko-dark);
  color:var(--eliko-white);
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:left;
}

.spec-table-clean th:first-child{
  width:38%;
}

.spec-table-clean td{
  padding:12px 20px;
  border-bottom:1px solid #edf0f4;
  color:var(--eliko-muted);
  font-weight:700;
}

.spec-table-clean tr:hover td{
  background:#fffafa;
}

.spec-table-clean td:first-child{
  color:var(--eliko-dark);
  font-weight:850;
}

.spec-table-clean .spec-category td{
  padding:13px 20px;
  background:#f3f4f6 !important;
  color:var(--eliko-primary) !important;
  font-size:.76rem;
  font-weight:950 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ONGLET 2D / COURBES */

.engineering-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 28px 0;
}

.engineering-tabs .nav-link {
  border: 1px solid #d9dee6;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-weight: 850;
  padding: 11px 18px;
}

.engineering-tabs .nav-link.active {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.engineering-tab-pane {
  padding: 28px;
}

.engineering-preview {
  display: block;
}

.engineering-preview > div:first-child {
  margin-bottom: 22px;
}

.engineering-preview h3 {
  color: #111827;
  font-size: 1.8rem;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.engineering-preview p {
  color: #6b7280;
  margin-bottom: 22px;
}

.preview-frame {
  position: relative;
  width: 100%;
  min-height: 560px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
}

.preview-frame img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: none;
}

#pane-2d .preview-frame img {
  max-width: 1050px;
}

#pane-courbes .preview-frame img {
  max-width: 1200px;
}

.placeholder-curve {
  width: min(720px, 92%);
  height: 320px;
  border-left: 3px solid #111827;
  border-bottom: 3px solid #111827;
  border-radius: 0 0 0 12px;
  position: relative;
}

.placeholder-curve::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 80px;
  height: 130px;
  border-top: 5px solid var(--eliko-primary);
  border-radius: 55% 45% 0 0;
  transform: skewX(-10deg);
}

.placeholder-curve span {
  position: absolute;
  right: 0;
  bottom: -32px;
  color: #6b7280;
  font-size: .8rem;
  font-weight: 850;
}

@media (max-width: 992px) {
  .engineering-tab-pane {
    padding: 20px;
  }

  .preview-frame {
    min-height: 420px;
    padding: 16px;
  }
}
/* DOWNLOAD SIDEBAR */

.product-tech-sidebar{
  position:sticky;
  top:112px;
}

.product-download-card{
  overflow:hidden;
  border:1px solid var(--eliko-border);
  border-radius:30px;
  background:var(--eliko-white);
  box-shadow:var(--shadow-md);
}

.product-download-head{
  padding:30px;
  background:
    radial-gradient(circle at top right, rgba(227,6,19,.18), transparent 36%),
    linear-gradient(135deg,#ffffff 0%,#fff4f4 100%);
  border-bottom:1px solid var(--eliko-border);
}

.product-download-head p{
  margin:10px 0 0;
  color:var(--eliko-muted);
}

.download-grid{
  display:grid;
  gap:12px;
  padding:22px;
}

.download-card-link{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:14px;
  padding:15px;
  border:1px solid var(--eliko-border);
  border-radius:18px;
  background:#ffffff;
  color:var(--eliko-dark);
}

.download-card-link:hover{
  transform:translateY(-3px);
  border-color:rgba(227,6,19,.28);
  box-shadow:var(--shadow-sm);
  color:var(--eliko-dark);
}

.download-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--eliko-soft);
  color:var(--eliko-primary);
  font-weight:950;
}

.download-card-link strong{
  display:block;
  color:var(--eliko-dark);
  font-size:.94rem;
  line-height:1.2;
}

.download-card-link small{
  color:var(--eliko-muted);
  font-weight:750;
}

.download-arrow{
  color:var(--eliko-primary);
  font-weight:950;
}

.sidebar-cta{
  padding:0 22px 24px;
}

.sidebar-cta .btn-red{
  width:100%;
}

/* RESPONSIVE */

@media(max-width:1100px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-content p{
    margin-left:auto;
    margin-right:auto;
  }

  .range-actions{
    justify-content:center;
  }

  .hero-image img{
    max-width:300px;
  }

  .product-tech-grid{
    grid-template-columns:1fr;
  }

  .product-tech-sidebar{
    position:static;
  }
}

@media(max-width:991px){
  .product-sticky-nav{
    display:none;
  }

  .hero-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .product-summary-row{
    grid-template-columns:repeat(2,1fr);
  }

  .engineering-preview{
    grid-template-columns:1fr;
  }
}

@media(max-width:575px){
  .range-hero{
    padding:32px 0;
  }

  .hero-content h1{
    font-size:34px;
  }

  .hero-content p{
    font-size:15px;
  }

  .hero-kpis{
    grid-template-columns:1fr;
  }

  .hero-image img{
    max-width:240px;
  }

  .product-tech-section{
    padding:58px 0;
  }

  .tech-block-header{
    padding:24px 20px 18px;
  }

  .product-summary-row{
    grid-template-columns:1fr;
  }

  .product-summary-tile{
    border-right:0;
    border-top:1px solid var(--eliko-border);
  }

  .product-summary-tile:first-child{
    border-top:0;
  }

  .engineering-tabs{
    padding:20px 18px 0;
  }

  .engineering-tab-pane{
    padding:20px 18px;
  }

  .spec-table-clean{
    font-size:.86rem;
  }

  .spec-table-clean th,
  .spec-table-clean td{
    padding:11px 14px;
  }
}

/* =========================================================
   PAGE GAMME FLXBL60
   ========================================================= */

.range-family-hero{
  position:relative;
  overflow:hidden;
  padding:64px 0;
  background:
    radial-gradient(circle at top right, rgba(227,6,19,.22), transparent 32%),
    linear-gradient(135deg,#0b1220 0%,#151518 55%,#330004 100%);
  color:#ffffff;
}

.range-family-hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-160px;
  bottom:-210px;
  border-radius:50%;
  background:rgba(227,6,19,.18);
}

.range-family-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}

.range-family-content h1{
  max-width:820px;
  margin:0 0 20px;
  color:#ffffff;
  font-size:clamp(2.5rem,5vw,4.8rem);
  line-height:.98;
  font-weight:950;
  letter-spacing:-.065em;
}

.range-family-content p{
  max-width:660px;
  margin:0 0 28px;
  color:rgba(255,255,255,.74);
  font-size:1.08rem;
  line-height:1.7;
}

.range-family-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.range-family-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}

.range-family-visual img{
  width:100%;
  max-width:460px;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.42));
}

.range-family-summary{
  position:relative;
  z-index:3;
  margin-top:-34px;
}

.family-summary-grid{
  grid-template-columns:repeat(4,1fr);
}

.family-summary-grid .summary-card{
  box-shadow:var(--shadow-sm);
}

.catalogue-card-top img{
  position:relative;
  z-index:2;
}

@media(max-width:991px){
  .range-family-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:34px;
  }

  .range-family-content p{
    margin-left:auto;
    margin-right:auto;
  }

  .range-family-actions{
    justify-content:center;
  }

  .range-family-visual img{
    max-width:340px;
  }

  .family-summary-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:575px){
  .range-family-hero{
    padding:48px 0;
  }

  .range-family-content h1{
    font-size:2.55rem;
  }

  .family-summary-grid{
    grid-template-columns:1fr;
  }
}

#comparatif{
  background:#f5f7fa;
}

#comparatif .compare-table-wrapper{
  margin-top:34px;
  overflow-x:auto;
  border-radius:26px;
  background:#ffffff;
  border:1px solid var(--eliko-border);
  box-shadow:var(--shadow-sm);
}

#comparatif .compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:#ffffff;
}

#comparatif .compare-table thead th{
  padding:18px 22px;
  background:#0b1220;
  color:#ffffff;
  font-size:.86rem;
  font-weight:900;
  text-align:left;
  white-space:nowrap;
}

#comparatif .compare-table tbody td{
  padding:15px 22px;
  border-bottom:1px solid #e5e7eb;
  color:#4b5563;
  font-weight:750;
}

#comparatif .compare-table tbody td:first-child{
  color:#0b1220;
  font-weight:900;
}

#comparatif .compare-table tbody tr:nth-child(even){
  background:#f8fafc;
}

#comparatif .compare-table tbody tr:hover{
  background:#fff4f4;
}

#comparatif .table-category td{
  background:#eef2f6 !important;
  color:#e30613 !important;
  font-size:.78rem;
  font-weight:950 !important;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* =========================================================
   SECTION ELIKO TECHNOLOGY - HOMEPAGE
========================================================= */

.company-overview{
  position:relative;
  overflow:hidden;
  background:#f0f0f0;
}

.company-overview::before{
  content:"";
  position:absolute;
  right:-180px;
  top:-180px;
  width:420px;
  height:420px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(15,23,42,.12) 0%,
      rgba(15,23,42,.06) 55%,
      rgba(15,23,42,0) 100%
    );
}
.company-overview .container{
  position:relative;
  z-index:2;
}

.company-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:48px;
}

.company-stat{
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:30px 26px;
  border:1px solid var(--eliko-border);
  border-radius:28px;
  background:
    linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  box-shadow:
    0 8px 22px rgba(15,23,42,.05),
    0 18px 42px rgba(15,23,42,.06);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.company-stat::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--eliko-primary),#ff5a64);
}

.company-stat:hover{
  transform:translateY(-6px);
  border-color:rgba(227,6,19,.22);
  box-shadow:
    0 12px 28px rgba(15,23,42,.07),
    0 26px 58px rgba(15,23,42,.09);
}

.company-stat strong{
  display:block;
  margin-bottom:18px;
  color:var(--eliko-dark);
  font-size:1.65rem;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.045em;
}

.company-stat span{
  display:block;
  color:var(--eliko-muted);
  font-size:.98rem;
  line-height:1.65;
  font-weight:700;
}

.company-stat strong::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:16px;
  border-radius:999px;
  background:var(--eliko-primary);
}

@media(max-width:991px){
  .company-stats{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:575px){
  .company-stats{
    grid-template-columns:1fr;
    margin-top:32px;
  }

  .company-stat{
    min-height:auto;
  }
}

/* =========================================================
   HOME - CATALOGUE + GAMMES PREMIUM
========================================================= */



.premium-catalog-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(227,6,19,.10), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f4f5f7 100%);
}

.premium-products-heading{
  max-width:820px;
  margin-bottom:46px;
}

.premium-products-heading span{
  display:inline-block;
  margin-bottom:10px;
  color:var(--eliko-primary);
  font-size:.82rem;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.premium-products-heading h2{
  margin:0 0 18px;
  color:var(--eliko-dark);
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.065em;
}

.premium-products-heading p{
  max-width:660px;
  margin:0;
  color:var(--eliko-muted);
  font-size:1.05rem;
  line-height:1.75;
}

.premium-catalog-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);
  gap:26px;
}

.premium-catalog-main{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  padding:48px;
  border-radius:38px;
  color:#ffffff;
  background:
    radial-gradient(circle at 76% 46%, rgba(227,6,19,.44), transparent 34%),
    linear-gradient(135deg,#09090b 0%,#151518 52%,#360005 100%);
  box-shadow:
    0 24px 70px rgba(15,23,42,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.premium-catalog-main:hover{
  color:#ffffff;
  transform:translateY(-6px);
  box-shadow:
    0 34px 90px rgba(15,23,42,.28),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

.premium-catalog-main::before{
  content:"";
  position:absolute;
  right:-180px;
  top:-180px;
  width:470px;
  height:470px;
  border-radius:50%;
  border:70px solid rgba(255,255,255,.05);
}

.premium-catalog-main::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}

.premium-catalog-content{
  position:relative;
  z-index:3;
}

.premium-badge{
  display:inline-flex;
  margin-bottom:18px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#ff9ca2;
  border:1px solid rgba(255,255,255,.12);
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.premium-catalog-content h3{
  margin:0 0 20px;
  max-width:520px;
  color:#ffffff;
  font-size:clamp(2.8rem,5vw,5.3rem);
  line-height:.9;
  font-weight:950;
  letter-spacing:-.08em;
}

.premium-catalog-content p{
  max-width:460px;
  margin:0 0 28px;
  color:rgba(255,255,255,.72);
  font-size:1.05rem;
  line-height:1.7;
}

.premium-catalog-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:560px;
  margin-bottom:30px;
}

.premium-catalog-points div{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}

.premium-catalog-points small{
  display:block;
  margin-bottom:6px;
  color:rgba(255,255,255,.54);
  font-size:.76rem;
  font-weight:800;
}

.premium-catalog-points strong{
  color:#ffffff;
  font-size:1.05rem;
  font-weight:950;
}

.premium-link{
  display:inline-flex;
  color:#ffffff;
  font-weight:950;
}

.premium-catalog-visual{
  position:relative;
  z-index:2;
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.premium-glow{
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(227,6,19,.45), rgba(227,6,19,.12) 45%, transparent 70%);
  filter:blur(10px);
}

.premium-catalog-visual img{
  position:relative;
  z-index:3;
  width:125%;
  max-width:680px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 44px 46px rgba(0,0,0,.46));
  transform:translateX(30px);
  transition:transform .35s ease, filter .35s ease;
}

.premium-catalog-main:hover .premium-catalog-visual img{
  transform:translateX(18px) translateY(-8px) scale(1.035);
  filter:drop-shadow(0 54px 56px rgba(0,0,0,.55));
}

.premium-gamme-list{
  display:grid;
  gap:26px;
}

.premium-gamme-card{
  position:relative;
  overflow:hidden;
  min-height:189px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:26px;
  border-radius:32px;
  background:
    radial-gradient(circle at 86% 30%, rgba(227,6,19,.14), transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid var(--eliko-border);
  box-shadow:var(--shadow-sm);
  color:var(--eliko-dark);
}

.premium-gamme-card:hover{
  transform:translateY(-6px);
  color:var(--eliko-dark);
  border-color:rgba(227,6,19,.26);
  box-shadow:var(--shadow-md);
}

.premium-gamme-card.featured{
  border-color:rgba(227,6,19,.34);
}

.premium-gamme-card::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:190px;
  height:190px;
  border-radius:50%;
  border:34px solid rgba(15,23,42,.05);
}

.premium-gamme-card div{
  position:relative;
  z-index:2;
  max-width:230px;
}

.premium-gamme-card span{
  display:inline-block;
  margin-bottom:8px;
  color:var(--eliko-primary);
  font-size:.74rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.premium-gamme-card h3{
  margin:0 0 8px;
  color:var(--eliko-dark);
  font-size:2rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.055em;
}

.premium-gamme-card p{
  margin:0;
  color:var(--eliko-muted);
  font-size:.9rem;
  line-height:1.5;
  font-weight:700;
}

.premium-gamme-card img{
  position:absolute;
  right:-18px;
  top:22px;
  width:54%;
  max-width:210px;
  z-index:1;
  object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(15,23,42,.24));
  transition:transform .3s ease;
}

.premium-gamme-card:hover img{
  transform:translateY(-6px) scale(1.04);
}

@media(max-width:1200px){
  .premium-catalog-layout{
    grid-template-columns:1fr;
  }

  .premium-gamme-list{
    grid-template-columns:repeat(3,1fr);
  }

  .premium-gamme-card{
    min-height:250px;
  }
}

@media(max-width:991px){
  .premium-catalog-main{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .premium-catalog-visual{
    min-height:340px;
  }

  .premium-catalog-visual img{
    width:100%;
    max-width:520px;
    transform:none;
  }

  .premium-catalog-main:hover .premium-catalog-visual img{
    transform:translateY(-6px) scale(1.03);
  }

  .premium-gamme-list{
    grid-template-columns:1fr;
  }

  .premium-gamme-card{
    min-height:230px;
  }
}

@media(max-width:768px){
  .premium-catalog-main{
    padding:32px 24px;
    border-radius:30px;
  }

  .premium-catalog-points{
    grid-template-columns:1fr;
  }

  .premium-catalog-content h3{
    font-size:2.7rem;
  }

  .premium-gamme-card{
    padding:24px;
  }
}



.intro-inline-img{
  width:160px;
  max-width:160px;
  height:auto;
  flex-shrink:0;

  filter:drop-shadow(0 10px 18px rgba(0,0,0,.15));
}

.intro-card-product{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:22px !important;
}

.intro-product-img{
  width:120px !important;
  max-width:120px !important;
  height:auto !important;
  flex:0 0 120px !important;
  object-fit:contain !important;
}

.intro-product-text{
  flex:1 !important;
}

.intro-product-text h2,
.intro-product-text p{
  color:#111827;
}

.catalogue-card{
  position:relative;
  height:100%;
  overflow:hidden;
  cursor:pointer;
}

.catalogue-card-link{
  position:absolute;
  inset:0;
  z-index:1;
}

.catalogue-card-top,
.catalogue-card-body{
  position:relative;
  z-index:2;
}

.catalogue-card-actions{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
  pointer-events:auto;
}

.catalogue-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:all .22s ease;
  white-space:nowrap;
}

.catalogue-btn-secondary{
  color:#1f2937;
  background:#ffffff;
  border:1px solid #d7dce5;
}

.catalogue-btn-secondary:hover{
  color:#111827;
  border-color:#111827;
  background:#f8fafc;
  transform:translateY(-2px);
}
.catalogue-btn-primary{
    color:#fff;
    background:#00A651;
    border:1px solid #00A651;
    box-shadow:0 8px 18px rgba(0,166,81,.22);
}

.catalogue-btn-primary:hover{
    color:#fff;
    background:#008A44;
    border-color:#008A44;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,166,81,.30);
}



/* =========================================================
   PAGE CATALOGUE LES 3 GAMMES
========================================================= */

/* Intro products */
.range-intro {
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

.range-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.range-intro-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.range-intro-card {
  position: relative;
  overflow: hidden;

  padding: 32px;
  border-radius: 26px;

  background:
    linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);

  border: 1px solid rgba(0,0,0,.06);

  box-shadow:
    0 6px 18px rgba(0,0,0,.04),
    0 18px 40px rgba(0,0,0,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.range-intro-card:hover {
  transform: translateY(-6px);

  border-color: rgba(227,6,19,.18);

  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 24px 55px rgba(0,0,0,.08);
}

.range-intro-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(
    90deg,
    var(--red),
    #ff5a64
  );
}

.range-intro-card-product {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 190px;
}

.range-intro-product-img {
  width: 118px;
  max-width: 40%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.range-intro-product-text h2 {
  color: var(--black);
  font-size: 1.14rem;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}

.range-intro-product-text p {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.7;
}

/* Tablette */
@media (max-width: 991px) {
  .range-intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .range-intro {
    margin-top: 20px;
  }

  .range-intro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .range-intro-card {
    padding: 20px;
    border-radius: 22px;
  }

  .range-intro-card-product {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: auto;
  }

  .range-intro-product-img {
    width: 88px;
    max-width: 34%;
  }

  .range-intro-product-text h2 {
    font-size: 1.05rem;
    margin-bottom: 6px;
  }

  .range-intro-product-text p {
    font-size: .9rem;
    line-height: 1.55;
  }
}

/* Très petit mobile */
@media (max-width: 420px) {
  .range-intro-product-img {
    width: 76px;
  }

  .range-intro-card {
    padding: 18px;
  }
}

.success-message{
  padding:20px 24px;
  margin-bottom:24px;

  border-radius:18px;

  background:#ecfdf5;
  border:1px solid #bbf7d0;

  color:#166534;

  font-weight:700;
}

.success-message strong{
  display:block;
  margin-bottom:6px;
  font-size:1.05rem;
}

/* =========================================================
   PAGE CONTACT
   ========================================================= */


.contact-building-card{
  overflow:hidden;
  border-radius:30px;
  background:#ffffff;
  border:1px solid var(--eliko-border);
  box-shadow:var(--shadow-md);
}

.contact-building-img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}

.contact-building-content{
  padding:32px;
}

.contact-building-content > span{
  display:inline-block;
  margin-bottom:10px;

  color:var(--eliko-primary);

  font-size:.8rem;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-building-content h2{
  margin-bottom:14px;

  color:var(--eliko-dark);

  font-size:2rem;
  font-weight:950;

  letter-spacing:-.04em;
}

.contact-building-content p{
  margin-bottom:24px;
  color:var(--eliko-muted);
}

.success-message{
  margin-bottom:24px;
  padding:20px 24px;

  border-radius:18px;

  background:#ecfdf5;
  border:1px solid #bbf7d0;

  color:#166534;

  font-weight:700;
}

.success-message strong{
  display:block;
  margin-bottom:6px;
}



/* =========================================================
   video
   ========================================================= */

.video-wrapper{
  overflow:hidden;
  border-radius:30px;

  background:#000;

  box-shadow:var(--shadow-md);
}

.video-wrapper video{
  width:100%;
  display:block;
}


/* =========================================================
   page company
   ========================================================= */


.company-video{
  max-width:760px;
  margin:0 auto;
  overflow:hidden;
  border-radius:28px;
  background:#000;
  box-shadow:var(--shadow-md);
}

.company-video video{
  width:100%;
  display:block;
}

.company-figures{
  background:var(--eliko-soft);
}

.figure-card{
  height:100%;
  padding:40px 30px;

  text-align:center;

  background:#fff;
  border:1px solid var(--eliko-border);
  border-radius:24px;

  box-shadow:var(--shadow-sm);

  transition:.3s ease;
}

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

.figure-card strong{
  display:block;

  margin-bottom:12px;

  color:var(--eliko-primary);

  font-size:3rem;
  font-weight:950;
  line-height:1;
}

.figure-card span{
  color:var(--eliko-dark);

  font-size:1rem;
  font-weight:700;
}

/* =========================================================
   PAGE COMPANY
   ========================================================= */

.company-light{
  background:#f5f7fa;
}

.company-intro-section{
  background:#ffffff;
}

.company-number-card{
  padding:38px 30px;
}

.company-number{
  margin-bottom:16px;

  color:var(--eliko-primary);

  font-size:4rem;
  font-weight:950;
  line-height:1;

  letter-spacing:-0.06em;
}

.company-number-card h3{
  margin-bottom:12px;
}

.company-image-card{
  overflow:hidden;

  border-radius:34px;

  background:#ffffff;
  border:1px solid var(--eliko-border);

  box-shadow:var(--shadow-md);
}

.company-image-card img{
  width:100%;
  height:460px;

  display:block;

  object-fit:cover;
}

.company-video{
  max-width:760px;
  margin:0 auto;

  overflow:hidden;

  border-radius:28px;

  background:#000000;

  box-shadow:var(--shadow-md);
}

.company-video video{
  width:100%;
  display:block;
}

.company-dark-section{
  background:var(--eliko-dark);
}

.company-dark-section .section-heading h2{
  color:#ffffff;
}

.company-dark-section .section-heading p{
  color:rgba(255,255,255,.68);
}

.company-dark-card{
  height:100%;

  padding:30px;

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);

  color:#ffffff;

  transition:var(--transition);
}

.company-dark-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.10);
}

.company-dark-card h3{
  margin-bottom:12px;

  color:#ffffff;

  font-weight:900;
}

.company-dark-card p{
  margin:0;

  color:rgba(255,255,255,.68);
}

@media(max-width:991px){

  .company-image-card img{
    height:360px;
  }

}

@media(max-width:575px){

  .company-number{
    font-size:3.2rem;
  }

  .company-image-card img{
    height:280px;
  }

}

/* =========================================================
   PAGE contact - partenaire
   ========================================================= */
.official-distributor{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:40px;

  padding:40px;

  background:#f5f7fa;

  border:1px solid var(--eliko-border);
  border-radius:28px;

  box-shadow:var(--shadow-sm);
}

.official-distributor-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.official-distributor-logo img{
  width:200px;
  max-width:100%;
  height:auto;
}

.official-distributor-content span{
  display:inline-block;

  margin-bottom:10px;

  color:var(--eliko-primary);

  font-size:.8rem;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.official-distributor-content h3{
  margin-bottom:12px;

  font-size:2rem;
  font-weight:950;
}

.official-distributor-content p{
  margin-bottom:24px;
}

.official-distributor-infos{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

.official-distributor-infos strong{
  display:block;
  margin-bottom:4px;
}

@media(max-width:991px){

  .official-distributor{
    grid-template-columns:1fr;
    text-align:center;
  }

  .official-distributor-infos{
    justify-content:center;
  }

}

.official-distributor-contact{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:30px;
}

.contact-pill{
  display:flex;
  align-items:center;
  gap:14px;

  padding:16px 20px;

  background:#fff;
  border:1px solid var(--eliko-border);
  border-radius:18px;

  text-decoration:none;

  transition:.3s ease;

  min-width:220px;
}

.contact-pill:hover{
  transform:translateY(-3px);

  border-color:var(--eliko-primary);

  box-shadow:var(--shadow-sm);
}

.contact-pill-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:rgba(185,28,28,.08);

  font-size:1.2rem;
}

.contact-pill small{
  display:block;

  color:var(--eliko-muted);

  font-size:.78rem;
}

.contact-pill strong{
  color:var(--eliko-dark);

  font-size:.95rem;
  font-weight:800;
}


/* =========================================================
   header - cartes
   ========================================================= */

.mega-card-product{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:100%;
    padding:25px 15px;
    border-radius:16px;
     background:
        radial-gradient(
            circle at top center,
            rgba(255,255,255,0.9) 0%,
            rgba(245,246,248,0.9) 45%,
            rgba(235,237,240,0.9) 100%
        );
    border:1px solid #e9ecef;
    transition:all .3s ease;
    overflow:hidden;
    position:relative;
}

.mega-card-product img{
    width:100%;
    max-width:190px;
    margin-bottom:18px;
    transition:all .35s ease;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.12));
}

.mega-card-product strong{
    display:block;
    font-size:18px;
    color:#111111;
    margin-bottom:8px;
    font-weight:700;
}

.mega-card-product small{
    display:block;
    color:#666666;
    line-height:1.5;
}

.mega-card-product:hover{
    transform:translateY(-6px);
    border-color:#e30613;
    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}

.mega-card-product:hover img{
    transform:scale(1.08);
    filter:
        drop-shadow(0 12px 25px rgba(0,0,0,.15))
        drop-shadow(0 0 12px rgba(227,6,19,.25));
}

.mega-card-product:after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:#e30613;
    transform:scaleX(0);
    transition:.3s ease;
}

.mega-card-product:hover:after{
    transform:scaleX(1);
}



/* =========================================================
   page index - integration
   ========================================================= */

.integration-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#ffffff 0%,#f4f5f7 100%);
}

.integration-section::before{
    display:none;
}
.integration-heading{
  position:relative;
  z-index:2;
  max-width:850px;
  margin-bottom:46px;
}

.integration-heading span{
  display:inline-block;
  margin-bottom:10px;
  color:var(--eliko-primary);
  font-size:.82rem;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.integration-heading h2{
  margin:0 0 18px;
  color:var(--eliko-dark);
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.065em;
}

.integration-heading p{
  max-width:680px;
  margin:0;
  color:var(--eliko-muted);
  font-size:1.05rem;
  line-height:1.75;
}

.integration-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 84px 1fr;
  gap:24px;
  align-items:center;
}

.integration-card{
  min-height:380px;
  padding:34px;
  border-radius:32px;
  transition:.3s ease;
}

.integration-card:hover{
  transform:translateY(-6px);
}

.integration-card-light{
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid var(--eliko-border);
  box-shadow:var(--shadow-sm);
}

.integration-card-dark{
  color:#ffffff;
  background:
    radial-gradient(circle at 85% 20%, rgba(227,6,19,.20), transparent 34%),
    linear-gradient(135deg,#0b1220 0%,#151518 60%,#250003 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md);
}

.integration-card-top{
  margin-bottom:28px;
}

.integration-card-top span{
  display:block;
  margin-bottom:8px;
  color:var(--eliko-primary);
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.integration-card-dark .integration-card-top span{
  color:#ff9ca2;
}

.integration-card-top strong{
  display:block;
  color:var(--eliko-dark);
  font-size:2rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.055em;
}

.integration-card-dark .integration-card-top strong{
  color:#ffffff;
}

.integration-chain{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:30px;
}

.integration-chain div{
  position:relative;
  padding:22px 18px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:var(--eliko-dark);
  font-weight:950;
  text-align:center;
  box-shadow:
    0 8px 18px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.integration-chain div::after{
  content:"+";
  position:absolute;
  right:-12px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--eliko-primary);
  color:#ffffff;
  font-size:.9rem;
  font-weight:950;
  z-index:2;
}

.integration-chain div:nth-child(2)::after,
.integration-chain div:last-child::after{
  display:none;
}

.integration-single{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:174px;
  padding:24px;
  margin-bottom:30px;
  border-radius:26px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}

.integration-single img{
  width:170px;
  max-width:44%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.42));
}

.integration-single strong{
  display:block;
  margin-bottom:8px;
  color:#ffffff;
  font-size:1.35rem;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.04em;
}

.integration-single small{
  color:rgba(255,255,255,.68);
  font-weight:750;
}

.integration-card p{
  margin:0;
  color:var(--eliko-muted);
  font-weight:700;
  line-height:1.7;
}

.integration-card-dark p{
  color:rgba(255,255,255,.72);
}

.integration-vs{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  border-radius:50%;
  background:#ffffff;
  color:var(--eliko-primary);
  border:1px solid var(--eliko-border);
  box-shadow:var(--shadow-sm);
  font-weight:950;
}

@media(max-width:991px){
  .integration-layout{
    grid-template-columns:1fr;
  }

  .integration-vs{
    width:64px;
    height:64px;
  }
}

@media(max-width:575px){
  .integration-card{
    min-height:auto;
    padding:26px;
    border-radius:28px;
  }

  .integration-chain{
    grid-template-columns:1fr;
  }

  .integration-chain div::after{
    display:none;
  }

  .integration-single{
    flex-direction:column;
    text-align:center;
  }

  .integration-single img{
    max-width:190px;
    width:100%;
  }
}


.range-family-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.range-family-visual {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* =========================================================
image company
   ========================================================= */

.company-images {
  position: relative;
  padding: 20px 20px 60px 0;
}

.company-images img {
  width: 100%;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

.main-image {
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.secondary-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  border: 8px solid #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.company-images img:hover {
  transform: scale(1.03);
  transition: all 0.4s ease;
}


/* =========================================================
google trad
   ========================================================= */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-switcher i {
    color: #fff;
    font-size: 14px;
}

.language-switcher .goog-te-gadget {
    font-size: 0 !important;
}

.language-switcher .goog-te-gadget img,
.language-switcher .goog-te-gadget span {
    display: none !important;
}

.language-switcher select.goog-te-combo {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    padding-right: 5px;
}

.language-switcher select.goog-te-combo option {
    color: #333;
}

/* =========================================================
video page index
   ========================================================= */
..company-overview{
    position:relative;
    overflow:hidden;
}

.company-overview video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.15;
    z-index:0;
}

.company-overview .container{
    position:relative;
    z-index:2;
}

/* =========================================================
footer
   ========================================================= */
.footer-contact-btn{
    display:block;
    width:100%;
    max-width:220px;
    margin:20px auto 0;
    padding:14px 24px;
    background:transparent;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    border:2px solid rgba(255,255,255,.7);
    border-radius:8px;
    transition:.3s;
}

.footer-contact-btn:hover{
    background:#d62828;
    border-color:#d62828;
    color:#fff;
}