/* Grapes v2 · composants, copiés du design system Grapes. Ne pas modifier ici : changer le design system, puis recopier. */
/* Grapes v2 · composants
   Une seule famille (Gabarito), titres en deux tons, un seul bleu par écran,
   matière douce (rayon 28px, ombres en trois couches), lumière du halo. */

/* ---------- Page ---------- */
.kz-page {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.kz-page *, .kz-page *::before, .kz-page *::after { box-sizing: border-box; }
.kz-page :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.kz-page :where(ul, ol) { padding: 0; list-style: none; }
.kz-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.kz-page ::selection { background: var(--accent); color: var(--on-accent); }
.kz-wrap { width: 100%; max-width: var(--layout-wrap); margin-inline: auto; padding-inline: var(--space-24); }
.kz-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Titres en deux tons ---------- */
.kz-h { font-family: var(--font-sans); font-weight: 700; color: var(--ink); text-wrap: balance; }
.kz-h--hero { font-size: clamp(44px, 1.6rem + 5.4vw, 96px); line-height: .98; font-weight: 800; letter-spacing: -.032em; }
.kz-h--display { font-size: clamp(38px, 1.5rem + 3vw, 60px); line-height: 1.02; font-weight: 750; letter-spacing: -.026em; }
.kz-h--1 { font-size: clamp(32px, 1.3rem + 2vw, 46px); line-height: 1.06; letter-spacing: -.022em; }
.kz-h--2 { font-size: clamp(26px, 1.1rem + 1.2vw, 34px); line-height: 1.12; letter-spacing: -.016em; }
.kz-h--3 { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.kz-h--4 { font-size: 19px; line-height: 1.35; font-weight: 650; letter-spacing: -.005em; }
.kz-quiet {
  color: var(--ink-quiet);
  background-image: linear-gradient(180deg, var(--ink-quiet-top) 0%, var(--ink-quiet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Texte ---------- */
.kz-lead { font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink-3); max-width: 34em; text-wrap: pretty; }
.kz-text { font-size: 17px; line-height: 1.6; color: var(--ink-3); max-width: var(--layout-measure); text-wrap: pretty; }
.kz-text--s { font-size: 15px; line-height: 1.55; }
.kz-lead strong, .kz-text strong { color: var(--ink); font-weight: 600; }
.kz-caption { font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: .005em; color: var(--ink-3); }
.kz-label { font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.kz-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--duration-base) var(--ease-out); }
.kz-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.kz-link .kz-icon { width: 15px; height: 15px; }

/* ---------- Boutons ---------- */
.kz-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 52px; padding: 0 6px 0 24px; border: 0; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-sans); letter-spacing: -.005em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.kz-btn:active { transform: translateY(1px) scale(.99); }
.kz-btn__arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.kz-btn__arrow .kz-icon { width: 17px; height: 17px; stroke-width: 2; transition: transform var(--duration-base) var(--ease-out); }
.kz-btn:hover .kz-btn__arrow .kz-icon { transform: translateX(2px); }

.kz-btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-press); }
.kz-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-press), var(--shadow-glow); }
.kz-btn--primary:hover .kz-btn__arrow { background: var(--accent-strong); }

.kz-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-press); }
.kz-btn--accent .kz-btn__arrow { background: var(--on-accent); color: var(--accent); }
.kz-btn--accent:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-press), var(--shadow-glow); }

.kz-btn--ghost { padding: 0 24px; background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.kz-btn--ghost:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-control), var(--shadow-float); }

.kz-btn--sm { height: 40px; gap: 10px; padding: 0 4px 0 16px; font-size: 14px; }
.kz-btn--sm .kz-btn__arrow { width: 32px; height: 32px; }
.kz-btn--sm.kz-btn--ghost { padding: 0 16px; }
.kz-btn--block { width: 100%; justify-content: space-between; }

/* ---------- Pastilles ---------- */
.kz-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  font: 600 13px/1 var(--font-sans); white-space: nowrap;
  background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.kz-chip::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.kz-chip--agents { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.kz-chip--agents::before { background: var(--accent); animation: kz-ping 2.4s var(--ease-out) infinite; }
.kz-chip--you::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.kz-chip--positive { background: var(--positive-tint); color: var(--positive); box-shadow: none; }
.kz-chip--caution { background: var(--caution-tint); color: var(--caution); box-shadow: none; }
.kz-chip--critical { background: var(--critical-tint); color: var(--critical); box-shadow: none; }
.kz-chip--plain::before { display: none; }
.kz-chip--glass { background: color-mix(in srgb, var(--paper-raised) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
button.kz-chip { border: 0; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
button.kz-chip:hover { box-shadow: inset 0 0 0 1px var(--line-control); transform: translateY(-1px); }
@keyframes kz-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ---------- Navigation flottante ---------- */
.kz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; max-width: 1180px; margin-inline: auto; }
.kz-nav__pill {
  display: flex; align-items: center; height: 52px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float);
  transition: width var(--duration-base) var(--ease-out), padding var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.kz-nav__brand { gap: 10px; padding: 0 20px 0 16px; color: var(--ink); text-decoration: none; }
.kz-nav__brand svg { width: 22px; height: 21px; fill: currentColor; flex: none; }
.kz-nav__word { font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kz-nav__links { gap: 2px; padding: 0 6px; }
.kz-nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.kz-nav__links a:hover { background: var(--paper-sunken); color: var(--ink); }
.kz-nav__links a[aria-current] { color: var(--ink); background: var(--paper-sunken); }
.kz-nav--compact .kz-nav__brand { width: 52px; padding: 0; justify-content: center; }
.kz-nav--compact .kz-nav__word { display: none; }
.kz-nav--compact .kz-nav__links { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
@media (max-width: 760px) { .kz-nav__links { display: none; } }
@media (max-width: 480px) { .kz-nav__brand { width: 52px; padding: 0; justify-content: center; } .kz-nav__word { display: none; } .kz-nav > .kz-btn { height: 52px; padding-left: 18px; font-size: 14px; } }

/* ---------- Cartes et panneaux ---------- */
.kz-card { position: relative; background: var(--paper-raised); border-radius: var(--radius-lg); padding: var(--space-28); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.kz-card--tint { background: var(--accent-tint); box-shadow: none; }
.kz-card--sunken { background: var(--paper-sunken); box-shadow: none; }
.kz-card--md { border-radius: var(--radius-md); padding: var(--space-20); }
.kz-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); }
.kz-card__title { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.kz-card__text { margin-top: var(--space-12); font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.kz-card__text strong { color: var(--ink); font-weight: 600; }

.kz-night {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night); color: var(--on-night); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 64px);
}
.kz-night::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  filter: blur(36px); opacity: .7; animation: kz-drift 14s var(--ease-in-out) infinite alternate;
}
.kz-night::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 85% 0%, #000 0%, transparent 70%);
}
.kz-night .kz-h { color: var(--on-night); }
.kz-night .kz-quiet { background-image: linear-gradient(180deg, var(--on-night) 0%, var(--on-night-2) 100%); color: var(--on-night-2); }
.kz-night .kz-lead, .kz-night .kz-text, .kz-night .kz-caption { color: var(--on-night-2); }
.kz-night .kz-lead strong, .kz-night .kz-text strong { color: var(--on-night); }
.kz-night .kz-btn--primary { background: var(--on-night); color: var(--night); }
.kz-night .kz-card { background: var(--night-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-night) 10%, transparent); color: var(--on-night); }
.kz-night .kz-chip { background: var(--night-raised); color: var(--on-night); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-night) 14%, transparent); }
.kz-night .kz-link { color: var(--accent-on-night); }
@keyframes kz-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }

/* Scène lumineuse du haut de page : halo + quadrillage qui s'efface */
.kz-glow { position: relative; isolation: isolate; }
.kz-glow::before {
  content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 55%, transparent), transparent);
  filter: blur(40px); opacity: .8; pointer-events: none; animation: kz-drift 16s var(--ease-in-out) infinite alternate;
}
.kz-glow::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 72%);
}

/* ---------- En-tête de section scindé ---------- */
.kz-section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-24) var(--space-64); align-items: end; }
.kz-section-head__aside { display: grid; gap: var(--space-20); justify-items: start; padding-bottom: 6px; }
.kz-section-head__aside .kz-text { max-width: 40ch; }
@media (max-width: 760px) { .kz-section-head { grid-template-columns: 1fr; } }

/* ---------- Étape de méthode ---------- */
.kz-step { display: grid; gap: var(--space-20); align-content: start; }
.kz-step__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.kz-step__num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kz-step__result { display: flex; align-items: center; gap: 10px; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.kz-step__result .kz-icon { color: var(--ink-3); }
.kz-step-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-64); align-items: center; }
@media (max-width: 860px) { .kz-step-row { grid-template-columns: 1fr; gap: var(--space-32); } }

/* Scène illustrative d'une étape */
.kz-stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: var(--space-40); min-height: 360px; border-radius: var(--radius-xl); background: var(--paper-sunken); overflow: hidden; }
.kz-stage::before { content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 40%, transparent), transparent); filter: blur(30px); }
.kz-stage__tag { position: absolute; left: var(--space-20); bottom: var(--space-16); }

/* Carte d'entretien vocal (Camille) */
.kz-voice { width: min(100%, 420px); display: grid; gap: var(--space-16); }
.kz-voice__who { display: flex; align-items: center; gap: var(--space-12); }
.kz-orb { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--on-accent) 0%, var(--halo) 22%, var(--accent) 62%, var(--accent-strong) 100%); box-shadow: var(--shadow-glow); animation: kz-breathe 3.2s var(--ease-in-out) infinite; }
.kz-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); animation: kz-halo-ring 3.2s var(--ease-out) infinite; }
.kz-voice__name { font-size: 16px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.kz-voice__role { font-size: 13px; color: var(--ink-3); }
.kz-voice__q { font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.kz-wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.kz-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink-quiet); transform-origin: center; animation: kz-wave 1.2s var(--ease-in-out) infinite; }
.kz-wave i:nth-child(3n) { animation-delay: -.3s; } .kz-wave i:nth-child(3n+1) { animation-delay: -.6s; } .kz-wave i:nth-child(4n) { animation-delay: -.9s; }
.kz-wave i:nth-child(5n) { background: var(--accent); }
@keyframes kz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes kz-halo-ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes kz-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- Chiffre phare ---------- */
.kz-metric { display: grid; gap: 6px; }
.kz-metric__figure { font-size: clamp(52px, 2rem + 3vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.kz-metric__caption { font-size: 17px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }
.kz-metric__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin-top: var(--space-12); }
.kz-metric--s .kz-metric__figure { font-size: 40px; color: var(--ink); }
.kz-metric--s .kz-metric__caption { font-size: 14px; color: var(--ink-3); }

/* ---------- De l'entretien au gain ---------- */
.kz-insight { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-24); }
.kz-insight__quote { font-size: clamp(21px, 1rem + .8vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.kz-insight__bridge { position: relative; display: grid; place-items: center; width: 168px; height: 40px; }
.kz-insight__bridge::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); }
.kz-insight__bridge::after { content: ""; position: absolute; top: calc(50% - 3px); left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-glow); animation: kz-travel 2.8s var(--ease-in-out) infinite; }
.kz-insight__bridge .kz-chip { position: relative; z-index: 1; }
@keyframes kz-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@media (max-width: 760px) {
  .kz-insight { grid-template-columns: 1fr; }
  .kz-insight__bridge { width: 40px; height: 72px; }
  .kz-insight__bridge::before { inset: 0 auto 0 50%; width: 1px; height: auto; background: var(--line-strong); }
  .kz-insight__bridge::after { display: none; }
}

/* ---------- Comparaison ---------- */
.kz-compare { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.kz-compare > * { padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.kz-compare__corner { border-bottom: 0; }
.kz-compare__col { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); border-bottom: 0; }
.kz-compare__col--on { display: flex; align-items: center; gap: 8px; color: var(--accent-text); background: var(--accent-tint); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-top: 22px; }
.kz-compare__col--on svg { width: 14px; height: 13px; fill: currentColor; }
.kz-compare__row { font-weight: 600; color: var(--ink); }
.kz-compare__off { display: flex; gap: 10px; color: var(--ink-3); }
.kz-compare__on { display: flex; gap: 10px; color: var(--ink); font-weight: 500; background: var(--accent-tint); border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.kz-compare__on--last { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-bottom: 0; padding-bottom: 24px; }
.kz-compare__off::before { content: ""; width: 14px; height: 14px; margin-top: 4px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-quiet); }
.kz-compare__on .kz-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-text); stroke-width: 2.25; }
@media (max-width: 760px) {
  .kz-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kz-compare > * { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .kz-compare__corner { display: none; }
  .kz-compare__row { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 0; }
}
@media (max-width: 480px) {
  .kz-compare > * { padding: 14px 12px; font-size: 14px; }
  .kz-compare__off, .kz-compare__on { gap: 8px; }
}

/* ---------- FAQ ---------- */
.kz-faq { display: grid; gap: 10px; }
.kz-faq details { border-radius: var(--radius-md); background: var(--paper-sunken); transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.kz-faq details[open] { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.kz-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-20) var(--space-24); cursor: pointer; list-style: none; font-size: 17px; line-height: 1.35; font-weight: 650; letter-spacing: -.005em; color: var(--ink); border-radius: var(--radius-md); }
.kz-faq summary::-webkit-details-marker { display: none; }
.kz-faq__plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.kz-faq__plus::before, .kz-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.75px; border-radius: 1px; background: var(--ink); transform: translate(-50%, -50%); }
.kz-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.kz-faq details[open] .kz-faq__plus { transform: rotate(45deg); background: var(--ink); }
.kz-faq details[open] .kz-faq__plus::before, .kz-faq details[open] .kz-faq__plus::after { background: var(--paper); }
.kz-faq__a { padding: 0 var(--space-24) var(--space-24); font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* ---------- Champ d'appel final ---------- */
.kz-prompt { display: grid; gap: var(--space-12); padding: var(--space-20) var(--space-20) var(--space-16) var(--space-24); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-control), var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-out); }
.kz-prompt:focus-within { box-shadow: inset 0 0 0 2px var(--focus), var(--shadow-card), var(--shadow-glow); }
.kz-prompt__label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kz-prompt__input { width: 100%; min-height: 60px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font: 500 21px/1.4 var(--font-sans); letter-spacing: -.01em; color: var(--ink); caret-color: var(--accent); }
.kz-prompt__input::placeholder { color: var(--ink-3); }
.kz-prompt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.kz-prompt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-prompt__note { font-size: 13px; color: var(--ink-3); }

/* ---------- Boucle Grapes ---------- */
.kz-loop { position: relative; isolation: isolate; width: 100%; max-width: 960px; aspect-ratio: 960 / 440; margin-inline: auto; container-type: inline-size; }
.kz-loop::before { content: ""; position: absolute; z-index: -1; left: 30%; top: 22%; width: 40%; height: 56%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 38%, transparent), transparent); filter: blur(24px); }
.kz-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kz-loop__band { fill: none; stroke: var(--paper-sunken); stroke-width: 36; }
.kz-loop__track { fill: none; stroke: var(--line-control); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 7; }
.kz-loop__tail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.kz-loop__dot { fill: var(--accent); stroke: var(--paper-raised); stroke-width: 2.5; }
.kz-loop__dot-halo { fill: var(--halo); opacity: .5; }
.kz-loop__node { fill: var(--paper-raised); stroke: var(--line-control); stroke-width: 1.75; transition: fill var(--duration-base) var(--ease-out), stroke var(--duration-base) var(--ease-out); }
.kz-loop__node.is-active { fill: var(--ink); stroke: var(--paper-raised); }
.kz-loop__station { position: absolute; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 4px; width: 24%; text-align: center; }
.kz-loop__station--above { transform: translate(-50%, -100%); }
.kz-loop__station--right { transform: translate(0, -50%); justify-items: start; text-align: left; width: 15%; }
.kz-loop__station--left { transform: translate(-100%, -50%); justify-items: end; text-align: right; width: 15%; }
.kz-loop__name { font-size: clamp(14px, 1.95cqw, 19px); line-height: 1.2; font-weight: 650; letter-spacing: -.01em; color: var(--ink); transition: color var(--duration-base) var(--ease-out); }
.kz-loop__meta { font-size: clamp(11px, 1.4cqw, 13.5px); line-height: 1.35; color: var(--ink-3); }
.kz-loop__station.is-active .kz-loop__name { color: var(--accent-text); }
.kz-loop__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; text-align: center; display: grid; gap: 8px; justify-items: center; }
.kz-loop__center .kz-h { font-size: clamp(18px, 3.2cqw, 32px); line-height: 1.08; letter-spacing: -.02em; }
.kz-loop__center .kz-caption { font-size: clamp(11px, 1.4cqw, 14px); max-width: 30ch; }

@media (max-width: 640px) {
  .kz-loop { aspect-ratio: auto; display: grid; gap: var(--space-20); }
  .kz-loop::before { left: -10%; top: -10%; width: 80%; height: 50%; }
  .kz-loop svg { display: none; }
  .kz-loop__center { position: static; transform: none; width: auto; order: -1; text-align: left; justify-items: start; }
  .kz-loop__center .kz-h { font-size: 26px; }
  .kz-loop__center .kz-caption { font-size: 14px; }
  .kz-loop ol { position: relative; display: grid; padding-left: 30px; }
  .kz-loop ol::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, var(--line-control) 0 2px, transparent 2px 8px); }
  .kz-loop__station, .kz-loop__station--above, .kz-loop__station--right, .kz-loop__station--left { position: relative; inset: auto !important; transform: none; width: auto; justify-items: start; text-align: left; padding: 10px 0; }
  .kz-loop__station::before { content: ""; position: absolute; left: -30px; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1.75px var(--line-control); transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .kz-loop__station.is-active::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
  .kz-loop__name { font-size: 17px; }
  .kz-loop__meta { font-size: 14px; }
}

/* ---------- Fondateur ---------- */
.kz-founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-40); align-items: center; }
.kz-portrait { position: relative; width: 168px; height: 168px; border-radius: 50%; padding: 5px; background: conic-gradient(from 210deg, var(--accent), var(--halo), var(--paper-raised), var(--accent)); box-shadow: var(--shadow-card); }
.kz-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--paper-raised); }
.kz-founder__name { font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.kz-founder__role { font-size: 15px; color: var(--ink-3); margin-top: 2px; }
.kz-founder__stats { display: flex; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .kz-founder { grid-template-columns: 1fr; gap: var(--space-24); } }

/* ---------- Logo ---------- */
.kz-lockup { display: inline-flex; align-items: center; gap: .42em; color: var(--ink); font-size: 40px; }
.kz-lockup svg { width: 1.05em; height: 1em; fill: currentColor; }
.kz-lockup span { font-weight: 800; letter-spacing: -.035em; line-height: 1; }

/* ---------- Haut de page ---------- */
.kz-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48) var(--space-64); align-items: start; }
.kz-hero__head { grid-column: 1 / -1; display: grid; gap: var(--space-24); justify-items: start; }
.kz-hero__copy { display: grid; gap: var(--space-28); justify-items: start; padding-top: var(--space-8); }
.kz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.kz-assure { display: flex; flex-wrap: wrap; gap: var(--space-28); }
.kz-assure li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.kz-assure b { display: block; color: var(--ink); font-weight: 600; }
.kz-assure .kz-icon { margin-top: 1px; color: var(--ink-2); }
.kz-scene { position: relative; display: grid; }
.kz-scene__offset { margin-left: 16%; }
.kz-scene__bridge { position: relative; height: 64px; }
.kz-scene__bridge::before { content: ""; position: absolute; left: calc(16% + 40px); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-control) 25%, var(--line-control) 75%, transparent); }
.kz-scene__bridge::after { content: ""; position: absolute; left: calc(16% + 37px); top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-glow); animation: kz-drop 2.6s var(--ease-in-out) infinite; }
.kz-scene__bridge .kz-chip { position: absolute; left: calc(16% + 60px); top: 50%; transform: translateY(-50%); }
@keyframes kz-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
@media (max-width: 960px) { .kz-hero { grid-template-columns: minmax(0, 1fr); } .kz-scene__offset { margin-left: 0; } .kz-scene__bridge::before { left: 40px; } .kz-scene__bridge::after { left: 37px; } .kz-scene__bridge .kz-chip { left: 60px; } }

/* Haut de page centré : titre et sous-titre au milieu du premier écran */
.kz-hero-center { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--space-24); min-height: calc(100svh - var(--layout-nav) - 32px); padding-block: var(--space-48); text-align: center; }
.kz-hero-center .kz-h--hero { max-width: 11em; }
.kz-hero-center .kz-lead { max-width: 31em; margin-inline: auto; color: var(--ink-2); }
.kz-hero-center .kz-hero__actions, .kz-hero-center .kz-assure { justify-content: center; margin-top: var(--space-8); }
.kz-hero-center .kz-assure li { text-align: left; }
@media (max-width: 480px) { .kz-hero-center .kz-chip { height: auto; min-height: 30px; padding-block: 7px; line-height: 1.3; white-space: normal; text-align: left; } }
.kz-glow--center::before { right: auto; left: calc(50% - 360px); top: -200px; }
.kz-glow--center::after { -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 32%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 55% 55% at 50% 32%, #000 0%, transparent 72%); }

/* ---------- Entrée en scène ---------- */
.kz-rise { animation: kz-rise var(--duration-slow) var(--ease-out) both; }
@keyframes kz-rise { from { transform: translateY(16px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kz-page *, .kz-page *::before, .kz-page *::after, .kz-night::before, .kz-glow::before { animation: none !important; transition: none !important; }
}