/*!
 * Kalystrat Design System 2026
 * Charte officielle stricte : navy #0A1628 + gold #B8A472 + Akzidenz Grotesk
 * Polices : Akzidenz Grotesk (titres + body) + Caveat (signature)
 * WCAG AAA : tous ratios texte ≥ 7:1 vérifiés.
 */

/* T78 — Akzidenz Grotesk (police officielle charte v2 Kalystrat) */
@font-face {
  font-family: 'Akzidenz Grotesk';
  src: url('/assets/fonts/AkzidenzGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akzidenz Grotesk';
  src: url('/assets/fonts/AkzidenzGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akzidenz Grotesk';
  src: url('/assets/fonts/AkzidenzGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akzidenz Grotesk';
  src: url('/assets/fonts/AkzidenzGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette charte officielle Kalystrat (charte v2 vérifiée) */
  --ks-navy-900: #0A1628;
  --ks-navy-700: #1A2840;
  --ks-navy-500: #2C3E5C;
  --ks-gold-500: #B8A472;
  --ks-gold-700: #8C7B4F;          /* AA seulement sur blanc 4.15:1, à utiliser sur fond foncé */
  --ks-gold-900: #6B5C38;          /* 6.54:1 sur blanc — AAA large, AA normal */
  --ks-gold-aaa: #5A4D2E;           /* 8.28:1 sur blanc — AAA NORMAL TEXT garanti (eyebrow fond clair) */
  /* T193-cleanup : --ks-orange-700 (#8F3F00) supprimée. Charte 100% navy/gold uniquement. */
  --ks-gray-900: #1a1a1a;
  --ks-gray-700: #4a4a4a;
  --ks-gray-500: #888;
  --ks-gray-300: #d6d6d6;
  --ks-gray-100: #f7f7f7;
  --ks-white: #ffffff;

  /* Typographie charte officielle Kalystrat — Akzidenz Grotesk partout */
  --ks-font-display: 'Akzidenz Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ks-font-body: 'Akzidenz Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ks-h1-size: clamp(2.5rem, 5vw, 4.5rem);     /* 40-72px */
  --ks-h2-size: clamp(1.75rem, 3.5vw, 2.75rem);  /* 28-44px */
  --ks-h3-size: clamp(1.375rem, 2.2vw, 1.75rem); /* 22-28px */
  --ks-h4-size: clamp(1.125rem, 1.6vw, 1.375rem);
  --ks-body-size: clamp(1rem, 1.05vw, 1.125rem); /* 16-18px */
  --ks-lead-size: clamp(1.125rem, 1.4vw, 1.375rem);
  --ks-line-height: 1.7;
  --ks-line-height-tight: 1.2;

  /* Espacement rythme 8px — T137 densification post 11+ sections home */
  --ks-section-py: clamp(48px, 7vw, 88px);
  --ks-section-py-sm: clamp(32px, 5vw, 56px);
  --ks-card-padding: clamp(24px, 3vw, 40px);
  --ks-gap: clamp(16px, 2vw, 32px);
  --ks-gap-lg: clamp(24px, 3vw, 48px);

  /* Rayons + ombres */
  --ks-radius-sm: 8px;
  --ks-radius-md: 12px;
  --ks-radius-lg: 20px;
  --ks-shadow-card: 0 4px 16px rgba(10, 22, 40, 0.06);
  --ks-shadow-card-hover: 0 12px 32px rgba(10, 22, 40, 0.14);
  --ks-shadow-section: 0 1px 0 rgba(10, 22, 40, 0.05);

  /* Transitions */
  --ks-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Sections === */
.ks-section {
  padding: var(--ks-section-py) 0;
  position: relative;
}

.ks-section--sm {
  padding: var(--ks-section-py-sm) 0;
}

.ks-section--alt {
  background: var(--ks-gray-100);
}

.ks-section--dark {
  background: var(--ks-navy-900);
  color: rgba(255, 255, 255, 0.92);
}

.ks-section--dark h1,
.ks-section--dark h2,
.ks-section--dark h3,
.ks-section--dark h4 {
  color: var(--ks-white);
}

.ks-section--dark .ks-eyebrow {
  color: var(--ks-gold-500);
}

.ks-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

/* === Typographie 2026 === */
.ks-h1,
.ks-section h1.ks-h1 {
  font-family: var(--ks-font-display);
  font-size: var(--ks-h1-size);
  line-height: var(--ks-line-height-tight);
  font-weight: 700;
  color: var(--ks-navy-900);
  margin-bottom: 0.5em;
  letter-spacing: -0.02em;
}

.ks-h2 {
  font-family: var(--ks-font-display);
  font-size: var(--ks-h2-size);
  line-height: 1.25;
  font-weight: 700;
  color: var(--ks-navy-900);
  margin-bottom: 0.6em;
  letter-spacing: -0.015em;
}

.ks-h3 {
  font-family: var(--ks-font-display);
  font-size: var(--ks-h3-size);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ks-navy-900);
  margin-bottom: 0.6em;
}

.ks-eyebrow {
  display: inline-block;
  font-family: var(--ks-font-body);
  font-size: 0.8125rem;            /* 13px */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-gold-aaa);       /* WCAG AAA strict 8.28:1 sur blanc */
  margin-bottom: 1rem;
}

.ks-lead {
  font-family: var(--ks-font-body);
  font-size: var(--ks-lead-size);
  line-height: var(--ks-line-height);
  color: var(--ks-gray-700);
  max-width: 65ch;
}

.ks-section p {
  font-size: var(--ks-body-size);
  line-height: var(--ks-line-height);
  color: var(--ks-gray-700);
}

.ks-section p strong {
  color: var(--ks-navy-900);
  font-weight: 600;
}

.ks-section--dark p {
  color: rgba(255, 255, 255, 0.85);
}

.ks-section--dark p strong {
  color: var(--ks-gold-500);
}

/* === Bento layout === */
.ks-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ks-gap);
  margin-top: var(--ks-gap-lg);
}

.ks-bento--2col {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.ks-bento--3col {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 1024px) {
  .ks-bento--feature {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .ks-bento--feature > .ks-card:first-child {
    grid-column: span 1;
    grid-row: span 2;
  }
}

/* === Cards === */
.ks-card {
  background: var(--ks-white);
  border-radius: var(--ks-radius-md);
  padding: var(--ks-card-padding);
  box-shadow: var(--ks-shadow-card);
  transition: transform var(--ks-transition), box-shadow var(--ks-transition);
  border: 1px solid rgba(10, 22, 40, 0.04);
  display: flex;
  flex-direction: column;
}

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

.ks-card--accent-gold {
  border-left: 4px solid var(--ks-gold-500);
}

.ks-card--accent-navy {
  border-left: 4px solid var(--ks-navy-900);
}

.ks-card--accent-orange {
  border-left: 4px solid var(--ks-gold-700);
}

.ks-card--dark {
  background: var(--ks-navy-700);
  color: rgba(255, 255, 255, 0.92);
  border-color: var(--ks-navy-500);
}

.ks-card--dark h3,
.ks-card--dark h4,
.ks-card--dark h5 {
  color: var(--ks-white);
}

.ks-card--dark p {
  color: rgba(255, 255, 255, 0.78);
}

.ks-card__title {
  font-family: var(--ks-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ks-navy-900);
  margin: 0.5rem 0;
}

.ks-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ks-transition);
}

.ks-card__title a:hover {
  color: var(--ks-gold-700);
}

.ks-card__meta {
  font-family: var(--ks-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-gold-700);
  margin-bottom: 0.5rem;
}

.ks-card__text {
  flex: 1;
  font-size: var(--ks-body-size);
  line-height: var(--ks-line-height);
  color: var(--ks-gray-700);
  margin-bottom: 1.25rem;
}

.ks-card__cta {
  margin-top: auto;
}

/* === CTA buttons === */
.ks-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
  font-family: var(--ks-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--ks-transition), transform var(--ks-transition);
}

.ks-cta-primary:hover {
  background: var(--ks-gold-700);
  color: var(--ks-white);
  transform: translateY(-2px);
}

.ks-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ks-navy-900);
  font-family: var(--ks-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid var(--ks-navy-900);
  cursor: pointer;
  transition: background var(--ks-transition), color var(--ks-transition);
}

.ks-cta-secondary:hover {
  background: var(--ks-navy-900);
  color: var(--ks-white);
}

/* === Page hero === */
.ks-page-hero {
  background: linear-gradient(135deg, var(--ks-navy-900) 0%, var(--ks-navy-700) 100%);
  color: var(--ks-white);
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}

.ks-page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(184, 164, 114, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.ks-page-hero h1 {
  font-family: var(--ks-font-display);
  font-size: var(--ks-h1-size);
  line-height: var(--ks-line-height-tight);
  font-weight: 700;
  color: var(--ks-white);
  max-width: 18ch;
  margin-bottom: 0.4em;
  letter-spacing: -0.02em;
}

.ks-page-hero__subtitle {
  font-family: var(--ks-font-body);
  font-size: var(--ks-lead-size);
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  line-height: var(--ks-line-height);
}

.ks-page-hero__breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.ks-page-hero__breadcrumb li::after {
  content: '›';
  margin-left: 0.5rem;
  color: var(--ks-gold-500);
}

.ks-page-hero__breadcrumb li:last-child::after {
  display: none;
}

.ks-page-hero__breadcrumb a {
  color: var(--ks-gold-500);
  text-decoration: none;
  transition: color var(--ks-transition);
}

.ks-page-hero__breadcrumb a:hover {
  color: var(--ks-white);
}

/* === Hero cinématique full-bleed WOW (T63 v4 + T76 anti-superposition CTA/Bento) === */
.ks-page-hero--split {
  padding: 0;
  height: clamp(720px, 88svh, 860px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 720px) {
  .ks-page-hero--split {
    height: auto;
    min-height: clamp(640px, 88svh, 760px);
  }
}

.ks-page-hero--split::after {
  display: none;
}

.ks-hero-split__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.ks-hero-split__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.ks-hero-split__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* T74/T75 — Ken Burns CSS animation (linear pour mouvement perceptible immédiat) */
.ks-hero-split__poster--kenburns {
  animation: ks-kenburns 20s linear infinite alternate;
  transform-origin: 30% 70%;
  will-change: transform;
}

@keyframes ks-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-3%, -2%); }
}

.ks-hero-split__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.45) 40%, rgba(10, 22, 40, 0.55) 70%, rgba(10, 22, 40, 0.85) 100%);
}

@media (min-width: 980px) {
  .ks-hero-split__visual::before {
    background:
      linear-gradient(95deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.78) 30%, rgba(10, 22, 40, 0.5) 55%, rgba(10, 22, 40, 0.4) 78%, rgba(10, 22, 40, 0.55) 100%),
      linear-gradient(180deg, rgba(10, 22, 40, 0.45) 0%, transparent 20%, transparent 65%, rgba(10, 22, 40, 0.75) 100%);
  }
}

.ks-hero-split__visual::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 65%;
  height: 65%;
  background: radial-gradient(ellipse at 50% 50%, rgba(184, 164, 114, 0.22) 0%, transparent 65%);
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ks-hero-split__content {
  position: relative;
  z-index: 5;
  height: 100%;
  padding: clamp(110px, 12vw, 170px) clamp(20px, 5vw, 60px) clamp(220px, 18vw, 260px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 980px) {
  .ks-hero-split__content {
    padding: clamp(130px, 12vw, 180px) clamp(40px, 6vw, 100px) clamp(180px, 14vw, 220px);
    max-width: 1380px;
  }
  .ks-hero-split__content > * {
    max-width: 56%;
  }
}

.ks-hero-split__content h1 {
  max-width: none;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: 0.4em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.ks-hero-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px) clamp(24px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 720px) {
  .ks-hero-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (min-width: 980px) {
  .ks-hero-stats {
    padding: 0 clamp(40px, 6vw, 100px) clamp(32px, 4vw, 52px);
  }
}

.ks-hero-stat {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.35) 100%);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(184, 164, 114, 0.4);
  border-top-color: rgba(184, 164, 114, 0.55);
  border-radius: var(--ks-radius-md);
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
  color: var(--ks-white);
  transition: transform var(--ks-transition), border-color var(--ks-transition), background var(--ks-transition);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ks-hero-stat:hover {
  transform: translateY(-4px);
  border-color: var(--ks-gold-500);
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.7) 0%, rgba(10, 22, 40, 0.5) 100%);
}

.ks-hero-stat__num {
  font-family: var(--ks-font-display);
  font-size: clamp(2.25rem, 3.2vw, 3rem);
  font-weight: 700;
  color: var(--ks-gold-500);
  line-height: 1;
  display: block;
  letter-spacing: -0.01em;
}

.ks-hero-stat__label {
  font-family: var(--ks-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.5rem;
  display: block;
  line-height: 1.35;
}

.ks-hero-split__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.ks-hero-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ks-gold-500);
  font-family: var(--ks-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.ks-hero-split__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ks-gold-500);
}

/* T73 — Ancien scroll-driven ks-hero-zoom retiré (conflit avec ks-kenburns infinite alternate) */

/* === Stats / chiffres clés === */
.ks-stat {
  text-align: center;
  padding: 1rem;
}

.ks-stat__number {
  font-family: var(--ks-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--ks-gold-500);
  line-height: 1;
  display: block;
}

.ks-stat__label {
  font-family: var(--ks-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-gray-700);
  margin-top: 0.5rem;
}

.ks-section--dark .ks-stat__label {
  color: rgba(255, 255, 255, 0.7);
}

/* === Listes === */
.ks-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.ks-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.75rem;
  font-size: var(--ks-body-size);
  line-height: var(--ks-line-height);
  color: var(--ks-gray-700);
}

.ks-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 2px;
  background: var(--ks-gold-500);
}

/* === Section heading === */
.ks-section__heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--ks-gap-lg);
}

.ks-section__heading--left {
  text-align: left;
  margin-left: 0;
}

/* T132 — Split layout asymétrique (editorial heading pattern 2026) */
.ks-section__heading--split {
  text-align: left;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin: 0 0 var(--ks-gap-lg);
}
@media (max-width: 880px) {
  .ks-section__heading--split {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}
.ks-section__heading-left,
.ks-section__heading-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ks-section__heading-right .ks-lead {
  margin: 0;
  max-width: 540px;
}

/* === CTA finale === */
.ks-cta-section {
  padding: var(--ks-section-py) 0;
  background: var(--ks-navy-900);
  color: var(--ks-white);
  text-align: center;
}

.ks-cta-section h2 {
  font-family: var(--ks-font-display);
  font-size: var(--ks-h2-size);
  font-weight: 700;
  color: var(--ks-white);
  margin-bottom: 1rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.ks-cta-section p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
  margin: 0 auto 2rem;
  font-size: var(--ks-lead-size);
}

/* === Micro-animations désactivées par défaut ===
 * .ks-fade-in reste opacity:1 (pas d'effet visuel intrusif).
 * Tendance #5 micro-animations (78/100) reportée — priorité stabilité visuelle.
 * Réactivable via classe body.ks-anim-on si besoin futur.
 */

/* === Mobile-first ajustements === */
@media (max-width: 768px) {
  .ks-bento {
    gap: 16px;
  }
  .ks-card {
    padding: 24px;
  }
  .ks-page-hero {
    padding: 100px 0 50px;
  }
}

/* === T77 — Section Trois piliers cinéma (Awwwards mai 2026 100%) === */
.ks-pillars {
  padding: clamp(64px, 8vw, 100px) 0 clamp(64px, 8vw, 100px);
}

.ks-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(48px, 5vw, 88px);
  margin-top: clamp(56px, 6vw, 96px);
  position: relative;
  counter-reset: pillar;
}

@media (min-width: 980px) {
  .ks-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ks-pillar {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.4vw, 32px) clamp(32px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ligne verticale unifiée — uniforme gold subtle, intensifie au hover (T79 fix coupure perçue) */
.ks-pillar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ks-gold-500);
  opacity: 0.45;
  transition: opacity 500ms ease, width 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-pillar:hover {
  transform: translateY(-4px);
}

.ks-pillar:hover::before {
  opacity: 1;
  width: 3px;
}

.ks-pillar__num {
  font-family: var(--ks-font-display);
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.1rem);
  display: block;
  padding-top: 0.05em;
  color: var(--ks-gold-700, #8C7B4F);
  opacity: 0.95;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-pillar:hover .ks-pillar__num {
  transform: translateY(-2px);
}

.ks-pillar__title {
  font-family: var(--ks-font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ks-navy-900);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(0.875rem, 1.4vw, 1.25rem);
  max-width: 14ch;
  text-wrap: balance;
}

.ks-pillar__text {
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-size);
  line-height: 1.65;
  color: var(--ks-gray-700);
  margin: 0;
  max-width: 32ch;
}

/* Scroll-driven reveal stagger (CSS natif 2026 — 96% support, fallback gracieux) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ks-pillar {
      animation: ks-pillar-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes ks-pillar-rise {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

@media (max-width: 720px) {
  .ks-pillar {
    padding-left: 24px;
  }
  .ks-pillar__num {
    font-size: clamp(4rem, 16vw, 6rem);
  }
}

/* === T85 — Section "Quatre temps" timeline horizontale (Awwwards mai 2026 Vinci/Skanska) === */
.ks-process {
  padding: clamp(64px, 8vw, 100px) 0;
}

.ks-process__lead {
  color: var(--ks-gray-700);
  font-weight: 500;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--ks-lead-size);
  line-height: 1.6;
}

.ks-process__timeline {
  list-style: none;
  padding: 0;
  margin: clamp(56px, 6vw, 96px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
  position: relative;
  counter-reset: step;
}

/* Ligne horizontale gold qui connecte les 4 jalons */
.ks-process__timeline::before {
  content: '';
  position: absolute;
  top: clamp(40px, 4vw, 56px);
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(184, 164, 114, 0.45) 8%, rgba(184, 164, 114, 0.45) 92%, transparent 100%);
  z-index: 0;
}

.ks-process__step {
  position: relative;
  padding-top: clamp(72px, 7.5vw, 104px);
  text-align: center;
  z-index: 1;
}

/* Dot sur la timeline */
.ks-process__step::before {
  content: '';
  position: absolute;
  top: clamp(34px, 3.7vw, 48px);
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ks-navy-900);
  border: 2px solid var(--ks-gold-500);
  transition: background 400ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-process__step:hover::before {
  background: var(--ks-gold-500);
  transform: translateX(-50%) scale(1.4);
}

.ks-process__num {
  display: block;
  font-family: var(--ks-font-display);
  font-size: clamp(3rem, 4.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ks-gold-500);
  margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
  filter: drop-shadow(0 3px 14px rgba(184, 164, 114, 0.22));
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-process__step:hover .ks-process__num {
  transform: translateY(-3px);
}

.ks-process__title {
  font-family: var(--ks-font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ks-white);
  margin: 0 0 clamp(0.625rem, 1vw, 0.875rem);
  letter-spacing: -0.01em;
}

.ks-process__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ks-transition);
}

.ks-process__title a:hover {
  color: var(--ks-gold-500);
}

.ks-process__text {
  font-family: var(--ks-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ks-white);
  margin: 0;
  padding: 0 clamp(8px, 1vw, 16px);
}

/* Scroll-driven stagger reveal */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ks-process__step {
      animation: ks-process-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
    @keyframes ks-process-rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Mobile : passage timeline verticale */
@media (max-width: 900px) {
  .ks-process__timeline {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 56px);
    padding-left: clamp(32px, 6vw, 48px);
  }
  .ks-process__timeline::before {
    top: 0;
    bottom: 0;
    left: clamp(16px, 3vw, 24px);
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent 0%, rgba(184, 164, 114, 0.45) 6%, rgba(184, 164, 114, 0.45) 94%, transparent 100%);
  }
  .ks-process__step {
    padding-top: 0;
    padding-left: clamp(36px, 5vw, 56px);
    text-align: left;
  }
  .ks-process__step::before {
    top: clamp(8px, 1.5vw, 16px);
    left: clamp(-22px, -3.5vw, -28px);
    transform: none;
  }
  .ks-process__step:hover::before {
    transform: scale(1.4);
  }
  .ks-process__text {
    padding: 0;
  }
}

/* T84 — Override .ks-section p {color:gray-700} pour section dark Défi (lisibilité PERÇUE) */
.ks-section.ks-defi p,
.ks-section.ks-defi li,
.ks-section.ks-defi .ks-defi__intro,
.ks-section.ks-defi .ks-defi__caption {
  color: var(--ks-white);
}

.ks-section.ks-defi .ks-defi__intro strong {
  color: var(--ks-gold-500);
}

/* === T80 — Section "Défi 2026" Bento cinématique (Awwwards mai 2026 100%) === */
.ks-defi {
  background: linear-gradient(180deg, var(--ks-navy-900) 0%, var(--ks-navy-700) 100%);
  color: var(--ks-white);
  padding: clamp(64px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

/* WCAG AAA fix : eyebrow gold-500 sur navy = 7.42:1 (vs gold-700 4.37:1 ÉCHEC) */
.ks-defi .ks-eyebrow,
.ks-section--dark .ks-eyebrow {
  color: var(--ks-gold-500);
}

.ks-defi::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -15%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(184, 164, 114, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.ks-defi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 28px);
  position: relative;
  z-index: 1;
}

@media (min-width: 980px) {
  .ks-defi__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "lead   filiales compagnons"
      "lead   secteurs signature";
  }
  .ks-defi__lead       { grid-area: lead; }
  .ks-defi__kpi--filiales   { grid-area: filiales; }
  .ks-defi__kpi--compagnons { grid-area: compagnons; }
  .ks-defi__kpi--secteurs   { grid-area: secteurs; }
  .ks-defi__signature  { grid-area: signature; }
}

.ks-defi__lead {
  padding: clamp(32px, 4vw, 56px);
  background: linear-gradient(160deg, rgba(26, 40, 64, 0.92) 0%, rgba(10, 22, 40, 0.85) 100%);
  border: 1px solid rgba(184, 164, 114, 0.28);
  border-radius: var(--ks-radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ks-defi__title {
  font-family: var(--ks-font-display);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ks-white);
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  text-wrap: balance;
}

.ks-defi__intro {
  font-family: var(--ks-font-body);
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ks-white);
  margin: 0 0 clamp(1.25rem, 1.8vw, 1.75rem);
}

.ks-defi__intro strong {
  color: var(--ks-gold-500);
  font-weight: 700;
}

.ks-defi__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ks-defi__points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  font-weight: 500;
  color: var(--ks-white);
  line-height: 1.55;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 164, 114, 0.18);
}

.ks-defi__points li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ks-defi__bullet {
  color: var(--ks-gold-500);          /* T158 — WCAG AAA 7.42:1 sur navy-900 (gold-aaa erronément choisi en T139 sur fond clair, section ks-defi est DARK) */
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.15em;
}

/* Cartes KPI fond opaque navy + accent gold (lisibilité AAA WCAG perçue) */
.ks-defi__kpi {
  padding: clamp(24px, 2.6vw, 36px);
  background: linear-gradient(160deg, rgba(26, 40, 64, 0.95) 0%, rgba(10, 22, 40, 0.92) 100%);
  border: 1px solid rgba(184, 164, 114, 0.32);
  border-radius: var(--ks-radius-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease, box-shadow 400ms ease;
}

.ks-defi__kpi:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 164, 114, 0.5);
  box-shadow: 0 18px 48px rgba(184, 164, 114, 0.18);
}

.ks-defi__num {
  font-family: var(--ks-font-display);
  font-size: clamp(3.5rem, 5.5vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ks-gold-500);
  letter-spacing: -0.04em;
  margin: 0.5rem 0 0.75rem;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(184, 164, 114, 0.18));
}

.ks-defi__num sup {
  font-size: 0.4em;
  vertical-align: super;
  font-weight: 700;
  margin-left: 0.05em;
  color: var(--ks-gold-500);
}

.ks-defi__caption {
  font-family: var(--ks-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ks-white);
  margin: 0;
  max-width: 24ch;
}

/* Tuile filiales — barres verticales graphique */
.ks-defi__bars {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 1.25rem;
  width: 100%;
  height: 32px;
  align-items: flex-end;
}

.ks-defi__bars span {
  flex: 1;
  background: linear-gradient(180deg, var(--ks-gold-500) 0%, var(--ks-gold-700) 100%);
  border-radius: 2px;
  transform-origin: bottom;
  animation: ks-bars-rise 1.2s ease-out backwards;
}

.ks-defi__bars span:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.ks-defi__bars span:nth-child(2) { height: 50%; animation-delay: 0.2s; }
.ks-defi__bars span:nth-child(3) { height: 75%; animation-delay: 0.3s; }
.ks-defi__bars span:nth-child(4) { height: 60%; animation-delay: 0.4s; }
.ks-defi__bars span:nth-child(5) { height: 90%; animation-delay: 0.5s; }
.ks-defi__bars span:nth-child(6) { height: 100%; animation-delay: 0.6s; }

@keyframes ks-bars-rise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* T143/T144/T148 — KPI Défi 2026 : visuels différenciés
   journey (compagnons) + puzzle (filiales) + sectors (bars graduées) */
.ks-defi__journey,
.ks-defi__sectors,
.ks-defi__puzzle {
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* T144 — Trajectoire SVG growth journey (Compagnons CCQ)
   Courbe ascendante draw + continuation pointillée + pulse cercle arrivée */
.ks-defi__journey [data-journey-path] {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: ks-journey-draw 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.ks-defi__journey [data-journey-tail] {
  opacity: 0;
  animation: ks-journey-fade-in 0.8s ease-out 1.6s forwards;
}
.ks-defi__journey [data-journey-pulse] {
  transform-origin: 200px 14px;
  transform-box: fill-box;
  animation: ks-journey-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s backwards;
}
.ks-defi__journey [data-journey-ring] {
  transform-origin: 200px 14px;
  transform-box: fill-box;
  opacity: 0;
  animation: ks-journey-ring 2.4s ease-out 2s infinite;
}

@keyframes ks-journey-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ks-journey-fade-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 0.65; transform: translateX(0); }
}
@keyframes ks-journey-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ks-journey-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* T143 — Secteurs : 5 colonnes graduées */
.ks-defi__sectors rect {
  transform-origin: bottom;
  animation: ks-bars-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.ks-defi__sectors rect:nth-child(1) { animation-delay: 0.08s; }
.ks-defi__sectors rect:nth-child(2) { animation-delay: 0.16s; }
.ks-defi__sectors rect:nth-child(3) { animation-delay: 0.24s; }
.ks-defi__sectors rect:nth-child(4) { animation-delay: 0.32s; }
.ks-defi__sectors rect:nth-child(5) { animation-delay: 0.40s; }

/* T148 — Puzzle 6 pièces : animation cascade « assemblage »
   Chaque pièce entre légèrement décalée puis se met en place */
.ks-defi__puzzle [data-puzzle-piece] {
  transform-origin: center;
  transform-box: fill-box;
  animation: ks-puzzle-assemble 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.ks-defi__puzzle [data-puzzle-piece="1"] { animation-delay: 0.10s; }
.ks-defi__puzzle [data-puzzle-piece="2"] { animation-delay: 0.20s; }
.ks-defi__puzzle [data-puzzle-piece="3"] { animation-delay: 0.30s; }
.ks-defi__puzzle [data-puzzle-piece="4"] { animation-delay: 0.40s; }
.ks-defi__puzzle [data-puzzle-piece="5"] { animation-delay: 0.50s; }
.ks-defi__puzzle [data-puzzle-piece="6"] { animation-delay: 0.60s; }
.ks-defi__puzzle circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: ks-puzzle-snap 0.4s ease-out 0.85s backwards;
}
@keyframes ks-puzzle-assemble {
  0%   { opacity: 0; transform: scale(0.4) translateY(-6px); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ks-puzzle-snap {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ks-defi__journey [data-journey-path] {
    stroke-dashoffset: 0;
    animation: none;
  }
  .ks-defi__journey [data-journey-tail],
  .ks-defi__journey [data-journey-pulse] {
    opacity: 1;
    animation: none;
  }
  .ks-defi__journey [data-journey-ring] {
    animation: none;
  }
  .ks-defi__sectors rect,
  .ks-defi__puzzle [data-puzzle-piece],
  .ks-defi__puzzle circle {
    animation: none;
  }
}

/* Signature Ali */
.ks-defi__signature {
  padding: clamp(24px, 2.6vw, 36px);
  background: linear-gradient(135deg, rgba(184, 164, 114, 0.18) 0%, rgba(184, 164, 114, 0.06) 100%);
  border: 1px solid rgba(184, 164, 114, 0.4);
  border-radius: var(--ks-radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.ks-defi__sig-name {
  font-family: 'Caveat', 'Akzidenz Grotesk', sans-serif;
  font-size: clamp(2.25rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--ks-gold-500);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  font-style: normal;
}

.ks-defi__sig-role {
  font-family: var(--ks-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.ks-defi__sig-since {
  font-family: var(--ks-font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(184, 164, 114, 0.18);
}

.ks-defi__sig-since strong {
  color: var(--ks-gold-500);
  font-weight: 700;
}

/* Apparition cinématique au scroll (intersection observer flag .is-revealed) */
.ks-defi:not(.is-revealed) .ks-defi__kpi,
.ks-defi:not(.is-revealed) .ks-defi__signature {
  opacity: 0;
  transform: translateY(28px);
}

.ks-defi__kpi,
.ks-defi__signature {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-defi.is-revealed .ks-defi__kpi--filiales   { transition-delay: 100ms; }
.ks-defi.is-revealed .ks-defi__kpi--compagnons { transition-delay: 200ms; }
.ks-defi.is-revealed .ks-defi__kpi--secteurs   { transition-delay: 300ms; }
.ks-defi.is-revealed .ks-defi__signature       { transition-delay: 400ms; }

/* Override Caveat — chargée hero, on déclare ici aussi pour signature */
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 720px) {
  .ks-defi__num {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
}

/* === T83 — Skip link WCAG 2.4.1 + visually-hidden utility + focus-visible AAA === */
.ks-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  background: var(--ks-navy-900);
  color: var(--ks-gold-500);
  padding: 14px 24px;
  border: 2px solid var(--ks-gold-500);
  border-radius: var(--ks-radius-sm);
  font-family: var(--ks-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 200ms ease;
}

.ks-skip-link:focus,
.ks-skip-link:focus-visible {
  top: 16px;
  outline: 3px solid var(--ks-gold-500);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Logo target-size 24×24 minimum (WCAG 2.5.8) — padding zone clic */
.main-header .logo a,
.sticky-header .logo a,
footer .logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
}

/* Focus visible AAA sur tous éléments interactifs (WCAG 2.4.7 + 2.4.13) */
.main-header a:focus-visible,
.main-header button:focus-visible,
.main-menu .navigation a:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline: 3px solid var(--ks-gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* === Override boutons InTime existants pour cohérence === */
/* T70+T82 — Bouton charte stricte : navy + texte blanc 18.13:1 AAA (élimine orange Construz) */
.theme-btn.btn-style-ten {
  background-color: var(--ks-navy-900) !important;
}

.theme-btn.btn-style-ten:before {
  background: var(--ks-gold-500) !important;
}

.theme-btn.btn-style-ten .text-one,
.theme-btn.btn-style-ten .text-two,
.theme-btn.btn-style-ten .btn-wrap {
  color: var(--ks-white) !important;
}

.theme-btn.btn-style-ten:hover {
  background-color: var(--ks-gold-500) !important;
}

.theme-btn.btn-style-ten:hover .text-one,
.theme-btn.btn-style-ten:hover .text-two,
.theme-btn.btn-style-ten:hover .btn-wrap {
  color: var(--ks-navy-900) !important;
}

/* T82 — Footer texte sur fond foncé (charte navy/gold) */
footer .news-widget_title a,
footer h4,
footer h6,
footer .news-widget_title,
footer .links li a,
footer .links a {
  color: var(--ks-white) !important;
}

footer p,
footer .copyright,
footer .news-widget_date,
footer .footer-text {
  color: rgba(255, 255, 255, 0.85) !important;
}

footer h3, footer h4, footer h5, footer h6 {
  color: var(--ks-gold-500) !important;
}

footer a:hover {
  color: var(--ks-gold-500) !important;
}

/* Bouton newsletter S'inscrire — élimination orange Construz, navy charte */
footer button[type="submit"],
footer .newsletter-form button,
.newsletter button[type="submit"] {
  background: var(--ks-navy-900) !important;
  color: var(--ks-white) !important;
  border-color: var(--ks-gold-500) !important;
}

footer button[type="submit"]:hover,
footer .newsletter-form button:hover,
.newsletter button[type="submit"]:hover {
  background: var(--ks-gold-500) !important;
  color: var(--ks-navy-900) !important;
}

/* T70 — Focus visible clavier (WCAG 2.4.7 + 2.4.13 nouveau WCAG 2.2) */
.theme-btn.btn-style-ten:focus-visible,
.ks-cta-primary:focus-visible,
.ks-cta-secondary:focus-visible {
  outline: 3px solid var(--ks-gold-500);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(184, 164, 114, 0.25);
}

/* === T69 — Header transparent + liens blancs sur pages avec hero foncé (WCAG AAA fix) === */
body:has(.ks-page-hero) .main-header .header-upper .navigation > li > a,
body:has(.ks-page-hero) .main-header .header-upper .navbar-toggler,
body:has(.ks-page-hero) .main-header .header-upper .mobile-nav-toggler {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

body:has(.ks-page-hero) .main-header .header-upper .navigation > li > a:hover,
body:has(.ks-page-hero) .main-header .header-upper .navigation > li.dropdown:hover > a {
  color: var(--ks-gold-500);
}

body:has(.ks-page-hero) .main-header .header-upper .navigation > li.dropdown > ul a {
  color: var(--ks-navy-900);
  text-shadow: none;
}

body:has(.ks-page-hero) .main-header.fixed-header .header-upper .navigation > li > a,
body:has(.ks-page-hero) .main-header.fixed-header .header-upper .navbar-toggler,
body:has(.ks-page-hero) .main-header.fixed-header .header-upper .mobile-nav-toggler {
  color: var(--ks-navy-900);
  text-shadow: none;
}

body:has(.ks-page-hero) .sticky-header .navigation > li > a {
  color: var(--ks-navy-900);
  text-shadow: none;
}

/* ============================================================
   Section "Une approche structurée à long terme" (T87 2026-05-10)
   Bento 2 zones : narrative left + 2 circular progress rings right
   Continuité visuelle home : Akzidenz Grotesk + navy/gold AAA
   ============================================================ */

.ks-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Chaîne de valeur intégrée (V5d-T117 — visualisation plan d'affaires)
   ============================================================ */
.ks-chain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  counter-reset: ks-chain-step;
}

.ks-chain__step {
  position: relative;
  background: #fff;
  border-left: 4px solid var(--ks-gold-500);
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 10px 28px -16px rgba(10, 22, 40, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.25s, box-shadow 0.25s;
}

.ks-chain__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(10, 22, 40, 0.28);
}

.ks-chain__num {
  font-family: var(--ks-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ks-gold-aaa);
  letter-spacing: -0.02em;
}

.ks-chain__step strong {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ks-navy-900);
}

.ks-chain__role {
  font-family: var(--ks-font-body);
  font-size: 0.875rem;
  color: var(--ks-navy-900);
  opacity: 0.78;
  line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
  .ks-chain__step {
    background: var(--ks-bg-card, #1A2740);
    border-color: var(--ks-gold-500);
  }
  .ks-chain__step strong {
    color: var(--ks-text-primary, #F5F1E8);
  }
  .ks-chain__role {
    color: var(--ks-text-secondary, #C9C2AC);
    opacity: 1;
  }
  .ks-chain__num {
    color: var(--ks-gold-500);
  }
}

/* ============================================================
   Page TOC sticky rail gauche (T126 — scroll-spy NNG 2026)
   Desktop : rail vertical fixé gauche, labels visibles
   Mobile : bouton flottant + drawer overlay
   ============================================================ */
.ks-page-toc {
  position: fixed;
  top: 50%;
  left: clamp(1rem, 2vw, 2rem);
  transform: translateY(-50%);
  z-index: 90;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* T192 — Cachée tant que hero visible (cause incertitude user : overlap visuel hero).
   JS ajoute cette classe via IntersectionObserver(.ks-page-hero) dans intime.blade.php. */
.ks-page-toc.ks-page-toc--hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(-12px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ks-page-toc {
    transition: none;
  }
}

.ks-page-toc__mobile-toggle {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 95;
  background: var(--ks-navy-900);
  color: var(--ks-gold-500);
  border: 1px solid var(--ks-gold-500);
  padding: 0.65rem 1rem;
  border-radius: 99px;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 28px -8px rgba(10, 22, 40, 0.45);
  pointer-events: auto;
}

.ks-page-toc__mobile-toggle:hover {
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
}

.ks-page-toc__mobile-toggle:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 3px;
}

.ks-page-toc__panel {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-left: 3px solid var(--ks-gold-500);
  padding: 1rem 1.25rem;
  border-radius: 0 4px 4px 0;
  max-width: 260px;
  box-shadow: 0 16px 40px -16px rgba(10, 22, 40, 0.18);
}

.ks-page-toc__title {
  font-family: var(--ks-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ks-gold-aaa);
  margin: 0 0 0.75rem;
}

.ks-page-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ks-page-toc__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: 3px;
  font-family: var(--ks-font-body);
  font-size: 0.85rem;
  color: var(--ks-navy-900);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  border-left: 2px solid transparent;
}

.ks-page-toc__link:hover {
  opacity: 1;
  background: rgba(184, 164, 114, 0.08);
  transform: translateX(2px);
}

.ks-page-toc__link[aria-current="true"],
.ks-page-toc__link.is-active {
  opacity: 1;
  background: rgba(184, 164, 114, 0.15);
  border-left-color: var(--ks-gold-500);
  font-weight: 700;
}

.ks-page-toc__link:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 2px;
}

.ks-page-toc__num {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--ks-gold-aaa);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.ks-page-toc__label {
  line-height: 1.25;
}

/* Mobile : panel hidden, bouton visible */
@media (max-width: 1100px) {
  .ks-page-toc {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
  }
  .ks-page-toc__mobile-toggle {
    display: inline-flex;
  }
  .ks-page-toc__panel {
    display: none;
    position: fixed;
    bottom: 5rem;
    left: 1.25rem;
    right: 1.25rem;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
  }
  .ks-page-toc[data-ks-toc-open] .ks-page-toc__panel {
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  .ks-page-toc__panel {
    background: rgba(26, 39, 64, 0.96);
    border-left-color: var(--ks-gold-500);
  }
  .ks-page-toc__link {
    color: var(--ks-text-primary, #F5F1E8);
  }
  .ks-page-toc__link[aria-current="true"],
  .ks-page-toc__link.is-active {
    background: rgba(184, 164, 114, 0.20);
  }
}

/* ============================================================
   Cookie banner Loi 25 / RGPD (V5d-T115) + Sticky CTA mobile (V5d-T116)
   ============================================================ */
.ks-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--ks-navy-900);
  color: #fff;
  padding: 1rem 1.25rem;
  border-top: 3px solid var(--ks-gold-500);
  box-shadow: 0 -8px 30px -10px rgba(0, 0, 0, 0.4);
}

.ks-cookie-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 720px) {
  .ks-cookie-banner__inner {
    grid-template-columns: 1fr;
  }
}

.ks-cookie-banner__content {
  font-size: 0.9375rem;
  line-height: 1.45;
}

.ks-cookie-banner__content strong {
  color: var(--ks-gold-500);
}

.ks-cookie-banner__content a {
  color: var(--ks-gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.ks-cookie-banner__btn {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.6rem 1.25rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.ks-cookie-banner__btn--decline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ks-cookie-banner__btn--decline:hover {
  border-color: var(--ks-gold-500);
}

.ks-cookie-banner__btn--accept {
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
  border: 1px solid var(--ks-gold-500);
}

.ks-cookie-banner__btn--accept:hover {
  background: var(--ks-gold-700);
  border-color: var(--ks-gold-700);
}

.ks-cookie-banner__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Sticky CTA mobile */
.ks-sticky-cta {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9998;
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
  padding: 0.85rem 1.25rem;
  border-radius: 99px;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 28px -8px rgba(10, 22, 40, 0.45);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.ks-sticky-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(10, 22, 40, 0.55);
  background: var(--ks-gold-700);
  color: var(--ks-navy-900);
}

.ks-sticky-cta:focus-visible {
  outline: 2px solid var(--ks-navy-900);
  outline-offset: 3px;
}

.ks-sticky-cta__icon {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .ks-sticky-cta {
    display: none !important;
  }
}

/* Trust signals row */
.ks-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  background: rgba(184, 164, 114, 0.06);
  border-block: 1px solid rgba(184, 164, 114, 0.2);
}

.ks-trust-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ks-gold-aaa);
  letter-spacing: 0.05em;
}

.ks-trust-row__badge {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ks-gold-aaa);          /* T139 — WCAG AAA 8.28:1 (vs gold-700 1.7:1 sur fond translucide) */
  letter-spacing: -0.02em;
}

.ks-trust-row__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ks-navy-900);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   View Transitions API (V5c-T111 — tendance 2026 fluide nav)
   Chrome 111+, Edge 111+, Safari 18.2+, ~85% support mai 2026.
   Effet fade subtil entre navigations same-origin.
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 1, 1) both ks-vt-fade-out;
}

::view-transition-new(root) {
  animation: 0.35s cubic-bezier(0, 0, 0.2, 1) both ks-vt-fade-in;
}

@keyframes ks-vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes ks-vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Préservation hero photo entre pages : view-transition-name partagé */
.ks-page-hero--photo {
  view-transition-name: ks-page-hero;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================
   Container Queries (V5c-T112 — tendance 2026 component responsive)
   Cards et Bento réagissent à leur container parent, pas viewport
   ============================================================ */
.ks-bento,
.ks-pourquoi__grid,
.ks-piliers-asym,
.ks-approche__grid {
  container-type: inline-size;
  container-name: ks-bento;
}

@container ks-bento (max-width: 720px) {
  .ks-card {
    padding: 1.25rem;
  }
  .ks-card__title {
    font-size: 1.125rem;
  }
}

@container ks-bento (max-width: 480px) {
  .ks-card {
    padding: 1rem;
  }
  .ks-stat__number {
    font-size: clamp(2rem, 8cqi, 3rem);
  }
}

/* Estimator container query */
.ks-estimator {
  container-type: inline-size;
  container-name: ks-est;
}

@container ks-est (max-width: 580px) {
  .ks-estimator__fields {
    grid-template-columns: 1fr;
  }
  .ks-estimator__result {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Filtres portfolio projets (V5b-T110 — tendance 2026 filterable)
   ============================================================ */
.ks-projet-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(184, 164, 114, 0.25);
}

.ks-projet-filter {
  font-family: var(--ks-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid rgba(10, 22, 40, 0.18);
  border-radius: 3px;
  color: var(--ks-navy-900);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ks-projet-filter:hover {
  border-color: var(--ks-gold-500);
  color: var(--ks-gold-aaa);
}

.ks-projet-filter.is-active {
  background: var(--ks-navy-900);
  color: #fff;
  border-color: var(--ks-navy-900);
}

.ks-projet-filter:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .ks-projet-filter {
    color: var(--ks-text-primary, #F5F1E8);
    border-color: var(--ks-border-subtle, rgba(255, 255, 255, 0.15));
  }
  .ks-projet-filter.is-active {
    background: var(--ks-gold-500);
    color: var(--ks-navy-900);
    border-color: var(--ks-gold-500);
  }
}

/* ============================================================
   Dark mode auto (V5b — tendance 2026 prefers-color-scheme)
   Switch automatique selon préférence système utilisateur.
   Contrastes AAA préservés navy → gris très clair, gold → gold-300.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ks-bg-page: #0F1B2E;
    --ks-bg-section: #0A1628;
    --ks-bg-section-alt: #14213D;
    --ks-bg-card: #1A2740;
    --ks-text-primary: #F5F1E8;
    --ks-text-secondary: #C9C2AC;
    --ks-border-subtle: rgba(255, 255, 255, 0.08);
  }

  body {
    background: var(--ks-bg-page);
    color: var(--ks-text-primary);
  }

  .ks-section {
    background: var(--ks-bg-section);
  }

  .ks-section--alt {
    background: var(--ks-bg-section-alt);
  }

  .ks-section.ks-approche,
  .ks-section.ks-pourquoi {
    background: linear-gradient(180deg, var(--ks-bg-section) 0%, var(--ks-bg-section-alt) 100%);
  }

  .ks-h2,
  .ks-pillar__title,
  .ks-card__title,
  .ks-page-section__heading h2 {
    color: var(--ks-text-primary);
  }

  .ks-lead,
  .ks-card__text,
  .ks-pillar__text {
    color: var(--ks-text-secondary);
  }

  .ks-card {
    background: var(--ks-bg-card);
    border-color: var(--ks-border-subtle);
    color: var(--ks-text-primary);
  }

  .ks-card .ks-card__text,
  .ks-card p {
    color: var(--ks-text-secondary);
  }

  .ks-approche__stat,
  .ks-pourquoi__card {
    background: var(--ks-bg-card);
    border-color: var(--ks-border-subtle);
    color: var(--ks-text-primary);
  }

  .ks-approche__ring-num,
  .ks-pourquoi__num-card,
  .ks-approche__expertise-ancre strong {
    color: var(--ks-gold-500);
  }

  .ks-eyebrow {
    color: var(--ks-gold-500);
  }

  .ks-pourquoi__heading .ks-eyebrow,
  .ks-page-section__heading .ks-eyebrow {
    color: var(--ks-gold-500);
  }

  .ks-estimator {
    background: var(--ks-bg-card);
    border-color: var(--ks-border-subtle);
  }

  .ks-estimator__field select,
  .ks-estimator__field input[type="number"] {
    background: var(--ks-bg-section);
    color: var(--ks-text-primary);
    border-color: var(--ks-border-subtle);
  }

  .ks-estimator__field label,
  .ks-estimator__filiales label {
    color: var(--ks-text-primary);
  }

  .ks-estimator__cta-note {
    color: var(--ks-gold-500);
  }
}

/* ============================================================
   Estimateur soumission interactif (V5a-B — tendance 2026 outils interactifs)
   ============================================================ */
.ks-estimator {
  background: #fff;
  border: 1px solid rgba(184, 164, 114, 0.25);
  border-left: 4px solid var(--ks-gold-500);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 4px;
  box-shadow: 0 16px 36px -20px rgba(10, 22, 40, 0.2);
}

.ks-estimator__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1.5rem;
}

.ks-estimator__field--full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .ks-estimator__fields {
    grid-template-columns: 1fr;
  }
}

.ks-estimator__field label {
  display: block;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ks-navy-900);
  margin-bottom: 0.5rem;
}

.ks-estimator__field select,
.ks-estimator__field input[type="number"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 22, 40, 0.18);
  border-radius: 3px;
  font-family: var(--ks-font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--ks-navy-900);
}

.ks-estimator__field select:focus,
.ks-estimator__field input:focus {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 2px;
}

.ks-estimator__filiales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1rem;
}

.ks-estimator__filiales label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ks-font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--ks-navy-900);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 3px;
  transition: background 0.15s;
}

.ks-estimator__filiales label:hover {
  background: rgba(184, 164, 114, 0.08);
}

.ks-estimator__result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--ks-navy-900) 0%, #1a2740 100%);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .ks-estimator__result {
    grid-template-columns: 1fr;
  }
}

.ks-estimator__result-block .ks-eyebrow {
  display: block;
  color: var(--ks-gold-500);
  margin-bottom: 0.5rem;
}

.ks-estimator__result-value {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.ks-estimator__result-note {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.ks-estimator__cta-note {
  font-style: italic;
  color: var(--ks-gold-aaa);
  font-size: 0.9375rem;
  margin: 0;
  text-align: center;
}

/* ============================================================
   Piliers Bento asymétrique (V5a-D — anti pattern "3 cards" 2026)
   1 hero card + 4 std cards + 1 wide card row 3
   ============================================================ */
.ks-piliers-asym {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-auto-rows: minmax(180px, auto);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ks-piliers-asym__card--hero {
  grid-column: 1;
  grid-row: 1 / 3;
}

.ks-piliers-asym__card--wide {
  grid-column: 2 / 4;
  grid-row: 3;
}

@media (max-width: 960px) {
  .ks-piliers-asym {
    grid-template-columns: 1fr 1fr;
  }
  .ks-piliers-asym__card--hero,
  .ks-piliers-asym__card--wide {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  .ks-piliers-asym {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Pages secondaires — Vague 1 (T94+) — Composants partagés
   .ks-page-hero--photo : hero avec photo background + overlay navy
   .ks-page-section : section avec numéro XXL gold + heading inline
   .ks-page-section__visual : figure imagée stylisée
   ============================================================ */
.ks-page-hero--photo {
  position: relative;
  min-height: clamp(320px, 42vh, 460px);
  background-image: var(--ks-hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: flex-end;
  /* T189 fix : padding-top ≥ header absolu 103px pour breadcrumb sous header.
     padding-bottom plus contenu. */
  padding-top: clamp(120px, 11vw, 160px);
  padding-bottom: clamp(40px, 5vw, 80px);
  overflow: hidden;
}

.ks-page-hero--photo .ks-page-hero__overlay {
  position: absolute;
  inset: 0;
  /* T189 fix : overlay top renforcé navy 96% → 85% → 72% pour breadcrumb AAA
     quelle que soit la luminosité photo */
  background: linear-gradient(180deg,
    rgba(10, 22, 40, 0.96) 0%,
    rgba(10, 22, 40, 0.85) 20%,
    rgba(10, 22, 40, 0.72) 60%,
    rgba(184, 164, 114, 0.30) 100%);
  z-index: 0;
}

.ks-page-hero--photo .ks-page-hero__inner {
  position: relative;
  z-index: 1;
}

.ks-page-hero--photo .ks-page-hero__breadcrumb a,
.ks-page-hero--photo .ks-page-hero__breadcrumb {
  color: rgba(255, 255, 255, 0.85);
}

.ks-page-hero--photo .ks-page-hero__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--ks-gold-500);
  letter-spacing: 0.14em;
}

.ks-page-hero--photo h1 {
  color: #fff !important;
  margin: 0 0 1rem;
  font-family: var(--ks-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.ks-page-hero--photo .ks-page-hero__subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 780px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

/* Section avec numéro XXL gold */
.ks-page-section__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 720px) {
  .ks-page-section__intro {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.ks-page-section__num {
  font-family: var(--ks-font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--ks-gold-500) 0%, var(--ks-gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ks-gold-700);
  display: inline-block;
}

.ks-page-section--dark .ks-page-section__num {
  background: linear-gradient(180deg, var(--ks-gold-500) 0%, var(--ks-gold-300, #D4C7A4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ks-page-section__heading .ks-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.ks-page-section__heading .ks-h2 {
  margin: 0 0 0.75rem;
}

/* Figure stylisée pour visuels intégrés */
.ks-page-section__visual {
  margin: clamp(2rem, 4vw, 3rem) 0;
  border-left: 3px solid var(--ks-gold-500);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.ks-page-section__visual img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 16px 40px -16px rgba(10, 22, 40, 0.35);
  display: block;
}

.ks-page-section__visual figcaption {
  margin-top: 0.75rem;
  font-family: var(--ks-font-body);
  font-size: 0.875rem;
  color: var(--ks-gold-aaa);
  font-style: italic;
}

.ks-page-section--dark .ks-page-section__visual figcaption {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Section « Pourquoi Kalystrat » — T93 (Bento asymétrique mai 2026)
   Numéro section XXL gold + border-top + 4 cards (1 hero + 3 std)
   Séparation visible mais sobre (ton-sur-ton + accent gold)
   ============================================================ */
.ks-pourquoi {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ks-white-50, #FAFAF8) 100%);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.ks-pourquoi__intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 880px;
}

@media (max-width: 720px) {
  .ks-pourquoi__intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.ks-pourquoi__num {
  font-family: var(--ks-font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--ks-gold-500) 0%, var(--ks-gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ks-gold-700);
  display: inline-block;
}

.ks-pourquoi__heading .ks-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.ks-pourquoi__heading .ks-h2 {
  margin: 0 0 1rem;
}

.ks-pourquoi__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ks-pourquoi__card {
  position: relative;
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 4px;
  border-left: 3px solid var(--ks-gold-500);
  box-shadow: 0 10px 28px -16px rgba(10, 22, 40, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}

.ks-pourquoi__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(10, 22, 40, 0.28);
}

.ks-pourquoi__card--hero {
  grid-column: 1;
  grid-row: 1 / 3;
  background: linear-gradient(180deg, #fff 0%, #FCFAF5 100%);
  border-left-width: 4px;
}

.ks-pourquoi__card--wide {
  grid-column: 2 / 4;
  grid-row: 2;
}

@media (max-width: 960px) {
  .ks-pourquoi__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .ks-pourquoi__card--hero {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .ks-pourquoi__card--wide {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  .ks-pourquoi__grid {
    grid-template-columns: 1fr;
  }
}

.ks-pourquoi__num-card {
  font-family: var(--ks-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ks-gold-aaa);
  margin-bottom: 0.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ks-pourquoi__card--hero .ks-pourquoi__num-card {
  font-size: 2.75rem;
}

.ks-pourquoi__card .ks-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.ks-pourquoi__card .ks-card__title {
  margin: 0 0 0.75rem;
}

.ks-pourquoi__card .ks-card__text {
  margin: 0;
}

.ks-pourquoi__card .ks-card__text a {
  color: var(--ks-gold-aaa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-pourquoi__card .ks-card__text a:hover {
  color: var(--ks-navy-900);
}

/* ============================================================
   Scroll-triggered reveal — T92 (sobre, tendance mai 2026)
   IntersectionObserver + classes minimales : 14px / 550ms / 1×
   FOUC-safe : classes appliquées par JS, état défaut visible
   ============================================================ */
.ks-reveal-init {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

.ks-reveal-show {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ks-reveal-init,
  .ks-reveal-show {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.ks-approche {
  position: relative;
  background: var(--ks-white-50, #FAFAF8);
  overflow: hidden;
}

.ks-approche::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: clamp(120px, 18vw, 240px);
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ks-gold-500));
}

.ks-approche__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 960px) {
  .ks-approche__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
}

/* Narrative left */
.ks-approche__narrative {
  position: relative;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 3px solid var(--ks-gold-500);
}

.ks-approche__title {
  margin: 0.75rem 0 1.5rem !important;
  color: var(--ks-navy-900);
}

.ks-section.ks-approche .ks-approche__lead {
  color: var(--ks-navy-900);
  opacity: 0.85;
}

.ks-approche__lead + .ks-approche__lead {
  margin-top: 1rem;
}

/* Triade expertise (T89 — remplace timeline horizon) */
.ks-approche__expertise {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 22, 40, 0.12);
}

.ks-approche__expertise-label {
  display: block;
  font-family: var(--ks-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-gold-aaa);
  margin-bottom: 1.25rem;
  font-weight: 700;
}

.ks-approche__expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

@media (max-width: 600px) {
  .ks-approche__expertise-grid {
    grid-template-columns: 1fr;
  }
}

.ks-approche__expertise-ancre {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--ks-font-display);
  font-size: 0.875rem;
  color: var(--ks-navy-900);
  padding: 0.65rem 0.85rem;
  background: #fff;
  border-left: 3px solid var(--ks-gold-500);
  border-radius: 0 2px 2px 0;
  line-height: 1.3;
}

.ks-approche__expertise-ancre strong {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ks-gold-aaa);
  letter-spacing: -0.02em;
}

.ks-approche__expertise-ancre strong sup {
  font-size: 0.55em;
  color: var(--ks-gold-500);
  font-weight: 700;
}

/* Stats right (2 cards with ring SVG) */
.ks-approche__stats {
  display: grid;
  gap: 1.25rem;
}

.ks-approche__stat {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid rgba(184, 164, 114, 0.25);
  border-radius: 4px;
  box-shadow: 0 10px 30px -12px rgba(10, 22, 40, 0.18);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ks-approche__stat::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ks-gold-500), var(--ks-gold-700));
}

.ks-approche__stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(10, 22, 40, 0.25);
}

@media (max-width: 480px) {
  .ks-approche__stat {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 1.5rem 1.25rem;
  }
}

.ks-approche__ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.ks-approche__ring {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
}

.ks-approche__ring-bg {
  fill: none;
  stroke: rgba(184, 164, 114, 0.18);
  stroke-width: 8;
}

.ks-approche__ring-fg {
  fill: none;
  stroke: var(--ks-gold-700);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ks-approche__ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.875rem;
  color: var(--ks-gold-aaa);
  letter-spacing: -0.02em;
  pointer-events: none;
  line-height: 1;
}

.ks-approche__ring-pct {
  font-size: 1.125rem;
  margin-left: 2px;
  color: var(--ks-gold-aaa);
  align-self: center;
}

.ks-approche__stat-meta .ks-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.ks-approche__stat-label {
  margin: 0;
  font-family: var(--ks-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ks-navy-900);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .ks-approche__ring-fg {
    transition: none;
  }
  .ks-approche__stat {
    transition: none;
  }
}

/* T124 — Section showcase parallax wide (entre Approche et Témoignages) */
.ks-showcase {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  padding: clamp(80px, 12vw, 160px) 0;
  background-image: var(--ks-showcase-img);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--ks-white);
  overflow: hidden;
}
@media (max-width: 900px) {
  .ks-showcase {
    background-attachment: scroll;
    min-height: 380px;
  }
}
.ks-showcase__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,22,40,0.88) 0%, rgba(10,22,40,0.62) 50%, rgba(184,164,114,0.32) 100%);
  z-index: 1;
}
.ks-showcase__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}
.ks-showcase__eyebrow {
  color: var(--ks-gold-500);
  display: inline-block;
  margin-bottom: 1rem;
}
.ks-showcase__title {
  font-family: var(--ks-font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--ks-white);
}
.ks-showcase__text {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 640px;
  color: rgba(255,255,255,0.92);
  margin: 0 0 2.5rem;
}
.ks-showcase__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 640px;
}
.ks-showcase__kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ks-showcase__kpi-num {
  font-family: var(--ks-font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--ks-gold-500);
  line-height: 1;
}
.ks-showcase__kpi-lbl {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .ks-showcase {
    background-attachment: scroll;
  }
}

/* T124 — Cards avec thumbnail (blog index + blog home) */
.ks-card--thumb {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ks-radius-lg, 16px);
  background: var(--ks-white);
  box-shadow: var(--ks-shadow-card, 0 4px 20px rgba(10,22,40,0.08));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  border-top: 4px solid var(--ks-navy-900);
}
.ks-card--thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,22,40,0.16);
}
.ks-card__thumb-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ks-navy-900);
}
.ks-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ks-card--thumb:hover .ks-card__thumb {
  transform: scale(1.05);
}
.ks-card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 32px);
  gap: 0.75rem;
  flex: 1;
}
.ks-card__body .ks-card__title {
  margin: 0;
}
.ks-card__body .ks-card__text {
  flex: 1;
}
.ks-card__body .ks-card__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .ks-card--thumb,
  .ks-card__thumb {
    transition: none;
  }
}

/* T129 — Cards engagement contractuel (remplacement rings stats 62/80 fabriqués) */
.ks-approche__commitment {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.5vw, 32px);
  background: var(--ks-white, #fff);
  border-radius: var(--ks-radius-lg, 16px);
  border-left: 4px solid var(--ks-gold-500);
  box-shadow: 0 4px 20px rgba(10,22,40,0.06);
}
.ks-approche__commitment + .ks-approche__commitment {
  margin-top: 1.25rem;
}
.ks-approche__commitment-icon {
  width: 56px;
  height: 56px;
  display: block;
  color: var(--ks-gold-700, #8C7B4F);
  flex-shrink: 0;
}
.ks-approche__commitment-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ks-approche__commitment-title {
  font-family: var(--ks-font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: var(--ks-navy-900);
  margin: 0;
  line-height: 1.2;
}
.ks-approche__commitment-text {
  font-family: var(--ks-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ks-navy-900);
  opacity: 0.88;
  margin: 0;
}
.ks-approche__commitment-text em {
  font-style: normal;
  background: var(--ks-gray-100, #F5F5F0);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--ks-font-mono, monospace);
  font-size: 0.875em;
}

/* ============================================================
   T131 — Footer Kalystrat (Option E : confiance + sitemap-lite + légal)
   Pattern mai 2026 : architectural premium construction
   ============================================================ */

.ks-footer {
  background: var(--ks-navy-900, #0A1628);
  color: rgba(255,255,255,0.92);
  font-family: var(--ks-font-body);
  /* T157 — Transition fine ligne or (tendance 2026 luxe/corporate, anti-gap blanc daté) */
  margin-top: 0;
  border-top: 1px solid var(--ks-gold-500, #B8A472);
}
.ks-footer__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.ks-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ks-footer a:hover,
.ks-footer a:focus-visible {
  color: var(--ks-gold-500, #B8A472);
}
.ks-footer a:focus-visible {
  outline: 2px solid var(--ks-gold-500, #B8A472);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Zone 1 : bandeau confiance certifications */
.ks-footer__trust {
  background: linear-gradient(180deg, rgba(184,164,114,0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(184,164,114,0.18);
  padding: clamp(24px, 3vw, 40px) 0;
}
.ks-footer__trust-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .ks-footer__trust-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
@media (max-width: 480px) {
  .ks-footer__trust-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
.ks-footer__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}
.ks-footer__trust-badge {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  color: var(--ks-gold-500, #B8A472);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ks-footer__trust-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}

/* Zone 2 : main footer (marque + 3 colonnes) */
.ks-footer__main {
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}
.ks-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 1024px) {
  .ks-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .ks-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .ks-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Bloc marque */
.ks-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ks-footer__logo {
  display: inline-block;
  max-width: 320px;        /* T153 — agrandi pour cohérence header T147 */
}
.ks-footer__logo img {
  width: 100%;
  height: auto;
  display: block;
}
.ks-footer__tagline {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0;
  max-width: 340px;
}
.ks-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ks-footer__contact > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.ks-footer__contact svg {
  flex-shrink: 0;
  color: var(--ks-gold-500, #B8A472);
}
.ks-footer__phone {
  color: var(--ks-gold-500, #B8A472) !important;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
}
.ks-footer__phone:hover,
.ks-footer__phone:focus-visible {
  color: #fff !important;
}
.ks-footer__email {
  color: rgba(255,255,255,0.92);
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
}
.ks-footer__address {
  color: rgba(255,255,255,0.78);
}

/* Colonnes navigation */
.ks-footer__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ks-footer__col-title {
  font-family: var(--ks-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ks-gold-500, #B8A472);
  margin: 0 0 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(184,164,114,0.22);
}
.ks-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ks-footer__links > li > a {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  display: inline-block;
  padding: 2px 0;
}

/* Zone 3 : sous-barre légale */
.ks-footer__legal {
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(184,164,114,0.18);
  padding: clamp(16px, 2vw, 24px) 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.72);
}
.ks-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ks-footer__copyright {
  flex: 1 1 280px;
}
.ks-footer__legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
}
.ks-footer__legal-links > li:not(:last-child)::after {
  content: '·';
  margin-left: 1.25rem;
  opacity: 0.4;
}
.ks-footer__legal-links a {
  color: rgba(255,255,255,0.72);
}
.ks-footer__legal-links a:hover {
  color: var(--ks-gold-500, #B8A472);
}
.ks-footer__signature {
  flex-shrink: 0;
}
.ks-footer__signature a {
  color: var(--ks-gold-500, #B8A472);
  font-weight: 600;
}

/* Dark-mode safe (déjà dark, mais double-secure) */
@media (prefers-color-scheme: dark) {
  .ks-footer {
    background: #050E1A;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-footer a {
    transition: none;
  }
}

/* ============================================================
   T130 — Marché 2026 en chiffres (stats sourcées plan Ali)
   3 stats SCHL / CCQ / APCHQ — anti-hallucination
   ============================================================ */
.ks-defi__market {
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid rgba(184,164,114,0.22);
}
.ks-defi__market > .ks-eyebrow {
  display: block;
  margin-bottom: clamp(16px, 2vw, 28px);
  color: var(--ks-gold-500, #B8A472);
}
.ks-defi__market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 720px) {
  .ks-defi__market-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.ks-defi__market-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(20px, 2vw, 28px);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--ks-gold-500, #B8A472);
  border-radius: 8px;
}
.ks-defi__market-num {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  color: var(--ks-gold-500, #B8A472);
  letter-spacing: -0.02em;
}
.ks-defi__market-label {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.45;
  color: var(--ks-white, #fff);
  opacity: 0.92;
}
.ks-defi__market-src {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 0.35rem;
}

/* ============================================================
   T136 — FAQ AEO 2026 (LLM-friendly, ChatGPT/Perplexity/Gemini)
   Pattern accordéon natif <details> sans JS
   ============================================================ */
.ks-faq__list {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  /* T196 — Layout multi-column masonry (évite trou vertical si <details open>) */
  column-count: 2;
  column-gap: clamp(16px, 1.6vw, 24px);
}
@media (max-width: 880px) {
  .ks-faq__list {
    column-count: 1;
  }
}
.ks-faq__item {
  background: var(--ks-white, #fff);
  border-radius: var(--ks-radius-lg, 14px);
  border-left: 3px solid var(--ks-gold-500, #B8A472);
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
  transition: box-shadow 0.25s ease;
  /* T196 — Empêche fragmentation card entre 2 colonnes CSS multi-column */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  display: block;
}
.ks-faq__item:hover {
  box-shadow: 0 6px 20px rgba(10,22,40,0.1);
}
.ks-faq__item details {
  padding: clamp(18px, 2vw, 24px);
}
.ks-faq__item summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  position: relative;
  padding-right: 2.5rem;
}
.ks-faq__item summary::-webkit-details-marker {
  display: none;
}
.ks-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ks-font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ks-gold-700, #8C7B4F);
  transition: transform 0.3s ease;
  line-height: 1;
}
.ks-faq__item details[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(180deg);
}
.ks-faq__question {
  font-family: var(--ks-font-display);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ks-navy-900, #0A1628);
  letter-spacing: -0.01em;
}
.ks-faq__item summary:focus-visible {
  outline: 2px solid var(--ks-gold-500, #B8A472);
  outline-offset: 4px;
  border-radius: 4px;
}
.ks-faq__answer {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(184,164,114,0.18);
  font-family: var(--ks-font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ks-navy-900, #0A1628);
  opacity: 0.92;
}
.ks-faq__answer em {
  font-style: normal;
  background: rgba(184,164,114,0.12);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--ks-font-mono, ui-monospace, monospace);
  font-size: 0.875em;
}
.ks-faq__cta {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ks-faq__item,
  .ks-faq__item summary::after {
    transition: none;
  }
}

/* T138b — Regroupement géographique cluster topical authority */
.ks-zones__geo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
}
.ks-zones__geo-group {
  padding: clamp(20px, 2vw, 28px);
  background: var(--ks-white, #fff);
  border-radius: var(--ks-radius-md, 12px);
  border-top: 3px solid var(--ks-gold-500, #B8A472);
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
}
.ks-zones__geo-title {
  font-family: var(--ks-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ks-gold-700, #8C7B4F);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(184,164,114,0.2);
}
.ks-zones__geo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ks-zones__geo-list a {
  color: var(--ks-navy-900, #0A1628);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.2s ease;
}
.ks-zones__geo-list a:hover,
.ks-zones__geo-list a:focus-visible {
  color: var(--ks-gold-700, #8C7B4F);
}

/* ============================================================
   T140 + T147 — Système logo Kalystrat (header / sticky / mobile / footer)
   logo-header.svg sur fond clair · variant white sur hero photo
   ============================================================ */
.main-header .logo img {
  width: clamp(200px, 18vw, 260px);
  height: auto;
  display: block;
}
.main-header .nav-logo img,
.mobile-menu .nav-logo img {
  width: clamp(180px, 16vw, 220px);
  height: auto;
  display: block;
}
.sticky-header .logo img {
  width: clamp(170px, 14vw, 200px);
  height: auto;
  display: block;
}
.main-header .logo a,
.main-header .nav-logo a,
.sticky-header .logo a,
.mobile-menu .nav-logo a {
  display: inline-block;
  line-height: 0;
}

/* T190 — Logo desktop : swap vers logo-white.svg sur hero (header transparent)
   pour contraste AAA. Sticky-header (au scroll, fond blanc) : logo couleur natif.
   Mobile garde toujours logo-white via <picture> srcset (T187). */
@media (min-width: 1024px) {
  body:has(.ks-page-hero) .main-header:not(.fixed-header) .header-upper .logo img {
    content: url('/assets/img/kalystrat/logo-white.svg');
  }
}
/* Sticky-header au scroll : logo couleur natif (logo-header.svg) garde son rendu */
body:has(.ks-page-hero) .sticky-header.fixed-header .logo img,
body:has(.ks-page-hero) .main-header.fixed-header .header-upper .logo img {
  content: normal;
  filter: none;
}

/* Footer brand (.ks-footer__logo déjà CSS T131) — adapté au logo-white SVG */
/* T153 — Agrandissement footer logo pour cohérence visuelle avec header T147 */
.ks-footer .ks-footer__brand .ks-footer__logo img {
  width: clamp(240px, 22vw, 320px) !important;
  max-width: 100%;
  height: auto !important;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

/* ============================================================
   T146 — Page Contact simplifiée (4 champs core + reveal téléphone)
   Best practices B2B construction mai 2026
   ============================================================ */
.ks-contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  .ks-contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Formulaire */
.ks-contact-form-wrap {
  background: var(--ks-white, #fff);
  border-radius: var(--ks-radius-lg, 16px);
  padding: clamp(28px, 3.5vw, 48px);
  box-shadow: 0 4px 24px rgba(10, 22, 40, 0.06);
  border-top: 4px solid var(--ks-gold-500);
}

.ks-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ks-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ks-contact-form__label {
  font-family: var(--ks-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ks-navy-900);
  letter-spacing: 0.01em;
}
.ks-contact-form__label > span[aria-hidden] {
  color: var(--ks-gold-700, #8C7B4F);
  margin-left: 0.15em;
}
.ks-contact-form__hint {
  color: var(--ks-gray-500, #767676);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.4em;
}
.ks-contact-form__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ks-gray-300, #d8d8d2);
  border-radius: var(--ks-radius-sm, 8px);
  font-family: var(--ks-font-body);
  font-size: 1rem;
  color: var(--ks-navy-900);
  background: var(--ks-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ks-contact-form__input:hover {
  border-color: var(--ks-gold-500);
}
.ks-contact-form__input:focus,
.ks-contact-form__input:focus-visible {
  outline: none;
  border-color: var(--ks-gold-700, #8C7B4F);
  box-shadow: 0 0 0 3px rgba(184, 164, 114, 0.22);
}
/* Validation rouge SEULEMENT après interaction utilisateur (anti-flash au load) */
.ks-contact-form__input:user-invalid {
  border-color: #B00020;
}
.ks-contact-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.ks-contact-form__textarea::placeholder {
  color: var(--ks-gray-500, #767676);
  font-style: italic;
  font-size: 0.9375rem;
}

/* Option checkbox rappel */
.ks-contact-form__option {
  margin-top: 0.25rem;
}
.ks-contact-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ks-navy-900);
  user-select: none;
}
.ks-contact-form__checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--ks-gold-500);
  cursor: pointer;
}
.ks-contact-form__field--phone {
  margin-top: 0.5rem;
  animation: ks-reveal 0.3s ease-out;
}
@keyframes ks-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CTA submit (large, premium) */
.ks-contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 16px 32px;
  background: var(--ks-navy-900);
  color: var(--ks-white);
  border: 0;
  border-radius: var(--ks-radius-sm, 8px);
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.18);
}
.ks-contact-form__submit:hover {
  background: var(--ks-gold-700, #8C7B4F);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.24);
}
.ks-contact-form__submit:focus-visible {
  outline: 3px solid var(--ks-gold-500);
  outline-offset: 3px;
}
.ks-contact-form__submit svg {
  transition: transform 0.2s ease;
}
.ks-contact-form__submit:hover svg {
  transform: translateX(3px);
}

.ks-contact-form__note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ks-gray-500, #767676);
  line-height: 1.55;
}
.ks-contact-form__note a {
  color: var(--ks-gold-700, #8C7B4F);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-contact-success {
  padding: 16px 20px;
  background: rgba(46, 125, 50, 0.08);
  border-left: 4px solid #1B5E20;
  border-radius: 8px;
  color: #1B5E20;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* Sidebar coordonnées */
.ks-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  position: sticky;
  top: 100px;
}
@media (max-width: 880px) {
  .ks-contact-sidebar {
    position: static;
  }
}
.ks-contact-card {
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--ks-white);
  border-radius: var(--ks-radius-md, 12px);
  border-left: 3px solid var(--ks-gold-500);
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.05);
}
.ks-contact-card .ks-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}
.ks-contact-card__phone {
  display: block;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  color: var(--ks-gold-700, #8C7B4F);
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.1;
}
.ks-contact-card__phone:hover,
.ks-contact-card__phone:focus-visible {
  color: var(--ks-navy-900);
}
.ks-contact-card__email {
  display: block;
  font-family: var(--ks-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ks-navy-900);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.2;
}
.ks-contact-card__email:hover,
.ks-contact-card__email:focus-visible {
  color: var(--ks-gold-700, #8C7B4F);
}
.ks-contact-card__address {
  margin: 0;
  font-family: var(--ks-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ks-navy-900);
}
.ks-contact-card__meta {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ks-navy-900);
  opacity: 0.78;
}
.ks-contact-card__meta a {
  color: var(--ks-gold-700, #8C7B4F);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   T165 — Override --main-color InTime (#c20b0b rouge) → gold-aaa
   Anti-régression : tous les liens, boutons, accents InTime
   héritent désormais d'une couleur charte Kalystrat WCAG AAA
   ============================================================ */
:root {
  --main-color: var(--ks-gold-aaa);                /* #5A4D2E = 8.28:1 sur blanc AAA */
  --main-color-rgb: 90, 77, 46;                    /* gold-aaa decimal */
}
/* Liens contenu (sans surclassement Construz/InTime) doivent rester soulignés
   pour WCAG 1.4.1 Use of Color (anti-régression liens-sur-paragraphe) */
.ks-section a:not(.ks-cta-primary):not(.ks-cta-secondary):not(.theme-btn):not(.ks-sticky-contact__action):not(.ks-defi__action):not([class*="btn"]):not([class*="nav"]):not([class*="card"]):not(.ks-footer__col-link) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   T166-v2 — Override text-transform: capitalize InTime
   InTime theme appliquait Title Case (capitalize) sur menu/cards/footer.
   Règle FR-QC stricte : sentence case partout sauf eyebrows/CTA intentionnels.
   ============================================================ */

/* Reset capitalize GLOBAL avec !important : sentence case strict FR-QC.
   Préserve uniquement uppercase explicite via classe Kalystrat (eyebrow/CTA). */
body, body * {
  text-transform: none !important;
}
.ks-eyebrow,
.ks-cta-primary,
.ks-cta-secondary,
.ks-sticky-contact__tab-text,
.ks-sticky-contact__eyebrow,
.ks-footer__trust-label,
.ks-footer__trust-badge,
.ks-defi__market-src,
.ks-cookie-banner__btn,
.theme-btn.btn-style-ten .text-one,
.theme-btn.btn-style-ten .text-two,
.theme-btn.btn-style-ten .btn-wrap {
  text-transform: uppercase !important;
}

/* ============================================================
   T167 — Preloader Kalystrat (anti logo Windows InTime)
   Override SVG : 4 carrés rouge/cyan/vert/bleu → navy/gold charte
   ============================================================ */
.preloader {
  background-image: url('/assets/img/kalystrat/preloader.svg') !important;
  background-color: #ffffff !important;
}

/* ============================================================
   T170 — Mobile menu Kalystrat premium 2026 (drawer + blur + typo XL + CTA sticky)
   Override .mobile-menu InTime (CSS plus spécifique gagne)
   ============================================================ */

/* Drawer right, backdrop blur premium */
.ks-mobile-menu .menu-backdrop {
  background: rgba(10, 22, 40, 0.55) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.mobile-menu-visible .ks-mobile-menu .menu-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
}
.ks-mobile-menu__box {
  display: flex !important;
  flex-direction: column;
  height: 100vh !important;
  height: 100dvh !important;
  /* T180 — Mobile 100vw full-screen (pattern app native), tablet 480px max */
  width: 100vw !important;
  max-width: 100vw !important;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.98) 0%, rgba(26, 40, 64, 0.98) 100%) !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.4);
}
@media (min-width: 720px) and (max-width: 1199.98px) {
  /* Tablet iPad portrait+paysage (jusqu'à iPad Pro 12.9" 1024×1366 et iPad Air paysage 1180px) :
     drawer 480px right + backdrop visible (pattern hybride moderne).
     T219 (S33) : breakpoint étendu de 1023.98 à 1199.98 pour couvrir iPad Pro portrait 1024px. */
  .ks-mobile-menu__box {
    width: 480px !important;
    max-width: 480px !important;
  }
}
/* Cohérence b4260bb (T219) : .main-menu masquée jusqu'à 1199.98px (responsive.css
   l'éteint seulement ≤ 1023px, ce qui laisse `display: flex` calculé entre
   1024-1199px alors que header collapsed). Audit prod 1024/1180 → fix CSS pur. */
@media (max-width: 1199.98px) {
  .main-header .main-menu {
    display: none !important;
  }
}
/* T179 — Close button position fixed top-right viewport (pas dans drawer), forme parfaite */
.ks-mobile-menu__close {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top, 0));
  right: 14px;
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(184, 164, 114, 0.18) !important;
  color: var(--ks-gold-500) !important;
  border: 1px solid var(--ks-gold-500) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  z-index: 100;
  line-height: 0;
}
.ks-mobile-menu__close svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  display: block;
}
.ks-mobile-menu__close:hover,
.ks-mobile-menu__close:focus-visible {
  background: var(--ks-gold-500) !important;
  color: var(--ks-navy-900) !important;
  transform: rotate(90deg);
}
.ks-mobile-menu__close:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 3px;
}

/* Branding top */
.ks-mobile-menu__brand {
  padding: 28px 28px 18px;
  border-bottom: 1px solid rgba(184, 164, 114, 0.18);
  flex-shrink: 0;
}
.ks-mobile-menu__brand img {
  height: 44px;
  width: auto;
}

/* Navigation scrollable */
.ks-mobile-menu__nav {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ks-mobile-menu__nav > li {
  border-bottom: 1px solid rgba(184, 164, 114, 0.08);
}
.ks-mobile-menu__nav > li:last-child {
  border-bottom: none;
}

/* Liens principaux : typo XL premium */
.ks-mobile-menu__link {
  display: block;
  padding: 16px 28px;
  font-family: var(--ks-font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--ks-white);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s ease, padding 0.2s ease;
}
.ks-mobile-menu__link:hover,
.ks-mobile-menu__link:focus-visible {
  color: var(--ks-gold-500);
  padding-left: 36px;
}
.ks-mobile-menu__link:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: -2px;
}

/* Sous-items petits sous chaque heading */
.ks-mobile-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0 28px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ks-mobile-menu__sub a {
  display: block;
  padding: 8px 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.ks-mobile-menu__sub a:hover,
.ks-mobile-menu__sub a:focus-visible {
  color: var(--ks-gold-500);
  transform: translateX(4px);
}
.ks-mobile-menu__sub a:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* CTA sticky bas (thumb-zone) */
.ks-mobile-menu__cta {
  flex-shrink: 0;
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0));
  background: rgba(10, 22, 40, 0.95);
  border-top: 1px solid var(--ks-gold-500);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ks-mobile-menu__cta-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(184, 164, 114, 0.10);
  border: 1px solid rgba(184, 164, 114, 0.32);
  border-radius: 10px;
  color: var(--ks-gold-500);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ks-mobile-menu__cta-tel:hover,
.ks-mobile-menu__cta-tel:focus-visible {
  background: rgba(184, 164, 114, 0.18);
  color: var(--ks-gold-500);
}
.ks-mobile-menu__cta-primary {
  display: block;
  padding: 16px 18px;
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
  text-align: center;
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ks-mobile-menu__cta-primary:hover,
.ks-mobile-menu__cta-primary:focus-visible {
  background: #D4B968;
  color: var(--ks-navy-900);
  transform: translateY(-1px);
}

/* Réduit le bruit des textes uppercase imposés par CSS InTime sur menu mobile */
.ks-mobile-menu__link,
.ks-mobile-menu__sub a {
  text-transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ks-mobile-menu__box,
  .ks-mobile-menu__close,
  .ks-mobile-menu__link,
  .ks-mobile-menu__sub a,
  .ks-mobile-menu__cta-tel,
  .ks-mobile-menu__cta-primary {
    transition: none !important;
  }
}

/* ============================================================
   T178 — Bottom tab bar native mobile (iOS/Android-like)
   Bord-à-bord bas écran. Permanent. Pas de dismiss. Pas de margin.
   Desktop ≥ 1200px : caché (header complet suffit).
   T219 (S33) : breakpoint étendu 1024→1200 pour couvrir iPad Pro 11" portrait
   (834×1194), iPad Pro 12.9" portrait (1024×1366) et iPad Air paysage (1180×820)
   où le header desktop ne tient pas confortablement sans bottom-nav d'appoint.
   ============================================================ */

.ks-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: stretch;
  background: var(--ks-navy-900);
  border-top: 1px solid var(--ks-gold-500);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 16px rgba(10, 22, 40, 0.30);
}

.ks-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.ks-tabbar__item:hover,
.ks-tabbar__item:focus-visible {
  background: rgba(184, 164, 114, 0.10);
  color: var(--ks-gold-500);
}
.ks-tabbar__item:focus-visible {
  outline: 2px solid var(--ks-gold-500);
  outline-offset: -2px;
}
.ks-tabbar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ks-tabbar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
}

/* Item primaire (Démarrer) : accent gold pour CTA conversion */
.ks-tabbar__item--primary {
  color: var(--ks-gold-500);
}
.ks-tabbar__item--primary:hover,
.ks-tabbar__item--primary:focus-visible {
  background: var(--ks-gold-500);
  color: var(--ks-navy-900);
}

/* Cacher la tabbar quand le drawer mobile est ouvert (anti-cache contenu drawer) */
body.mobile-menu-visible .ks-tabbar {
  display: none;
}

/* Desktop ≥ 1200px : tabbar mobile-only par design (T219 étend de 1024→1200 pour iPad) */
@media (min-width: 1200px) {
  .ks-tabbar {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-tabbar__item {
    transition: none !important;
  }
}

/* ============================================================
   T179 — Accordéon mobile menu (<details>) + chevron rotation
   1 ouvert à la fois (JS exclusivité). Pas de scroll global.
   ============================================================ */

.ks-mobile-menu__acc {
  display: block;
}
.ks-mobile-menu__acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ks-mobile-menu__acc > summary::-webkit-details-marker { display: none; }
.ks-mobile-menu__acc > summary::marker { display: none; }

/* Chevron animé navy/gold */
.ks-mobile-menu__chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 2px solid var(--ks-gold-500);
  border-bottom: 2px solid var(--ks-gold-500);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 8px;
}
.ks-mobile-menu__acc[open] > summary .ks-mobile-menu__chev {
  transform: rotate(-135deg);
}

/* Sub-items du <details> : conservent l'ancien style */
.ks-mobile-menu__acc > .ks-mobile-menu__sub {
  animation: ks-mobile-acc-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ks-mobile-acc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Forcer le nav du drawer à ne pas dépasser ; le CTA bas reste collé */
.ks-mobile-menu__nav {
  overflow-y: auto; /* fallback safe si contenu accordéon ouvert > viewport */
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  .ks-mobile-menu__chev,
  .ks-mobile-menu__acc > .ks-mobile-menu__sub {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   T183 — Hamburger header WCAG 2.5.5 AAA Target Size (≥44×44 CSS px)
   + Logo header agrandi pour viewport mobile
   - <button> sémantique, aria-label, aria-controls, aria-expanded
   - Zone tactile min 44×44 (rect avant fix : 23×59 = WIDTH fail AAA)
   - focus-visible : outline gold 3px + offset (WCAG 2.4.7 + 1.4.11)
   - Logo mobile : clamp 220→260px (vs 170-200px) pour cohérence visuelle
   - Wrap dans @media max-width:1023px : laisse desktop unchanged
   ============================================================ */
/* T185 — Mobile/tablet (0-1199px) : hamburger top RETIRÉ visuellement
   Le bouton "Menu" du bottom tabbar (T178) ouvre le même drawer via
   programmatic .click() sur .mobile-nav-toggler (sticky-contact.blade.php).
   Display:none n'empêche pas .click() de déclencher le handler jQuery.
   T219 (S33) : breakpoint étendu 1023→1199 pour cohérence avec tabbar. */
@media (max-width: 1199px) {
  .main-header .mobile-nav-toggler,
  .main-header .sticky-header .mobile-nav-toggler {
    display: none !important;
  }
}

/* ============================================================
   T187 — Header mobile/tablet H1 : bandeau navy uni + logo centré full-width
   Pattern dominant 2026 (pp_search) : "aplat clair OU sombre uni, priorité
   lisibilité, marque, performance". Sombre choisi pour cohérence footer +
   logo blanc/gold ressort puissamment (AAA 17:1 garanti).
   Mobile/tablet ≤1199px uniquement. Desktop ≥1200px : intact.
   T219 (S33) : breakpoint étendu 1023→1199 pour couvrir iPad Pro portrait/paysage.
   Header passe de transparent (T69 hero) à navy solid sur ALL pages mobile/tablet.
   ============================================================ */
@media (max-width: 1199px) {
  .main-header .header-upper,
  .main-header .sticky-header {
    background: var(--ks-navy-900) !important;
    border-bottom: 1px solid rgba(184, 164, 114, 0.25);
  }
  /* Logo centré horizontalement : justify-content center sur le wrapper */
  .main-header .header-upper .inner-container,
  .main-header .sticky-header > .auto-container > .d-flex {
    justify-content: center !important;
  }
  /* Nav-outer hidden mobile (contient main-menu desktop + outer-box + toggler tous hidden) */
  .main-header .header-upper .nav-outer,
  .main-header .sticky-header .right-box {
    display: none !important;
  }
  /* T188 — Logo sizing mobile 48px strict (Apple HIG 44pt + chrome total ≤120px)
     Logo ratio Kalystrat 400:70 = 5.71:1 → width 200px ≈ height 35px.
     Avec padding 3+3=6px → header total ~41-48px. */
  .main-header .header-upper .logo img,
  .main-header .header-upper .logo picture {
    width: clamp(180px, 52vw, 230px) !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .main-header .sticky-header .logo img,
  .main-header .sticky-header .logo picture {
    width: clamp(160px, 46vw, 210px) !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  /* Hauteur header explicite 48px (T188 strict, chrome total ≤120px) */
  .main-header .header-upper,
  .main-header .header-upper > .auto-container,
  .main-header .header-upper .inner-container {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    align-items: center;
  }
  .main-header .sticky-header,
  .main-header .sticky-header > .auto-container,
  .main-header .sticky-header > .auto-container > .d-flex {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    align-items: center;
  }
  /* Reset padding hérité InTime .logo + .logo a (20px+8px → 0) pour atteindre 48px réel */
  .main-header .header-upper .logo,
  .main-header .sticky-header .logo {
    padding: 0 !important;
  }
  .main-header .header-upper .logo > a,
  .main-header .sticky-header .logo > a {
    padding: 0 !important;
    display: inline-block;
    line-height: 0 !important;
  }
}

/* Logo mobile : taille adaptée pour cohabiter avec ks-header-tel (T186)
   Logo 180→200px + tel ~144px + gap = tient dans viewport 360-430px sans wrap */
@media (max-width: 767px) {
  .main-header .logo img,
  .main-header .nav-logo img {
    width: clamp(170px, 48vw, 200px) !important;
  }
  .sticky-header .logo img {
    width: clamp(160px, 44vw, 190px) !important;
  }
}

/* ============================================================
   T189 — Fix vrais positifs WCAG AAA (post-audit MCP /home)
   1. Focus-visible explicite : logo header + premier lien nav
   2. Target size AAA ≥24px : FAQ <summary>, footer links sm
   ============================================================ */
.main-header .logo a:focus-visible,
.sticky-header .logo a:focus-visible,
.main-header .navigation > li > a:focus-visible {
  outline: 3px solid var(--ks-gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}
/* FAQ summary target size AAA min 24px height (WCAG 2.5.8) */
.ks-faq__question {
  min-height: 44px;
  padding-block: 12px;
  display: flex;
  align-items: center;
}
/* Footer small links (MEMORA, politique-confidentialite) target size ≥24px */
.ks-footer-credits a,
.ks-footer-bottom a {
  display: inline-block;
  min-height: 24px;
  padding-block: 4px;
  line-height: 1.5;
}

/* ========================================================================
   Tableaux dans articles de blog — UX/UI design Kalystrat
   Scope strict : `.ks-article-content table`. Aucun effet hors blog.
   ======================================================================== */
.ks-article-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: clamp(2em, 4vw, 3em) 0;
  font-size: 0.95em;
  line-height: 1.55;
  border: 1px solid var(--ks-gray-300);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06), 0 6px 16px -8px rgba(10, 22, 40, 0.08);
  background: var(--ks-white);
}

.ks-article-content table caption {
  caption-side: top;
  text-align: left;
  font-style: italic;
  font-weight: 500;
  color: var(--ks-gold-900);
  font-size: 0.95em;
  padding: 0 4px 0.75em;
  letter-spacing: 0.01em;
}

.ks-article-content table thead {
  background: linear-gradient(180deg, var(--ks-navy-900) 0%, var(--ks-navy-700) 100%);
}

.ks-article-content table thead th {
  color: var(--ks-white);
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  font-size: 0.92em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ks-gold-500);
  vertical-align: bottom;
}

.ks-article-content table thead th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ks-article-content table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ks-gray-300);
  color: var(--ks-gray-700);
  vertical-align: top;
}

.ks-article-content table tbody td + td {
  border-left: 1px solid var(--ks-gray-300);
}

.ks-article-content table tbody tr:nth-child(even) td {
  background: var(--ks-gray-100);
}

.ks-article-content table tbody tr:last-child td {
  border-bottom: none;
}

.ks-article-content table tbody tr:hover td {
  background: rgba(184, 164, 114, 0.10);
  transition: background-color 0.18s ease;
}

.ks-article-content table tbody tr:nth-child(even):hover td {
  background: rgba(184, 164, 114, 0.14);
}

.ks-article-content table tbody td strong {
  color: var(--ks-navy-900);
  font-weight: 600;
}

/* Mobile : scroll horizontal pour préserver lisibilité des colonnes */
@media (max-width: 640px) {
  .ks-article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 0.9em;
  }
  .ks-article-content table thead,
  .ks-article-content table tbody,
  .ks-article-content table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    min-width: 520px;
  }
  .ks-article-content table thead th,
  .ks-article-content table tbody td {
    padding: 10px 12px;
  }
}