/* =========================================================
   HEADER (fixed + scroll states)
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  background: transparent !important;
  will-change: transform;
  transition: background-color .25s ease, box-shadow .25s ease, transform .35s ease-out;
}

/* Admin bar WP */
body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}

/* Disparition (monte) */
.site-header.site-header--hidden{
  transition: background-color .2s ease, box-shadow .2s ease, transform .22s ease-in;
  transform: translateY(-100%);
}

/* Réapparition (descend) — douce */
.site-header.site-header--solid{
  transition: background-color .35s ease, box-shadow .35s ease, transform .95s cubic-bezier(.22,1,.36,1);
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* IMPORTANT: en mobile, éviter tout “vide” au retour (rare bug GPU) */
@media (max-width: 991.98px){
  .site-header{ transform: translateZ(0); }
  .site-header.site-header--solid{ transform: translateZ(0); }
}

/* =========================================================
   NAVBAR (structure)
   ========================================================= */
.site-header .navbar{
  padding: .9rem 1.5rem;
  background: transparent !important;
}

/* Texte par défaut (header transparent) */
.site-header .navbar-brand,
.site-header .navbar-nav .nav-link{
  color: #fff !important;
}

/* Texte quand header solide */
.site-header--solid .navbar-brand,
.site-header--solid .navbar-nav .nav-link{
  color: var(--kc-dark) !important;
}

/* =========================================================
   MENU PRINCIPAL — PRO (charte)
   ========================================================= */
.site-header .navbar-nav .nav-link{
  position: relative;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  opacity: .92;
  transition: color .25s ease, opacity .25s ease;
}

.site-header .navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: .8rem; right: .8rem;
  bottom: -.35rem;
  height: 2px;
  background: var(--kc-gold);
  border-radius: 999px;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.site-header .navbar-nav .nav-link:hover{
  color: var(--kc-gold) !important;
  opacity: 1;
}
.site-header .navbar-nav .nav-link:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link.is-active{
  color: var(--kc-gold) !important;
  opacity: 1;
}
.site-header .navbar-nav .nav-link.active::after,
.site-header .navbar-nav .nav-link.is-active::after{
  transform: scaleX(1);
  opacity: 1;
}

/* En header solide : hover/active plus sombre (gold-dark) */
.site-header--solid .navbar-nav .nav-link:hover,
.site-header--solid .navbar-nav .nav-link.active,
.site-header--solid .navbar-nav .nav-link.is-active{
  color: var(--kc-gold-dark) !important;
}

/* =========================================================
   CTA HEADER
   ========================================================= */
.site-header .btn-header-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--kc-gold);
  border: 1px solid var(--kc-gold);
  color: #000;

  font-weight: 800;
  border-radius: 999px;
  padding: .65rem 1rem;

  box-shadow: 0 12px 32px rgba(0,0,0,0.14),
              inset 0 1px 0 rgba(255,255,255,0.35);

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

.site-header .btn-header-cta:hover{
  background: var(--kc-gold-dark);
  border-color: var(--kc-gold-dark);
  color: #fff; /* ✅ TEXTE BLANC */
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.28);
}

/* ✅ si le bouton contient <i>, <svg>, <span>… */
.site-header .btn-header-cta:hover *{
  color: #fff !important;
}

/* clic */
.site-header .btn-header-cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(0,0,0,0.16),
              inset 0 2px 0 rgba(0,0,0,0.08);
}

/* focus clavier */
.site-header .btn-header-cta:focus-visible{
  outline: 3px solid rgba(212,175,55,0.45);
  outline-offset: 4px;
}

/* =========================================================
   BURGER (toggler icon) — visibilité garantie
   ========================================================= */
.site-header .navbar-toggler{
  border-color: rgba(255,255,255,.7);
  background: transparent;
}
.site-header .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.site-header--solid .navbar-toggler{
  border-color: rgba(0,0,0,.25);
}
.site-header--solid .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =========================================================
   MENU MOBILE (collapse)
   ========================================================= */
@media (max-width: 991.98px){
  .site-header .navbar-collapse{
    background: rgba(0,0,0,.92);
    padding: .75rem 1rem 1rem;
    border-radius: 0 0 1rem 1rem;
  }
  .site-header--solid .navbar-collapse{
    background: #fff;
  }
  .site-header--solid .navbar-nav .nav-link{
    color: var(--kc-dark) !important;
  }
}

/* =========================================================
   BOOTSTRAP buttons override (charte)
   ========================================================= */
.btn-primary{
  background: var(--kc-gold);
  border-color: var(--kc-gold);
  color: #000;
}
.btn-primary:hover{
  background: var(--kc-gold-dark);
  border-color: var(--kc-gold-dark);
}

/* =========================================================
   HERO — Premium KimyaCar (radial responsive)
   Desktop: lumière top-right
   Mobile: lumière bottom, sombre top
   ========================================================= */

.hero-section{
  position: relative;
  padding-top: 92px !important;
  overflow: hidden;                 /* ✅ empêche le slider de dépasser */
  min-height: 80vh;
  display: flex;
  align-items: center;

  /* DESKTOP (par défaut) : base sombre + lumière top-right */
  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.00) 52%
    ),
    radial-gradient(
      circle at top left,
      var(--kc-gray) 0%,
      var(--kc-dark) 62%,
      var(--kc-dark) 100%
    );
}

.hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* DESKTOP : voile premium très subtil (charte only) */
  background:
    radial-gradient(
      circle at top right,
      rgba(237,237,237,0.18) 0%,
      rgba(0,0,0,0.55) 62%,
      rgba(0,0,0,0.78) 100%
    );
}

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

/* ✅ marge/respiration sous header en mobile */
@media (max-width: 991.98px){

  .hero-section{
    padding-top: 92px;
    text-align: center;

    /* MOBILE : plus sombre en haut, plus clair en bas */
    background:
      radial-gradient(
        circle at bottom center,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.00) 56%
      ),
      linear-gradient(
        180deg,
        var(--kc-dark) 0%,
        var(--kc-gray) 55%,
        var(--kc-light) 100%
      );
  }

  .hero-overlay{
    /* MOBILE : on renforce un peu le haut sombre + glow en bas */
    background:
      radial-gradient(
        circle at bottom center,
        rgba(237,237,237,0.18) 0%,
        rgba(237,237,237,0.00) 58%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.35) 45%,
        rgba(0,0,0,0.10) 100%
      );
  }

  .hero-section .lead{
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   STORE BUTTONS (badges)
   ========================= */

/* Desktop / global : 2 boutons côte à côte */
.store-buttons{
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: nowrap;
}

/* Bouton */
.store-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;       /* ✅ centre icône + texte */
  gap: 0.9rem;
  padding: 0.65rem 1rem;
  border-radius: 0.85rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;

  width: auto;
  min-width: 260px;
  max-width: 320px;
}

/* Icône */
.store-btn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  flex: 0 0 34px;
}

.store-btn__icon-img{
  width: 26px;
  height: auto;
  display: block;
}

/* Texte : 2 lignes alignées à gauche (inchangé) */
.store-btn__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;  
  text-align: left;
  gap: 0.15rem;
}

.store-btn__label{
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.store-btn__name{
  font-size: 1.05rem;
  font-weight: 800;
}

/* ===== Google Play ===== */
.store-btn--google{
  background: var(--kc-gold);
  border: 1px solid var(--kc-gold);
  color: #000;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.store-btn--google .store-btn__label,
.store-btn--google .store-btn__name{
  color: #000;
}

.store-btn--google:hover{
  background: #fff;
  border-color: #fff;
  color: var(--kc-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}

/* ===== App Store ===== */
.store-btn--apple{
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
}

.store-btn--apple .store-btn__label,
.store-btn--apple .store-btn__name{
  color: #fff;
}

.store-btn--apple:hover{
  background: #fff;
  border-color: #fff;
  color: var(--kc-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}

.store-btn--apple:hover .store-btn__label,
.store-btn--apple:hover .store-btn__name{
  color: #111 !important;
}

.store-btn--apple:hover .store-btn__icon{
  color: #111 !important;
}


/* ===== Mobile : colonne, largeur contrôlée ===== */
@media (max-width: 575.98px){
  .store-buttons{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .store-btn{
    width: min(360px, 88%);
    max-width: none;
    justify-content: center;   
  }
}

/* =========================================================
   HERO PHONE SLIDER — confinement total (anti débordement)
   ========================================================= */
.hero-phone-wrapper{
  position: relative;
  max-width: 360px;
  width: 100%;
  height: 520px;         
  margin-left: auto;
  overflow: hidden;      
}

@media (max-width: 991.98px){
  .hero-phone-wrapper{
    margin-right: auto;
    height: 460px;       
  }
}

.hero-phone{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(36px) scale(.96);
  transition: opacity .8s ease, transform .8s ease;
}

.hero-phone img{
  width: 100%;
  height: 100%;
  object-fit: contain;   
  display: block;
}

.hero-phone--active{
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}

/* =========================================================
   QUICK SERVICES — MINI CARDS (PREMIUM, FINAL)
   Mobile: marquee fluide
   Desktop: 8 cards full-width, alignées aux marges
   ========================================================= */

.kc-quick-mini{
  background:#fff;
  padding: 14px 0 6px;
}

/* =========================================================
   MINI CARD — BASE
   ========================================================= */
.kc-mini-card{
  text-decoration:none;
  color:#111;
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:14px;
  height:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.kc-mini-card:hover{
  transform: translateY(-3px);
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* icon */
.kc-mini-ico{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.10);
}
.kc-mini-ico i{
  font-size:20px;
  color:rgba(0,0,0,0.75);
}
.kc-mini-card:hover .kc-mini-ico{
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.35);
}

/* label */
.kc-mini-label{
  font-weight:900;
  font-size:0.78rem;
  line-height:1.1;
  color:rgba(0,0,0,0.82);
  text-align:center;
}

/* =========================================================
   VIEWPORT (COMMUN)
   ========================================================= */
.kc-mini-viewport{
  position: relative;
  width:100%;
  overflow:hidden;
}

/* Affichage conditionnel des 2 tracks */
.kc-mini-viewport--desktop{ display:none; }
.kc-mini-viewport--mobile{ display:block; }

@media (min-width: 992px){
  .kc-mini-viewport--desktop{ display:block; }
  .kc-mini-viewport--mobile{ display:none; }
}

/* Logo dans la mini-icône (si pas déjà) */
.kc-mini-ico--logo{
  padding:6px;
}
.kc-mini-ico--logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}


/* =========================================================
   TRACK (MARQUEE BASE)
   ========================================================= */
.kc-mini-track{
  display:flex;
  gap:12px;
  width:max-content;
  will-change:transform;
  padding: 0 44px;
}

/* animation uniquement quand on le veut */
.kc-mini-track--marquee{
  animation: kcMarquee 22s linear infinite;
}

/* pause interaction */
.kc-mini-viewport:hover .kc-mini-track,
.kc-mini-viewport:focus-within .kc-mini-track{
  animation-play-state: paused;
}

/* animation */
@keyframes kcMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .kc-mini-track{ animation:none; }
}

/* =========================================================
   MOBILE (≤575px) — MARQUEE PREMIUM
   ========================================================= */
@media (max-width: 575.98px){

  .kc-mini-card{
    width:104px;
    height:98px;
    flex:0 0 104px;
  }

  .kc-mini-viewport{
    scrollbar-width:none;
  }
  .kc-mini-viewport::-webkit-scrollbar{
    display:none;
  }

  /* fade edges */
  .kc-mini-viewport::before,
  .kc-mini-viewport::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:44px;
    pointer-events:none;
    z-index:2;
  }
  .kc-mini-viewport::before{
    left:0;
    background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%);
  }
  .kc-mini-viewport::after{
    right:0;
    background: linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%);
  }
}

/* Logo dans la mini-icône */
.kc-mini-ico--logo{
  padding:6px;
}
.kc-mini-ico--logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter: none;
}

/* =========================================================
   DESKTOP (≥992px) — FULL WIDTH, 8 CARDS, NO DUPLICATION
   ========================================================= */
@media (min-width: 992px){

  .kc-mini-viewport{
    max-width: var(--bs-container-xl, 1320px);
    margin: 0 auto;
    padding: 8px 0;
    overflow: visible;
  }

  .kc-mini-track{
    width:100%;
    animation:none !important;
    transform:none !important;
    justify-content: space-between; 
    gap:14px;
    padding:0;
  }

  /* afficher seulement les 8 vraies cards */
  .kc-mini-track > .kc-mini-card:nth-child(n+9){
    display:none;
  }

  .kc-mini-card{
    flex:1 1 0;
    min-width:96px;
    max-width:140px;
    height:96px;
    border-radius:16px;
  }

  /* pas de fade desktop */
  .kc-mini-viewport::before,
  .kc-mini-viewport::after{
    display:none;
  }
}

/* =========================================================
   LARGE SCREENS (≥1400px)
   ========================================================= */
@media (min-width: 1400px){
  .kc-mini-track{ gap:18px; }
  .kc-mini-card{ height:100px; }
}

/* =========================
   Carré garanti (tous écrans)
   ========================= */
.kc-mini-card{
  height:auto !important;        /* neutralise height fixes */
  aspect-ratio: 1 / 1;           /* carré parfait */
  width:104px;                   /* mobile base */
  flex:0 0 104px;
}

/* Desktop: carrés flexibles, jamais déformés */
@media (min-width: 992px){
  .kc-mini-track--static{
    width:100%;
    animation:none !important;
    transform:none !important;
    justify-content: space-between;
    gap:14px;
    padding:0;
  }
  .kc-mini-track--static .kc-mini-card{
    flex:1 1 0;
    min-width:96px;
    max-width:140px;
  }
}

/* =========================
   Card partenaire: logo plein cadre, aucun padding, pas de label
   ========================= */
.kc-mini-card.is-partner{
  padding:0 !important;
  gap:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

.kc-mini-card.is-partner .kc-mini-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;     /* logo entier */
  padding:0;
  margin:0;
}

/* Fond neutre logos transparents */
.kc-mini-card.is-partner{
  background:#fff;
}

/* =========================
   Flip mobile (partners <-> services)
   ========================= */
.kc-mini-flip{
  position:relative;
  perspective: 1200px;
}

.kc-mini-flip__inner{
  position:relative;
  transform-style:preserve-3d;
  transition: transform .85s cubic-bezier(.22,1,.36,1);
}

.kc-mini-flip.is-flipped .kc-mini-flip__inner{
  transform: rotateY(180deg);
}

.kc-mini-face{
  backface-visibility:hidden;
}

.kc-mini-face--services{
  position:absolute;
  inset:0;
  transform: rotateY(180deg);
}

/* Face cachée: pause du marquee */
.kc-mini-flip .kc-mini-face[aria-hidden="true"] .kc-mini-track{
  animation-play-state: paused;
}

/* =========================================================
   QUICK SERVICES — FIX FLIP (desktop + mobile)
   ========================================================= */

/* ✅ 1 seule rangée: on supprime toute logique "viewport--desktop/mobile" si elle existe chez toi */
.kc-mini-viewport--desktop,
.kc-mini-viewport--mobile{
  display: unset;
}

/* ✅ Carré garanti (tous écrans) */
.kc-mini-card{
  height: auto !important;      /* neutralise tes heights (96px/98px) */
  aspect-ratio: 1 / 1;          /* 🔑 toujours carré */
  flex: 0 0 auto;
}

/* tailles carrées */
@media (max-width: 575.98px){
  .kc-mini-card{
    width: 104px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .kc-mini-card{
    width: 116px;
  }
}
@media (min-width: 992px){
  .kc-mini-card{
    width: 124px;               /* desktop: 8 visibles, look premium */
  }
}

/* ✅ Track: base */
.kc-mini-track{
  animation: none;              /* animation OFF par défaut */
}

/* ✅ Marquee mobile obligatoire */
@media (max-width: 991.98px){
  .kc-marq-mobile{
    animation: kcMarquee 22s linear infinite;
  }
}

/* ✅ Marquee desktop UNIQUEMENT si +8 logos (classe ajoutée côté PHP) */
@media (min-width: 992px){
  .kc-marq-desktop{
    animation: kcMarquee 22s linear infinite;
  }
}

/* ✅ Mode "statique" desktop: 8 visibles, pas de 2e rangée, pas d'étirement */
@media (min-width: 992px){
  .kc-mini-track--static{
    width: 100%;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    transform: none !important;
  }

  /* on cache la duplication en mode statique */
  .kc-mini-track--static .kc-mini-card.is-dup{ display:none; }

  /* on n’affiche que 8 cards */
  .kc-mini-track--static > .kc-mini-card:nth-child(n+9){ display:none; }

  /* pas de fade edges desktop */
  .kc-mini-viewport::before,
  .kc-mini-viewport::after{ display:none; }
}

/* ✅ Partenaires: logo plein cadre (sans padding, sans label) */
.kc-mini-card.is-partner{
  padding: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.kc-mini-card.is-partner .kc-mini-logo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* pro (logo entier) */
}

/* =========================================================
   FLIP (partners <-> services) — valable mobile + desktop
   ========================================================= */
.kc-mini-flip{
  position: relative;
  perspective: 1200px;
}
.kc-mini-flip__inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.22,1,.36,1);
}
.kc-mini-flip.is-flipped .kc-mini-flip__inner{
  transform: rotateY(180deg);
}
.kc-mini-face{
  backface-visibility: hidden;
}
.kc-mini-face--services{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* ✅ quand une face est derrière, on pause son marquee */
.kc-mini-flip .kc-mini-face[aria-hidden="true"] .kc-mini-track{
  animation-play-state: paused;
}

/* =========================
   FLIP par card (premium)
   ========================= */
.kc-mini-cardflip{
  perspective: 1200px;
  padding:0 !important; /* logos full */
  overflow:hidden;
}

.kc-mini-cardflip__inner{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  transform-style:preserve-3d;
  transition: transform .85s cubic-bezier(.22,1,.36,1);
}

.kc-mini-cardflip.is-flipped .kc-mini-cardflip__inner{
  transform: rotateY(180deg);
}

.kc-mini-cardflip__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FRONT: logo plein cadre */
.kc-mini-cardflip__front{
  background:#fff;
}
.kc-mini-cardflip__front .kc-mini-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* BACK: service */
.kc-mini-cardflip__back{
  transform: rotateY(180deg);
  flex-direction:column;
  gap:8px;
  padding:12px;
}

/* Marquee: mobile toujours */
@media (max-width: 991.98px){
  .kc-marq-mobile{ animation: kcMarquee 22s linear infinite; }
}

/* Desktop marquee seulement si classe présente */
@media (min-width: 992px){
  .kc-marq-desktop{ animation: kcMarquee 22s linear infinite; }

  /* Statique desktop: pas de duplication si pas de marquee */
  .kc-mini-track--static:not(.kc-marq-desktop) .kc-mini-card.is-dup{ display:none; }
}


/* =========================================================
   QUICK SERVICES — MINI CARDS : size tuning (GLOBAL & PREMIUM)
   S'applique à services + partenaires
   Desktop + mobile + flip
   ========================================================= */

/* BASE — tous écrans */
.kc-mini-card{
  width: 96px !important;
  flex: 0 0 96px !important;
}

/* Icône & texte plus premium */
.kc-mini-ico{
  width:38px !important;
  height:38px !important;
}
.kc-mini-ico i{
  font-size:17px !important;
}
.kc-mini-label{
  font-size:.73rem !important;
}

/* =========================
   MOBILE (≤575px)
   ========================= */
@media (max-width: 575.98px){
  .kc-mini-card{
    width: 88px !important;
    flex: 0 0 88px !important;
  }
}

/* =========================
   TABLETTE (576–991px)
   ========================= */
@media (min-width: 576px) and (max-width: 991.98px){
  .kc-mini-card{
    width: 94px !important;
    flex: 0 0 94px !important;
  }
}

/* =========================
   DESKTOP (≥992px)
   ========================= */
@media (min-width: 992px){
  .kc-mini-card{
    width: auto !important;     /* laisse flex décider */
    min-width: 86px !important;
    max-width: 120px !important;
    flex: 1 1 0 !important;
  }
}

/* =========================================================
   PARTENAIRES — MINI CARDS (override premium)
   Rectangulaire, bordure ultra discrète
   ========================================================= */

/* Card partenaire uniquement */
.kc-partners-mini .kc-mini-card.is-partner{
  aspect-ratio: 4 / 3 !important;      /* 🔑 rectangulaire */
  border-radius: 14px;
  padding: 10px !important;            /* respiration image */
  background: #fff;

  border: 1px solid rgba(0,0,0,0.03);  /* contour quasi invisible */
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);

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

/* Image logo */
.kc-partners-mini .kc-mini-logo{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* Hover desktop ultra soft */
@media (hover: hover){
  .kc-partners-mini .kc-mini-card.is-partner:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.06);
  }
}

/* =========================
   Mobile: encore plus léger
   ========================= */
@media (max-width: 575.98px){
  .kc-partners-mini .kc-mini-card.is-partner{
    padding: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.035);
  }
}


/* =========================================================
   ABOUT — PANELS (CSS-only auto-height)
   - Auto height (sans JS)
   - Flip/transition conservée
   ========================================================= */

#about{
  padding: 18px 0;
}

.kc-about-shell{
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 65px rgba(0,0,0,.08);
  overflow:hidden;
}

/* La scène ne fixe plus de hauteur */
.kc-about-stage{
  position:relative;
  perspective:1200px;
  transform-style:preserve-3d;
}

/* Base: tous les panneaux sont superposés (absolute) */
.kc-about-panel{
  position:absolute;
  inset:0;
  padding:34px;
  box-sizing:border-box;

  opacity:0;
  pointer-events:none;
  backface-visibility:hidden;

  transform:rotateX(-85deg) translateY(18px);
  transition:
    transform .85s cubic-bezier(.22,1,.36,1),
    opacity .55s ease;
}

/* ✅ Le panneau actif repasse dans le flux => hauteur auto */
.kc-about-panel.is-active{
  position:relative;   /* clé */
  inset:auto;          /* annule inset:0 */
  opacity:1;
  pointer-events:auto;
  transform:rotateX(0) translateY(0);
  z-index:2;
}

/* ✅ Celui qui sort reste absolute pour pouvoir s’animer */
.kc-about-panel.is-leaving{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  transform:rotateX(85deg) translateY(-16px);
}

/* Bootstrap row: éviter tout effet “bizarre” dans un conteneur paddé */
.kc-about-panel .row{
  margin-left:0;
  margin-right:0;
}

/* TYPO (tu peux garder tes règles actuelles) */
.kc-about-kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  background:rgba(212,175,55,.14);
  border:1px solid rgba(212,175,55,.25);
  margin-bottom:10px;
}

.kc-about-title{
  font-weight:900;
  margin-bottom:12px;
}

.kc-about-lead{
  margin-bottom:14px;
  color:rgba(0,0,0,.75);
}

.kc-about-bullets{
  padding-left:1.1rem;
}
.kc-about-bullets li{ margin:8px 0; }

/* MEDIA */
.kc-about-media__frame{
  position:relative;
  min-height:260px;
  border-radius:18px;
  overflow:hidden;
}

/* images animées */
.kc-about-media__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:translateX(12%) scale(1.02);
  transition:opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1);
}

.kc-about-media__img.is-active{
  opacity:1;
  transform:translateX(0) scale(1);
}

.kc-about-media__img.is-exit{
  opacity:0;
  transform:translateX(-6%) scale(1.01);
}

/* =========================================================
   ABOUT — Partner logos (remplace CTA)
   ========================================================= */

.kc-partner-logo{
  margin-top:14px;
  display:flex;
  align-items:center;
}

.kc-partner-logo img{
  max-height:56px;
  width:auto;
  object-fit:contain;
  filter:grayscale(0%);
}

/* Mobile : logo centré, pleine largeur visuelle */
@media (max-width:991px){
  .kc-partner-logo{
    justify-content:center;
  }

  .kc-partner-logo img{
    max-height:52px;
  }
}


/* MOBILE */
@media (max-width:991px){
  #about{ padding:10px 0; }
  .kc-about-panel{ padding:24px 18px; }
  .kc-about-media__frame{ min-height:220px; }
}

/* ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce){
  .kc-about-panel,
  .kc-about-media__img{
    transition:none !important;
    transform:none !important;
  }
}

@media (max-width: 991px){

  /* 1) Kicker full width (plus pro en mobile) */
  .kc-about-kicker{
    display:block;
    width:100%;
    text-align:center;     /* ou left si tu préfères */
    padding:10px 14px;
    border-radius:14px;    /* plus “badge full width” */
  }

  /* 2) CTA: 2 boutons = même largeur, gap pris en compte */
  .kc-about-cta{
    display:flex;
    gap:12px;
    width:100%;
  }
  .kc-about-cta .btn{
    flex:1 1 0;            /* égalité parfaite */
    min-width:0;           /* évite débordement texte */
    padding-left:0;
    padding-right:0;
    text-align:center;
    white-space:nowrap;    /* garde sur une ligne */
  }

  /* Si écran très étroit, on autorise le retour à la ligne propre */
  @media (max-width: 360px){
    .kc-about-cta{ flex-wrap:wrap; }
    .kc-about-cta .btn{ flex:1 1 100%; }
  }
}

/* =========================================================
   ABOUT — Mobile reorder: media juste avant CTA
   (sans changer le HTML)
   ========================================================= */
/* Desktop: on cache la version mobile */
.kc-only-mobile{ display:none; }

/* Mobile: on cache la version desktop + on montre la version mobile */
@media (max-width: 991px){
  .kc-only-desktop{ display:none; }
  .kc-only-mobile{ display:block; }

  .kc-only-mobile .kc-about-media__frame{
    min-height: 210px; /* ajuste si tu veux */
    margin-top: 10px;
  }

  /* petit spacing pro avant CTA */
  .kc-only-mobile{ margin-top: 10px; }
  .kc-about-cta{ margin-top: 12px; }
}


/* =========================================================
   TILES 2x2 — Premium KimyaCar
   ========================================================= */
.kc-tiles{ background:#fff; }

.kc-tiles-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.08);
  background:#fff;
}

.kc-tile{
  position:relative;
  min-height: 420px;
  display:flex;
  overflow:hidden;
}

.kc-tile__inner{
  width:100%;
  padding: 3rem 3rem;
}

.kc-tile__head{ margin-bottom: 1.25rem; }

.kc-tile__title{
  font-weight: 900;
  letter-spacing: .01em;
  margin:0 0 .35rem;
}

.kc-tile__subtitle{
  margin:0;
  opacity:.85;
  max-width: 52ch;
}

.kc-tile__cta{ margin-top: 1.35rem; }

/* --- Variants --- */
.kc-tile--light{
  background: #fff;
  color: var(--kc-dark);
}

.kc-tile--dark{
  background: radial-gradient(circle at top left, #2a2a2a 0, #111 55%, #000 100%);
  color:#fff;
}

/* Steps (how it works) */
.kc-steps{ display:grid; gap: 1rem; margin-top: 1.2rem; }

.kc-step{ display:flex; gap:.9rem; align-items:flex-start; }

.kc-step__num{
  width: 38px; height:38px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(212,175,55,0.20);
  border: 1px solid rgba(212,175,55,0.38);
  color: var(--kc-dark);
  flex: 0 0 38px;
}

.kc-step__title{ margin:0 0 .25rem; font-weight:900; font-size:1rem; }
.kc-step__text{ margin:0; color: rgba(17,17,17,0.72); line-height:1.55; }

/* Features */
.kc-features{ margin-top: 1.2rem; display:grid; gap: 1rem; }

.kc-feature{
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.kc-feature__title{ margin:0 0 .25rem; font-weight:900; color:#fff; }
.kc-feature__text{ margin:0; color: rgba(255,255,255,0.78); line-height:1.55; }

/* Image tile */
.kc-tile--image{
  background-size: cover;
  background-position: center;
  align-items:flex-end;
}

.kc-image-overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at top right, rgba(212,175,55,0.18), rgba(0,0,0,0.72));
}

.kc-image-caption{
  position:relative; z-index:2;
  padding: 2.3rem 2.4rem;
  color:#fff;
  max-width:56ch;
}

.kc-image-caption h3{ margin:0 0 .35rem; font-weight:900; }
.kc-image-caption p{ margin:0; opacity:.88; line-height:1.55; }

/* Video tile */
.kc-tile--video{
  background:
    linear-gradient(135deg, rgba(212,175,55,0.92), rgba(0,0,0,0.78)),
    url("../images/tiles/tiles-video-bg.jpg");
  background-size: cover;
  background-position: center;
  align-items:center;
  justify-content:center;
}

.kc-video-cta{
  border: none;
  cursor: pointer;
  text-decoration:none;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.kc-video-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  background: rgba(0,0,0,0.55);
}

.kc-video-cta__icon{
  width:54px; height:54px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
}

.kc-video-cta__text strong{ display:block; font-weight:900; }
.kc-video-cta__text small{ display:block; opacity:.85; }

/* Responsive */
@media (max-width: 991.98px){
  .kc-tiles-grid{ grid-template-columns: 1fr; }
  .kc-tile{ min-height: auto; }
  .kc-tile__inner{ padding: 2.2rem 1.5rem; }
}

/* =========================================================
   TILES A & D — MOBILE UNIFORMISATION 16:9 (PRO)
   ========================================================= */
@media (max-width: 991.98px){

  /* grille en colonne (déjà OK chez toi, on sécurise) */
  .kc-tiles-grid{
    grid-template-columns: 1fr;
  }

  /* TILES VIDÉO (A) + IMAGE (D) */
  .kc-tile--video,
  .kc-tile--image{
    aspect-ratio: 16 / 10;       
    min-height: unset;           
    height: auto;
  }

  /* on force un peu plus de présence verticale */
  .kc-tile--video,
  .kc-tile--image{
    max-height: none;
  }

  /* Contenu centré verticalement (vidéo) */
  .kc-tile--video{
    align-items: center;
    justify-content: center;
  }

  /* Contenu image bien ancré en bas */
  .kc-tile--image{
    align-items: flex-end;
  }

  /* Caption image : un peu plus respirante */
  .kc-image-caption{
    padding: 1.8rem 1.6rem;
  }
}


/* =========================================================
   VIDEO MODAL — Premium
   ========================================================= */
.kc-video-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.kc-video-modal.is-open{ display:block; }

.kc-video-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
}

.kc-video-modal__dialog{
  position: relative;
  width: min(980px, 92vw);
  margin: 8vh auto 0;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 90px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);
}

.kc-video-modal__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 44px; height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.45);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index: 2;
}

.kc-video-modal__ratio{
  position: relative;
  width:100%;
  padding-top: 56.25%;
}

.kc-video-modal__ratio iframe{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  border:0;
}


/* =========================================================
   SERVICES — Light premium
   Image floutée + brume animée diagonale (KimyaCar)
   ========================================================= */

.services-section{
  position: relative;
  overflow: hidden;
  background: #f7f3ea; /* fallback clair premium */
  color: var(--kc-dark);
}

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

/* =========================================================
   IMAGE DE FOND FLOUTÉE (VISIBLE)
   ========================================================= */
.services-bg{
  position: absolute;
  inset: 0;
  background-image: url("../images/services/services-bg.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  filter: blur(4.5px);
  opacity: 0.42; /* image bien visible */
  z-index: 0;
}

/* =========================================================
   SERVICES — Background flouté + Overlay TRAME (3 couleurs)
   ✅ PAS de mouvement : seulement changement de teinte visible
   ========================================================= */

/* Image de fond floutée (visible) */
.services-bg{
  position: absolute;
  inset: 0;
  background-image: url("../images/services/services-bg.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.10);
  filter: blur(4.5px);
  opacity: 0.50;              /* image bien visible */
  z-index: 0;
}

/* =========================================================
   SERVICES HEAD — Desktop split, mobile unchanged
   ========================================================= */

.kc-services-head{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: 28px;
}

/* Left title block */
.kc-services-head__left .section-title{
  margin: 0;
  line-height: 1.05;
  font-size: clamp(2rem, 2.6vw, 3.05rem);
}

/* Right description + CTA */
.kc-services-head__right{
  justify-self: end;
  text-align: left;
  max-width: 560px;
}

.kc-services-head__right .services-subtitle{
  margin: 0;
  opacity: .96;
}

.kc-services-head__cta{
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

/* Mobile / tablette: on garde le rendu actuel (centré, col-lg-8) */
@media (max-width: 991.98px){
  .kc-services-head{
    display: block;              /* revient au flow normal */
    text-align: center;
  }

  .kc-services-head__right{
    max-width: 100%;
    justify-self: auto;
    text-align: center;
  }

  .kc-services-head__cta{
    justify-content: center;
  }

  .kc-services-head__left .section-title{
    font-size: var(--kc-section-title-size, 2rem);
    line-height: 1.15;
  }
}


/* =========================================================
   OVERLAY TRAME — change de couleur (Gold → Light Gray → Soft Dark)
   ✅ Très visible + transitions douces + dégradés
   ========================================================= */
.services-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Base (sera remplacée par l'animation) */
  background:
    linear-gradient(135deg,
      rgba(212,175,55,0.26) 0%,
      rgba(255,255,255,0.12) 35%,
      rgba(212,175,55,0.18) 70%,
      rgba(255,255,255,0.10) 100%
    );

  opacity: 0.92;              /* overlay visible à l’œil */
  mix-blend-mode: normal;     /* rendu stable partout */
  filter: saturate(1.10) contrast(1.04);

  animation: kcOverlayTone 18s ease-in-out infinite;
  will-change: background, opacity, filter;
}

/* =========================================================
   Animation: 3 TRAMES bien distinctes (douces mais visibles)
   ========================================================= */
@keyframes kcOverlayTone{

  /* 1) GOLD (charte) */
  0%, 33%{
    background:
      linear-gradient(135deg,
        rgba(212,175,55,0.34) 0%,
        rgba(255,255,255,0.12) 32%,
        rgba(212,175,55,0.22) 68%,
        rgba(255,255,255,0.08) 100%
      ),
      radial-gradient(circle at 70% 30%,
        rgba(212,175,55,0.18) 0%,
        rgba(212,175,55,0.00) 60%
      );
    opacity: 0.94;
    filter: saturate(1.16) contrast(1.05);
  }

  /* 2) GRIS CLAIR premium */
  34%, 66%{
    background:
      linear-gradient(135deg,
        rgba(235,237,240,0.52) 0%,
        rgba(255,255,255,0.22) 35%,
        rgba(235,237,240,0.38) 72%,
        rgba(255,255,255,0.16) 100%
      ),
      radial-gradient(circle at 30% 70%,
        rgba(212,175,55,0.10) 0%,
        rgba(212,175,55,0.00) 58%
      );
    opacity: 0.90;
    filter: saturate(1.06) contrast(1.04);
  }

  /* 3) SOFT DARK (noir doux charte) */
  67%, 100%{
    background:
      linear-gradient(135deg,
        rgba(17,17,17,0.34) 0%,
        rgba(255,255,255,0.10) 36%,
        rgba(17,17,17,0.22) 72%,
        rgba(255,255,255,0.08) 100%
      ),
      radial-gradient(circle at 78% 24%,
        rgba(212,175,55,0.14) 0%,
        rgba(212,175,55,0.00) 62%
      );
    opacity: 0.92;
    filter: saturate(1.10) contrast(1.06);
  }
}


/* =========================================================
   TITRES & SOUS-TITRES
   ========================================================= */

.services-section .section-title{
  color: var(--kc-dark) !important;
}

.services-section .services-subtitle,
.services-section .section-subtitle{
  color: var(--kc-dark) !important;
}

/* =========================================================
   CTA SERVICES (GLASS CLAIR)
   ========================================================= */

.btn-services-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border-radius: 999px;
  padding: 0.85rem 1.3rem;
  font-weight: 900;
  letter-spacing: 0.02em;

  background: var(--kc-gold);
  border: 1px solid var(--kc-gold);
  color: #000;

  box-shadow: 0 14px 40px rgba(0,0,0,0.14),
              inset 0 1px 0 rgba(255,255,255,0.35);

  transition: all .25s ease;
}

/* hover */
.btn-services-cta:hover{
  background: var(--kc-gold-dark);
  border-color: var(--kc-gold-dark);
  color: #fff; 
  transform: translateY(-2px);
}

/* clic */
.btn-services-cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18) inset;
}

/* dot */
.btn-services-cta__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;            
  background: #000;
  flex: 0 0 10px;

  box-shadow: 0 0 0 6px rgba(0,0,0,0.15);
  transition: all .25s ease;
}

/* dot au hover */
.btn-services-cta:hover .btn-services-cta__dot{
  background: #fff;              
  box-shadow: 0 0 0 6px rgba(255,255,255,0.25);
}

/* =========================================================
   CARDS — PREMIUM LIGHT (COMPACT + CTA BUTTON)
   ========================================================= */

.service-card{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(17,17,17,0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,0.45);
  box-shadow: 0 26px 70px rgba(0,0,0,0.18);
}

/* =========================================================
   MEDIA
   ========================================================= */
.service-card__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.service-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.service-card:hover .service-card__media img{
  transform: scale(1.06);
}

/* Pas de voile */
.service-card__media::after{ display:none !important; }

/* =========================================================
   CONTENU (COMPACT)
   ========================================================= */
.service-card__body{
  padding: .85rem 1rem .9rem; /* ↓ padding vertical réduit */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card__title{
  color: #111;
  font-weight: 800;
  font-size: 0.98rem;      /* ↓ légèrement réduit */
  margin-bottom: .25rem;
}

.service-card__text{
  color: rgba(17,17,17,0.75);
  font-size: 0.88rem;      /* ↓ plus pro */
  line-height: 1.5;
  margin-bottom: .75rem;
}

/* =========================================================
   CTA → BOUTON UNIFORME
   ========================================================= */
.service-card__footer{
  margin-top: auto;       /* pousse le bouton en bas */
}

.service-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;            /* même largeur sur toutes les cartes */
  max-width: 260px;       /* calibré pour le CTA le plus long */
  padding: .55rem .9rem;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;

  border-radius: 999px;
  background: rgba(17,17,17,0.06);
  border: 1px solid rgba(17,17,17,0.18);
  color: #111;

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

.service-card__link:hover{
  background: var(--kc-gold);
  border-color: var(--kc-gold);
  color: #fff;              
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 991.98px){
  .service-card__link{
    max-width: 100%;
  }
}

/* =========================================================
   SERVICES SLIDER — Premium (3 visibles)
   ========================================================= */
.kc-services-slider{
  position: relative;
  margin-top: 1.25rem;
}

.kc-services-viewport{
  overflow: hidden;
  border-radius: 20px;
  padding: 10px; /* petite marge pour l’ombre au hover */
}

.kc-services-track{
  display: flex;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}

.kc-services-slide{
  flex: 0 0 calc((100% - (18px * 2)) / 3);
  min-width: 0;
  opacity: .95;
  transform: translateY(0) scale(.995);
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.kc-services-slide:hover{
  opacity: 1;
  transform: translateY(-6px) scale(1);
  filter: saturate(1.05);
}

/* Responsive: 2 visibles tablette, 1 visible mobile */
@media (max-width: 991.98px){
  .kc-services-slide{ flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 575.98px){
  .kc-services-viewport{ padding: 6px; }
  .kc-services-track{ gap: 14px; }
  .kc-services-slide{ flex-basis: 88%; }
}

/* NAV buttons */
.kc-snav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.40);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.kc-snav:hover{
  transform: translateY(-50%) scale(1.06);
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
}
.kc-snav--prev{ left: -6px; }
.kc-snav--next{ right: -6px; }

@media (max-width: 575.98px){
  .kc-snav{ display:none; } /* swipe mobile */
}

/* dots */
.kc-services-dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: 14px;
}
.kc-services-dots button{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.35);
  padding:0;
}
.kc-services-dots button.is-active{
  width: 26px;
  background: rgba(212,175,55,.95);
}

/* =========================================================
   JOIN (Chauffeur / Partenaire) — 2 tiles
   ========================================================= */
.kc-join{ background:#f8f9fb; }

.kc-join-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}

.kc-join-tile{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,17,17,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.08);
  display:flex;
  flex-direction: column;
  min-height: 100%;
}

.kc-join-head{
  position: relative;
  aspect-ratio: 16 / 11;          
  align-items: center;
  justify-content: center;
  padding: 26px;

  background-size: cover;
  background-position: center center;  
  background-repeat: no-repeat;

  overflow: hidden;
}

.kc-join-head::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at top right, rgba(212,175,55,0.22), rgba(0,0,0,0.72));
  pointer-events:none;
}

.kc-join-head--driver{
  background-image: url("../images/join/join-driver.jpg");
}

.kc-join-head--partner{
  background-image: url("../images/join/join-partner.jpg");
}

/* vidéo bouton (plus compact que celui des tiles) */
.kc-video-cta--small{
  position: relative;
  z-index: 2;
  padding: .95rem 1.05rem;
  gap: .85rem;
}

.kc-video-cta--small .kc-video-cta__icon{
  width: 48px;
  height: 48px;
}

/* body */
.kc-join-body{
  padding: 1.6rem 1.6rem 1.5rem;
  display:flex;
  flex-direction: column;
  height: 100%;
}

.kc-join-title{
  font-weight: 900;
  margin: 0 0 .45rem;
}

.kc-join-text{
  margin: 0 0 1.1rem;
  color: rgba(17,17,17,0.75);
  line-height: 1.65;
}

.kc-join-block{ margin-top: .7rem; }
.kc-join-subtitle{
  font-weight: 900;
  font-size: 1rem;
  margin: 0 0 .55rem;
}

.kc-join-list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(17,17,17,0.76);
  line-height: 1.7;
}

.kc-join-cta{
  margin-top: auto;
  padding-top: 1.1rem;
}

/* responsive */
@media (max-width: 991.98px){
  .kc-join-grid{ grid-template-columns: 1fr; }
  .kc-join-body{ padding: 1.35rem 1.25rem 1.25rem; }
  .kc-join-head{ min-height: 190px; }
  .kc-join-head{
    padding: 20px;
  }
}

/* =========================================================
   FEATURES / COMPTEURS
   ========================================================= */
.counters-section{
  background: linear-gradient(135deg, #000, var(--kc-gold-dark), #000);
}

.feature-box{
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

/* =========================================================
   DOWNLOAD — Apps cards (Clients / Services) — premium
   ========================================================= */

.kc-download .section-subtitle{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.kc-appcard{
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  padding: 18px 18px 16px;
  height: 100%;
}

.kc-appcard__head{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.kc-appcard__logo{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.kc-appcard__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 1.25rem;
  line-height: 1.1;
}
.kc-appcard__title span{
  color: rgba(0,0,0,.62);
  font-weight: 800;
}

.kc-appcard__desc{
  margin: 6px 0 0;
  color: rgba(0,0,0,.70);
  line-height: 1.5;
}

.kc-appcard__buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* store button base */
.kc-storebtn{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  min-height: 56px;
}

.kc-storebtn__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  flex: 0 0 40px;
}
.kc-storebtn__icon i{ font-size: 20px; }

.kc-storebtn__text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.kc-storebtn__text small{
  font-size: .72rem;
  opacity: .85;
  letter-spacing: .02em;
}
.kc-storebtn__text strong{
  font-size: .98rem;
  font-weight: 900;
}

/* Google Play look */
.kc-storebtn--play{
  color: #0b0f14;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
}
.kc-storebtn--play .kc-storebtn__icon{
  background: linear-gradient(135deg, rgba(52,168,83,.18), rgba(66,133,244,.18));
}

/* App Store look */
.kc-storebtn--apple{
  color: #fff;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  border-color: rgba(255,255,255,.14);
}
.kc-storebtn--apple .kc-storebtn__icon{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.kc-storebtn--apple .kc-storebtn__text small{ opacity: .75; }

/* hover premium */
.kc-storebtn:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.38);
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
  filter: saturate(1.03);
}

/* responsive */
@media (max-width: 575.98px){
  .kc-appcard{ padding: 16px 14px 14px; border-radius: 18px; }
  .kc-appcard__logo{ width: 64px; height: 64px; border-radius: 16px; }
  .kc-appcard__buttons{ grid-template-columns: 1fr; }
}

/* =========================
   STORE BADGES — OFFICIELS (responsive premium)
   Objectif :
   - Desktop : 2 badges sur une ligne, chaque badge "touche" les bords de la card
   - Mobile : toujours côte à côte (2 colonnes), badges responsives
   ========================= */

.kc-store-badges{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ✅ toujours 2 colonnes */
  gap: 14px;
  margin-top: 18px;
  align-items: center;
}

/* zone cliquable = pleine largeur de chaque colonne */
.kc-store-badge{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;                  /* donne un peu de “hit area” */
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* ✅ badges : même hauteur + s’adapte en largeur (dans la colonne) */
.kc-store-badge img{
  height: 52px;                    /* desktop */
  width: 100%;                     /* ✅ prend toute la largeur de sa colonne */
  max-width: 100%;
  display: block;
  object-fit: contain;             /* ✅ garde le ratio officiel */
}

/* hover premium discret */
.kc-store-badge:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  filter: saturate(1.03);
}

/* Mobile : on garde côte à côte, on réduit la hauteur */
@media (max-width: 575.98px){
  .kc-store-badges{
    gap: 10px;
  }
  .kc-store-badge{
    padding: 4px 0;
    border-radius: 12px;
  }
  .kc-store-badge img{
    height: 44px;                  /* ✅ badges plus compacts */
  }
}

/* =========================================================
   DOWNLOAD — Override style "mockup"
   ========================================================= */

.kc-appcard{
  text-align: center;
  padding: 26px 20px 18px; /* plus d’air comme le mockup */
}

/* Le header n’est plus en flex gauche/droite */
.kc-appcard__head--mockup{
  display: block;
  margin-bottom: 14px;
}

/* Titre centré + look mockup */
.kc-appcard__title--center{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.7rem;
  line-height: 1.05;
}

.kc-appcard__accent{
  color: #f9a602; /* ton or */
  font-weight: 950;
}

.kc-appcard__desc--center{
  margin: 10px auto 16px;
  max-width: 420px;
  color: rgba(0,0,0,.72);
  line-height: 1.35;
  font-size: 0.98rem;
}

/* Gros visuel central (icône de l’app) */
.kc-appcard__appicon{
  width: min(240px, 80%);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  margin: 10px auto 8px;
  border-radius: 0 !important;
  object-fit: cover;
  box-shadow: none !important;
  background: transparent !important;
}

/* Badges : plus “collés” et centrés comme mockup */
.kc-store-badges{
  margin-top: 14px;
}

/* Mobile : encore plus proche du mockup */
@media (max-width: 575.98px){
  .kc-appcard{
    padding: 22px 16px 14px;
    border-radius: 22px;
  }

  .kc-appcard__title--center{
    font-size: 1.95rem;
  }

  .kc-appcard__desc--center{
    font-size: 0.98rem;
    max-width: 320px;
  }

  .kc-appcard__appicon{
    width: min(260px, 86%);
    border-radius: 30px;
  }

  /* badges un peu plus “bas” comme le mockup */
  .kc-store-badge img{
    height: 48px;
  }
}

/* =========================================================
   DOWNLOAD — APP CARDS (œil + bord uniforme)
   Bord gris foncé uniforme 4 côtés + œil blanc étiré au centre
   ========================================================= */

.kc-appcard{
  position: relative;
  overflow: hidden;
  border-radius: 22px;

  /* 1) Cadre uniforme (bords) + 2) Œil central étiré */
  background:
    /* ✅ CADRE UNIFORME: même épaisseur partout */
    radial-gradient(
      circle at 50% 50%,
      rgba(0,0,0,0.16) 0%,
      rgba(0,0,0,0.10) 72%,
      rgba(0,0,0,0.22) 100%
    ),

    /* ✅ ŒIL BLANC: ellipse étirée, arrêt avant les bords */
    radial-gradient(
      ellipse 86% 60% at 50% 56%,
      #ffffff 0%,
      rgba(255,255,255,0.98) 28%,
      rgba(237,237,237,0.90) 52%,
      rgba(237,237,237,0.45) 68%,
      rgba(237,237,237,0.00) 78%
    ),

    /* ✅ BASE GRIS CLAIR uniforme */
    linear-gradient(
      180deg,
      rgba(212,212,212,1) 0%,
      rgba(196,196,196,1) 100%
    );

  border: 1px solid rgba(17,17,17,.10);
  box-shadow:
    0 18px 60px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.60);

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

/* ✅ aucune trame orange */
.kc-appcard::before{ display:none; }

/* contenu au-dessus */
.kc-appcard > *{ position: relative; z-index: 1; }

/* Hover neutre */
@media (hover:hover){
  .kc-appcard:hover{
    transform: translateY(-4px);
    border-color: rgba(17,17,17,.18);
    box-shadow:
      0 26px 70px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.72);
  }
}

/* =========================================================
   DOWNLOAD — APP CARDS (Background = image)
   ========================================================= */

#download .kc-appcard{
  /* background image */
  background-color: var(--kc-light); /* fallback */
  background-image: url("../images/assets/care.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  border: 1px solid rgba(17,17,17,.10);
  border-radius: 22px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.60);
}

/* suppression définitive de tout overlay */
#download .kc-appcard::before{
  display: none !important;
}


/* =========================
   FOOTER — Premium KimyaCar
   ========================= */
.kc-footer{
  position: relative;
  padding: 64px 0 22px;
  background: radial-gradient(circle at top left, #1b1b1b 0, #0d0d0d 55%, #000 100%);
  overflow: hidden;
}

.kc-footer::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 20% 15%, rgba(212,175,55,.20), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
  pointer-events:none;
  z-index: 0;
}

.kc-footer .container{ position: relative; z-index: 1; }

.kc-footer__top{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.kc-footer__brand{
  text-decoration:none;
  display:inline-flex;
  margin-bottom: 12px;
}
.kc-footer__brandName{
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color:#fff;
}
.kc-footer__brandAccent{ color: var(--kc-gold); }

.kc-footer__about{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  max-width: 52ch;
}

.kc-footer__title{
  font-weight: 900;
  letter-spacing: .02em;
  margin: 8px 0 14px;
  color: rgba(255,255,255,.92);
}

.kc-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}
.kc-footer__links a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  transition: color .2s ease, transform .2s ease;
  display:inline-flex;
}
.kc-footer__links a:hover{
  color: #fff;
  transform: translateX(2px);
}

.kc-footer__social{
  display:flex;
  gap: 10px;
  margin-top: 8px;
}
.kc-social{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.kc-social:hover{
  transform: translateY(-2px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.42);
}

.kc-contact{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.kc-contact__head{ margin-bottom: 8px; }
.kc-badge{
  display:inline-flex;
  align-items:center;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #000;
  background: var(--kc-gold);
}
.kc-contact__line{
  margin: 0 0 6px;
  color: rgba(255,255,255,.76);
  line-height: 1.45;
}
.kc-contact__line a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.kc-contact__line a:hover{ color: #fff; text-decoration: underline; }

.kc-footer__mail{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  margin-top: 10px;
  color: rgba(255,255,255,.80);
}
.kc-footer__mail a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.kc-footer__mail a:hover{ text-decoration: underline; }
.kc-dot{ opacity:.6; }

.kc-footer__bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
}

.kc-footer__copy{
  color: rgba(255,255,255,.62);
  font-size: .92rem;
}

.kc-footer__mini{
  display:flex;
  align-items:center;
  gap: 10px;
}
.kc-miniText{
  color: rgba(255,255,255,.62);
  font-size: .92rem;
}
.kc-miniStore{
  width: 38px; height: 38px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.kc-miniStore:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(212,175,55,.42);
}

/* Responsive */
@media (max-width: 991.98px){
  .kc-footer__top{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .kc-footer__bottom{
    flex-direction: column;
    text-align:center;
  }
}