/* ═══════════════════════════════════════════════════════════════════════════
   TOUKIDOU MOBILE.CSS — Couche mobile-first (v2026-07-31)
   ═══════════════════════════════════════════════════════════════════════════
   Chargée APRÈS main.css. Zéro token nouveau — réutilise --tk-* déjà déclarés
   dans main.css:4997. Vocation : couvrir les breakpoints et composants
   mobile-native qui manquaient au CSS desktop-first historique.

   Convention breakpoints (mobile-first, min-width uniquement) :
     < 576px  : mobile portrait (défaut, styles de base)
     ≥ 576px  : mobile landscape / phablet
     ≥ 768px  : tablet portrait
     ≥ 992px  : tablet landscape / laptop
     ≥ 1200px : desktop

   Convention nommage :
     .tkm-*     : composants nouveaux mobile-first
     .tkm-hero  : héros pleine largeur adaptatif
     .tkm-btn   : boutons tactiles ≥ 48px
     etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens additionnels (spacing / typo fluide) ─────────────── */
:root {
  /* Fluid spacing scale — clamp(mobile, viewport-relative, desktop) */
  --tkm-space-1: clamp(0.375rem, 1vw, 0.5rem);    /* 6-8px */
  --tkm-space-2: clamp(0.5rem, 1.5vw, 0.75rem);   /* 8-12px */
  --tkm-space-3: clamp(0.75rem, 2vw, 1rem);       /* 12-16px */
  --tkm-space-4: clamp(1rem, 3vw, 1.5rem);        /* 16-24px */
  --tkm-space-5: clamp(1.5rem, 4vw, 2rem);        /* 24-32px */
  --tkm-space-6: clamp(2rem, 5vw, 3rem);          /* 32-48px */
  --tkm-space-7: clamp(2.5rem, 6vw, 4rem);        /* 40-64px */
  --tkm-space-8: clamp(3rem, 8vw, 5rem);          /* 48-80px */

  /* Fluid type scale — mobile lisible sans dézoom */
  --tkm-type-xs:  clamp(0.75rem, 2vw, 0.82rem);   /* 12-13px */
  --tkm-type-sm:  clamp(0.875rem, 2.5vw, 0.95rem);/* 14-15px */
  --tkm-type-base:clamp(0.95rem, 3vw, 1.05rem);   /* 15-17px */
  --tkm-type-lg:  clamp(1.1rem, 3.5vw, 1.25rem);  /* 18-20px */
  --tkm-type-xl:  clamp(1.3rem, 4vw, 1.5rem);     /* 21-24px */
  --tkm-type-h3:  clamp(1.4rem, 4.5vw, 1.8rem);   /* 22-29px */
  --tkm-type-h2:  clamp(1.6rem, 5.5vw, 2.4rem);   /* 26-38px */
  --tkm-type-h1:  clamp(2rem, 7vw, 3.2rem);       /* 32-51px */
  --tkm-type-display: clamp(2.4rem, 9vw, 4rem);   /* 38-64px */

  /* Touch target — 48px minimum (Google) / 44px (Apple), on prend 48px */
  --tkm-tap-min: 48px;

  /* Radius fluid — plus doux sur mobile */
  --tkm-radius-sm: 10px;
  --tkm-radius-md: 14px;
  --tkm-radius-lg: 20px;
  --tkm-radius-xl: 28px;

  /* Container mobile-first (padding respire sans coller les bords) */
  --tkm-container-px: clamp(1rem, 4vw, 1.5rem);
}

/* ── Règles de base mobile ────────────────────────────────────────── */

/* Empêche le zoom iOS sur focus input < 16px */
input, textarea, select { font-size: max(16px, 1em); }

/* Bloque scroll horizontal partout en mobile — dernier filet contre overflow.
   Si un composant a vraiment besoin, il utilisera .tkm-hscroll explicitement. */
html, body { overflow-x: hidden; }

/* RÈGLE ÉDITORIALE INTER-SESSION (2026-07-31) :
   Tous les paragraphes DOIVENT rester justifiés, même sur mobile. Le CSS
   global (base.html:148) applique déjà `text-align: justify + hyphens: auto`.
   Aucune règle ici ne doit revenir à `text-align: left` pour les <p>.
   Cf. memory/feedback_paragraphs_justify_always.md. */

/* ── Container mobile-first ──────────────────────────────────────────── */
.tkm-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--tkm-container-px);
}

/* ── Section — vertical rythm fluide ─────────────────────────────────── */
.tkm-section {
  padding-block: var(--tkm-space-7);
}
.tkm-section-sm {
  padding-block: var(--tkm-space-5);
}
.tkm-section-lg {
  padding-block: var(--tkm-space-8);
}

/* Fond alternatif pour sections successives — évite « mur de blanc » */
.tkm-section-tint {
  background: linear-gradient(180deg, #F4F9FE 0%, #EDF5FC 100%);
}
.tkm-section-white {
  background: #ffffff;
}
.tkm-section-cream {
  background: linear-gradient(180deg, #FEFAF0 0%, #FFF7E4 100%);
}
.tkm-section-navy {
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue-d) 100%);
  color: #ffffff;
}
.tkm-section-navy h1, .tkm-section-navy h2, .tkm-section-navy h3 { color: #ffffff; }
.tkm-section-navy p { color: rgba(255,255,255,0.85); }

/* ── Titre de section — h2 + trait gradient signature TouKidou ────────── */
.tkm-section-title {
  text-align: center;
  margin-bottom: var(--tkm-space-5);
}
.tkm-section-title h2 {
  font-size: var(--tkm-type-h2);
  font-weight: 800;
  color: var(--tk-navy);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--tkm-space-3);
}
.tkm-section-title p {
  font-size: var(--tkm-type-base);
  color: var(--tk-muted);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.6;
}
.tkm-section-title::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin: var(--tkm-space-3) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 16px rgba(249,193,59,0.32);
}
.tkm-section-title.tkm-title-left { text-align: left; }
.tkm-section-title.tkm-title-left::after { margin-inline: 0; }

/* ── Hero mobile-first ───────────────────────────────────────────────── */
.tkm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--tkm-space-6) var(--tkm-space-7);
  background: linear-gradient(180deg, #EDF5FC 0%, #F4F9FE 45%, #FFFFFF 100%);
}
.tkm-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(48,137,197,.13), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(249,193,59,.10), transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(16,188,105,.07), transparent 34%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
}
.tkm-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(48,137,197,.10);
  border: 1px solid rgba(48,137,197,.20);
  color: var(--tk-blue-d);
  font-size: var(--tkm-type-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--tkm-space-3);
}
.tkm-hero-title {
  font-size: var(--tkm-type-h1);
  font-weight: 800;
  color: var(--tk-navy);
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0 0 var(--tkm-space-3);
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue) 45%, var(--tk-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tkm-hero-title::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: var(--tkm-space-3);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue), var(--tk-yellow));
  box-shadow: 0 6px 16px rgba(249,193,59,.35);
}
.tkm-hero-lead {
  font-size: var(--tkm-type-lg);
  color: var(--tk-muted);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 var(--tkm-space-4);
}
.tkm-hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--tkm-space-3) 0 var(--tkm-space-4);
}
.tkm-hero-tags span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(48,137,197,.14);
  color: var(--tk-navy);
  font-size: var(--tkm-type-xs);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13,34,55,.06);
}
.tkm-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--tkm-space-5);
}
.tkm-hero-visual img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(13,34,55,.14));
  border-radius: var(--tkm-radius-lg);
}
@media (min-width: 768px) {
  .tkm-hero-visual img { max-height: 420px; }
}
@media (min-width: 992px) {
  .tkm-hero-visual img { max-height: 500px; }
}

/* ── Boutons tactiles (≥ 48px) ───────────────────────────────────────── */
.tkm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tkm-tap-min);
  padding: 12px 24px;
  border-radius: var(--tkm-radius-md);
  font-weight: 700;
  font-size: var(--tkm-type-base);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.tkm-btn:hover, .tkm-btn:focus-visible { transform: translateY(-2px); }
.tkm-btn:active { transform: translateY(0); }

.tkm-btn-primary {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #ffffff !important;
  box-shadow: var(--tk-sh-blue);
}
.tkm-btn-primary:hover { box-shadow: 0 14px 32px rgba(48,137,197,.32); color: #ffffff !important; }

.tkm-btn-yellow {
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%);
  color: var(--tk-navy) !important;
  box-shadow: var(--tk-sh-yellow);
}
.tkm-btn-yellow:hover { box-shadow: 0 14px 32px rgba(249,193,59,.42); color: var(--tk-navy) !important; }

.tkm-btn-secondary {
  background: rgba(255,255,255,.92);
  color: var(--tk-navy) !important;
  border: 1px solid rgba(48,137,197,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(13,34,55,.06);
}
.tkm-btn-secondary:hover { box-shadow: 0 10px 22px rgba(13,34,55,.12); color: var(--tk-navy) !important; }

.tkm-btn-ghost {
  background: transparent;
  color: var(--tk-blue-d) !important;
  border: 2px solid var(--tk-blue);
}
.tkm-btn-ghost:hover { background: var(--tk-blue-50); color: var(--tk-blue-d) !important; }

.tkm-btn-block {
  display: flex;
  width: 100%;
}
.tkm-btn-lg {
  min-height: 56px;
  padding: 14px 28px;
  font-size: var(--tkm-type-lg);
}

/* Groupe CTA — stack en mobile, inline en desktop */
.tkm-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-2);
  margin-top: var(--tkm-space-4);
}
.tkm-cta-group .tkm-btn { width: 100%; }
@media (min-width: 576px) {
  .tkm-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .tkm-cta-group .tkm-btn { width: auto; }
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.tkm-card {
  background: #ffffff;
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  border: 1px solid var(--tk-border);
  box-shadow: var(--tk-sh-card);
  transition: transform 240ms ease, box-shadow 240ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tkm-card:hover { transform: translateY(-4px); box-shadow: var(--tk-sh-hover); }

.tkm-card-icon {
  width: 56px; height: 56px;
  border-radius: var(--tkm-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
  font-size: 1.6rem;
  margin-bottom: var(--tkm-space-3);
}
.tkm-card-icon-blue   { background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%); box-shadow: var(--tk-sh-blue); }
.tkm-card-icon-yellow { background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%); box-shadow: var(--tk-sh-yellow); color: var(--tk-navy); }
.tkm-card-icon-green  { background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-d) 100%); box-shadow: var(--tk-sh-green); }

.tkm-card-title {
  font-size: var(--tkm-type-lg);
  font-weight: 800;
  color: var(--tk-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--tkm-space-2);
}
.tkm-card-text {
  font-size: var(--tkm-type-base);
  color: var(--tk-muted);
  line-height: 1.55;
  margin: 0;
}

/* Pricing card variant */
.tkm-pricing-card {
  position: relative;
  padding-top: var(--tkm-space-6);
}
.tkm-pricing-card.tkm-pricing-featured {
  border: 2px solid var(--tk-blue);
  box-shadow: var(--tk-sh-blue), 0 4px 16px rgba(13,34,55,.08);
}
.tkm-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%);
  color: var(--tk-navy);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--tkm-type-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--tk-sh-yellow);
  white-space: nowrap;
}
.tkm-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--tk-navy);
  font-weight: 800;
  margin: var(--tkm-space-3) 0 var(--tkm-space-2);
}
.tkm-pricing-amount {
  font-size: clamp(2.2rem, 8vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.tkm-pricing-period {
  font-size: var(--tkm-type-sm);
  color: var(--tk-muted);
  font-weight: 600;
}
.tkm-pricing-features {
  list-style: none;
  padding: 0;
  margin: var(--tkm-space-3) 0;
  flex: 1;
}
.tkm-pricing-features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  color: var(--tk-navy);
  font-size: var(--tkm-type-sm);
  line-height: 1.4;
}
.tkm-pricing-features li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  margin-top: 2px;
  background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-d) 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"), linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-d) 100%);
  background-size: 14px, 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Stats band ──────────────────────────────────────────────────────── */
.tkm-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-3);
  padding-block: var(--tkm-space-5);
}
@media (min-width: 768px) {
  .tkm-stats { grid-template-columns: repeat(4, 1fr); }
}
.tkm-stat {
  text-align: center;
  padding: var(--tkm-space-3) var(--tkm-space-2);
}
.tkm-stat-num {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tkm-stat-lbl {
  font-size: var(--tkm-type-xs);
  color: var(--tk-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* ── Features grid — 2 cols mobile, 3-4 desktop ─────────────────────── */
.tkm-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-3);
}
@media (min-width: 576px) { .tkm-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tkm-features { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .tkm-features.tkm-features-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Feature-list — liste puces gradient ─────────────────────────────── */
.tkm-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tkm-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--tkm-space-2) 0;
  border-bottom: 1px solid var(--tk-border);
}
.tkm-list li:last-child { border-bottom: none; }
.tkm-list li i, .tkm-list li .tkm-list-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tk-blue-50);
  color: var(--tk-blue-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.tkm-list li span {
  color: var(--tk-navy);
  font-size: var(--tkm-type-base);
  line-height: 1.55;
}
.tkm-list li strong { color: var(--tk-navy); font-weight: 700; }

/* ── Form fields ────────────────────────────────────────────────────── */
.tkm-form-group {
  margin-bottom: var(--tkm-space-3);
}
.tkm-form-label {
  display: block;
  font-size: var(--tkm-type-sm);
  font-weight: 700;
  color: var(--tk-navy);
  margin-bottom: 6px;
}
.tkm-form-label .tkm-required { color: #b91c1c; margin-left: 4px; }

.tkm-form-input,
.tkm-form-select,
.tkm-form-textarea {
  display: block;
  width: 100%;
  min-height: var(--tkm-tap-min);
  padding: 12px 14px;
  border-radius: var(--tkm-radius-md);
  border: 1px solid var(--tk-border);
  background: #ffffff;
  color: var(--tk-navy);
  font-size: max(16px, var(--tkm-type-base));
  line-height: 1.4;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.tkm-form-input:focus,
.tkm-form-select:focus,
.tkm-form-textarea:focus {
  outline: none;
  border-color: var(--tk-blue);
  box-shadow: 0 0 0 4px rgba(48,137,197,.14);
}
.tkm-form-textarea { min-height: calc(var(--tkm-tap-min) * 2); resize: vertical; }
.tkm-form-input::placeholder,
.tkm-form-textarea::placeholder { color: #94A3B8; }
.tkm-form-error {
  color: #b91c1c;
  font-size: var(--tkm-type-xs);
  margin-top: 4px;
}

/* ── FAQ accordion mobile-friendly ──────────────────────────────────── */
.tkm-faq { max-width: 720px; margin-inline: auto; }
.tkm-faq details {
  background: #ffffff;
  border: 1px solid var(--tk-border);
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-2);
  box-shadow: 0 2px 8px rgba(13,34,55,.04);
  overflow: hidden;
}
.tkm-faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--tk-navy);
  font-size: var(--tkm-type-base);
  min-height: var(--tkm-tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none;
}
.tkm-faq summary::-webkit-details-marker { display: none; }
.tkm-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--tk-blue-d);
  transition: transform 200ms;
  line-height: 1;
}
.tkm-faq details[open] summary { background: var(--tk-blue-50); }
.tkm-faq details[open] summary::after { transform: rotate(45deg); }
.tkm-faq details > *:not(summary) {
  padding: 4px 20px 18px;
  color: var(--tk-muted);
  font-size: var(--tkm-type-base);
  line-height: 1.6;
}

/* ── CTA band ────────────────────────────────────────────────────────── */
.tkm-cta-band {
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue-d) 55%, var(--tk-blue) 100%);
  color: #ffffff;
  padding-block: var(--tkm-space-6);
  text-align: center;
}
.tkm-cta-band h2 {
  color: #ffffff;
  font-size: var(--tkm-type-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--tkm-space-2);
  line-height: 1.15;
}
.tkm-cta-band p {
  color: rgba(255,255,255,.88);
  font-size: var(--tkm-type-lg);
  max-width: 56ch;
  margin: 0 auto var(--tkm-space-4);
}

/* ── Testimonial card ────────────────────────────────────────────────── */
.tkm-testimonial {
  background: #ffffff;
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tk-sh-card);
  border: 1px solid var(--tk-border);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  height: 100%;
}
.tkm-testimonial-quote {
  color: var(--tk-navy);
  font-size: var(--tkm-type-base);
  line-height: 1.6;
  font-style: italic;
}
.tkm-testimonial-quote::before { content: "« "; color: var(--tk-blue); font-weight: 800; }
.tkm-testimonial-quote::after { content: " »"; color: var(--tk-blue); font-weight: 800; }
.tkm-testimonial-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: var(--tkm-space-3);
  border-top: 1px solid var(--tk-border);
}
.tkm-testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tk-blue-50);
}
.tkm-testimonial-name {
  font-weight: 700;
  color: var(--tk-navy);
  font-size: var(--tkm-type-sm);
  line-height: 1.2;
}
.tkm-testimonial-role {
  font-size: var(--tkm-type-xs);
  color: var(--tk-muted);
}

/* ── Hscroll (opt-in, pour comparateurs de forfaits) ────────────────── */
.tkm-hscroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--tkm-container-px);
  margin-inline: calc(-1 * var(--tkm-container-px));
}
.tkm-hscroll::-webkit-scrollbar { display: none; }
.tkm-hscroll > * { scroll-snap-align: start; flex-shrink: 0; }
.tkm-hscroll-track {
  display: flex;
  gap: var(--tkm-space-3);
}
.tkm-hscroll-track > * {
  width: min(85vw, 320px);
}

/* ── Alignements + utilitaires ──────────────────────────────────────── */
.tkm-text-center { text-align: center; }
.tkm-text-left { text-align: left; }
.tkm-mb-2 { margin-bottom: var(--tkm-space-2); }
.tkm-mb-3 { margin-bottom: var(--tkm-space-3); }
.tkm-mb-4 { margin-bottom: var(--tkm-space-4); }
.tkm-mb-5 { margin-bottom: var(--tkm-space-5); }
.tkm-mt-4 { margin-top: var(--tkm-space-4); }

/* Split layout — image + texte, stack mobile, inline desktop */
.tkm-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  align-items: center;
}
@media (min-width: 992px) {
  .tkm-split { grid-template-columns: 1fr 1fr; gap: var(--tkm-space-7); }
  .tkm-split-image-right > :first-child { order: 1; }
  .tkm-split-image-right > :last-child { order: 2; }
}

/* ── Focus visible haute-visibilité (accessibilité) ─────────────────── */
.tkm-container a:focus-visible,
.tkm-btn:focus-visible,
.tkm-form-input:focus-visible,
.tkm-form-select:focus-visible,
.tkm-form-textarea:focus-visible {
  outline: 3px solid var(--tk-yellow);
  outline-offset: 2px;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tkm-btn, .tkm-card { transition: none !important; }
  .tkm-btn:hover, .tkm-card:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOOSTS pour classes historiques (targetant les pages existantes)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Homepage hero (.tkg-*) — améliore l'affichage mobile ────────────── */
@media (max-width: 767.98px) {
  /* Réduit le hero pour laisser voir les sections suivantes tout de suite.
     padding-bottom généreux (108px) pour dégager la piste où passe le van
     animé — c'est notre signature de marque, elle doit être visible. */
  .hero.hero-carousel { padding-top: 12px !important; }
  .tkg-panel { min-height: unset !important; padding: 32px 20px 108px !important; }
  .tkg-content { max-width: 100% !important; }
  .tkg-name { font-size: clamp(3rem, 15vw, 6rem) !important; letter-spacing: -0.03em; }
  .tkg-tagline { font-size: clamp(1rem, 4.5vw, 1.4rem) !important; margin-block: 16px !important; }
  .tkg-trust-badges { gap: 6px !important; margin: 12px 0 20px !important; }
  /* Chaque badge (« Chauffeurs certifiés », « Auto 100 % électrique », etc.)
     doit rester sur UNE ligne dans sa capsule, même sur écran étroit. */
  .tkg-trust-badges span {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
  }
  /* Boutons « Commencer » et « Voir mon impact » CÔTE À CÔTE, même sur
     écran étroit (règle user 2026-07-31). Chacun prend 50% de la largeur,
     texte forcé sur 1 ligne (nowrap), padding réduit pour tenir. */
  .tkg-cta-row {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
  .tkg-cta-row > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Animation van conservée sous les CTAs — signature de marque. Le
     padding-bottom 108px sur .tkg-panel garantit qu'elle est visible. */
}

/* ── Homepage sections — améliore la respiration mobile ──────────────── */
@media (max-width: 767.98px) {
  /* Sections plus compactes pour éviter le scroll infini */
  section.section { padding: 40px 0 !important; }
  /* Titre section respire */
  .section-title { padding-bottom: 20px; }
  .section-title h2 {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    padding: 0 12px;
  }
  .section-title p {
    font-size: 0.95rem !important;
    padding: 0 12px !important;
    /* Justify conservé (règle éditoriale) — cf. base.html:148 global */
  }
  /* Featured services : icônes plus compactes, cartes stackables */
  .featured-services .service-item {
    padding: 24px 20px !important;
    /* text-align laissé au CSS parent (justify hérité pour les p) */
  }
  .featured-services .service-item h4 {
    font-size: 1.05rem !important;
    margin: 12px 0 8px !important;
  }
  .featured-services .service-item p {
    font-size: 0.92rem !important;
    line-height: 1.5;
  }
  /* CTA de la home ("Call To Action Section") plus tactile */
  .call-to-action .btn-cta,
  .call-to-action .cta-btn,
  .call-to-action a.btn {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
  }
  /* Testimonials : padding généreux */
  .testimonials .testimonial-item { padding: 24px !important; }
  /* Blog cards */
  .blog-ressources .tk-card-standard { padding: 20px !important; }
  /* Footer padding réduit sur mobile */
  .footer .footer-newsletter { padding: 32px 0 !important; }
  .footer .footer-newsletter h4 { font-size: 1.2rem !important; }
}

/* ── Forfaits pages (montly / hebdo / one_way / travel_pack_info) ────── */

/* Sidebar : sur mobile, on la met APRÈS le contenu (le user vient pour le
   contenu, pas la navigation forfaits). Sur desktop, elle reste à gauche. */
@media (max-width: 991.98px) {
  #service-details .row { display: flex; flex-direction: column; }
  #service-details .row > .col-lg-4 { order: 2; }
  #service-details .row > .col-lg-8 { order: 1; padding-left: 0 !important; }
}

/* Sidebar cards — retire l'ancien style (fond gris) et donne une allure premium */
.tkm-forfait-sidebar .services-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: var(--tkm-radius-sm);
  color: var(--tk-navy);
  font-weight: 600;
  font-size: var(--tkm-type-sm);
  text-decoration: none;
  transition: background 180ms;
  margin-bottom: 4px;
}
.tkm-forfait-sidebar .services-list a:hover {
  background: var(--tk-blue-50);
}
.tkm-forfait-sidebar .services-list a.active {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  box-shadow: var(--tk-sh-blue);
}
.tkm-forfait-sidebar .services-list a i { color: inherit; }
.tkm-forfait-sidebar .download-catalog a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--tkm-radius-sm);
  color: var(--tk-blue-d);
  font-weight: 600;
  font-size: var(--tkm-type-sm);
  text-decoration: none;
  border: 1px solid var(--tk-border);
  transition: background 180ms;
  margin-bottom: 6px;
}
.tkm-forfait-sidebar .download-catalog a:hover { background: var(--tk-blue-50); }

/* Forfait main content improvements */
#service-details .service-details h3 {
  font-size: var(--tkm-type-h3) !important;
  color: var(--tk-navy);
  font-weight: 800;
  margin-top: var(--tkm-space-5);
  margin-bottom: var(--tkm-space-3);
}
#service-details p {
  color: var(--tk-muted);
  font-size: var(--tkm-type-base);
  line-height: 1.6;
}
#service-details ul li {
  color: var(--tk-navy);
  font-size: var(--tkm-type-sm);
  padding: 6px 0;
}
#service-details ul li i.bi-check2-all { color: var(--tk-green); }

/* Bloc prix highlight */
#service-details .pricing-highlight {
  background: linear-gradient(135deg, var(--tk-blue-50) 0%, #ffffff 100%);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-4);
  border: 1px solid var(--tk-border);
  text-align: center;
}
#service-details .pricing-highlight .price-tag {
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  color: var(--tk-navy);
  line-height: 1;
}
#service-details .pricing-highlight .price-tag small {
  font-size: 0.5em;
  color: var(--tk-muted);
  font-weight: 600;
}
#service-details .pricing-highlight .price-per-ride {
  color: var(--tk-muted);
  font-size: var(--tkm-type-sm);
  margin-top: 6px;
}

/* Benefits grid — remplace inline styles historiques */
#service-details .benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-3);
  margin-top: var(--tkm-space-3);
}
@media (min-width: 576px) {
  #service-details .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
#service-details .benefit-card {
  background: #fff;
  padding: var(--tkm-space-4);
  border-radius: var(--tkm-radius-md);
  border: 1px solid var(--tk-border);
  box-shadow: var(--tk-sh-card);
  transition: transform 180ms, box-shadow 180ms;
}
#service-details .benefit-card:hover { transform: translateY(-3px); box-shadow: var(--tk-sh-hover); }
#service-details .benefit-card i {
  font-size: 1.8rem;
  color: var(--tk-blue);
  margin-bottom: 8px;
  display: block;
}
#service-details .benefit-card h4 {
  font-size: var(--tkm-type-base) !important;
  font-weight: 800 !important;
  color: var(--tk-navy) !important;
  margin: 0 0 6px !important;
}
#service-details .benefit-card p {
  font-size: var(--tkm-type-sm) !important;
  color: var(--tk-muted) !important;
  margin: 0 !important;
  line-height: 1.5;
}

/* CTA box */
#service-details .cta-box {
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue-d) 100%) !important;
  color: #fff !important;
  padding: var(--tkm-space-5) var(--tkm-space-4) !important;
}
#service-details .cta-box h4 {
  color: #fff !important;
  font-size: var(--tkm-type-h3) !important;
  font-weight: 800 !important;
  margin-bottom: var(--tkm-space-2) !important;
}
#service-details .cta-box p {
  color: rgba(255,255,255,.88) !important;
  font-size: var(--tkm-type-base) !important;
}
#service-details .cta-box .btn {
  min-height: 52px;
  padding: 14px 28px !important;
  border-radius: var(--tkm-radius-md);
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%) !important;
  color: var(--tk-navy) !important;
  border: none !important;
  font-weight: 800;
  box-shadow: var(--tk-sh-yellow);
}

/* Comparison table — devient une hscroll de cards sur mobile */
@media (max-width: 767.98px) {
  #service-details [style*="overflow-x:auto"] table,
  #service-details [style*="overflow-x: auto"] table {
    font-size: 0.78rem !important;
  }
  #service-details [style*="overflow-x:auto"] th,
  #service-details [style*="overflow-x:auto"] td {
    padding: 8px 10px !important;
  }
}

/* Page title = simple, moins imposant */
.page-title { padding: var(--tkm-space-4) 0 !important; background: #F4F9FE; }
.page-title h1 {
  font-size: var(--tkm-type-h2) !important;
  color: var(--tk-navy) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  margin: 0 !important;
}
.page-title .breadcrumbs ol {
  font-size: var(--tkm-type-xs);
  color: var(--tk-muted);
}
.page-title .breadcrumbs ol a { color: var(--tk-blue-d); }

/* ── Devis page — fix hero height sur mobile ──────────────────────── */
@media (max-width: 767.98px) {
  .tkg-panel { min-height: unset !important; }
  /* Van animation conservée sur devis aussi (signature de marque, cf. règle
     user 2026-07-31 : « c'est notre signature pour que les parent sache qui
     nous sommes »). L'anim GSAP est déjà responsive via home.css:1296. */
}

/* ── Simulateur — touch targets sliders + selects ──────────────────── */
@media (max-width: 767.98px) {
  .sim-range::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
    margin-top: -11px !important;
  }
  .sim-range::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
  }
  .sim-select {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .btn-sim {
    min-height: 52px !important;
    font-size: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MENU MOBILE PREMIUM (2026-07-31)
   Refonte : au lieu d'une liste verticale, grille 2 colonnes avec
   icônes, animations d'entrée staggerées, boutons CTA côte à côte
   en bas. Design cohérent avec la DA TouKidou (--tk-blue, --tk-yellow,
   --tk-navy). Actif uniquement < 992px, desktop inchangé.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  /* ── Panneau du menu — fond dégradé subtil, plein écran ─────────── */
  #mainNav.navbar-collapse {
    background: linear-gradient(180deg, #ffffff 0%, #F4F9FE 100%);
    border-top: 1px solid var(--tk-border);
    margin-top: 8px;
    padding: 20px 16px 24px;
    border-radius: 0 0 var(--tkm-radius-lg) var(--tkm-radius-lg);
    box-shadow: 0 20px 40px rgba(13,34,55,.08);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  /* ── UL container : passe en grille CSS ─────────────────────────── */
  #mainNav .navbar-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ── Nav item de grille : tuile tactile avec icône + label ──────── */
  #mainNav .navbar-nav > .tk-mnav-item {
    background: #ffffff;
    border: 1px solid var(--tk-border);
    border-radius: var(--tkm-radius-md);
    box-shadow: 0 2px 8px rgba(13,34,55,.04);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 200ms ease,
                border-color 200ms ease;
    /* Animation entrée staggerée quand le collapse s'ouvre */
    opacity: 0;
    transform: translateY(12px);
    animation: tkMnavItemIn 320ms cubic-bezier(.22,1,.36,1) forwards;
  }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(1) { animation-delay: 0.02s; }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(2) { animation-delay: 0.06s; }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(3) { animation-delay: 0.10s; }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(4) { animation-delay: 0.14s; }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(5) { animation-delay: 0.18s; }
  #mainNav.show .navbar-nav > .tk-mnav-item:nth-child(6) { animation-delay: 0.22s; }

  @keyframes tkMnavItemIn {
    to { opacity: 1; transform: translateY(0); }
  }

  #mainNav .navbar-nav > .tk-mnav-item:hover,
  #mainNav .navbar-nav > .tk-mnav-item:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(48,137,197,.15);
    border-color: rgba(48,137,197,.35);
  }

  /* Nav-link à l'intérieur de la tuile — icône (bi.tk-mnav-icon) + label */
  #mainNav .navbar-nav > .tk-mnav-item > .nav-link {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 14px !important;
    min-height: 74px;
    color: var(--tk-navy) !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  /* Icône ronde à couleur — chaque item a sa teinte grâce à :nth-child */
  #mainNav .navbar-nav > .tk-mnav-item .tk-mnav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tk-blue-50) 0%, #ffffff 100%);
    color: var(--tk-blue-d);
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(48,137,197,.12);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }

  /* Palette variée : bleu → jaune → vert → vert → jaune → bleu */
  #mainNav .navbar-nav > .tk-mnav-item:nth-child(2) .tk-mnav-icon {
    background: linear-gradient(135deg, #FFF7E4 0%, #FFFEFB 100%);
    color: var(--tk-yellow-d);
    box-shadow: 0 2px 6px rgba(249,193,59,.18);
  }
  #mainNav .navbar-nav > .tk-mnav-item:nth-child(3) .tk-mnav-icon,
  #mainNav .navbar-nav > .tk-mnav-item:nth-child(4) .tk-mnav-icon {
    background: linear-gradient(135deg, #E6F9EF 0%, #F4FDF7 100%);
    color: var(--tk-green-d);
    box-shadow: 0 2px 6px rgba(16,188,105,.15);
  }
  #mainNav .navbar-nav > .tk-mnav-item:nth-child(5) .tk-mnav-icon {
    background: linear-gradient(135deg, #FFF7E4 0%, #FFFEFB 100%);
    color: var(--tk-yellow-d);
    box-shadow: 0 2px 6px rgba(249,193,59,.18);
  }

  #mainNav .navbar-nav > .tk-mnav-item:hover .tk-mnav-icon,
  #mainNav .navbar-nav > .tk-mnav-item:focus-within .tk-mnav-icon {
    transform: scale(1.10);
    box-shadow: 0 6px 14px rgba(48,137,197,.24);
  }

  /* ── Zone CTAs : Connexion (col 1) + Inscription (col 2) ────────── */
  /* Séparateur visuel horizontal entre les 6 tuiles et les CTAs — posé
     via un ::before sur le premier CTA (Connexion), qui traverse les 2
     colonnes grâce à right: calc négatif. */
  #mainNav .navbar-nav > .tk-mnav-cta-login {
    grid-column: 1 / 2;
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
  }
  #mainNav .navbar-nav > .tk-mnav-cta-signup {
    grid-column: 2 / 3;
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
  }
  #mainNav .navbar-nav > .tk-mnav-cta-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -100%;  /* traverse les 2 colonnes (col2 = -100% de col1) */
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--tk-border) 15%, var(--tk-border) 85%, transparent 100%);
  }

  /* Boutons CTAs — cohérence avec .tkm-btn */
  #mainNav .navbar-nav > .tk-mnav-cta > .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px !important;
    border-radius: var(--tkm-radius-md) !important;
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: transform 200ms ease, box-shadow 200ms ease;
    opacity: 0;
    transform: translateY(10px);
    animation: tkMnavItemIn 320ms cubic-bezier(.22,1,.36,1) forwards;
  }
  #mainNav.show .navbar-nav > .tk-mnav-cta-login > .btn { animation-delay: 0.28s; }
  #mainNav.show .navbar-nav > .tk-mnav-cta-signup > .btn { animation-delay: 0.32s; }

  #mainNav .navbar-nav > .tk-mnav-cta-login > .btn {
    background: #ffffff !important;
    color: var(--tk-blue-d) !important;
    border: 2px solid var(--tk-blue) !important;
    box-shadow: 0 4px 10px rgba(48,137,197,.10);
  }
  #mainNav .navbar-nav > .tk-mnav-cta-login > .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(48,137,197,.20);
    background: var(--tk-blue-50) !important;
  }

  #mainNav .navbar-nav > .tk-mnav-cta-signup > .btn {
    background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%) !important;
    color: var(--tk-navy) !important;
    border: none !important;
    box-shadow: var(--tk-sh-yellow);
  }
  #mainNav .navbar-nav > .tk-mnav-cta-signup > .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(249,193,59,.42);
  }

  /* Toggler amélioré : icône hamburger custom qui s'anime */
  .navbar-toggler {
    padding: 10px 12px !important;
    border-radius: var(--tkm-radius-sm) !important;
    background: transparent;
    transition: background 200ms ease;
  }
  .navbar-toggler:hover, .navbar-toggler[aria-expanded="true"] {
    background: var(--tk-blue-50);
  }

  /* Effet apparition du panneau (transition Bootstrap collapse) */
  #mainNav.collapsing, #mainNav.collapse.show {
    transition: height 320ms cubic-bezier(.22,1,.36,1);
  }
}

/* Desktop >= 992px : comportement inline standard, icônes mobile cachées */
@media (min-width: 992px) {
  .tk-mnav-icon, .tk-mnav-cta-icon { display: none !important; }
}

/* prefers-reduced-motion : coupe les animations d'entrée */
@media (prefers-reduced-motion: reduce) {
  #mainNav .navbar-nav > .tk-mnav-item,
  #mainNav .navbar-nav > .tk-mnav-cta > .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER MOBILE PREMIUM (2026-07-31)
   Mêmes principes que le menu mobile : grille 2 colonnes, cartes
   arrondies, séparateurs subtils, animations d'entrée. Actif < 992px,
   desktop inchangé (Bootstrap col-lg-* fonctionne comme avant).
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  /* ── Fond général du footer : gradient subtil bleu très clair ─── */
  #footer {
    background: linear-gradient(180deg, #F4F9FE 0%, #EDF5FC 100%) !important;
    padding-bottom: 0;
  }

  /* ── Newsletter — carte premium en tête du footer ─────────────── */
  #footer .footer-newsletter {
    padding: 32px 16px !important;
    background: transparent !important;
  }
  #footer .footer-newsletter .container > .row {
    background: linear-gradient(135deg, #ffffff 0%, #FAFDFF 100%);
    border: 1px solid var(--tk-border);
    border-radius: var(--tkm-radius-lg);
    padding: 24px 20px;
    margin-inline: 0;
    box-shadow: var(--tk-sh-card);
    position: relative;
    overflow: hidden;
  }
  #footer .footer-newsletter .container > .row::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  }
  #footer .footer-newsletter h4 {
    color: var(--tk-navy);
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
  }
  #footer .footer-newsletter p {
    color: var(--tk-muted);
    font-size: 0.92rem;
    margin: 0 0 16px;
  }
  /* Override du legacy main.css:539 (.newsletter-form = pill blanche 50px
     avec background + shadow qui produisait un bloc parasite en mobile).
     On efface tout et on repart d'une base transparente propre. */
  #footer .footer-newsletter .newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #footer .footer-newsletter .newsletter-form input[type="email"] {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--tk-border) !important;
    border-radius: var(--tkm-radius-md) !important;
    font-size: 16px !important;
    color: var(--tk-navy) !important;
    background: #ffffff !important;
    margin: 0 !important;
    transition: border-color 180ms, box-shadow 180ms;
  }
  #footer .footer-newsletter .newsletter-form input[type="email"]:focus {
    outline: none !important;
    border-color: var(--tk-blue) !important;
    box-shadow: 0 0 0 4px rgba(48,137,197,.14) !important;
  }
  #footer .footer-newsletter .newsletter-form input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px !important;
    background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--tkm-radius-md) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    cursor: pointer;
    box-shadow: var(--tk-sh-blue) !important;
    margin: 0 !important;
    transition: transform 200ms, box-shadow 200ms;
  }
  #footer .footer-newsletter .newsletter-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(48,137,197,.32) !important;
  }

  /* ── Footer-top — grille 2 colonnes mobile ────────────────────── */
  #footer .footer-top { padding: 16px !important; }
  #footer .footer-top .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }

  /* Chaque section = carte blanche premium avec ombre douce */
  #footer .footer-top .footer-about,
  #footer .footer-top .footer-links,
  #footer .footer-top > .row > div {
    background: #ffffff;
    border: 1px solid var(--tk-border);
    border-radius: var(--tkm-radius-md);
    padding: 18px 16px !important;
    margin: 0 !important;
    max-width: none !important;
    flex: none !important;
    box-shadow: 0 2px 8px rgba(13,34,55,.04);
    /* Fade-in animation à l'apparition */
    opacity: 0;
    transform: translateY(10px);
    animation: tkFooterCardIn 500ms cubic-bezier(.22,1,.36,1) forwards;
  }
  #footer .footer-top > .row > div:nth-child(1) { animation-delay: 0.02s; }
  #footer .footer-top > .row > div:nth-child(2) { animation-delay: 0.08s; }
  #footer .footer-top > .row > div:nth-child(3) { animation-delay: 0.14s; }
  #footer .footer-top > .row > div:nth-child(4) { animation-delay: 0.20s; }

  @keyframes tkFooterCardIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Placement grille par ordre DOM (plus fiable que :first-of-type qui
     ne matche pas quand le 1er sibling n'est pas .footer-links) :
       Ligne 1 : Contact pleine largeur
       Ligne 2 : Liens Utiles col 1 | Nos forfaits col 2
       Ligne 3 : Suivez-nous pleine largeur */
  #footer .footer-top > .row > div:nth-child(1) {  /* Contact / About */
    grid-column: 1 / -1;
    text-align: center;
  }
  #footer .footer-top > .row > div:nth-child(2) {  /* Liens Utiles */
    grid-column: 1 / 2;
  }
  #footer .footer-top > .row > div:nth-child(3) {  /* Nos forfaits */
    grid-column: 2 / 3;
  }
  /* Ligne 3 (Suivez-nous) : géré plus bas par le sélecteur :last-child */

  #footer .footer-top .footer-about img {
    max-width: 120px;
    height: auto;
    margin-bottom: 8px;
  }
  #footer .footer-top .footer-contact p {
    color: var(--tk-navy);
    font-size: 0.88rem;
    margin: 4px 0;
    text-align: center;
  }
  #footer .footer-top .footer-contact p strong { color: var(--tk-blue-d); font-weight: 700; }

  #footer .footer-top .footer-links h4 {
    color: var(--tk-navy);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tk-blue-50);
    position: relative;
  }
  #footer .footer-top .footer-links h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--tk-blue), var(--tk-yellow));
  }
  #footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #footer .footer-top .footer-links ul li {
    margin: 0;
    border: none;
  }
  #footer .footer-top .footer-links ul li a {
    display: block;
    padding: 8px 0;
    color: var(--tk-navy);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 36px;
    line-height: 1.4;
    transition: color 180ms, padding-left 180ms;
    border-bottom: 1px solid rgba(48,137,197,.06);
  }
  #footer .footer-top .footer-links ul li:last-child a { border-bottom: none; }
  #footer .footer-top .footer-links ul li a:hover,
  #footer .footer-top .footer-links ul li a:focus-visible {
    color: var(--tk-blue-d);
    padding-left: 6px;
  }

  /* Section « Suivez-nous » — pleine largeur (col-span 2) avec social buttons horizontaux */
  #footer .footer-top > .row > div:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  #footer .footer-top > .row > div:last-child h4 {
    color: var(--tk-navy);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  #footer .footer-top > .row > div:last-child p {
    color: var(--tk-muted);
    font-size: 0.85rem;
    margin: 0 0 14px;
  }

  /* Réseaux sociaux : icônes rondes tactiles 52×52 avec gradient */
  #footer .social-links {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  #footer .social-links a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tk-blue-50) 0%, #ffffff 100%);
    color: var(--tk-blue-d) !important;
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(48,137,197,.14);
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 220ms ease,
                background 220ms ease,
                color 220ms ease;
    border: 1px solid var(--tk-border);
  }
  #footer .social-links a:hover,
  #footer .social-links a:focus-visible {
    transform: translateY(-4px) scale(1.08);
    background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(48,137,197,.36);
  }

  /* ── Copyright — TOUJOURS sur une seule ligne ──────────────────
     Règle user 2026-07-31 : « la section copyright doit toujours tenir
     sur une ligne ». Stratégie 3 niveaux :
       1. Font-size adaptatif via clamp() (0.6rem → 0.78rem)
       2. white-space: nowrap forcé pour empêcher le wrap
       3. Spans conditionnels cachés en dessous de certaines largeurs
     Résultat : « © 2026 TouKidou Inc. » minimum garanti, « © Copyright 2026
     TouKidou Transport en Garderie Inc. Tous droits réservés. » complet
     sur écran large. */
  #footer .copyright {
    padding: 20px 16px !important;
    margin-top: 8px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(48,137,197,.05) 100%);
    border-top: 1px solid var(--tk-border);
    overflow: hidden;
  }
  #footer .copyright p {
    font-size: clamp(0.6rem, 2.5vw, 0.78rem) !important;
    color: var(--tk-muted) !important;
    margin: 0 !important;
    line-height: 1.4;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center !important;
  }
  #footer .copyright p strong { color: var(--tk-navy); font-weight: 700; }
}

/* Hiding progressif du texte copyright selon la largeur — garantit 1 ligne. */
/* Écrans étroits (< 480px) : cache « Copyright » et « Transport en Garderie » */
@media (max-width: 479.98px) {
  #footer .copyright .tk-cp-year,
  #footer .copyright .tk-cp-long { display: none; }
}
/* Écrans très étroits (< 360px) : cache aussi « Tous droits réservés. » */
@media (max-width: 359.98px) {
  #footer .copyright .tk-cp-mid { display: none; }
}

/* prefers-reduced-motion : coupe les animations d'entrée footer */
@media (prefers-reduced-motion: reduce) {
  #footer .footer-top > .row > div {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}