/* ═══════════════════════════════════════════════════════════════
   TOUKIDOU HOME — Design System v2.0
   Bleu TK #3089C5 · Jaune TK #F9C13B · Vert TK #10BC69 · Marine #0D2237
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
.home-main {
  --tk-blue:          #3089C5;
  --tk-blue-d:        #1E6FA8;
  --tk-blue-50:       #EEF6FD;
  --tk-yellow:        #F9C13B;
  --tk-yellow-d:      #D49600;
  --tk-green:         #10BC69;
  --tk-green-d:       #0C9A55;
  --tk-navy:          #0D2237;
  --tk-muted:         #5C738A;
  --tk-border:        rgba(48, 137, 197, 0.11);
  --tk-sh-card:       0 2px 8px rgba(13,34,55,.05), 0 8px 28px rgba(13,34,55,.08);
  --tk-sh-hover:      0 6px 20px rgba(13,34,55,.08), 0 22px 52px rgba(13,34,55,.13);
  --tk-sh-blue:       0 8px 28px rgba(48,137,197,.22);
  --tk-sh-yellow:     0 8px 28px rgba(249,193,59,.30);
  --tk-sh-green:      0 8px 28px rgba(16,188,105,.24);
}

/* ── Page shell ──────────────────────────────────────────────── */
.home-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #EDF5FC 0%, #F4F9FE 32%, #F9FCFF 68%, #FFFFFF 100%);
}
.home-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 7%  16%, rgba(48,137,197,.10) 0%, transparent 34%),
    radial-gradient(circle at 93% 8%,  rgba(249,193,59,.08) 0%, transparent 28%),
    radial-gradient(circle at 76% 85%, rgba(16,188,105,.07) 0%, transparent 32%);
  pointer-events: none;
  z-index: -1;
}

/* ── Novelty award frame (popup) — cadre retiré 2026-08-01 ────── */
.novelty-award-frame {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.novelty-award-frame img {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 0;
  display: block;
  background: transparent;
}

/* ── Hero carousel ───────────────────────────────────────────── */
.hero.hero-carousel { padding-top: 32px; }


.hero.hero-carousel::before {
  content: "";
  position: absolute;
  inset: 24px 5% auto;
  height: 80%;
  background:
    radial-gradient(circle at 14% 32%, rgba(48,137,197,.13), transparent 38%),
    radial-gradient(circle at 86% 20%, rgba(249,193,59,.10), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(16,188,105,.08), transparent 30%);
  filter: blur(52px);
  pointer-events: none;
  z-index: 0;
}
.hero.hero-carousel > .container-fluid { position: relative; z-index: 1; }

.hero-carousel .carousel-inner {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(13,34,55,.06), 0 24px 64px rgba(48,137,197,.10);
}

.hero-carousel .carousel-item {
  background:
    radial-gradient(circle at 5%  10%, rgba(48,137,197,.09), transparent 32%),
    radial-gradient(circle at 95% 88%, rgba(249,193,59,.08), transparent 28%),
    linear-gradient(135deg, rgba(237,245,253,.92) 0%, rgba(255,255,255,.58) 52%, rgba(244,250,255,.92) 100%);
}

/* Reveal animations */
.hero-carousel .carousel-item.active .hero-carousel-kicker,
.hero-carousel .carousel-item.active .hero-carousel-copy h1,
.hero-carousel .carousel-item.active .hero-carousel-copy p,
.hero-carousel .carousel-item.active .hero-carousel-tags,
.hero-carousel .carousel-item.active .hero-carousel-copy .d-flex {
  animation: tkReveal .72s cubic-bezier(.22,1,.36,1) both;
}
.hero-carousel .carousel-item.active .hero-carousel-copy h1   { animation-delay: .06s; }
.hero-carousel .carousel-item.active .hero-carousel-copy p    { animation-delay: .14s; }
.hero-carousel .carousel-item.active .hero-carousel-tags      { animation-delay: .22s; }
.hero-carousel .carousel-item.active .hero-carousel-copy .d-flex { animation-delay: .30s; }

.hero-carousel-panel {
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 48px 64px;
  position: relative;
}
.hero-carousel-copy { max-width: 820px; }

.hero-carousel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(48,137,197,.10);
  border: 1px solid rgba(48,137,197,.20);
  color: var(--tk-blue-d);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-carousel-copy h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
  max-width: 18ch;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue) 42%, var(--tk-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 8px 16px rgba(13,34,55,.07));
}
.hero-carousel-copy h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 18px rgba(249,193,59,.35);
}

.hero-carousel-copy p {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--tk-muted);
  margin-bottom: 20px;
  max-width: 56ch;
}

.hero-carousel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
}
.hero-carousel-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(48,137,197,.14);
  color: var(--tk-navy);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(13,34,55,.06);
}

/* Hero CTA buttons */
.hero-carousel .btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .96rem;
  text-decoration: none;
  border: none;
  box-shadow: var(--tk-sh-blue);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hero-carousel .btn-get-started:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(48,137,197,.32);
}
.hero-carousel .btn-watch-video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(48,137,197,.18);
  color: var(--tk-navy);
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(13,34,55,.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hero-carousel .btn-watch-video:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(13,34,55,.10);
}

/* Hero visual */
.hero-carousel-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 360px;
  position: relative;
}
.hero-carousel-visual.hero-visual-van-scene  { align-items: flex-end; padding-bottom: 10px; }
.hero-carousel-visual.hero-visual-kids-scene { align-items: flex-end; padding-bottom: 18px; }

.hero-carousel-visual::before {
  content: "";
  position: absolute;
  width: min(400px, 85%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,252,255,.78), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
.hero-carousel-visual img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 36px rgba(13,34,55,.14));
}
.hero-carousel-visual img.hero-visual-soft-edge {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at center, #000 62%, transparent 100%);
  mask-image: radial-gradient(circle at center, #000 62%, transparent 100%);
}
.hero-carousel .hero-visual-van { margin-bottom: -10px; }

/* Road pulse */
.hero-carousel-visual.hero-visual-van-scene::after {
  content: "";
  position: absolute;
  left: 12%; right: 8%; bottom: 2.5%;
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(48,137,197,.24) 28%, rgba(249,193,59,.28) 55%, rgba(48,137,197,.24) 82%, transparent);
  animation: tkRoadPulse 2.2s ease-in-out infinite;
}
.hero-carousel-visual.hero-visual-kids-scene::after {
  content: "";
  position: absolute;
  left: 16%; right: 14%; bottom: 8%;
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(48,137,197,.16) 28%, rgba(16,188,105,.18) 55%, rgba(48,137,197,.16) 82%, transparent);
  animation: tkRoadPulse 2.5s ease-in-out infinite;
}

/* Carousel controls */
.hero-carousel .carousel-indicators { margin-bottom: 20px; }
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: rgba(48,137,197,.22); border: none;
  transition: background-color 250ms, transform 250ms;
}
.hero-carousel .carousel-indicators .active {
  background-color: var(--tk-blue);
  transform: scale(1.35);
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 58px; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background-color: rgba(13,34,55,.44);
  background-size: 50% 50%;
  box-shadow: 0 8px 20px rgba(13,34,55,.16);
}

/* ── Section titles ──────────────────────────────────────────── */
.home-main .section-title { position: relative; }
.home-main .section-title h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: var(--tk-navy);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.home-main .section-title p {
  color: var(--tk-muted);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Alignement justify + hyphens sur tous les paragraphes des sections
   home (intros, descriptions, contenus libres). Le carousel testimonials
   et les mini-labels métadata ne sont pas concernés (classes dédiées). */
.home-main .section-title > p,
.home-main .section-title .lead,
.home-main .about .tk-partners-intro {
  text-align: justify !important;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Pricing intro — même container que les cartes, alignement parfait */
.home-main .services-intro-text {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
  color: var(--tk-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}
.home-main .section-title::after {
  content: "";
  display: block;
  width: 68px; height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 18px rgba(249,193,59,.32);
}

/* ── Featured Services ───────────────────────────────────────── */
.home-main .featured-services .service-item {
  padding: 32px 26px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid var(--tk-border) !important;
  box-shadow: var(--tk-sh-card) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}
.home-main .featured-services .service-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--tk-sh-hover) !important;
}
.home-main .featured-services .col-lg-4:nth-child(1) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%) !important;
  box-shadow: var(--tk-sh-blue) !important;
}
.home-main .featured-services .col-lg-4:nth-child(2) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%) !important;
  box-shadow: var(--tk-sh-yellow) !important;
}
.home-main .featured-services .col-lg-4:nth-child(3) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-d) 100%) !important;
  box-shadow: var(--tk-sh-green) !important;
}
.home-main .featured-services .service-item .icon {
  width: 64px !important; height: 64px !important;
  border-radius: 20px !important; margin-bottom: 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.home-main .featured-services .service-item .icon i {
  font-size: 28px !important;
  color: #fff !important;
  line-height: 1 !important;
}
.home-main .featured-services .service-item h4 {
  font-size: 1.06rem !important; font-weight: 800 !important;
  color: var(--tk-navy) !important; margin-bottom: 10px !important; letter-spacing: -.02em !important;
}
.home-main .featured-services .service-item p {
  font-size: .93rem !important; color: var(--tk-muted) !important; line-height: 1.65 !important; margin: 0 !important;
}

/* ── About ───────────────────────────────────────────────────── */
.home-main .about { background: #FFFFFF; }

/* ── Section intro — paragraphe qui suit le titre + ligne gradient ─
   Utilisé par : Partenaires, Testimonials, FAQ, Blog. Pleine largeur
   du .container parent (aligné avec le contenu qui suit), passe sous
   le trait gradient de .section-title::after. */
.home-main .tk-section-intro {
  color: var(--tk-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: justify !important;
  hyphens: none;
  -webkit-hyphens: none;
  max-width: 100%;
  margin: 22px auto 34px;
}
@media (max-width: 767.98px) {
  .home-main .tk-section-intro {
    font-size: 1rem;
    margin: 18px auto 24px;
    /* Règle 2026-07-31 : justify + hyphens conservés même sur mobile */
  }
}

/* ── Justify global pour tous les paragraphes de la home ──────────
   Règle éditoriale user 2026-07-31 (mise à jour de 2026-07-20) :
   tous les paragraphes justifiés, dans TOUS les cas, y compris mobile.
   Aucune exception liée au viewport n'est acceptée pour du contenu.
   Cf. memory/feedback_paragraphs_justify_always.md. */
.home-main p {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Exceptions : garder ces éléments courts en center pour l'effet visuel */
.home-main .tkg-tagline,
.home-main .tk-stars,
.home-main .tk-card-tag,
.home-main .tk-card-title,
.home-main .tk-profile-info h4,
.home-main .tk-profile-info p,
.home-main .call-to-action p,
.home-main .stats-item p,
.home-main .testimonial-card p,
.home-main .tk-tcard blockquote {
  text-align: center !important;
}
/* Blog card excerpt : justify car c'est du corpus */
.home-main .tk-card-standard .tk-card-excerpt {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}

.tk-partners-wrap { padding: 12px 0 24px; }

/* ── Card unifiée — pattern partagé pour toutes les sections ─────
   Applique aux : blog cards, tuiles témoignages statiques restantes,
   toute nouvelle card. Radius 20px, ombre subtile au repos, ombre +
   translateY au hover. */
.home-main .tk-card-standard {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 26px 24px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.home-main .tk-card-standard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15,23,42,.12);
  border-color: rgba(48,137,197,.32);
}

/* Tag / catégorie en haut de la card blog */
.home-main .tk-card-standard .tk-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-main .tk-card-standard .tk-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: #0D2237;
  margin: 0 0 6px;
  line-height: 1.4;
}
.home-main .tk-card-standard .tk-card-excerpt {
  font-size: .82rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

/* Bouton « Voir tous les articles » (link secondary style) */
.home-main .tk-blog-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  border: 1.5px solid #BFDBFE;
  border-radius: 10px;
  padding: 10px 22px;
  background: #fff;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-main .tk-blog-more:hover {
  background: #EFF6FF;
  box-shadow: 0 6px 18px rgba(37,99,235,.14);
  transform: translateY(-2px);
}

.tk-partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 992px) {
  .tk-partners-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
  .tk-partners-grid { grid-template-columns: 1fr; }
}

.tk-partner-tile {
  background: #fff;
  border: 1px solid var(--tk-border, #e5e7eb);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  box-shadow: 0 2px 10px rgba(13,34,55,.04);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.tk-partner-tile img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.94;
  transition: opacity .3s ease, transform .3s ease;
}
.tk-partner-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(48,137,197,.20);
  border-color: rgba(48,137,197,.42);
  z-index: 2;
  position: relative;
}
.tk-partner-tile:hover img {
  opacity: 1;
  transform: scale(1.08);
}

/* Tuile spéciale « Des centaines de familles » — traitement distinct
   pour attirer l'œil : pas de filtre monochrome, fond mis en valeur. */
.tk-partner-tile--families {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: 0 8px 26px rgba(48,137,197,.22);
  border-radius: 20px;
  overflow: hidden;
}
.tk-partner-tile--families img {
  filter: none;
  opacity: 1;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.tk-partner-tile--families:hover {
  box-shadow: 0 16px 38px rgba(48,137,197,.32);
  transform: translateY(-4px);
}
.tk-partner-tile--families:hover img { transform: none; }

.home-main .about .img-fluid {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(13,34,55,.12), 0 32px 72px rgba(48,137,197,.10);
}

/* Eco benefits card */
.home-main .about .why-toukidou {
  border-radius: 20px !important;
  background: linear-gradient(135deg, var(--tk-blue-50) 0%, rgba(255,255,255,.82) 100%) !important;
  border: 1px solid rgba(48,137,197,.13) !important;
  box-shadow: var(--tk-sh-card) !important;
  padding: 24px !important;
}
.home-main .about .why-toukidou h3 { font-size: .98rem !important; font-weight: 800 !important; color: var(--tk-navy) !important; letter-spacing: -.02em !important; }
.home-main .about .eco-benefits strong { color: var(--tk-navy); font-size: .92rem; }
.home-main .about .eco-benefits small  { color: var(--tk-muted); font-size: .80rem; }
.home-main .about .eco-benefits i      { color: var(--tk-blue) !important; }

/* Benefits list */
.home-main .about .benefits-box { margin-top: 0; }
.home-main .about .benefits-box h3,
.home-main .about .how-it-works h3 {
  font-size: 1.06rem; font-weight: 800; color: var(--tk-navy); letter-spacing: -.02em;
}
.home-main .about .benefits-list { list-style: none; padding: 0; margin: 10px 0 0; }
.home-main .about .benefits-list li {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px; font-size: .93rem; color: #374151; line-height: 1.5;
}
.home-main .about .benefits-list li i { color: var(--tk-green) !important; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }

/* Steps numbered list */
.home-main .about .steps-list { padding-left: 0; margin: 10px 0 0; list-style: none; counter-reset: tk-steps; }
.home-main .about .steps-list li {
  counter-increment: tk-steps;
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px; font-size: .93rem; color: #374151; line-height: 1.5;
}
.home-main .about .steps-list li::before {
  content: counter(tk-steps);
  min-width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff; font-size: .76rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(48,137,197,.28); margin-top: 1px;
}

/* ── Stats ───────────────────────────────────────────────────── */
.home-main .stats {
  background: linear-gradient(135deg, var(--tk-navy) 0%, #152e4d 52%, #0e2640 100%) !important;
  position: relative; overflow: hidden;
}
.home-main .stats::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 55%, rgba(48,137,197,.22), transparent 42%),
    radial-gradient(circle at 88% 28%, rgba(249,193,59,.14), transparent 38%);
  pointer-events: none;
}
.home-main .stats .section-title h2  { color: #FFFFFF !important; }
.home-main .stats .section-title p   { color: rgba(255,255,255,.72) !important; }
.home-main .stats .section-title::after {
  background: linear-gradient(90deg, rgba(255,255,255,.45), var(--tk-yellow));
}
.home-main .stats .stats-item {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px !important;
  padding: 32px 20px !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
.home-main .stats .stats-item .stat-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.home-main .stats .stats-item span {
  color: var(--tk-yellow) !important;
  font-size: 2.7rem !important;
  font-weight: 900 !important;
  letter-spacing: -.04em;
  display: inline !important;
}
.home-main .stats .stats-item .stat-suffix {
  color: var(--tk-yellow) !important;
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  display: inline !important;
}
.home-main .stats .stats-item p {
  color: rgba(255,255,255,.82) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  letter-spacing: .02em;
}

/* ── Services / Pricing ──────────────────────────────────────── */
.home-main #services.services { background: #F4F9FE !important; }

.home-pricing-grid { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

.home-main .home-pricing-card {
  padding: 48px 18px 28px !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--tk-border) !important;
  box-shadow: var(--tk-sh-card) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  height: 100%;
}
.home-main .home-pricing-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--tk-sh-hover) !important;
}
/* Icon par colonne */
.home-main #services .col-lg-3:nth-child(1) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-blue)   0%, var(--tk-blue-d) 100%) !important;
  box-shadow: var(--tk-sh-blue) !important;
}
.home-main #services .col-lg-3:nth-child(2) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%) !important;
  box-shadow: var(--tk-sh-yellow) !important;
}
.home-main #services .col-lg-3:nth-child(3) .service-item .icon {
  background: linear-gradient(135deg, var(--tk-green)  0%, var(--tk-green-d) 100%) !important;
  box-shadow: var(--tk-sh-green) !important;
}
.home-main #services .col-lg-3:nth-child(4) .service-item .icon {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.24) !important;
}
.home-main .home-pricing-card h3 {
  font-size: 1rem !important; font-weight: 800 !important; color: var(--tk-navy) !important;
  letter-spacing: -.02em !important; line-height: 1.3 !important; margin-bottom: 14px !important;
}
.home-main .home-pricing-card li {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 7px; font-size: .84rem; color: #374151;
  line-height: 1.25; white-space: nowrap; overflow: hidden;
}
.home-main .home-pricing-card li span { overflow: hidden; text-overflow: ellipsis; }
.home-main .home-pricing-card li .bi-check2-all { color: var(--tk-green); flex-shrink: 0; margin-top: 2px; }
.home-main .home-pricing-card li .bi-cash-coin  { color: var(--tk-blue);  flex-shrink: 0; margin-top: 2px; }

/* Badge "Forfait préféré" — TK Jaune */
.home-pricing-badge {
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%) !important;
  color: var(--tk-navy) !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 14px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(249,193,59,.38) !important;
}

/* ── Zones de service ────────────────────────────────────────── */
#zones.services { background: #FFFFFF !important; }
#zones .service-item {
  padding: 22px 22px 22px 26px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(48,137,197,.09) !important;
  border-left: 4px solid var(--tk-blue) !important;
  box-shadow: var(--tk-sh-card) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-left-color 220ms ease !important;
}
#zones .service-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--tk-sh-hover) !important;
  border-left-color: var(--tk-yellow) !important;
}
#zones .service-item h3 { font-size: 1.04rem !important; font-weight: 800 !important; color: var(--tk-navy) !important; margin-bottom: 6px !important; }
#zones .service-item p  { font-size: .89rem !important; color: var(--tk-muted) !important; line-height: 1.6 !important; margin: 0 !important; }

/* ── Testimonials — infinite marquee ─────────────────────────── */
.home-main .testimonials {
  background: linear-gradient(135deg, var(--tk-blue-50) 0%, #FAFCFF 100%) !important;
  padding-bottom: 64px !important;
}
.home-main .testimonials .section-title h2 { color: var(--tk-navy) !important; }

/* Outer wrapper clips overflow + fades edges */
.tk-marquee-outer {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.tk-marquee-outer:hover .tk-marquee-track { animation-play-state: paused; }

.tk-marquee-row { margin-bottom: 20px; }
.tk-marquee-row:last-child { margin-bottom: 0; }

/* The moving strip — contains all cards × 2 for seamless loop */
.tk-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
}
.tk-marquee-track--left  { animation: tk-left  44s linear infinite; }
.tk-marquee-track--right { animation: tk-right 38s linear infinite; }

@keyframes tk-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes tk-right { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* Individual card */
.tk-tcard {
  background: #fff;
  border-radius: 20px;
  padding: 26px 28px;
  border: 1px solid var(--tk-border);
  box-shadow: var(--tk-sh-card);
  position: relative;
  overflow: hidden;
  min-width: 310px;
  max-width: 340px;
  flex-shrink: 0;
}
.tk-tcard::before {
  content: "\201C";
  position: absolute; top: 10px; right: 18px;
  font-size: 5.5rem; line-height: 1;
  color: var(--tk-blue); opacity: .06;
  font-family: Georgia, serif; pointer-events: none;
}
.tk-tcard .tk-stars { color: #F59E0B; font-size: .86rem; margin-bottom: 10px; letter-spacing: 1px; }
.tk-tcard blockquote {
  font-size: .93rem; color: #374151;
  line-height: 1.7; margin: 0 0 18px; font-style: italic;
}
.tk-tcard .tk-profile { display: flex; align-items: center; gap: 12px; }
.tk-tcard .tk-profile img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(48,137,197,.22);
  flex-shrink: 0;
}
.tk-tcard .tk-avatar-initials {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.tk-tcard .tk-profile-info h4 { font-size: .9rem; font-weight: 800; color: var(--tk-navy); margin: 0 0 2px; }
.tk-tcard .tk-profile-info p  { font-size: .78rem; color: var(--tk-muted); margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.home-main .faq { background: #FFFFFF; }
.home-main .accordion-item {
  border: 1px solid rgba(48,137,197,.10) !important;
  border-radius: 14px !important;
  margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--tk-sh-card) !important;
}
.home-main .accordion-button {
  font-size: .95rem !important; font-weight: 700 !important;
  color: var(--tk-navy) !important; background: #fff !important;
  padding: 18px 20px !important;
}
.home-main .accordion-button:not(.collapsed) { color: var(--tk-blue) !important; }
.home-main .accordion-body p { font-size: .91rem !important; color: var(--tk-muted) !important; line-height: 1.72 !important; }

/* ── Call-to-Action ──────────────────────────────────────────── */
.home-main .call-to-action {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 52%, var(--tk-navy) 100%) !important;
  position: relative; overflow: hidden;
}
.home-main .call-to-action::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 14% 54%, rgba(249,193,59,.16), transparent 40%),
    radial-gradient(circle at 88% 28%, rgba(255,255,255,.06), transparent 38%);
  pointer-events: none;
}
.home-main .call-to-action h2 {
  color: #FFFFFF !important; font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -.03em !important;
}
.home-main .call-to-action p  { color: rgba(255,255,255,.82) !important; font-size: 1rem !important; line-height: 1.68 !important; }
.home-main .call-to-action .cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 14px;
  background: var(--tk-yellow);
  color: var(--tk-navy) !important;
  font-weight: 800; text-decoration: none; border: none;
  box-shadow: var(--tk-sh-yellow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.home-main .call-to-action .cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(249,193,59,.46);
}
.home-main .call-to-action .cta-btn.secondary {
  background: rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: none !important;
}
.home-main .call-to-action .cta-btn.secondary:hover {
  background: rgba(255,255,255,.22) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}

/* ── Contact ─────────────────────────────────────────────────── */
.home-main .contact { background: #F4F9FE; }
/* Reset du wrapper .info-wrap — pas de sur-cadre autour des 2 info-items
   (main.css ligne 1364 ajoutait background + shadow + padding : on
   annule ici pour ne garder que les cadres individuels). */
.home-main .contact .info-wrap {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* Info items — aligné sur .tk-card-standard (radius 20px, ombre subtile,
   hover translateY + shadow amplifiée) pour cohérence avec blog cards. */
.home-main .contact .info-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
  padding: 24px 26px;
  margin-bottom: 16px;
  gap: 16px;
  align-items: center;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.home-main .contact .info-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(15,23,42,.12);
  border-color: rgba(48,137,197,.32);
}
.home-main .contact .info-item i  { color: var(--tk-blue) !important; font-size: 1.5rem; }
.home-main .contact .info-item h3 { font-size: .95rem; font-weight: 800; color: var(--tk-navy); margin-bottom: 4px; }
.home-main .contact .info-item p  { font-size: .88rem; color: var(--tk-muted); margin: 0; line-height: 1.6; text-align: left; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes tkReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tkRoadPulse {
  0%, 100% { opacity: .2; transform: scaleX(.9); }
  50%       { opacity: .9; transform: scaleX(1.05); }
}
@keyframes homeHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes homeHeroVanRoll {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  20%       { transform: translate3d(18px,-2px,0) rotate(-1deg); }
  48%       { transform: translate3d(38px,1px,0) rotate(.8deg); }
  74%       { transform: translate3d(20px,-1px,0) rotate(-.7deg); }
}
@keyframes homeHeroKidsMotion {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  30%       { transform: translate3d(10px,-10px,0) rotate(-1.8deg) scale(1.024); }
  65%       { transform: translate3d(18px,-2px,0) rotate(1.2deg) scale(1.018); }
}
.hero-carousel .carousel-item.active .hero-carousel-visual img { animation: homeHeroFloat 6s ease-in-out infinite; opacity: 1; }
.hero-carousel .carousel-item.active .hero-carousel-visual img.hero-visual-van   { animation: homeHeroVanRoll 3.2s ease-in-out infinite; transform-origin: center bottom; opacity: 1; }
.hero-carousel .carousel-item.active .hero-carousel-visual img.hero-visual-kids  { animation: homeHeroKidsMotion 3.4s ease-in-out infinite; transform-origin: center center; opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-carousel-panel { min-height: unset; padding: 32px 22px 52px; }
  .hero-carousel-copy h1 { max-width: none; }
  .hero-carousel-copy h1::after { width: 58px; margin-top: 12px; }
  .hero-carousel-visual { margin-top: 24px; min-height: unset; justify-content: center; }
  .hero-carousel-visual img { max-height: 300px; }
  .home-main .about .tk-partners-intro { font-size: 1rem; }
  .home-main .home-pricing-card { padding: 48px 18px 26px !important; }
}
@media (max-width: 767.98px) {
  .home-main .about .tk-partners-intro { hyphens: none; overflow-wrap: break-word; word-break: normal; }
}
@media (max-width: 1399.98px) {
  .home-main .home-pricing-card { padding: 50px 20px 28px !important; }
  .home-main .home-pricing-card h3 { font-size: .96rem !important; }
  .home-main .home-pricing-card li  { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item.active .hero-carousel-kicker,
  .hero-carousel .carousel-item.active .hero-carousel-copy h1,
  .hero-carousel .carousel-item.active .hero-carousel-copy p,
  .hero-carousel .carousel-item.active .hero-carousel-tags,
  .hero-carousel .carousel-item.active .hero-carousel-copy .d-flex,
  .hero-carousel .carousel-item.active .hero-carousel-visual img { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   GSAP Brand Slide — slide sombre avec animation TouKidou
   ═══════════════════════════════════════════════════════════ */
.tkg-panel {
  background: linear-gradient(140deg, #071829 0%, #0D2237 48%, #0E2C44 100%);
  min-height: 560px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 48px 24px;
}

/* Orbes lumineux en arrière-plan */
.tkg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.tkg-orb-1 {
  width: 600px; height: 600px;
  top: -220px; right: -130px;
  background: radial-gradient(circle, rgba(48,137,197,.22) 0%, transparent 68%);
}
.tkg-orb-2 {
  width: 480px; height: 480px;
  bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(249,193,59,.15) 0%, transparent 68%);
}
.tkg-orb-3 {
  width: 360px; height: 360px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(16,188,105,.11) 0%, transparent 68%);
}

/* Particules flottantes */
.tkg-dot { position: absolute; border-radius: 50%; pointer-events: none; }

/* Zone de contenu centré */
.tkg-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

/* Nom TouKidou en grandes lettres */
.tkg-name {
  font-family: var(--heading-font);
  font-size: clamp(4rem, 11vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  display: flex;
  align-items: baseline;
  user-select: none;
}
.tkg-word { display: inline-flex; }
.tkg-c    { display: inline-block; }
/* Couleurs logo : Tou & dou = bleu clair, Ki = jaune */
.tkg-tou .tkg-c, .tkg-dou .tkg-c { color: #7EC8EF; }
.tkg-ki  .tkg-c                   { color: #F9C13B; }

/* Ligne décorative */
.tkg-line {
  width: 180px; height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3089C5 0%, #F9C13B 50%, #10BC69 100%);
  transform-origin: left center;
  margin: 22px auto 28px;
  box-shadow: 0 0 24px rgba(249,193,59,.42);
}

/* Phrase d'accroche */
.tkg-tagline {
  font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
  color: rgba(255,255,255,.74) !important;
  font-weight: 300 !important;
  letter-spacing: 0.07em;
  margin: 0 0 22px !important;
  text-align: center !important;
  hyphens: none !important;
}

/* Badges de confiance */
.tkg-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 32px;
}
.tkg-trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tkg-trust-badges span i {
  font-size: .85rem;
  color: #5BB8EF;
}

/* Bouton CTA */
.tkg-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3089C5 0%, #1E6FA8 100%);
  color: #fff !important;
  font-weight: 700; font-size: .96rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(48,137,197,.38);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tkg-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(48,137,197,.52);
  color: #fff !important;
}
.tkg-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.tkg-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10BC69 0%, #0ca558 100%);
  color: #fff !important;
  font-weight: 700; font-size: .96rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(16,188,105,.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tkg-cta-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(16,188,105,.50);
  color: #fff !important;
}

@media (max-width: 768px) {
  .tkg-panel { min-height: unset; padding: 56px 20px; }
  .tkg-line  { width: 130px; }
}

/* ── Scène du van ─────────────────────────────────────────────────────────── */
.tkg-road-scene {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  pointer-events: none;
  overflow: visible;    /* le van déborde à gauche / droite le temps du transit */
  z-index: 3;
}

/* Route */
.tkg-road-strip {
  position: absolute;
  bottom: 0; left: -4px; right: -4px;
  height: 34px;
  background: linear-gradient(180deg, #0b1e32 0%, #071220 100%);
  border-top: 1.5px solid rgba(255,255,255,.07);
}
/* Pointillés centraux — défilent de droite à gauche pour donner l'impression de vitesse */
.tkg-road-strip::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 32px,
    transparent 32px, transparent 68px
  );
  background-size: 100px 2px;
  animation: tkg-road-dash 2.2s linear infinite;
}
@keyframes tkg-road-dash {
  from { background-position-x: 0; }
  to   { background-position-x: -100px; }
}

/* Van */
.tkg-van-anim {
  position: absolute;
  bottom: 20px;
  left: 0;
  height: 72px;
  width: auto;
  will-change: transform;
  transform: translateX(-380px);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.60))
          drop-shadow(0 3px 10px rgba(255,200,60,.18));
}
/* Rebond des roues pendant le déplacement */
@keyframes tkg-van-bounce {
  0%, 100% { transform: translateY(0);    }
  25%       { transform: translateY(-2px); }
  75%       { transform: translateY(-1px); }
}
/* Reflets de vitesse (lignes blanches fuyantes) */
.tkg-speed-lines {
  position: absolute;
  bottom: 36px;
  left: -380px;
  width: 140px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.tkg-speed-lines span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, transparent 100%);
}
.tkg-speed-lines span:nth-child(1) { width: 70%; }
.tkg-speed-lines span:nth-child(2) { width: 100%; }
.tkg-speed-lines span:nth-child(3) { width: 55%; }
/* Fumée / exhaust */
.tkg-exhaust {
  position: absolute;
  bottom: 58px;
  left: -380px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(200,220,255,.12);
  opacity: 0;
  pointer-events: none;
  filter: blur(4px);
}

/* ── Faisceau phare avant ─────────────────────────── */
.tkg-headlight {
  position: absolute;
  bottom: 38px;
  left: 0;
  width: 160px;
  height: 36px;
  /* coin gauche (source) : occupe 40%→70% = centre à 55% de la hauteur du div */
  clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 70%);
  background: linear-gradient(90deg,
    rgba(255,250,140,.65) 0%,
    rgba(255,228,80,.22) 50%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
}
.tkg-headlight-dot {
  position: absolute;
  left: 0px;
  top: 55%;              /* centré sur le faisceau (clip centre = 55%) */
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,220,1)  0%,
    rgba(255,230,90,.55) 50%,
    transparent          100%);
  filter: blur(1.5px);
  animation: tkg-hlight-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes tkg-hlight-pulse {
  from { transform: translateY(-50%) scale(1);   opacity: 1;   }
  to   { transform: translateY(-50%) scale(1.6); opacity: 0.65; }
}

/* ── Traînée de poussière arrière ─────────────────── */
.tkg-dust-trail {
  position: absolute;
  bottom: 22px;
  left: 0;
  pointer-events: none;
  opacity: 0;
}
.tkg-dust-trail span {
  position: absolute;
  border-radius: 50%;
  background: rgba(155,135,95,.55);
  filter: blur(2.5px);
  animation: tkg-dust-up 1.2s ease-out infinite;
}
.tkg-dust-trail span:nth-child(1) { width:9px;  height:9px;  left:-5px;  bottom:1px;  animation-delay:.00s; animation-duration:1.1s; }
.tkg-dust-trail span:nth-child(2) { width:13px; height:13px; left:-14px; bottom:4px;  animation-delay:.28s; animation-duration:1.4s; }
.tkg-dust-trail span:nth-child(3) { width:7px;  height:7px;  left:-3px;  bottom:0px;  animation-delay:.55s; animation-duration:0.9s; }
.tkg-dust-trail span:nth-child(4) { width:11px; height:11px; left:-11px; bottom:6px;  animation-delay:.82s; animation-duration:1.2s; }
.tkg-dust-trail span:nth-child(5) { width:8px;  height:8px;  left:-19px; bottom:3px;  animation-delay:.12s; animation-duration:1.5s; }
@keyframes tkg-dust-up {
  0%   { transform: translate(0,    0)      scale(1);   opacity: .70; }
  100% { transform: translate(-22px,-30px)  scale(2.5); opacity: 0;   }
}

@media (max-width: 640px) {
  .tkg-van-anim   { height: 54px; }
  /* height 80px = bottom:20px + van height 54px + 6px marge → van entier visible */
  .tkg-road-scene { height: 80px; }
  /* phare ajusté sur mobile */
  .tkg-headlight  { bottom: 31px; }
}