.test{
  border:1px solid red;
}
:root {
	/* General */
	--border-radius: 4px;
	--border-radius2x: 8px;
	--default: #707070;

	/* Base Colors */
	--orange: #ff8500;
	--orange-light: rgba(255, 133, 0, 0.4);
	--black: #080808;
	--anth: #171717;
	--muted: #707070;
	--line: rgba(255, 255, 255, 0.14);

	/* Main Theme */
	--primary: #ff8500;
	--primary-100: #e67800;
	--primary-200: #d96f00;
	--primary-300: #cc6600;
	--primary--100: #ff951f;
	--primary--200: #ff9f33;
	--primary--300: #ffa947;

	--primary-rgba-0: rgba(255, 133, 0, 0);
	--primary-rgba-10: rgba(255, 133, 0, 0.1);
	--primary-rgba-20: rgba(255, 133, 0, 0.2);
	--primary-rgba-30: rgba(255, 133, 0, 0.3);
	--primary-rgba-40: rgba(255, 133, 0, 0.4);
	--primary-rgba-50: rgba(255, 133, 0, 0.5);
	--primary-rgba-60: rgba(255, 133, 0, 0.6);
	--primary-rgba-70: rgba(255, 133, 0, 0.7);
	--primary-rgba-80: rgba(255, 133, 0, 0.8);
	--primary-rgba-90: rgba(255, 133, 0, 0.9);

	/* Secondary */
	--secondary: #171717;
	--secondary-100: #141414;
	--secondary-200: #111111;
	--secondary-300: #0d0d0d;
	--secondary--100: #222222;
	--secondary--200: #2a2a2a;
	--secondary--300: #333333;

	--secondary-rgba-0: rgba(23, 23, 23, 0);
	--secondary-rgba-10: rgba(23, 23, 23, 0.1);
	--secondary-rgba-20: rgba(23, 23, 23, 0.2);
	--secondary-rgba-30: rgba(23, 23, 23, 0.3);
	--secondary-rgba-40: rgba(23, 23, 23, 0.4);
	--secondary-rgba-50: rgba(23, 23, 23, 0.5);
	--secondary-rgba-60: rgba(23, 23, 23, 0.6);
	--secondary-rgba-70: rgba(23, 23, 23, 0.7);
	--secondary-rgba-80: rgba(23, 23, 23, 0.8);
	--secondary-rgba-90: rgba(23, 23, 23, 0.9);

	/* Tertiary */
	--tertiary: #707070;
	--tertiary-100: #666666;
	--tertiary-200: #5c5c5c;
	--tertiary-300: #525252;
	--tertiary--100: #7a7a7a;
	--tertiary--200: #858585;
	--tertiary--300: #909090;

	/* Quaternary */
	--quaternary: #080808;
	--quaternary-100: #060606;
	--quaternary-200: #050505;
	--quaternary-300: #030303;
	--quaternary--100: #111111;
	--quaternary--200: #181818;
	--quaternary--300: #202020;

	/* Dark */
	--dark: #080808;
	--dark-100: #060606;
	--dark-200: #050505;
	--dark-300: #030303;
	--dark--100: #111111;
	--dark--200: #181818;
	--dark--300: #202020;

	/* Light */
	--light: #ffffff;
	--light-100: #f5f5f5;
	--light-200: #eeeeee;
	--light-300: #e5e5e5;

	/* Inverse */
	--primary-inverse: #ffffff;
	--secondary-inverse: #ffffff;
	--tertiary-inverse: #ffffff;
	--quaternary-inverse: #ffffff;
	--dark-inverse: #ffffff;
	--light-inverse: #080808;

	/* Grey Scale */
	--grey: #707070;
	--grey-100: #f5f5f5;
	--grey-200: #ebebeb;
	--grey-300: #e0e0e0;
	--grey-400: #cfcfcf;
	--grey-500: #bdbdbd;
	--grey-600: #a8a8a8;
	--grey-700: #909090;
	--grey-800: #707070;
	--grey-900: #505050;
	--grey-1000: #303030;

	/* Assets */
	--hero-img: url('assets/img/IMG_7817.jpg');

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--light);
  --bs-dark: var(--dark);
  --bs-primary-rgb: 255, 133, 0;
  --bs-secondary-rgb: 18, 52, 86;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 251;
  --bs-white-rgb: 248, 249, 251;
  --bs-dark-rgb: 33, 37, 41;
  --bs-body-bg: var(--light);
  --bs-body-color: var(--dark);
}

.btn-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
} 
.btn-primary:hover, .btn-primary:focus {
  background-color: #e56718;
  border-color: #db610d;
  color: #fff;
}

.btn-secondary {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #1c314e;
  border-color: #142131;
  color: #fff;
}

.btn-success {
  color: #fff;
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}
.btn-success:hover, .btn-success:focus {
  background-color: #198754cc;
  border-color: #157347;
}

.btn-info {
  color: #fff;
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}
.btn-info:hover, .btn-info:focus {
  background-color: #12a2dd;
  border-color: #109bcf;
  color: #fff;
}

.btn-warning {
  color: #212529;
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}
.btn-warning:hover, .btn-warning:focus {
  background-color: #ffcd39;
  border-color: #ffc720;
  color: #212529;
}

.btn-danger {
  color: #fff;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn-danger:hover, .btn-danger:focus {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}

.btn-trash {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;

  &:hover {
    background-color: #bd2130;
    border-color: #a71d2a;
    color: #fff;
  }
}

.btn-light {
  color: #212529;
  background-color: var(--bs-light);
  border-color: var(--bs-light);
}
.btn-light:hover, .btn-light:focus {
  background-color: #e2e6ea;
  border-color: #dae0e5;
  color: #212529;
}

.btn-dark {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}
.btn-dark:hover, .btn-dark:focus {
  background-color: #23272b;
  border-color: #1d2124;
  color: #fff;
}

.text-primary {
  color: var(--orange) !important;
}

a{
  color:inherit;
  text-decoration: none;
  transition: all 0.3s ease;
 
}
a:hover{
  color: var(--brand-pep-darker)!important;
  text-decoration: none;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111;
  background: #fff;
  overflow-x: hidden
}

.font-display {
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .02em
}

.navbar {
  height: 82px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, .06)
}

.navbar-brand img {
  height: 58px
}

.nav-link {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #101010 !important;
  font-weight: 700
}

.nav-link:hover,
.nav-link.active {
  color: var(--orange) !important
}

.btn-emek {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: .78rem 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .08em
}

.btn-emek:hover {
  background: #111;
  border-color: #111;
  color: #fff
}

.btn-outline-light,
.btn-outline-dark {
  border-radius: 999px;
  padding: .78rem 1.25rem;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  font-weight: 800
}

.section {
  padding: 92px 0
}

.eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--orange);
  font-weight: 900
}

.section-title {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 1.02;
  text-transform: uppercase;
  font-weight: 700
}

.section-subtitle {
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: #666;
  line-height: 1.8
}

.hero {
  min-height: calc(100vh - 82px);
  padding-top: 82px;
  background: #090909;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .18)), center/cover fixed;
  transform: scale(1.03)
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 28%, rgba(255, 133, 0, .18), transparent 24%), linear-gradient(135deg, transparent 0 56%, rgba(255, 255, 255, .05) 56% 57%, transparent 57%)
}

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

.hero h1 {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 5.4vw, 5.4rem);
  line-height: .94;
  max-width: 820px
}

.hero p {
  max-width: 610px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
  line-height: 1.75
}

.hero--intro {
  align-items: center
}

.hero--intro .container {
  padding-bottom: clamp(48px, 7vh, 80px)
}

.architect-bg {
  background: #0e0e0e;
  color: #fff;
  position: relative;
  overflow: hidden
}

.architect-bg:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0 18%, transparent 18% 45%, rgba(255, 255, 255, .045) 45% 58%, transparent 58%), radial-gradient(circle at 85% 15%, rgba(255, 133, 0, .16), transparent 25%);
  opacity: .9
}

.architect-bg>.container {
  position: relative
}

.family-card,
.brand-card,
.product-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 28px;
  overflow: hidden;
  transition: .35s ease;
  height: 100%;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .06)
}

.family-card:hover,
.brand-card:hover,
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .12)
}

.family-visual {
  height: 245px;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: 28px;
  position: relative
}

.family-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 133, 0, .24), transparent 42%)
}

.family-visual img {
  position: relative;
 
  
  object-fit: cover;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .55))
}

.family-card .content,
.brand-card .content,
.product-card .content {
  padding: 25px
}

.kicker {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #888;
  font-weight: 900
}

.card-title-sm {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 1.35rem
}

.dark-panel {
  background: #101010;
  color: #fff;
  border-radius: 38px;
  overflow: hidden;
  position: relative
}

.dark-panel .photo {
  min-height: 540px;
  background: url('https://images.unsplash.com/photo-1672552226380-486fe900b322?auto=format&fit=crop&w=1400&q=85') center/cover fixed
}

.dark-panel .copy {
  padding: clamp(35px, 5vw, 70px)
}

.service-item {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px 0
}

.service-item h3 {
  font-size: 1.1rem;
  margin: 0
}

.logo-tile {
  height: 160px;
  border-radius: 24px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  transition: .3s
}

.logo-tile:hover {
  background: #181818;
  transform: translateY(-4px)
}

.logo-tile img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain
}

.swiper {
  padding: 14px 6px 54px
}

.swiper-pagination-bullet-active {
  background: var(--orange)
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--orange)
}

.split-photo {
  min-height: 460px;
  border-radius: 34px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.split-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.contact-box {
  background: #101010;
  color: #fff;
  border-radius: 34px;
  padding: 40px
}

.form-control,
.form-select {
  border-radius: 16px;
  padding: .9rem 1rem;
  border: 1px solid rgba(0, 0, 0, .12)
}

.footer {
  background: #060606;
  color: #fff;
  padding: 55px 0 30px
}

.footer a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none
}

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

.page-hero {
  padding: 150px 0 80px;
  background: #0b0b0b;
  color: #fff;
  position: relative;
  overflow: hidden
}

.page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .38)), var(--hero-img) center/cover fixed;
  opacity: .9
}

.page-hero .container {
  position: relative
}

.breadcrumb-mini {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55)
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.product-card img {
  height: 190px;
  width: 100%;
  object-fit: cover
}

.sticky-filter {
  position: sticky;
  top: 100px
}

.list-clean {
  list-style: none;
  margin: 0;
  padding: 0
}

.list-clean li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.list-clean li:before {
  content: "—";
  color: var(--orange);
  font-weight: 900;
  margin-right: 12px
}

@media(max-width:991px) {
  .navbar {
    height: auto
  }

  .hero {
    padding: 120px 0 70px
  }

  .hero:before,
  .dark-panel .photo,
  .split-photo,
  .page-hero:before {
    background-attachment: scroll
  }

  .section {
    padding: 64px 0
  }

  .catalogue-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:575px) {
  .hero h1 {
    font-size: 2.4rem
  }

  .catalogue-grid {
    grid-template-columns: 1fr
  }

  .family-visual {
    height: 210px
  }

  .navbar-brand img {
    height: 46px
  }
}

/* Version PHP : logo à gauche */
.navbar .navbar-brand {
  margin-left: 0 !important;
  margin-right: 2rem !important;
}

.navbar .container {
  justify-content: flex-start;
}

@media(min-width:992px) {
  .navbar-collapse {
    flex-grow: 1
  }

  .navbar-nav {
    margin-left: 1.5rem
  }
}

/* Page application emekDistribution */
.page-hero--app .store-badges-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start
}

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

.store-badge {
  display: inline-block;
  transition: transform .25s ease, opacity .25s
}

.store-badge:hover {
  transform: translateY(-3px);
  opacity: .92
}

.store-badge img {
  height: 52px;
  width: auto;
  display: block
}

.delivery-schedule {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.delivery-schedule-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 26px;
  background: #f7f7f7;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, .06)
}

.delivery-day {
  flex: 0 0 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--orange);
  color: #fff;
  font-family: Oswald, sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1.1;
  text-align: center
}

.phones-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 36px);
  padding: 10px 0 20px
}

.phone-mockup {
  text-align: center;
  flex: 0 1 260px
}

.phone-mockup--featured .phone-frame {
  transform: scale(1.06) translateY(-12px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45)
}

.phone-caption {
  margin-top: 16px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  font-weight: 800
}

.phone-frame {
  width: 260px;
  margin: 0 auto;
  background: linear-gradient(145deg, #2a2a2a, #0a0a0a);
  border-radius: 38px;
  padding: 12px 10px 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .08);
  position: relative
}

.phone-notch {
  width: 92px;
  height: 22px;
  background: #050505;
  border-radius: 0 0 16px 16px;
  margin: 0 auto 8px;
  position: relative;
  z-index: 2
}

.app-screen {
  background: #f4f4f6;
  border-radius: 28px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 11px;
  color: #1a1a1a;
  position: relative
}

.app-status {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #111
}

.app-signal {
  display: flex;
  gap: 4px;
  font-size: 11px
}

.app-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8
}

.app-logo-mini {
  height: 22px;
  width: auto
}

.app-title {
  font-weight: 800;
  font-size: 12px;
  color: var(--orange);
  letter-spacing: .02em
}

.app-greeting {
  padding: 12px 14px 6px;
  margin: 0;
  font-size: 11px;
  color: #555
}

.app-delivery-chip {
  margin: 0 14px 12px;
  padding: 10px 12px;
  background: #fff3e8;
  border-radius: 12px;
  font-size: 10px;
  color: #333;
  border: 1px solid rgba(255, 133, 0, .25)
}

.app-delivery-chip i {
  color: var(--orange);
  margin-right: 4px
}

.app-section-label {
  padding: 0 14px 8px;
  margin: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #888;
  font-weight: 800
}

.app-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 14px 12px;
  flex: 1
}

.app-cat {
  background: #fff;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid #e5e5e5;
  font-weight: 700;
  font-size: 10px
}

.app-cat--active {
  border-color: var(--orange);
  background: #fff8f0;
  box-shadow: 0 8px 20px rgba(255, 133, 0, .15)
}

.app-cat-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 6px
}

.app-tabbar {
  display: flex;
  justify-content: space-around;
  padding: 10px 8px 12px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  font-size: 9px;
  font-weight: 700;
  color: #999
}

.app-tabbar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px
}

.app-tabbar .active {
  color: var(--orange)
}

.app-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  border-bottom: 1px solid #ebebeb
}

.app-list-meta {
  padding: 8px 14px;
  margin: 0;
  font-size: 9px;
  color: #666;
  background: #fafafa;
  border-bottom: 1px solid #eee
}

.app-product-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px 72px;
  flex: 1;
  overflow: hidden
}

.app-product-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 8px;
  border: 1px solid #ececec
}

.app-product-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.app-product-thumb img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain
}

.app-product-info {
  flex: 1;
  min-width: 0
}

.app-product-info strong {
  display: block;
  font-size: 10px;
  line-height: 1.25
}

.app-product-info span {
  font-size: 8px;
  color: #777
}

.app-qty {
  display: flex;
  align-items: center;
  gap: 4px
}

.app-qty button {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: #333
}

.app-qty button.plus,
.app-qty button.add-only {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff
}

.app-qty span {
  min-width: 16px;
  text-align: center;
  font-weight: 800;
  font-size: 11px
}

.app-cart-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #111;
  color: #fff;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700
}

.app-cart-bar button {
  background: var(--orange);
  border: 0;
  color: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase
}

.app-delivery-title {
  padding: 14px 14px 4px;
  margin: 0;
  font-size: 14px;
  font-weight: 800
}

.app-delivery-hint {
  padding: 0 14px 12px;
  margin: 0;
  font-size: 9px;
  color: #666
}

.app-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 10px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  border: 2px solid #e8e8e8;
  font-size: 10px
}

.app-slot--active {
  border-color: var(--orange);
  background: #fffaf5
}

.app-slot strong {
  display: block;
  font-size: 12px
}

.app-slot span {
  display: block;
  color: #777;
  font-size: 9px
}

.app-slot-deadline {
  margin-left: auto;
  font-size: 8px;
  color: var(--orange);
  font-weight: 800;
  text-align: right;
  max-width: 90px;
  line-height: 1.3
}

.app-slot--active .bi-check-circle-fill {
  color: var(--orange);
  font-size: 18px;
  flex-shrink: 0
}

.app-order-summary {
  margin: 14px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 10px
}

.app-order-summary div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px
}

.app-cta-main {
  margin: 0 14px 16px;
  padding: 12px;
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em
}

.app-screen--list .app-product-list {
  padding-bottom: 86px
}

@media(max-width:991px) {
  .phone-mockup--featured .phone-frame {
    transform: none
  }

  .phones-showcase {
    gap: 28px
  }

  .store-badges-hero {
    justify-content: center;
    margin-top: 8px
  }
}

@media(max-width:575px) {
  .phone-frame {
    width: 240px
  }

  .app-screen {
    min-height: 440px
  }

  .store-badge img {
    height: 46px
  }
}

/* Bandeau engagements (6 piliers + photos) */
.engagements-section {
  position: relative;
  background: #111;
  overflow: hidden;
  padding-bottom: 0
}

.engagements-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 133, 0, .08), transparent 55%);
  pointer-events: none
}

.engagements-head {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(24px, 3vw, 36px);
  text-align: center
}

.engagements-head .eyebrow {
  color: var(--orange)
}

.engagements-head-title {
  color: #fff;
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem)
}

.engagements-slats-wrap {
  overflow: hidden;
  position: relative
}

.engagements-slats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px clamp(32px, 5vw, 48px);
  max-width: 1320px;
  margin: 0 auto
}

.engagements-slat {
  display: block;
  text-decoration: none;
  color: #fff;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease, z-index 0s
}

.engagements-slat-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  height: 100%;
  min-height: 140px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12)
}

.engagements-slat-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease
}

.engagements-slat-overlay {
  position: absolute;
  inset: 0;
  transition: opacity .35s ease
}

.engagements-slat--dark .engagements-slat-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .88) 100%)
}

.engagements-slat--light .engagements-slat-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, .78) 100%)
}

.engagements-slat-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%
}

.engagements-slat-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2)
}

.engagements-slat-copy {
  flex: 1;
  min-width: 0
}

.engagements-slat-title {
  font-family: Oswald, sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4)
}

.engagements-slat-title strong {
  font-weight: 700;
  display: block;
  font-size: 1.2em;
  margin-top: 2px;
  color: #fff
}

.engagements-slat-copy p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35)
}

.engagements-slat-cta {
  display: none
}

.engagements-slat--link:hover .engagements-slat-bg,
.engagements-slat--link:focus-visible .engagements-slat-bg {
  transform: scale(1.08)
}

.engagements-slat--link:hover .engagements-slat-overlay,
.engagements-slat--link:focus-visible .engagements-slat-overlay {
  opacity: .92
}

.engagements-slat--link:active .engagements-slat-inner {
  transform: scale(.98)
}

/* Tablette : grille 3×2 */
@media(min-width:768px) {
  .engagements-slats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 24px clamp(40px, 5vw, 56px)
  }

  .engagements-slat-inner {
    flex-direction: column;
    padding: 0;
    min-height: 220px;
    border-radius: 22px
  }

  .engagements-slat-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px 22px;
    height: 100%;
    justify-content: flex-end;
    min-height: 220px
  }

  .engagements-slat-icon {
    margin-bottom: 8px
  }

  .engagements-slat-title {
    font-size: clamp(.9rem, 1.5vw, 1.05rem)
  }

  .engagements-slat--link .engagements-slat-inner {
    cursor: pointer
  }

  .engagements-slat--link:hover .engagements-slat-inner {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35)
  }

  .engagements-slat-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-end;
    border: none
  }

  .engagements-slat--link .engagements-slat-content {
    padding-right: 16px
  }
}

/* Desktop : bande inclinée 6 colonnes */
@media(min-width:1200px) {
  .engagements-head {
    text-align: left;
    padding-bottom: 28px
  }

  .engagements-slats-wrap {
    padding: 0
  }

  .engagements-slats {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    max-width: none;
    padding: 0 0 clamp(48px, 6vw, 64px);
    min-height: 300px
  }

  .engagements-slat {
    flex: 1 1 0;
    margin-left: -20px;
    min-width: 0;
    z-index: calc(var(--slat-i) + 1)
  }

  .engagements-slat:first-child {
    margin-left: 0;
    z-index: 1
  }

  .engagements-slat-inner {
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 0;
    min-height: 300px;
    padding: 0;
    border: none;
    clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
    transition: transform .35s ease, box-shadow .35s ease
  }

  .engagements-slat-bg,
  .engagements-slat-overlay {
    clip-path: inherit
  }

  .engagements-slat:first-child .engagements-slat-inner {
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%)
  }

  .engagements-slat:last-child .engagements-slat-inner {
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%)
  }

  .engagements-slat-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px 32px;
    min-height: 300px;
    justify-content: flex-end;
    gap: 0
  }

  .engagements-slat:first-child .engagements-slat-content {
    padding-left: 28px
  }

  .engagements-slat:last-child .engagements-slat-content {
    padding-right: 28px
  }

  .engagements-slat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: 1.35rem;
    margin-bottom: 14px
  }

  .engagements-slat-title {
    font-size: clamp(.78rem, 1vw, .95rem)
  }

  .engagements-slat-title strong {
    font-size: 1.25em
  }

  .engagements-slat-copy p {
    font-size: clamp(.68rem, .85vw, .76rem);
    line-height: 1.4
  }

  .engagements-slat-cta {
    display: none
  }

  .engagements-slat--link:hover {
    z-index: 10
  }

  .engagements-slat--link:hover .engagements-slat-inner {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45)
  }
}

@media(min-width:1400px) {
  .engagements-slat {
    margin-left: -24px
  }

  .engagements-slat-inner {
    min-height: 320px;
    padding: 32px 26px 36px
  }

  .engagements-slat-title {
    font-size: 1rem
  }

  .engagements-slat-copy p {
    font-size: .8rem
  }
}

/* Bannière flotte livraison */
.fleet-banner {
  position: relative;
  min-height: clamp(380px, 52vh, 520px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden
}

.fleet-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0
}

.fleet-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

@media(max-width:991px) {
  .fleet-banner-bg img {
    object-position: center 35%
  }

  .fleet-banner-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .6) 100%)
  }
}

.fleet-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .25) 100%)
}

.fleet-banner-content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 8vw, 88px) 0;
  max-width: 640px
}

.fleet-banner-eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 12px
}

.fleet-banner-eyebrow i {
  color: var(--orange);
  margin-right: 6px
}

.fleet-banner-title {
  font-family: Oswald, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 16px;
  font-weight: 500
}

.fleet-banner-title span {
  display: block;
  font-size: 1.12em;
  font-weight: 700;
  color: #fff
}

.fleet-banner-lead {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: rgba(255, 255, 255, .82);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 520px
}

.fleet-banner-lead strong {
  color: var(--orange)
}

@media(max-width:575px) {
  .engagements-slats {
    padding: 0 12px 28px;
    gap: 10px
  }

  .engagements-slat-inner {
    min-height: 160px
  }

  .engagements-slat-content {
    padding: 18px 16px !important;
    min-height: 160px;
    gap: 14px;
    flex-direction: row;
    align-items: flex-start
  }

  .engagements-slat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 1.2rem;
    margin-bottom: 0
  }

  .engagements-slat-title {
    font-size: .95rem
  }

  .fleet-banner-title {
    font-size: 1.85rem
  }
}

/* Section chiffres clés (autonome) */
.chiffres-section {
  padding: clamp(56px, 8vw, 88px) 0;
  background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  position: relative;
  overflow: hidden
}

.chiffres-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), #ffad4d, var(--orange));
  background-size: 200% 100%;
  animation: chiffresBar 4s ease-in-out infinite
}

@keyframes chiffresBar {

  0%,
  100% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.chiffres-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(28px, 4vw, 44px)
}

.chiffres-intro {
  max-width: 420px;
  margin: 0;
  font-size: .95rem;
  color: #666;
  line-height: 1.7
}

.chiffres-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px)
}

.chiffre-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.5vw, 28px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
  transition: transform .35s cubic-bezier(.34, 1.3, .64, 1), box-shadow .35s ease, border-color .35s ease;
  position: relative;
  overflow: hidden
}

.chiffre-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease
}

.chiffre-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(255, 133, 0, .15);
  border-color: rgba(255, 133, 0, .35)
}

.chiffre-card:hover:before {
  transform: scaleX(1)
}

.chiffre-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.chiffre-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #111;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: background .3s, color .3s
}

.chiffre-card:hover .chiffre-icon {
  background: var(--orange);
  color: #fff
}

.chiffre-badge {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--orange);
  background: rgba(255, 133, 0, .12);
  padding: 4px 10px;
  border-radius: 999px
}

.chiffre-value {
  font-family: Oswald, sans-serif;
  font-size: clamp(2.6rem, 4.5vw, 3.5rem);
  line-height: 1;
  margin: 0 0 8px;
  font-weight: 700;
  color: #111
}

.chiffre-suffix {
  font-size: .55em;
  color: var(--orange);
  margin-left: 2px
}

.chiffre-label {
  margin: 0 0 12px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: #555;
  line-height: 1.35
}

.chiffre-link {
  margin-top: auto;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s
}

.chiffre-card:hover .chiffre-link {
  opacity: 1;
  transform: translateY(0)
}

.chiffre-link i {
  transition: transform .25s
}

.chiffre-card:hover .chiffre-link i {
  transform: translateX(4px)
}

.chiffre-card--app {
  background: linear-gradient(160deg, #111 0%, #1a1a1a 100%);
  border-color: #222;
  color: #fff
}

.chiffre-card--app:before {
  background: linear-gradient(90deg, var(--orange), #ffc266)
}

.chiffre-card--app .chiffre-value {
  color: #fff
}

.chiffre-card--app .chiffre-label {
  color: rgba(255, 255, 255, .7)
}

.chiffre-card--app .chiffre-icon {
  background: var(--orange);
  color: #fff
}

.chiffre-card--app:hover {
  box-shadow: 0 28px 60px rgba(0, 0, 0, .35)
}

.chiffre-card--app .chiffre-link {
  color: #ffc266;
  opacity: 1;
  transform: none
}

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

  .chiffres-head {
    flex-direction: column;
    align-items: flex-start
  }

  .chiffre-link {
    opacity: 1;
    transform: none
  }
}

@media(max-width:575px) {
  .chiffres-track {
    grid-template-columns: 1fr
  }

  .chiffre-value {
    font-size: 2.4rem
  }
}

/* Scroll hero */
.scroll-down-cta {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  opacity: .93;
}

.scroll-down-icon-animate {
  font-size: 48px;
  color: var(--orange);
  animation: scrollBounce 1.25s infinite cubic-bezier(.5, 1.6, .34, 1);
  text-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(8px); }
}

.scroll-down-text {
  margin-top: 4px;
  font-size: 15px;
  color: #fff;
  letter-spacing: .07em;
  opacity: .73;
  font-weight: 500;
}

/* Produits phares */
.produit-phare-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  color: #111;
  transition: transform .2s ease, box-shadow .2s ease;
}

.produit-phare-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.produit-phare-card--dark {
  background: #111;
  color: #fff!important;
  border-color: #222;
}
.produit-phare-card--dark:hover {
 
  color: #fff!important;
 
}

.produit-phare-card--accent {
  background: linear-gradient(135deg, #1a1a1a, #3d2b00);
  color: #fff;
  border-color: #444;
}

.produit-phare-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--orange);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.produit-phare-card {
  position: relative;
}

.produit-phare-visual {
  max-height:250px;
  min-height:250px;
  object-fit: cover;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
 
  background: rgba(255, 255, 255, .04);
}


.produit-phare-placeholder {
  font-size: 2rem;
  letter-spacing: .04em;
}

.produit-phare-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.produit-phare-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .65;
}

/* Piliers institutionnels */
.pilier-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 20px;
  background: #fff;
}

.pilier-icon {
  font-size: 1.75rem;
  color: var(--orange);
}