/* Grapes · site version 5
   Mise en page propre au site, posée sur le design system v2 (tokens.css, grapes-ds.css). */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--layout-nav) + 32px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transition: top var(--duration-fast) var(--ease-out); }
.skip:focus { top: 12px; }

/* ---------- Navigation fixe ---------- */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--space-24) 0; pointer-events: none; }
.site-nav .kz-nav > * { pointer-events: auto; }
@media (max-width: 640px) { .site-nav { padding-inline: var(--space-16); } }

/* ---------- Sections ---------- */
.section { padding-top: var(--space-144); }
.section__head { margin-bottom: var(--space-64); }
@media (max-width: 760px) {
  .section { padding-top: var(--space-104); }
  .section__head { margin-bottom: var(--space-48); }
  .kz-wrap { padding-inline: var(--space-16); }
}

/* ---------- Haut de page ---------- */
.hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px); overflow: hidden; }
/* Le titre reste centré dans le premier écran, en laissant la place de la bannière des logos dessous. */
.hero { --logos-band: 136px; }
.hero .kz-hero-center { min-height: calc(100svh - var(--layout-nav) - 24px - var(--logos-band)); padding-block: var(--space-32) var(--space-24); }

/* ---------- Logos des entreprises accompagnées ---------- */
/* Chaque PNG est une silhouette grise sur fond transparent ; le masque la teinte avec --ink-quiet,
   pour un seul gris en clair comme en sombre. --r : largeur / hauteur du fichier ; --h : hauteur optique. */
.logos { display: grid; gap: var(--space-24); justify-items: center; margin-bottom: var(--space-64); }
.logos__viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.logos__track { display: flex; justify-content: center; width: 100%; }
.logos__group { display: flex; flex: none; align-items: center; gap: var(--space-64); }
.logos__track.is-moving { justify-content: flex-start; width: max-content; animation: logos-scroll 42s linear infinite; }
.logos__track.is-moving .logos__group { padding-right: var(--space-64); }
.logos__viewport:hover .logos__track { animation-play-state: paused; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
.logo {
  --s: 1;
  display: block; height: calc(var(--h) * var(--s)); aspect-ratio: var(--r);
  background: var(--ink-quiet); transition: background-color var(--duration-base) var(--ease-out);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.logos__viewport:hover .logo { background: var(--ink-3); }
.logo--french-proptech { --r: 2.259; --h: 40px; -webkit-mask-image: url(assets/logos/french-proptech.png); mask-image: url(assets/logos/french-proptech.png); }
.logo--notaires-de-france { --r: 1.065; --h: 54px; -webkit-mask-image: url(assets/logos/notaires-de-france.png); mask-image: url(assets/logos/notaires-de-france.png); }
.logo--gip { --r: 0.856; --h: 40px; -webkit-mask-image: url(assets/logos/gip.png); mask-image: url(assets/logos/gip.png); }
.logo--schenker-storen { --r: 2.950; --h: 36px; -webkit-mask-image: url(assets/logos/schenker-storen.png); mask-image: url(assets/logos/schenker-storen.png); }
.logo--degomme-boccard { --r: 7.813; --h: 24px; -webkit-mask-image: url(assets/logos/degomme-boccard.png); mask-image: url(assets/logos/degomme-boccard.png); }
.logo--bump { --r: 4.234; --h: 26px; -webkit-mask-image: url(assets/logos/bump.png); mask-image: url(assets/logos/bump.png); }
.logo--redbridge { --r: 3.448; --h: 38px; -webkit-mask-image: url(assets/logos/redbridge.png); mask-image: url(assets/logos/redbridge.png); }
@media (max-width: 760px) {
  .logos { margin-bottom: var(--space-48); }
  .logos__group, .logos__track.is-moving .logos__group { gap: var(--space-40); padding-right: var(--space-40); }
  .logo { --s: .82; }
}
/* Sans défilement : une seule rangée centrée, qui passe à la ligne si besoin. */
.logos__track:not(.is-moving) .logos__group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-24); }
@media (prefers-reduced-motion: reduce) { .logos__track.is-moving { animation: none; } }

/* ---------- Le problème, en une phrase ---------- */
/* Au repos, toute la phrase est lisible. Avec app.js (.is-live), les mots s'allument un à un pendant le défilement. */
.statement { padding-top: calc(var(--space-144) + var(--space-24)); }
.statement__text { max-width: 19ch; margin: 0 auto; text-align: center; font-size: clamp(40px, 1.4rem + 4.4vw, 84px); line-height: 1.04; font-weight: 800; letter-spacing: -.034em; color: var(--ink); text-wrap: balance; }
.statement__end { color: var(--ink-quiet); }
.statement .w { transition: opacity 320ms var(--ease-out); }
.js .statement.is-live .w { opacity: .13; }
.js .statement.is-live .w.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .statement.is-live .w { opacity: 1; } }

.stake__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.stakes__head .kz-label { margin-bottom: -8px; }

/* ---------- Résultats attendus ---------- */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin-bottom: var(--space-24); }
.result { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-28); }
.result__when { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.result__bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--ink); transform-origin: left; }
.result--next .result__bar { background: repeating-linear-gradient(90deg, var(--line-control) 0 8px, transparent 8px 14px); }
.result__dot { position: absolute; right: -2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper-raised), var(--shadow-glow); }
.result__title { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.result__list { display: grid; gap: 10px; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.result__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.result__list .kz-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ink); stroke-width: 2.25; }
.js .results.is-armed .result__bar { transform: scaleX(.03); transition: transform 900ms var(--ease-out); }
.js .results.is-armed .result:nth-child(2) .result__bar { transition-delay: 450ms; }
.js .results.is-armed .result:nth-child(3) .result__bar { transition-delay: 900ms; }
.js .results.is-armed.is-in .result__bar { transform: none; }
@media (max-width: 900px) { .results { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .js .results.is-armed .result__bar { transform: none; transition: none; } }

/* ---------- Proposition de valeur : aujourd'hui, puis demain ---------- */
.stakes__head { display: grid; gap: var(--space-24); max-width: 880px; margin-bottom: var(--space-48); }
.stakes { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.stake { position: relative; overflow: hidden; display: grid; gap: var(--space-20); align-content: start; padding: var(--space-32) var(--space-32) var(--space-24); }
.stake::before { content: ""; position: absolute; z-index: -1; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 30%, transparent), transparent); filter: blur(20px); }
.stake { isolation: isolate; }
.stake__when { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.stake__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.stake__icon .kz-icon { width: 19px; height: 19px; }
.stake--grow .stake__icon { background: var(--ink); color: var(--paper); box-shadow: none; }
.stake__list li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.stake__list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--ink-quiet); }
.stake__viz { position: absolute; right: var(--space-32); top: var(--space-32); width: 112px; height: 42px; overflow: visible; }
.stake__viz rect { fill: var(--line-strong); }
.stake__viz rect.is-on { fill: var(--accent); }
.stake__viz path { fill: none; stroke: var(--ink-quiet); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
.stake__viz circle { fill: var(--accent); }
.js .stakes.is-armed .stake__viz path { stroke-dashoffset: 200; transition: stroke-dashoffset 1400ms var(--ease-out) 300ms; }
.js .stakes.is-armed.is-in .stake__viz path { stroke-dashoffset: 0; }
.js .stakes.is-armed .stake__viz rect { transform-origin: 0 46px; transform: scaleY(.1); transition: transform 700ms var(--ease-out); }
.js .stakes.is-armed .stake__viz rect:nth-child(2) { transition-delay: 90ms; } .js .stakes.is-armed .stake__viz rect:nth-child(3) { transition-delay: 180ms; }
.js .stakes.is-armed .stake__viz rect:nth-child(4) { transition-delay: 270ms; } .js .stakes.is-armed .stake__viz rect:nth-child(5) { transition-delay: 360ms; }
.js .stakes.is-armed.is-in .stake__viz rect { transform: none; }
.stakes__then { display: grid; place-items: center; align-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.stakes__then .kz-icon { width: 20px; height: 20px; color: var(--ink-2); }
@media (max-width: 860px) {
  .stakes { grid-template-columns: minmax(0, 1fr); }
  .stakes__then { grid-auto-flow: column; padding-block: var(--space-12); }
  .stakes__then .kz-icon { transform: rotate(90deg); }
  .stake { padding: var(--space-24) var(--space-20) var(--space-16); }
  .stake__viz { right: var(--space-20); top: var(--space-24); width: 84px; }
}

/* ---------- Méthode : quatre cartes qui s'empilent ---------- */
/* Sur grand écran, app.js ajoute .is-stacked quand chaque carte tient dans l'écran : les cartes se collent
   l'une sur l'autre en défilant. --p (0 à 1) : la carte suivante la recouvre ; elle recule et s'estompe.
   --e (0 à 1) : la carte arrive ; son visuel monte en place. Sans cela, les cartes se suivent simplement. */
.journey { --stick: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 82px); }
.journey__rail { display: none; }
.journey.is-stacked .journey__rail {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 20px); z-index: 6;
  display: flex; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto var(--space-32); padding: 5px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper-raised) 78%, 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); overflow: hidden;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.journey.is-leaving .journey__rail { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.journey__step { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-3); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); white-space: nowrap; }
.journey__step b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); transition: color var(--duration-base) var(--ease-out); }
.journey__step.is-done { color: var(--ink-2); }
.journey__step.is-active { background: var(--ink); color: var(--paper); }
.journey__step.is-active b { color: var(--accent-on-night); }
.journey__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.journey__bar i { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.journey__cards { display: grid; gap: var(--space-24); }
.journey.is-stacked .journey__cards { gap: 26vh; padding-bottom: 14vh; }
.journey.is-stacked .jcard { position: sticky; top: calc(var(--stick) + var(--i) * 12px); }

.jcard__inner {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-32);
  padding: var(--space-20); border-radius: var(--radius-xl); background: var(--paper-raised);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card), var(--shadow-float);
  transform-origin: 50% 0; transform: translateY(calc(var(--p, 0) * -12px)) scale(calc(1 - var(--p, 0) * .06));
}
.jcard__inner::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--paper-sunken); opacity: calc(var(--p, 0) * .7); pointer-events: none; }
.jcard__text { display: grid; align-content: start; gap: var(--space-16); padding: var(--space-12) 0 var(--space-4) var(--space-16); }
.jcard__text .kz-h--2 { font-size: clamp(24px, 1rem + 1vw, 30px); }
.jcard__top { display: flex; align-items: flex-end; gap: 8px; }
.jcard__num {
  font-size: 56px; line-height: .78; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(180deg, var(--ink) 25%, var(--ink-quiet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jcard__of { padding-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--ink-quiet); }
.jcard__stake { margin-left: auto; align-self: center; }
.jcard__rows { display: grid; margin: 0; }
.jcard__rows > div { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.jcard__rows dt { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.jcard__rows dd { margin: 0; font-size: 15.5px; line-height: 1.48; color: var(--ink-2); text-wrap: pretty; }
.jcard__rows > .jcard__result { margin-top: 6px; padding: 12px 14px; border-top: 0; border-radius: var(--radius-md); background: var(--accent-tint); }
.jcard__result dt { color: var(--accent-text); }
.jcard__result dd { display: flex; gap: 10px; font-weight: 600; color: var(--ink); }
.jcard__result .kz-icon { flex: none; margin-top: 3px; color: var(--accent-text); stroke-width: 2.25; }

.jcard__stage {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; margin: 0;
  padding: var(--space-24) var(--space-20); border-radius: calc(var(--radius-xl) - 10px); background: var(--paper-sunken);
}
.jcard__stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 45%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 42%, transparent), transparent); filter: blur(24px); }
.jcard__stage::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}
.jvis { width: min(100%, 470px); transform: translateY(calc((1 - var(--e, 1)) * 48px)); }
.jvis__tag { margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.jvis--duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.jvis--duo .jvis__a { grid-column: 1 / 11; position: relative; z-index: 1; }
.jvis--duo .jvis__b { grid-column: 3 / 13; margin-top: -10px; position: relative; z-index: 2; transform: translateY(calc((1 - var(--e, 1)) * 36px)); }
.jvis--duo .kz-card { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.jvis--duo .opps { width: 100%; }
.jvis--duo .chat { width: 100%; gap: 10px; padding: 14px; }
.jvis--duo .chat__msg { padding: 8px 12px; }
.jvis--duo .chat__msg { font-size: 14px; }
.jvis--stack { display: grid; gap: 12px; justify-items: center; }
.jvis--stack .measure, .jvis--stack .grow { width: 100%; padding: 22px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.jvis--stack .jvis__tag { margin: 6px 0 0; }
.jvis__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Cerveau en miniature */
.mind { display: grid; gap: 14px; padding: 18px; }
.mind__head { display: flex; align-items: center; gap: 12px; }
.mind__rings { width: 38px; height: 38px; flex: none; }
.mind__rings circle { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .35; }
.mind__rings circle:last-child { fill: var(--accent); opacity: 1; }
.mind__name { font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.mind__role { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.mind__facts { display: grid; gap: 6px; }
.mind__facts li { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--paper-sunken); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.mind__facts span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mind__facts li.is-on { background: var(--accent-tint); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.mind__facts li.is-on span { color: var(--accent-text); }
.answer { display: grid; gap: 10px; padding: 18px; }
.answer__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.answer__who span { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.answer__q { justify-self: end; max-width: 90%; padding: 9px 13px; border-radius: 14px 14px 5px 14px; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4; font-weight: 500; }
.answer__a { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.answer__a mark { padding: 1px 3px; border-radius: 4px; background: var(--accent-tint); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.answer__src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.answer__src .kz-chip { height: 26px; font-size: 12px; }

/* Processus suivants */
.grow { display: grid; gap: 14px; }
.grow__title { font-size: 16px; font-weight: 650; color: var(--ink); }
.grow__group { display: grid; gap: 6px; }
.grow__label { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.grow__label .kz-icon { width: 15px; height: 15px; }
.grow__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-sunken); font-size: 14.5px; font-weight: 500; color: var(--ink); }
.grow__row .kz-chip { height: 26px; font-size: 12px; }
.grow__brain { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.grow__brain .kz-icon { width: 16px; height: 16px; color: var(--accent-text); }

@media (max-width: 960px) {
  .jcard__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); padding: var(--space-16); }
  .jcard__text { padding: var(--space-12) var(--space-8) 0; }
  .jcard__num { font-size: 56px; }
  .jcard__stage { padding: var(--space-24) var(--space-12); }
}
@media (max-width: 480px) {
  .jvis--duo .jvis__a, .jvis--duo .jvis__b { grid-column: 1 / -1; }
  .jvis--duo .jvis__b { margin-top: 12px; }
  .jcard__top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .jcard__inner { transform: none; }
  .jcard__inner::after { opacity: 0; }
  .jvis, .jvis--duo .jvis__b { transform: none; }
  .js .stakes.is-armed .stake__viz path, .js .stakes.is-armed .stake__viz rect { transform: none; stroke-dashoffset: 0; transition: none; }
}

/* ---------- Frise des deux semaines ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); column-gap: 6px; margin: 0 0 var(--space-104); padding: var(--space-28) var(--space-28) var(--space-24); list-style: none; }
.plan__phase { display: grid; gap: 12px; align-content: start; }
.plan__phase > :not(.plan__bar) { padding-right: var(--space-20); }
.plan__when { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.plan__bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--ink); transform-origin: left; }
.plan__phase--next .plan__bar { background: repeating-linear-gradient(90deg, var(--line-control) 0 8px, transparent 8px 14px); }
.plan__milestone { position: absolute; right: -2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper-raised), var(--shadow-glow); }
.plan__what { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.plan__desc { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.plan { margin-bottom: var(--space-24); }
.js .plan.is-armed .plan__bar { transform: scaleX(.02); transition: transform 900ms var(--ease-out); }
.js .plan.is-armed .plan__phase:nth-child(2) .plan__bar { transition-delay: 450ms; }
.js .plan.is-armed .plan__phase:nth-child(3) .plan__bar { transition-delay: 900ms; }
.js .plan.is-armed.is-in .plan__bar { transform: none; }
@media (max-width: 860px) {
  .plan { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); margin-bottom: var(--space-64); padding: var(--space-24) var(--space-20); }
}

.steps__note { margin-top: var(--space-32); text-align: center; }
.kz-chip .kz-icon { width: 15px; height: 15px; }

/* ---------- Entretien écrit (Camille) ---------- */
/* Au repos, toute la conversation est visible. Pendant la lecture (.is-playing), app.js fait apparaître
   chaque message ; la place de chacun reste réservée, la carte ne change pas de hauteur. */
.chat { width: min(100%, 440px); display: grid; gap: var(--space-16); padding: var(--space-20); }
.chat--mini { width: 100%; }
.chat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); }
.chat__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat__avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--halo) 0%, var(--accent) 62%, var(--accent-strong) 100%); box-shadow: var(--shadow-glow); color: var(--on-accent); font-size: 15px; font-weight: 700; }
.chat__name { font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.chat__role { margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.chat__listen { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.chat__listen .kz-icon { width: 14px; height: 14px; }

.chat__thread { display: grid; gap: 12px; }
.chat__item { position: relative; display: grid; gap: 6px; justify-items: start; }
.chat__item--you { justify-items: end; }
.chat__msg { max-width: 88%; padding: 10px 14px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.chat__msg--camille { border-radius: 16px 16px 16px 6px; background: var(--paper-sunken); color: var(--ink); }
.chat__msg--you { border-radius: 16px 16px 6px 16px; background: var(--ink); color: var(--paper); font-weight: 500; }
.chat__thread > .chat__msg--camille { justify-self: start; }
.chat__source, .chat__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--ink-3); }
.chat__source .kz-icon, .chat__meta .kz-icon { width: 13px; height: 13px; }

/* Capture glissée dans la conversation : un tableau en miniature, la colonne reprise par Camille en bleu */
.chat__file { display: grid; gap: 8px; width: min(100%, 248px); padding: 8px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.chat__shot { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.3fr; gap: 6px; align-items: center; padding: 10px; border-radius: 8px; background: var(--paper-sunken); }
.chat__col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.2; font-weight: 700; color: var(--ink-3); transition: color 500ms var(--ease-out); }
.chat__shot i { height: 6px; border-radius: 3px; background: var(--line-strong); transition: background-color 500ms var(--ease-out); }
.chat__col--seen { color: var(--accent-text); }
.chat__shot .chat__cell--seen { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.chat.is-playing:not(.is-seen) .chat__col--seen { color: var(--ink-3); }
.chat.is-playing:not(.is-seen) .chat__shot .chat__cell--seen { background: var(--line-strong); }
.chat__fname { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px 2px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.chat__fname span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ftype { flex: none; font-weight: 500; color: var(--ink-3); }

/* Camille écrit... */
.chat__typing { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--paper-sunken); font-size: 12.5px; font-weight: 600; color: var(--ink-3); opacity: 0; pointer-events: none; }
.chat__typing span { display: inline-flex; gap: 3px; }
.chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-quiet); animation: chat-dot 1.1s var(--ease-in-out) infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Champ de réponse : deux lignes réservées, la dictée y apparaît mot à mot */
.chat__composer { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 18px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.chat__tool { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.chat__tool .kz-icon { width: 17px; height: 17px; }
.chat__send { background: var(--ink); color: var(--paper); opacity: .25; }
.chat__field { flex: 1; min-width: 0; display: grid; padding: 7px 4px; font-size: 14.5px; line-height: 20px; }
.chat__field > * { grid-area: 1 / 1; height: 40px; overflow: hidden; transition: opacity var(--duration-fast) var(--ease-out); }
.chat__placeholder, .chat__drop { display: flex; align-items: center; }
.chat__placeholder { color: var(--ink-quiet); }
.chat__drop { opacity: 0; font-weight: 600; color: var(--accent-text); }
.chat__draft { color: var(--ink); }
.chat__draft:not(:empty)::after { content: ""; display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: chat-caret 1s steps(1) infinite; }
@keyframes chat-caret { 50% { opacity: 0; } }
.chat.is-dictating .chat__placeholder, .chat.has-draft .chat__placeholder, .chat.is-drop .chat__placeholder { opacity: 0; }
.chat.is-dictating .chat__mic { background: var(--accent); color: var(--on-accent); animation: kz-ping 1.4s var(--ease-out) infinite; }
.chat.has-draft .chat__send { opacity: 1; }
.chat.is-sending .chat__send { background: var(--accent); color: var(--on-accent); }
.chat.is-drop .chat__composer { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chat.is-drop .chat__drop { opacity: 1; }
.chat.is-drop .chat__tool:first-child { color: var(--accent-text); }

/* Lecture animée */
.chat.is-playing .chat__item { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.chat.is-playing .chat__item[data-step="3"] { transform: translate(28px, 64px) rotate(5deg) scale(.92); transition-duration: 300ms, 650ms; }
.chat.is-playing .chat__item.is-shown, .chat.is-playing .chat__item.is-typing { opacity: 1; transform: none; }
.chat__item .chat__msg { transition: opacity 320ms var(--ease-out); }
.chat__item.is-typing .chat__msg { opacity: 0; }
.chat__item.is-typing .chat__typing { opacity: 1; }
.chat-stage { gap: var(--space-16); align-content: center; }
.chat__replay { justify-self: center; }
html:not(.js) .chat__replay { display: none; }

@media (max-width: 480px) {
  .chat { padding: var(--space-16); gap: 14px; }
  .chat__msg { max-width: 92%; font-size: 14.5px; }
  .chat__listen { width: 28px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}
@media (max-width: 359px) { .chat__wide { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .chat__item, .chat__msg, .chat__composer, .chat__col, .chat__shot i { transition: none; }
}

/* Carte processus */
.flow { width: min(100%, 420px); padding: 20px; display: grid; gap: 2px; }
.flow__title { padding: 2px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 650; }
.flow__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.35; }
.flow__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); font-variant-numeric: tabular-nums; }
.flow__tool { padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.flow__row.is-hot { background: var(--accent-tint); }
.flow__row.is-hot .flow__n { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.flow__row.is-hot .flow__tool { color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.flow__note { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--accent-text); }

/* Carte opportunités */
.opps { width: min(100%, 440px); padding: 12px; display: grid; gap: 2px; }
.opps__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-md); }
.opps__row + .opps__row:not(.is-first) { box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.opps__row.is-first { background: var(--accent-tint); }
.opps__name { font-size: 16px; font-weight: 650; line-height: 1.3; }
.opps__meta { margin-top: 3px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opps__rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.opps__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 2px 2px; }
.opps__actions .kz-btn { padding: 0 10px; justify-content: center; }

/* Carte de mesure */
.measure { width: min(100%, 440px); display: grid; gap: 16px; }
.measure__title { font-size: 16px; font-weight: 650; }
.measure__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-3); }
.measure__bar { height: 12px; border-radius: var(--radius-pill); background: var(--paper-sunken); overflow: hidden; }
.measure__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink-quiet); transform-origin: left; transition: transform 900ms var(--ease-out); }
.measure__row--after .measure__bar i { background: var(--accent); }
.measure__val { text-align: right; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.measure__row--after .measure__val { color: var(--accent-text); }
.measure__check { display: flex; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.measure__check .kz-icon { color: var(--positive); }
.js .measure.is-armed .measure__bar i { transform: scaleX(.08); }

/* ---------- Par où commencer ---------- */
.start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-28) var(--space-32); }
.start > div { display: grid; gap: 6px; flex: 1 1 360px; }
.start__title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

/* ---------- La différence : phrase de confiance ---------- */
.trust { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-32); font-size: 16px; font-weight: 600; color: var(--ink-2); text-align: center; }
.trust .kz-icon { flex: none; color: var(--positive); }

/* ---------- Fondateur ---------- */
.founder-card { padding: clamp(28px, 4.5vw, 56px); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-64); align-items: start; }
.faq-layout__head { position: sticky; top: calc(var(--layout-nav) + 40px); display: grid; gap: var(--space-20); justify-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } .faq-layout__head { position: static; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-48); align-items: center; }
.contact__text { display: grid; gap: var(--space-24); justify-items: start; }
.contact__list { display: grid; gap: 10px; }
.contact__list li { display: flex; gap: 10px; align-items: center; color: var(--on-night); font-size: 16px; }
.contact__list .kz-icon { color: var(--accent-on-night); }
.contact__status { min-height: 20px; font-size: 13px; color: var(--accent-on-night); }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

.kz-night .kz-prompt { background: var(--night-raised); box-shadow: inset 0 0 0 1px var(--on-night-2), var(--shadow-card); gap: var(--space-16); }
.kz-night .kz-prompt:focus-within { box-shadow: inset 0 0 0 2px var(--accent-on-night), var(--shadow-glow); }
.kz-night .kz-prompt__label, .kz-night .kz-prompt__note { color: var(--on-night-2); }
.kz-night .kz-prompt__input { color: var(--on-night); caret-color: var(--accent-on-night); }
.kz-night .kz-prompt__input::placeholder { color: var(--on-night-2); }
.kz-night button.kz-chip:hover { box-shadow: inset 0 0 0 1px var(--on-night-2); }
.kz-prompt__input { font-size: clamp(18px, 1rem + .4vw, 21px); }

/* ---------- Pied de page ---------- */
.footer { margin-top: var(--space-144); padding-block: var(--space-64) var(--space-24); border-top: 1px solid var(--line); overflow: hidden; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-40); }
.footer__brand p { margin-top: var(--space-12); font-size: 15px; color: var(--ink-3); }
.footer__brand .kz-lockup { font-size: 26px; text-decoration: none; }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-64); }
.footer__cols div { display: grid; gap: 10px; align-content: start; }
.footer__cols a { font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.footer__cols a:hover { color: var(--ink); }
.footer__giant {
  display: flex; align-items: baseline; justify-content: center; gap: .16em; margin-top: var(--space-64);
  font-size: clamp(64px, 18vw, 264px); font-weight: 800; letter-spacing: -.045em; line-height: .8;
  color: color-mix(in srgb, var(--ink) 7%, transparent); user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.footer__giant svg { width: .74em; height: .71em; fill: currentColor; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .footer { margin-top: var(--space-104); } .footer__cols { gap: var(--space-40); } }

/* ---------- Apparitions au défilement ---------- */
/* Le contenu reste visible au repos ; seuls les blocs sous la ligne de flottaison glissent en place. */
.js .reveal.is-armed { transform: translateY(18px); transition: transform var(--duration-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-armed.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal.is-armed { transform: none; transition: none; }
  .measure__bar i { transition: none; }
  .js .plan.is-armed .plan__bar { transform: none; transition: none; }
}
.js .measure.is-armed.is-in .measure__bar i { transform: none; }

/* ==========================================================================
   Ajouts du 23 octobre 2026 : menu Services, menu mobile, pages Services et L'entreprise
   ========================================================================== */

/* ---------- Navigation : menu déroulant des services ---------- */
.nav-end { display: flex; align-items: center; gap: var(--space-8); }
.navdrop { position: relative; display: flex; }
.navdrop__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.navdrop__btn .kz-icon { width: 15px; height: 15px; transition: transform var(--duration-base) var(--ease-out); }
.navdrop__btn:hover, .navdrop__btn[aria-expanded="true"], .navdrop__btn[aria-current] { background: var(--paper-sunken); color: var(--ink); }
.navdrop__btn[aria-expanded="true"] .kz-icon { transform: rotate(180deg); }
/* Panneau opaque : un flou imbriqué dans la pilule de verre ne flouterait pas la page. */
.navdrop__panel {
  position: absolute; left: -6px; top: calc(100% + 14px); width: 440px; padding: 8px;
  border-radius: 24px; background: var(--paper-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(11,20,36,.05), 0 24px 60px -12px rgba(11,20,36,.22);
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: 24px 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.navdrop__panel--s { width: 300px; }
.navdrop__num .kz-icon { width: 18px; height: 18px; color: var(--ink-2); }
.kz-nav__links .navdrop__list a:hover .navdrop__num .kz-icon { color: var(--paper); }
.navdrop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.navdrop.is-open .navdrop__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.navdrop__list { display: grid; gap: 2px; }
.kz-nav__links .navdrop__list a { display: grid; height: auto; font-size: inherit; font-weight: inherit; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); }
.navdrop__list a:hover, .navdrop__list a:focus-visible { background: var(--paper-sunken); }
.navdrop__num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--paper-sunken); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.navdrop__list a:hover .navdrop__num { background: var(--ink); color: var(--paper); box-shadow: none; }
.navdrop__list b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.navdrop__list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.kz-nav__links .navdrop__all { display: flex; height: auto; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--paper-sunken); font-size: 14px; font-weight: 650; color: var(--ink); text-decoration: none; }
.navdrop__all .kz-icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
.navdrop__all:hover .kz-icon { transform: translateX(3px); }
.kz-nav__links > a[aria-current="page"] { color: var(--ink); background: var(--paper-sunken); }

/* ---------- Menu : téléphone et tablette ---------- */
.nav-burger { position: relative; width: 52px; justify-content: center; padding: 0; border: 0; cursor: pointer; color: var(--ink); font: inherit; }
.nav-burger i { position: absolute; left: 18px; right: 18px; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform var(--duration-base) var(--ease-out); }
.nav-burger i:first-of-type { transform: translateY(-4px); }
.nav-burger i:last-of-type { transform: translateY(4px); }
.nav-burger[aria-expanded="true"] i:first-of-type { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-of-type { transform: rotate(-45deg); }
/* Sous 1 020 px, la barre complète ne tient plus : les liens passent dans le menu. */
@media (max-width: 1020px) { .kz-nav__links { display: none; } }
@media (min-width: 1021px) { .nav-burger { display: none; } }
.mmenu {
  position: absolute; right: var(--space-24); top: calc(env(safe-area-inset-top, 0px) + 12px + 52px + 10px); z-index: 2;
  display: grid; gap: 2px; width: min(400px, calc(100vw - 2 * var(--space-24))); max-height: calc(100svh - 96px); overflow-y: auto; padding: 18px;
  border-radius: 28px; background: var(--paper-raised); pointer-events: auto;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(11,20,36,.05), 0 24px 60px -12px rgba(11,20,36,.24);
  animation: mmenu-in var(--duration-base) var(--ease-out);
}
@keyframes mmenu-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.mmenu .kz-label { padding: 2px 10px 8px; }
.mmenu > a:not(.kz-btn) { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mmenu > a:not(.kz-btn) span { width: 30px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.mmenu > a:not(.kz-btn):hover { background: var(--paper-sunken); }
.mmenu__main { display: grid; gap: 2px; margin: 10px 0 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.mmenu__main a { padding: 11px 10px; border-radius: 14px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.mmenu__main a:hover { background: var(--paper-sunken); }
@media (max-width: 640px) { .mmenu { right: var(--space-16); width: calc(100vw - 2 * var(--space-16)); } }
@media (max-width: 480px) { .nav-end .nav-cta { height: 52px; padding-left: 18px; font-size: 14px; } }
@media (max-width: 380px) { .nav-end .nav-cta { padding-right: 18px; } .nav-end .nav-cta .kz-btn__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .mmenu { animation: none; } .navdrop__panel { transition: none; } }

/* ---------- Titres de section : surtitre au-dessus ---------- */
.section__title { display: grid; gap: var(--space-16); }
.steps__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-12) var(--space-24); }

/* Lien vers le détail du service, sous les trois lignes de la carte */
.jcard__more { justify-self: start; margin-top: 2px; font-size: 14.5px; }
.journey.is-stacked .journey__step { padding: 0 12px; }
.journey.is-stacked .journey__cards { padding-bottom: 6vh; }

/* ---------- Secteurs ---------- */
.sectors__head { display: grid; gap: var(--space-16); }
.sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.sector { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-28); }
.sector__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-12); border-radius: 15px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sector__icon .kz-icon { width: 22px; height: 22px; }
.sector h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.sector p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 960px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sectors { grid-template-columns: minmax(0, 1fr); } .sector { padding: var(--space-20); } }

/* ---------- Carte 01 : atelier avec le comité de direction ---------- */
.board { width: 100%; display: grid; gap: 14px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.board__head { display: grid; gap: 10px; }
.board__title { font-size: 15px; font-weight: 650; color: var(--ink); }
.board__who { display: flex; flex-wrap: wrap; gap: 6px; }
.board__who span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 650; color: var(--ink-2); }
.board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board__col { display: grid; gap: 6px; align-content: start; }
.board__label { padding: 0 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.board__note { min-height: 64px; padding: 9px 10px; border-radius: 12px; background: var(--paper-sunken); font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.board__note.is-on { background: var(--accent-tint); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 420px) { .board__cols { grid-template-columns: minmax(0, 1fr); } .board__note { min-height: 0; } }

/* ---------- Pages Services et L'entreprise : haut de page ---------- */
.page-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-104)); }
.page-hero__text { display: grid; gap: var(--space-24); justify-items: center; max-width: 900px; margin: 0 auto; text-align: center; }
.page-hero__text .kz-lead { max-width: 40em; }
.page-hero__title { font-size: clamp(42px, 1.4rem + 4.2vw, 80px); text-wrap: balance; }
.page-hero > .kz-wrap > :first-child { animation: page-rise 900ms var(--ease-out) both; }
@keyframes page-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .page-hero > .kz-wrap > :first-child { animation: none; } }
.section--tight { padding-top: var(--space-64); }
@media (max-width: 760px) { .page-hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-48)); } .section--tight { padding-top: var(--space-48); } }

/* ---------- Page Services : sommaire, fiches, portes d'entrée ---------- */
.svc-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-64); }
.svc-index__item { display: grid; gap: 6px; align-content: start; padding: var(--space-20); text-decoration: none; color: var(--ink-3); font-size: 14px; line-height: 1.4; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.svc-index__item b { font-size: 16px; line-height: 1.25; font-weight: 650; color: var(--ink); }
.svc-index__num { margin-bottom: 10px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.svc-index__item:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.svc-index__item:hover .svc-index__num { color: var(--accent-text); }
@media (max-width: 1000px) { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-index__item:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .svc-index { grid-template-columns: minmax(0, 1fr); } }

.svc-detail { padding-top: var(--space-48); scroll-margin-top: calc(var(--layout-nav) + 8px); }
#coaching.svc-detail { padding-top: var(--space-104); }
.svc { display: grid; gap: var(--space-32); padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card), var(--shadow-float); }
.svc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); padding-bottom: var(--space-24); border-bottom: 1px solid var(--line); }
.svc__id { display: flex; align-items: flex-end; gap: 8px; }
.svc__id .jcard__num { font-size: clamp(56px, 2rem + 3vw, 84px); }
.svc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); }
.svc__intro { display: grid; gap: var(--space-24); align-content: start; }
.svc__lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svc__facts { display: grid; margin: 0; }
.svc__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-16); padding: 14px 0; border-top: 1px solid var(--line); }
.svc__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.svc__facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.svc__body { display: grid; gap: var(--space-20); align-content: start; }
.svc__steps { display: grid; gap: 0; counter-reset: step; }
.svc__steps li { position: relative; display: grid; gap: 4px; padding: 0 0 var(--space-24) 52px; counter-increment: step; }
.svc__steps li::before { content: counter(step); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 13px; font-weight: 700; color: var(--ink); }
.svc__steps li::after { content: ""; position: absolute; left: 15.25px; top: 34px; bottom: 4px; width: 1.5px; background: var(--line); }
.svc__steps li:last-child { padding-bottom: 0; }
.svc__steps li:last-child::after { display: none; }
.svc__steps b { font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.svc__steps span { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.svc__get { display: grid; gap: var(--space-12); margin-top: var(--space-8); padding: var(--space-20) var(--space-24); border-radius: var(--radius-md); background: var(--accent-tint); }
.svc__get .kz-label { color: var(--accent-text); }
.svc__get ul { display: grid; gap: 10px; }
.svc__get li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.svc__get .kz-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
@media (max-width: 900px) {
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .svc__facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 480px) { .svc__head { flex-wrap: wrap; align-items: center; } .svc__get { padding: var(--space-16); } }

.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.path { display: grid; gap: var(--space-32); align-content: space-between; min-height: 220px; padding: var(--space-32); text-decoration: none; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.path:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.path__q { font-size: clamp(22px, 1rem + 1vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.path__a { display: flex; align-items: center; gap: 12px; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.path__a .kz-icon { width: 18px; height: 18px; margin-left: auto; transition: transform var(--duration-fast) var(--ease-out); }
.path:hover .path__a .kz-icon { transform: translateX(3px); color: var(--accent-text); }
.path__num { font-size: 13px; font-weight: 700; color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .paths { grid-template-columns: minmax(0, 1fr); } .path { min-height: 0; padding: var(--space-24); } }

.cta-panel { display: grid; justify-items: center; gap: var(--space-24); text-align: center; }
.cta-panel .kz-lead { max-width: 36em; }
.cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-16) var(--space-32); }

/* ---------- Page L'entreprise ---------- */
.founder-xl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-xl); }
.founder-xl__side { display: grid; gap: var(--space-20); align-content: start; justify-items: start; }
/* Le portrait est déjà détouré en rond : un anneau léger suffit. */
.founder-xl__photo { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -20px rgba(11,20,36,.35); }
.founder-xl__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-xl__text { display: grid; gap: var(--space-24); align-content: center; }
.founder-xl__quote { font-size: clamp(24px, 1rem + 1.3vw, 34px); line-height: 1.22; font-weight: 650; letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }
.founder-xl__bio { display: grid; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.founder-xl__bio p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 860px) { .founder-xl { grid-template-columns: minmax(0, 1fr); } .founder-xl__photo { max-width: 200px; } }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.figure { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-28); }
.figure__n { font-size: clamp(44px, 1.6rem + 2.2vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background-image: linear-gradient(180deg, var(--ink) 30%, var(--ink-quiet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.figure__t { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .figures { grid-template-columns: minmax(0, 1fr); } }
.logos--page { margin: var(--space-64) 0 0; }

.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.belief { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-32) var(--space-40) var(--space-40) 0; border-bottom: 1px solid var(--line); }
.belief:nth-child(2n) { padding-left: var(--space-40); box-shadow: inset 1px 0 0 var(--line); }
.belief__n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.belief h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.belief p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .beliefs { grid-template-columns: minmax(0, 1fr); }
  .belief, .belief:nth-child(2n) { padding: var(--space-24) 0; box-shadow: none; }
}

/* ---------- Deux périmètres : menu à deux colonnes, repères, cartes de la montée en compétences ---------- */
.navdrop__panel--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 680px; }
.navdrop__col { display: grid; gap: 2px; align-content: start; padding: 4px; border-radius: 20px; }
.navdrop__col + .navdrop__col { box-shadow: inset 1px 0 0 var(--line); padding-left: 10px; }
.kz-nav__links .navdrop__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: auto; margin-bottom: 4px; padding: 12px; border-radius: 16px; text-decoration: none; }
.navdrop__head b { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.navdrop__head small { grid-column: 1; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.navdrop__head .kz-icon { grid-row: 1 / 3; grid-column: 2; width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.kz-nav__links .navdrop__head:hover { background: var(--paper-sunken); }
.navdrop__head:hover .kz-icon { transform: translateX(3px); color: var(--ink); }
.mmenu > a.mmenu__head { padding-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mmenu > a.mmenu__head:first-child { padding-top: 4px; }

.pillar__label { display: inline-flex; align-items: center; gap: 10px; }
.pillar__label span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0; }

.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.skill { display: grid; gap: var(--space-16); align-content: start; padding: clamp(24px, 3vw, 40px); }
.skill__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-8); border-radius: 16px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.skill__icon .kz-icon { width: 24px; height: 24px; }
.skill__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
@media (max-width: 860px) { .skills { grid-template-columns: minmax(0, 1fr); } }

/* Sous-étapes d'un service (page Transformation IA) */
.svc__parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.svc__parts li { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--paper-sunken); }
.svc__parts b { font-size: 15px; font-weight: 650; color: var(--ink); }
.svc__parts span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Titre du haut de page sur deux lignes : "Votre partenaire / de transformation IA." ; titre court, donc un peu plus grand */
.hero .kz-h--hero { max-width: none; font-size: clamp(36px, 1.3rem + 4.6vw, 88px); text-wrap: balance; }
.hero .kz-h--hero .kz-quiet { display: block; }


/* ==========================================================================
   Épuration du 23 octobre 2026 (demande de PA : site trop froid et trop lourd)
   Surfaces plus légères, titres moins gras, couleur du design system plus présente, mouvement discret.
   Palette inchangée : seules les ombres sont allégées.
   ========================================================================== */
:root { --ease-soft: cubic-bezier(.22, 1, .36, 1); }
/* Ombres plus légères ; les couleurs restent celles du design system. */
:root[data-theme="light"] {
  --shadow-card: 0 1px 2px rgba(11, 20, 36, .035);
  --shadow-float: 0 1px 2px rgba(11, 20, 36, .03), 0 12px 32px -16px rgba(11, 20, 36, .14);
}

/* Fonds : plus de grille ; le halo bleu du design system reste, plus diffus */
.kz-glow::after, .jcard__stage::after { display: none; }
.kz-glow::before { opacity: .45; filter: blur(60px); }
.jcard__stage::before, .stake::before { opacity: .55; }

/* Titres moins gras, plus d'air */
.kz-h--hero { font-weight: 700; letter-spacing: -.035em; }
.kz-h--1, .kz-h--display { font-weight: 650; }
.kz-h--2 { font-weight: 650; }
.statement__text { font-weight: 650; letter-spacing: -.03em; }
.jcard__num, .svc__id .jcard__num, .figure__n { font-weight: 600; }

/* Étiquettes : petites capitales gardées pour les surtitres, minuscules dans les cartes */
.kz-label { font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
.jcard__rows dt, .board__label, .grow__label, .jvis__tag, .mind__facts span, .svc__facts dt { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.jcard__rows > div { padding: 12px 0; }
.jcard__rows dd { font-size: 16px; }

/* Cartes : un trait fin, presque pas d'ombre */
.kz-card { box-shadow: inset 0 0 0 1px var(--line); }
.jcard__inner { box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -36px rgba(11, 20, 36, .28); }
.jcard__stage { background: var(--paper-sunken); }
.svc { box-shadow: inset 0 0 0 1px var(--line); }
.svc__get { background: transparent; padding: 0; border-top: 1px solid var(--line); padding-top: var(--space-20); border-radius: 0; }
.svc__get .kz-label { color: var(--ink-3); }
.kz-nav__pill { background: color-mix(in srgb, var(--paper) 78%, transparent); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kz-btn--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Panneaux de contact clairs (remplacent le bloc sombre) */
.panel-soft { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-xl); background: var(--accent-tint); }
.panel-soft::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -50%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 60%, transparent), transparent); filter: blur(40px); animation: kz-drift 16s var(--ease-in-out) infinite alternate; }
.panel-soft .contact__list li { color: var(--ink-2); }
.panel-soft .contact__list .kz-icon { color: var(--accent-text); }

/* ---------- Mouvement ---------- */
/* Haut de page : entrée en cascade au chargement. Sans animation (mouvement réduit), tout est en place. */
.hero .kz-hero-center > *, .hero .logos { animation: rise-in 1000ms var(--ease-soft) both; }
.hero .kz-hero-center > :nth-child(2) { animation-delay: 100ms; }
.hero .kz-hero-center > :nth-child(3) { animation-delay: 200ms; }
.hero .kz-hero-center > :nth-child(4) { animation-delay: 300ms; }
.hero .logos { animation-delay: 460ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* Apparitions : fondu et montée, plus amples ; titres de section dévoilés de bas en haut */
.js .reveal.is-armed { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-armed.is-in { opacity: 1; transform: none; }
.js .is-armed .reveal-title { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1000ms var(--ease-soft) 80ms, transform 1000ms var(--ease-soft) 80ms; }
.js .is-armed.is-in .reveal-title { clip-path: inset(-12% -2% -12% -2%); transform: none; }
/* Grilles de cartes : chaque carte arrive l'une après l'autre */
.js .stagger.is-armed > * { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft); }
.js .stagger.is-armed.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-armed > :nth-child(2) { transition-delay: 90ms; } .js .stagger.is-armed > :nth-child(3) { transition-delay: 180ms; }
.js .stagger.is-armed > :nth-child(4) { transition-delay: 270ms; } .js .stagger.is-armed > :nth-child(5) { transition-delay: 360ms; }
.js .stagger.is-armed > :nth-child(6) { transition-delay: 450ms; }

/* Survol : les cartes cliquables ou mises en avant se soulèvent doucement */
.sector, .skill, .path, .figure { transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.sector:hover, .skill:hover, .figure:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -24px rgba(11, 20, 36, .25); }
.sector__icon, .skill__icon { transition: background-color 400ms var(--ease-soft), color 400ms var(--ease-soft), transform 500ms var(--ease-soft); }
.sector:hover .sector__icon, .skill:hover .skill__icon { background: var(--ink); color: var(--paper); transform: rotate(-6deg); }
.kz-btn { transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft), background-color 300ms var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal.is-armed, .js .stagger.is-armed > *, .js .is-armed .reveal-title { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---------- Header : logo, menu et bouton dans une seule barre ---------- */
.site-nav .kz-nav {
  height: 64px; padding: 6px 6px 6px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 30px -18px rgba(11, 20, 36, .22);
}
.site-nav .kz-nav__pill { height: 52px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav .kz-nav__brand { padding: 0 14px 0 12px; }
.site-nav .nav-end .nav-cta { height: 52px; }
.site-nav .nav-burger:hover { background: var(--paper-sunken); }
.mmenu { top: calc(env(safe-area-inset-top, 0px) + 12px + 64px + 10px); }
@media (max-width: 480px) { .site-nav .kz-nav__brand { width: auto; padding: 0 10px; } }

/* ---------- Couleur : le bleu du design system pour l'action et les repères ---------- */
/* Boutons d'action en bleu ; pictogrammes, numéros de périmètre, étape en cours et puces sur fond bleu clair. */
.kz-btn--primary { background: var(--accent); color: var(--on-accent); }
.kz-btn--primary .kz-btn__arrow { background: var(--on-accent); color: var(--accent); }
.kz-btn--primary:hover { background: var(--accent-strong); }
.kz-btn--primary:hover .kz-btn__arrow { background: var(--on-accent); color: var(--accent-strong); }
.sector__icon, .skill__icon, .stake__icon, .navdrop__num { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.navdrop__num .kz-icon { color: var(--accent-text); }
.stake--grow .stake__icon { background: var(--accent); color: var(--on-accent); }
.sector:hover .sector__icon, .skill:hover .skill__icon { background: var(--accent); color: var(--on-accent); }
.kz-nav__links .navdrop__list a:hover .navdrop__num { background: var(--accent); color: var(--on-accent); }
.pillar__label span { background: var(--accent); color: var(--on-accent); }
.journey__step.is-active { background: var(--accent); color: var(--on-accent); }
.journey__step.is-active b { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
.jcard__stake, .svc__head .kz-chip { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.belief__n, .svc-index__num { color: var(--accent-text); }
.svc__steps li::before { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.svc__get .kz-icon, .result__list .kz-icon { color: var(--accent-text); }
@media (max-width: 380px) {
  .site-nav .kz-nav { padding: 6px 4px; }
  .site-nav .kz-nav__brand { padding: 0 6px; }
  .site-nav .nav-end { gap: 4px; }
  .site-nav .nav-end .nav-cta { padding: 0 14px; font-size: 13px; }
}

/* ---------- Visuels des cartes de l'accueil : schémas épurés ---------- */
/* --e (0 à 1, posé par app.js quand la carte arrive) dessine les tracés ; un flux discret circule ensuite en boucle. */
.viz { width: min(100%, 460px); display: grid; gap: 14px; justify-items: center; transform: translateY(calc((1 - var(--e, 1)) * 40px)); }
.viz__card { width: 100%; padding: 18px 16px; border-radius: 22px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -28px rgba(11, 20, 36, .3); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.viz__chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 4px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz__avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--halo) 0%, var(--accent) 62%, var(--accent-strong) 100%); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.viz__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.viz__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

/* Carte de processus */
.map__line { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.map__flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; opacity: calc(var(--e, 1) * .7); animation: viz-flow 1.6s linear infinite; }
.map__node { fill: var(--paper-raised); stroke: var(--line-control); stroke-width: 1.75; }
.map__node--on { fill: var(--accent); stroke: none; }
.map__node--two { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.75; }
.map__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: viz-pulse 2.4s var(--ease-out) infinite; }
.map__label { font-size: 12.5px; font-weight: 600; fill: var(--ink-3); text-anchor: middle; }
.map__label--on { fill: var(--ink); font-weight: 700; }
.map__badge rect { fill: var(--accent); }
.map__badge text { font-size: 13px; font-weight: 700; fill: var(--on-accent); text-anchor: middle; }
.map__badge--two rect { fill: var(--accent-tint); }
.map__badge--two text { fill: var(--accent-text); font-size: 12px; }
.map__badge { opacity: var(--e, 1); transform: translateY(calc((1 - var(--e, 1)) * 10px)); }

/* Temps gagné : une jauge qui se remplit */
.gain { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 24px; }
.gain__ring { width: 150px; transform: rotate(-90deg); }
.gain__track { fill: none; stroke: var(--paper-sunken); stroke-width: 12; }
.gain__arc { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: calc(351.86 - 242.8 * var(--e, 1)); }
.gain__center { position: absolute; left: 24px; top: 50%; width: 150px; transform: translateY(-50%); display: grid; justify-items: center; }
.gain__center b { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.gain__center span { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.gain__rows { display: grid; gap: 10px; }
.gain__rows p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.gain__rows p:last-child { border-bottom: 0; padding-bottom: 0; }
.gain__rows b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gain__rows .is-on b { color: var(--accent-text); }
.viz__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.viz__tools li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz__tools .kz-icon { width: 16px; height: 16px; color: var(--accent-text); }

/* Cerveau : ce qui entre, ce qui en sort */
.net__line { fill: none; stroke: var(--line-strong); stroke-width: 1.75; }
.net__flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: calc(var(--e, 1) * .75); animation: viz-flow 1.8s linear infinite; }
.net__flow--out { animation-delay: -.9s; }
.net__pill rect { fill: var(--paper-sunken); }
.net__pill text { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }
.net__pill--out rect { fill: var(--accent-tint); }
.net__pill--out text { fill: var(--accent-text); font-weight: 700; }
.net__halo { fill: color-mix(in srgb, var(--accent) 10%, transparent); transform-box: fill-box; transform-origin: center; animation: viz-breathe 3.2s var(--ease-in-out) infinite; }
.net__core-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .45; }
.net__core rect { fill: #14161C; }
.net__core .net__bar { fill: #FFFFFF; }
.net__core .net__bar--mid { fill: var(--accent); }

@keyframes viz-flow { to { stroke-dashoffset: -24; } }
@keyframes viz-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes viz-breathe { 50% { transform: scale(1.12); } }
@media (max-width: 480px) {
  .gain { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px; }
  .gain__center { left: 50%; top: 20px; transform: translateX(-50%); height: 150px; align-content: center; }
  .gain__rows { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .map__flow, .net__flow, .map__ring, .net__halo { animation: none; } .viz { transform: none; } }

/* ---------- À propos : convictions ---------- */
.beliefs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.belief-group { display: grid; gap: var(--space-24); align-content: start; padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.belief-group--grow { background: var(--accent-tint); box-shadow: none; }
.belief-group__head { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; color: var(--ink); }
.belief-group__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-tint); color: var(--accent-text); }
.belief-group--grow .belief-group__icon { background: var(--accent); color: var(--on-accent); }
.belief-list { display: grid; gap: 0; counter-reset: belief; }
.belief-list li { display: grid; gap: 8px; padding: var(--space-20) 0; border-top: 1px solid var(--line); counter-increment: belief; }
.belief-list li:last-child { padding-bottom: 0; }
.belief-list h3 { display: flex; gap: 12px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.belief-list h3::before { content: "0" counter(belief); flex: none; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.belief-list p { padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.belief-quote { margin: var(--space-48) auto 0; max-width: 860px; text-align: center; }
.belief-quote p { font-size: clamp(22px, 1rem + 1.2vw, 32px); line-height: 1.3; font-weight: 600; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.belief-quote footer { margin-top: var(--space-16); font-size: 14px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 860px) { .beliefs-duo { grid-template-columns: minmax(0, 1fr); } .belief-list p { padding-left: 0; } }

/* ==========================================================================
   Haut de page : pastille de cible et halo (23 octobre 2026, demande de PA : accueil trop blanc)
   ========================================================================== */
/* Pastille au-dessus du titre */
.hero-pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; margin-bottom: -4px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  background: color-mix(in srgb, var(--paper-raised) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11, 20, 36, .04), 0 6px 18px -10px rgba(11, 20, 36, .12);
}

/* Horizon : une courbe claire qui se lève derrière les logos, bordée d'une lueur bleue (remplace le halo du design system) */
.hero::before { display: none; }
.hero-halo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--halo) 34%, transparent), transparent 75%); }
.hero-halo::before {
  content: ""; position: absolute; left: -30%; right: -30%; bottom: calc(var(--logos-band) - 1220px); height: 1300px; border-radius: 50%;
  background: linear-gradient(var(--paper-raised), var(--paper) 120px);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--halo) 80%, transparent), 0 -30px 90px -10px color-mix(in srgb, var(--halo) 70%, transparent);
}
@media (max-width: 760px) { .hero-halo::before { left: -160%; right: -160%; } }

/* ==========================================================================
   Logo Grapes v2 (24 octobre 2026, demande de PA) : trois barres, nom en Syne 600 vectorisé, fichiers du kit
   2-Projets/Grapes/assets/grapes-marque, en symboles (#g-logo, #g-icon, #g-word, #g-mark).
   L'icône garde ses couleurs ; seul le mot prend la couleur du texte.
   L'icône seule signale ce qui se passe dans notre produit : écrans de l'accueil, comparaison, À propos.
   ========================================================================== */
/* Logo à 36 px de haut : il remplit la barre de 64 px sans la toucher */
.kz-nav__brand .brand-logo { width: 134px; height: 36px; color: var(--ink); }
.kz-nav__brand .brand-icon { display: none; width: 38px; height: 38px; }
@media (min-width: 481px) { .site-nav .kz-nav__brand { padding: 0 18px 0 14px; } }
@media (max-width: 480px) {
  .site-nav .kz-nav__brand .brand-logo { display: none; }
  .site-nav .kz-nav__brand .brand-icon { display: block; }
}
.footer__logo { display: inline-flex; color: var(--ink); }
.footer__logo .brand-logo { width: 119px; height: 32px; }
.footer__giant { gap: .2em; align-items: center; }
.footer__giant .footer__giant-mark { width: .7em; height: .583em; fill: currentColor; }
.footer__giant .footer__giant-word { width: 2.27em; height: .7em; }

/* Barre d'application au-dessus des schémas de l'accueil : ce sont des écrans de Grapes */
.app-bar { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; padding: 0 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1; color: var(--ink-3); }
.app-bar .brand-icon { width: 20px; height: 20px; flex: none; }
.app-bar b { font-weight: 650; color: var(--ink); }
.app-bar span::before { content: "·"; margin-right: 8px; color: var(--ink-quiet); }
.viz__card .gain { padding: 6px 8px 2px; }
.viz__card .gain__center { left: 8px; }
/* L'anneau garde ses 150 px : la règle générale ".viz svg" (pleine largeur) le décentrait de son chiffre sur téléphone */
.viz .gain__ring { width: 150px; height: 150px; }
@media (max-width: 480px) { .viz__card .gain { padding: 6px 0 0; } .viz__card .gain__center { left: 50%; top: 6px; } }

/* Comparaison : l'icône Grapes en tête de colonne */
.kz-compare__col--on .brand-icon { width: 18px; height: 18px; }

/* ==========================================================================
   Agenda cal.com intégré (23 octobre 2026, demande de PA : plus de redirection vers cal.com)
   app.js charge l'agenda dans .cal-box ; le message d'attente disparaît quand il est prêt.
   ========================================================================== */
.contact--cal { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); align-items: start; }
.contact__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-24) var(--space-48); align-items: end; }
@media (max-width: 900px) { .contact__head { grid-template-columns: minmax(0, 1fr); } }
.cal-box { position: relative; width: 100%; min-height: 560px; border-radius: var(--radius-lg); background: var(--paper-raised); overflow: hidden; text-align: left; box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.cal-box iframe { display: block; }
.cal-box__wait { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-24); font-size: 15px; color: var(--ink-3); pointer-events: none; }
.cal-box.is-ready { min-height: 0; }
.cal-box.is-ready .cal-box__wait { display: none; }
.cal-box__fallback { display: none; }
/* Agenda bloqué ou muet : une carte de réservation à la place, sans grand vide */
.cal-box.is-failed { min-height: 0; }
.cal-box.is-failed .cal-box__wait, .cal-box.is-failed iframe, .cal-box.is-failed cal-inline { display: none; }
.cal-box.is-failed .cal-box__fallback { display: grid; justify-items: center; gap: var(--space-16); padding: clamp(32px, 5vw, 56px) var(--space-24); text-align: center; }
.cal-box__fb-title { font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.cal-box__fb-text { max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cal-box.is-failed + .cal-alt { display: none; }
.cal-alt { font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.cal-alt a { color: var(--ink-2); font-weight: 600; text-underline-offset: 3px; }
.cta-panel .cal-box { justify-self: stretch; margin-top: var(--space-8); }
/* Sur téléphone, l'agenda déborde un peu dans la marge du panneau pour gagner de la largeur */
@media (max-width: 760px) { .cal-box, .cta-panel .cal-box { width: calc(100% + 24px); margin-inline: -12px; min-height: 640px; border-radius: var(--radius-md); } }

/* ==========================================================================
   Assistants IA travaillés en formation (23 octobre 2026, demande de PA : un peu de couleur)
   Logos en couleur de Lobe Icons (licence MIT, @lobehub/icons-static-svg 1.95.1), intégrés dans le HTML.
   ========================================================================== */
.ai-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-tool { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 11px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap; transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft); }
.ai-tool:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-control), 0 10px 22px -16px rgba(11, 20, 36, .35); }
.ai-tool__logo { width: 20px; height: 20px; flex: none; color: var(--ink); }
.skill__tools { display: grid; gap: 12px; margin-top: auto; padding-top: var(--space-20); border-top: 1px solid var(--line); }
.skill__tools-label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.skill__tools .ai-tool { background: var(--paper); }
/* Six assistants : deux rangées de trois, puis deux colonnes sur téléphone */
.ai-tools { display: grid; grid-template-columns: repeat(3, max-content); }
@media (max-width: 520px) { .ai-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-tool { padding-right: 10px; } }
/* Colonne étroite des repères : les puces passent à la ligne librement */
.svc__facts dd .ai-tools { display: flex; flex-wrap: wrap; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .ai-tool { transition: none; } .ai-tool:hover { transform: none; } }

/* Format en bref sur les cartes de la montée en compétences (accueil) */
.skill__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.skill__meta li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }

/* ==========================================================================
   Pages Coaching des dirigeants et Formation des équipes (23 octobre 2026, demande de PA)
   Programme en cartes numérotées (.offer__steps), ce que vous obtenez, interfaces travaillées.
   La page Transformation garde ses fiches .svc.
   ========================================================================== */



/* Étapes en cartes numérotées ; pour la formation, le moment de chaque étape à côté du numéro */
.offer__steps { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-12); }
.offer__steps--4 { --cols: 4; }
.offer__steps li { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: var(--radius-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.offer__n { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: var(--accent); font-size: 14px; font-weight: 700; color: var(--on-accent); }
.offer__steps b { font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--ink); text-wrap: balance; }
.offer__steps p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.offer__steps--timeline li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.offer__steps--timeline .offer__n { grid-row: 1; grid-column: 1; margin-bottom: 0; }
.offer__steps--timeline .offer__when { grid-row: 1; grid-column: 2; }
.offer__steps--timeline b, .offer__steps--timeline p { grid-column: 1 / -1; }
.offer__when { justify-self: start; align-self: center; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* Ce que vous obtenez ; pour la formation, à côté des interfaces travaillées */
.offer__get { display: grid; gap: var(--space-16); align-content: start; }
.offer__get ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.offer__get li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.offer__get .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
.offer__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.offer__foot .offer__get { padding: 24px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); }
.offer__foot .offer__get ul { grid-template-columns: minmax(0, 1fr); }
.offer__tools { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: var(--radius-lg); background: var(--paper); }
.offer__tools-text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1000px) { .offer__steps--4 { --cols: 2; } }
@media (max-width: 860px) {
  .offer__foot { grid-template-columns: minmax(0, 1fr); }
  .offer__steps { --cols: 1; }
  .offer__steps--4 { --cols: 2; }
}
@media (max-width: 600px) {
  .offer__steps--4 { --cols: 1; }
  .offer__foot .offer__get, .offer__tools { padding: 20px; }
}

/* Haut des pages d'offre : à gauche ce que c'est, à droite la fiche pratique (prix, durée, public, format) */
.prod-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)); }
.prod-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-48) clamp(40px, 6vw, 88px); align-items: start; }
.prod-hero__text { display: grid; gap: var(--space-24); justify-items: start; padding-top: var(--space-16); animation: page-rise 900ms var(--ease-out) both; }
.prod-hero__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.prod-hero__back::before { content: "←"; letter-spacing: 0; transition: transform 300ms var(--ease-soft); }
.prod-hero__back:hover { color: var(--ink); }
.prod-hero__back:hover::before { transform: translateX(-3px); }
.prod-hero__title { font-size: clamp(40px, 1.3rem + 3.4vw, 72px); text-wrap: balance; }
.prod-hero__title .kz-quiet { display: block; }
.prod-hero__lead { max-width: 34em; font-size: clamp(18px, 1rem + .3vw, 20px); line-height: 1.5; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.prod-hero__intro { margin-bottom: -8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.prod-hero__list { display: grid; gap: 10px; }
.prod-hero__list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.prod-hero__list .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
.prod-hero .kz-hero__actions { margin-top: var(--space-8); }

.prod-card { display: grid; gap: var(--space-20); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -48px color-mix(in srgb, var(--accent) 55%, transparent); animation: page-rise 900ms var(--ease-out) 150ms both; }
.prod-card__name { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.prod-card__price { margin-top: -8px; font-size: 16px; color: var(--ink-2); }
.prod-card__price b { margin-right: 4px; font-size: clamp(26px, 1.2rem + .8vw, 32px); font-weight: 650; letter-spacing: -.02em; color: var(--accent-text); }
.prod-card__proof { display: flex; align-items: center; gap: 12px; padding-bottom: var(--space-20); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.prod-card__proof img { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.prod-card__stat { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.prod-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-24); margin: 0; }
.prod-card__facts .is-wide { grid-column: 1 / -1; }
.prod-card__facts dt { margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.prod-card__facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (max-width: 900px) { .prod-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .prod-hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-32)); } }
@media (max-width: 420px) { .prod-card__facts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .prod-hero__text, .prod-card { animation: none; } }

.prod-section .offer__steps { margin-bottom: var(--space-24); }
.prod-get { padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.prod-get ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .prod-get ul { grid-template-columns: minmax(0, 1fr); } }
.prod-foot .offer__get { background: var(--paper-raised); }
.prod-foot .offer__tools { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.prod-section .offer__steps li { background: var(--paper-raised); }

/* Sommaire Montée en compétences : une carte par offre, chacune mène à sa page */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.hub-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -30px rgba(11, 20, 36, .3); }
.hub-card__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-8); border-radius: 16px; background: var(--accent-tint); color: var(--accent-text); }
.hub-card__icon .kz-icon { width: 24px; height: 24px; }
.hub-card .kz-label { margin-bottom: -6px; }
.hub-card__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hub-card .ai-tools .ai-tool { background: var(--paper); }
.hub-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.hub-card__go .kz-icon { width: 18px; height: 18px; transition: transform 300ms var(--ease-soft); }
.hub-card:hover .hub-card__go { color: var(--accent-text); }
.hub-card:hover .hub-card__go .kz-icon { transform: translateX(3px); }
@media (max-width: 860px) { .hub { grid-template-columns: minmax(0, 1fr); } }

/* Accueil : lien vers la page de chaque offre */
.skill__more { justify-self: start; margin-top: var(--space-4); font-size: 15px; }

/* ==========================================================================
   Blog (23 octobre 2026, demande de PA) : cas fictifs d'intégration de l'IA, signalés comme tels
   blog.html liste les cas ; chaque cas suit le même plan (en bref, point de départ, diagnostic, solution, chiffres, FAQ).
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card { display: flex; flex-direction: column; gap: var(--space-16); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.post-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -30px rgba(11, 20, 36, .3); }
.post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.post-tag .kz-icon { width: 15px; height: 15px; }
.post-card__title { font-size: clamp(21px, 1rem + .7vw, 26px); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.post-card__text { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.post-card__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.post-card__go .kz-icon { width: 17px; height: 17px; transition: transform 300ms var(--ease-soft); }
.post-card:hover .post-card__go { color: var(--accent-text); }
.post-card:hover .post-card__go .kz-icon { transform: translateX(3px); }
.post-card--small { padding: 24px; }
.post-card--small .post-card__title { font-size: 19px; }
.post-card--small .post-card__text { display: none; }
.blog__notice { margin-bottom: var(--space-24); }
@media (max-width: 960px) { .post-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }

/* Article */
.article-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)); }
.article__wrap { max-width: 800px; }
.article-hero .article__wrap { display: grid; gap: var(--space-20); justify-items: start; animation: page-rise 900ms var(--ease-out) both; }
.article__title { font-size: clamp(36px, 1.2rem + 3vw, 60px); text-wrap: balance; }
.article__title .kz-quiet { display: block; }
.article__lead { font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-3); }
.article__meta span + span::before { content: "·"; margin-right: 18px; color: var(--ink-quiet); }
.article__body { display: grid; gap: var(--space-20); padding-top: var(--space-48); }
.article__body > p:not(.article__notice) { font-size: 18px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.article__h2 { margin-top: var(--space-24); font-size: clamp(24px, 1rem + 1vw, 30px); line-height: 1.2; font-weight: 650; letter-spacing: -.016em; color: var(--ink); }
.article__list { display: grid; gap: 10px; }
.article__list li { display: flex; gap: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.article__list .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent-text); stroke-width: 2.25; }
.article__notice { padding: 14px 18px; border-radius: var(--radius-md); background: var(--paper-sunken); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.article__notice strong { color: var(--ink); }
.article__brief { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--accent-tint); }
.article__brief .kz-label { margin-bottom: var(--space-12); color: var(--accent-text); }
.article__brief dl { display: grid; margin: 0; }
.article__brief dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-16); padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.article__brief dl > div:first-child { border-top: 0; padding-top: 0; }
.article__brief dt { font-size: 14px; font-weight: 650; color: var(--accent-text); }
.article__brief dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.article__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin-block: var(--space-16); }
.article__figure { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.article__figure b { font-size: clamp(28px, 1.2rem + 1vw, 36px); line-height: 1; font-weight: 650; letter-spacing: -.03em; color: var(--accent-text); white-space: nowrap; }
.article__figure span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.article__faq { display: grid; gap: var(--space-16); }
@media (max-width: 640px) {
  .article__figures { grid-template-columns: minmax(0, 1fr); }
  .article__brief dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .article__body > p:not(.article__notice) { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .article-hero .article__wrap { animation: none; } .post-card, .post-card__go .kz-icon { transition: none; } }

/* Accueil : chaque secteur renvoie vers un cas du blog */
.sector__more { justify-self: start; margin-top: auto; padding-top: var(--space-8); font-size: 14.5px; }

/* ==========================================================================
   Typographie Grapes v2 (24 octobre 2026, demande de PA) : Manrope partout, titres en 800 serrés
   comme dans le kit de marque. Gabarito n'est plus chargée.
   ========================================================================== */
.kz-h--hero { font-weight: 800; letter-spacing: -.038em; }
.kz-h--display, .kz-h--1 { font-weight: 750; letter-spacing: -.03em; }
.kz-h--2 { font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   Ressources et guides (24 octobre 2026, demande de PA) : menu Ressources (Blog, Guides),
   page guides.html et pages de guide. Un guide = sommaire collant à gauche, chapitres numérotés,
   un objet utilisable par chapitre (tableau, modèle, test, plan). Préfixe g-.
   ========================================================================== */
.post-tag--soft { padding: 0 12px; background: var(--paper-sunken); color: var(--ink-2); }

.guide-hero { overflow: hidden; padding: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)) 0 var(--space-48); }
.guide-hero__wrap { max-width: 1044px; display: grid; gap: var(--space-20); justify-items: start; animation: page-rise 900ms var(--ease-out) both; }
.guide-hero__title { font-size: clamp(40px, 1.3rem + 4vw, 76px); max-width: 15ch; text-wrap: balance; }
.guide-hero__title .kz-quiet { display: block; }
.guide-hero__lead { max-width: 40em; font-size: clamp(18px, 1rem + .45vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.guide-hero__proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); width: 100%; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.guide-hero__proofs li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.guide-hero__proofs b { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); }
.guide-hero__proofs span { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }

.guide__layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: var(--space-64); justify-content: center; align-items: start; padding-bottom: var(--space-48); }
.guide-toc { position: sticky; top: calc(var(--layout-nav) + 40px); display: grid; gap: var(--space-12); }
.guide-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--ink-3); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.guide-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.guide-toc a:hover { color: var(--ink); background: var(--paper-sunken); }
.guide-toc a.is-on { color: var(--ink); font-weight: 650; background: var(--accent-tint); }
.guide-toc a.is-on::before { color: var(--accent-text); }
.guide-toc .guide-toc__cta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-8); padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 650; }
.guide-toc .guide-toc__cta::before { content: none; }
.guide-toc .guide-toc__cta .kz-icon { width: 16px; height: 16px; }

.guide__body { display: grid; gap: var(--space-64); min-width: 0; }
.g-chapter { display: grid; gap: var(--space-20); scroll-margin-top: calc(var(--layout-nav) + 32px); }
.g-chapter > *, .g-anatomy > *, .g-step-body > * { min-width: 0; }
.guide-toc { min-width: 0; }
.g-chapter > p, .g-chapter li, .g-chapter td { text-wrap: pretty; }
.g-chapter > p { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.g-chapter > p b { color: var(--ink); font-weight: 700; }
.g-chapter sup { font-size: .62em; font-weight: 700; line-height: 0; margin-left: 1px; }
.g-chapter sup a { color: var(--accent-text); text-decoration: none; }
.g-chapter code { font: 600 .9em ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 1px 6px; border-radius: 6px; background: var(--paper-sunken); color: var(--ink); }
.g-kicker { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-kicker span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.g-h2 { margin: 0; font-size: clamp(28px, 1rem + 1.6vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.g-note { font-size: 14px !important; line-height: 1.55 !important; color: var(--ink-3) !important; }

.g-quote { margin: var(--space-8) 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--ink); }
.g-quote p { margin: 0; font-size: clamp(24px, 1rem + 1.4vw, 34px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--paper); text-wrap: balance; }
.g-quote span { color: color-mix(in srgb, var(--paper) 58%, transparent); }

.g-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.g-fit__col { padding: 22px 24px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-fit__col--yes { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.g-fit__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 750; color: var(--ink); }
.g-fit__title .kz-icon { width: 18px; height: 18px; color: var(--accent-text); }
.g-fit ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-fit li { position: relative; padding-left: 18px; }
.g-fit li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-quiet); }
.g-fit__col--yes li::before { background: var(--accent); }

.g-figure { margin: 0; padding: 20px 20px 14px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-rot { display: block; width: 100%; height: auto; }
.g-rot__axis { stroke: var(--line-strong); stroke-width: 1.5; }
.g-rot__curve { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.g-rot__zone { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.g-rot__zone--bad { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.g-rot__label { font: 600 13px var(--font-sans); fill: var(--ink-3); }
.g-rot__label--strong { fill: var(--ink); font-weight: 700; }
.g-figure figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.g-bricks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.g-brick { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 18px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-brick b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-brick small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-brick p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-brick .g-brick__ex { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--ink-3); font-style: italic; }
.g-brick__num { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 10px; background: var(--paper-sunken); font-size: 13px; font-weight: 800; color: var(--ink-3); }
.g-brick--on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.g-brick--on .g-brick__num { background: var(--accent); color: #fff; }

.g-table { overflow-x: auto; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.g-table th, .g-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-2); }
.g-table thead th { border-top: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-sunken); }
.g-table tbody th { width: 22%; font-weight: 750; color: var(--ink); }
.g-table tr.is-on th, .g-table tr.is-on td { background: var(--accent-tint); }

.g-tree { padding: 24px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-tree__title { margin-bottom: 14px; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-tree ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.g-tree li { counter-increment: q; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper-sunken); }
.g-tree li::before { content: counter(q); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; }
.g-tree__q { font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.g-tree__a { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.g-tree__a b { color: var(--accent-text); }

.g-anatomy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-20); align-items: start; }
.g-code { margin: 0; border-radius: var(--radius-md); background: #14161C; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(15, 26, 58, .5); }
.g-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid #262A33; font: 600 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: #9097A6; }
.g-copy { padding: 7px 12px; border: 0; border-radius: 9px; background: #262A33; color: #E8EAF0; font: 650 12.5px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.g-copy:hover { background: var(--accent); }
.g-code pre { margin: 0; padding: 18px; overflow-x: auto; }
.g-code code { display: block; padding: 0; background: none; font: 500 13px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #D9DCE4; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-code .c-meta { color: #6C7383; }
.g-code .c-key { color: #8FA3FF; font-weight: 700; }
.g-code .c-h { color: #FFFFFF; font-weight: 700; }
.g-code .c-file { color: #9FE3C1; }
.g-pin { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 4px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 11px/1 var(--font-sans); vertical-align: 1px; user-select: none; }
.g-pins { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pin; }
.g-pins li { counter-increment: pin; position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-pins li::before { content: counter(pin); position: absolute; left: 14px; top: 13px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; }
.g-pins b { color: var(--ink); }

.g-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.g-compare__col { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: var(--radius-md); }
.g-compare__col--bad { background: var(--paper-sunken); }
.g-compare__col--good { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.g-compare__label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.g-compare__col--good .g-compare__label { color: var(--accent-text); }
.g-compare__text { font-size: 16px; line-height: 1.45; font-weight: 650; color: var(--ink); }
.g-compare__col--bad .g-compare__text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.g-compare__why { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.g-files { padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-files__title { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.g-files__tree { margin: 0; overflow-x: auto; font: 500 13.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); white-space: pre; }

.g-layers { display: grid; gap: var(--space-12); }
.g-layer { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 6px 24px; align-items: center; padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-layer__head { display: grid; gap: 2px; }
.g-layer__n { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-layer__head b { font-size: 16px; font-weight: 750; color: var(--ink); }
.g-layer__bar { height: 12px; border-radius: 999px; background: var(--paper-sunken); overflow: hidden; }
.g-layer__bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--accent); }
.g-layer__bar--open i { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 10px, transparent 10px 16px); }
.g-layer p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-layer p b { color: var(--ink); }

.g-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.g-scale i { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), var(--accent)); }
.g-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-form { display: grid; align-content: start; gap: 10px; padding: 22px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-form--on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.g-form__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-form h3 { margin: 0; line-height: 1.2; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-form > p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-form .g-form__when { padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; }
.g-form__when b { color: var(--ink); }
.g-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 12px; background: var(--paper-sunken); }
.g-form--on .g-flow { background: color-mix(in srgb, var(--paper-raised) 70%, transparent); }
.g-flow span { padding: 5px 9px; border-radius: 8px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 650; color: var(--ink); }
.g-flow span.is-out { background: var(--ink); color: var(--paper); box-shadow: none; }
.g-flow i { width: 2px; height: 10px; margin-left: 14px; background: var(--ink-quiet); position: relative; }
.g-flow i::after { content: ""; position: absolute; left: -3px; bottom: -3px; border: 4px solid transparent; border-top-color: var(--ink-quiet); border-bottom: 0; }
.g-flow i.g-flow__loop { width: 26px; height: 14px; margin-left: 8px; background: none; border: 2px solid var(--ink-quiet); border-top: 0; border-radius: 0 0 10px 10px; }
.g-flow i.g-flow__loop::after { content: none; }

.g-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-case { display: grid; align-content: start; gap: 10px; padding: 22px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-case__who { display: grid; font-size: 17px; font-weight: 800; color: var(--ink); }
.g-case__who small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.g-case__big { font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); }
.g-case__big span { font-size: .6em; color: var(--ink-3); font-weight: 700; letter-spacing: -.01em; }
.g-case > p:last-child { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.g-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.g-checks li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.g-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B5BFD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.g-checks b { color: var(--ink); }

.g-aside { padding: 22px 24px; border-radius: var(--radius-md); background: var(--paper-sunken); border-left: 4px solid var(--ink); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.g-aside--warn { border-left-color: #E8A33D; background: color-mix(in srgb, #E8A33D 9%, var(--paper-raised)); }
.g-aside--brand { border-left-color: var(--accent); background: var(--accent-tint); }
.g-aside__label { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-aside p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

.g-quiz { display: grid; gap: 8px; padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -36px rgba(15, 26, 58, .4); }
.g-quiz__title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.g-quiz__title--plain { margin-top: var(--space-16); font-size: 19px !important; line-height: 1.3 !important; font-weight: 800; color: var(--ink) !important; }
.g-quiz__hint { margin-bottom: 6px; font-size: 14.5px; color: var(--ink-3); }
.g-quiz label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: var(--paper-sunken); font-size: 15.5px; line-height: 1.45; color: var(--ink); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.g-quiz label:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper-sunken)); }
.g-quiz input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.g-quiz label:has(input:checked) { background: var(--accent-tint); }
.g-quiz__result { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--paper-sunken); font-size: 15.5px; font-weight: 650; line-height: 1.45; color: var(--ink-3); }
.g-quiz__result.is-low { background: var(--paper-sunken); color: var(--ink-2); }
.g-quiz__result.is-mid { background: color-mix(in srgb, #E8A33D 14%, var(--paper-raised)); color: var(--ink); }
.g-quiz__result.is-high { background: var(--accent); color: #fff; }

.g-levels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-levels li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-levels__n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--accent-text); background: color-mix(in srgb, var(--accent) calc(var(--l, 0) * 1%), var(--paper-sunken)); }
.g-levels li:nth-child(1) .g-levels__n { --l: 4; } .g-levels li:nth-child(2) .g-levels__n { --l: 10; } .g-levels li:nth-child(3) .g-levels__n { --l: 18; }
.g-levels li:nth-child(4) .g-levels__n { --l: 100; color: #fff; } .g-levels li:nth-child(5) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels b { display: block; font-size: 16px; font-weight: 750; color: var(--ink); }
.g-levels p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

.g-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.g-steps > li { counter-increment: st; position: relative; display: grid; gap: 6px; padding: 0 0 26px 64px; }
.g-steps > li::before { content: counter(st); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 800; }
.g-steps > li::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 6px; width: 2px; background: var(--line-strong); }
.g-steps > li:last-child::after { content: none; }
.g-steps > li > b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.g-steps > li > p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.g-ways { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.g-ways li { padding: 12px 14px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.g-ways b { color: var(--ink); }

.g-effort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.g-effort div { display: grid; gap: 4px; padding: 16px 18px; background: var(--paper-raised); }
.g-effort div + div { border-left: 1px solid var(--line); }
.g-effort div:first-child { background: var(--accent-tint); }
.g-effort b { font-size: 15px; font-weight: 800; color: var(--ink); }
.g-effort span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

.g-errors { padding: 24px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); }
.g-errors__title { margin-bottom: 14px; font-size: 18px; font-weight: 800; }
.g-errors ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: er; }
.g-errors li { counter-increment: er; position: relative; padding-left: 40px; font-size: 15.5px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.g-errors li::before { content: counter(er); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--paper) 14%, transparent); font-size: 12.5px; font-weight: 800; color: var(--paper); }
.g-errors b { color: var(--paper); }

.g-plan { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-plan li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-plan span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-plan b { color: var(--ink); }
.g-plan p { margin: 0; }

.g-final { display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-tint), var(--paper-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.g-final > p:not(.kz-label) { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 650; letter-spacing: -.01em; color: var(--ink); max-width: 32em; }

.g-chapter--faq, .g-chapter--sources { gap: var(--space-16); }
.g-sources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.g-sources li { counter-increment: s; position: relative; padding-left: 32px; font-size: 14px; line-height: 1.55; color: var(--ink-2); scroll-margin-top: calc(var(--layout-nav) + 32px); }
.g-sources li::before { content: counter(s); position: absolute; left: 0; top: 0; min-width: 22px; font-size: 12px; font-weight: 800; color: var(--accent-text); }
.g-sources li:target { background: var(--accent-tint); border-radius: 8px; }
.g-sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

@media (max-width: 1100px) {
  .guide__layout { grid-template-columns: minmax(0, 760px); }
  .guide-toc { position: static; padding: 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
  .guide-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .g-bricks { grid-template-columns: 1fr 1fr; }
  .g-anatomy, .g-forms, .g-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .guide-hero__proofs { grid-template-columns: 1fr 1fr; }
  .guide-toc ol, .g-fit, .g-compare, .g-bricks, .g-effort { grid-template-columns: minmax(0, 1fr); }
  .g-effort div + div { border-left: 0; border-top: 1px solid var(--line); }
  .g-tree li { grid-template-columns: 34px minmax(0, 1fr); }
  .g-tree__a { grid-column: 2; }
  .g-layer { grid-template-columns: minmax(0, 1fr); }
  .g-layer p { grid-column: 1; }
  .g-plan li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .g-chapter > p { font-size: 17px; }
  .g-steps > li { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) { .guide-hero__wrap { animation: none; } }

/* ==========================================================================
   Téléphone (24 octobre 2026, demande de PA)
   - Bouton du haut compact : « Rendez-vous », 40 px, sans flèche ; le grand bouton reste dans le haut de page.
   - Méthode : les cartes s'empilent au défilement vertical comme sur ordinateur. Pour qu'elles tiennent dans
     l'écran, app.js ajoute .is-compact sous 760 px : le visuel de chaque carte est masqué, le texte resserré.
   ========================================================================== */
.nav-cta__short { display: none; }
@media (max-width: 760px) {
  .site-nav .nav-end .nav-cta { height: 40px; padding: 0 16px; gap: 0; font-size: 13.5px; }
  .site-nav .nav-end .nav-cta .kz-btn__arrow { display: none; }
  .nav-cta__long { display: none; }
  .nav-cta__short { display: inline; }
  .site-nav .nav-end { gap: 6px; }
}
.journey.is-compact { --stick: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 76px); }
.journey.is-compact .jcard__stage { display: none; }
.journey.is-compact .jcard__inner { padding: var(--space-16) var(--space-16) var(--space-20); }
.journey.is-compact .jcard__text { gap: var(--space-12); padding: var(--space-8) var(--space-4) 0; }
.journey.is-compact .jcard__num { font-size: 44px; }
.journey.is-compact .jcard__rows > div { padding: 9px 0; }
.journey.is-compact .jcard__rows dd { font-size: 15px; line-height: 1.45; }
.journey.is-compact.is-stacked .journey__rail { top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 22px); margin-bottom: var(--space-20); }
.journey.is-compact.is-stacked .journey__step { height: 32px; padding: 0 10px; font-size: 13px; }
.journey.is-compact.is-stacked .journey__cards { gap: 10vh; padding-bottom: 6vh; }
.journey.is-compact.is-stacked .jcard { top: calc(var(--stick) + var(--i) * 10px); }

/* ==========================================================================
   Guides AI Act et charte IA (24 octobre 2026) : niveaux de risque, frise,
   feux des données, téléchargement, résultat détaillé du test.
   ========================================================================== */
.g-h3 { margin: var(--space-8) 0 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-chapter > p a, .g-plan p a, .g-aside a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.g-bricks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-bricks--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-bricks--5 .g-brick b { font-size: 17px; }

.g-levels--risk li:nth-child(1) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels--risk li:nth-child(2) .g-levels__n { --l: 100; color: #fff; }
.g-levels--risk li:nth-child(3) .g-levels__n { --l: 18; color: var(--accent-text); }
.g-levels--risk li:nth-child(4) .g-levels__n { --l: 4; color: var(--accent-text); }

.g-plan--time li.is-past { background: var(--paper-sunken); box-shadow: none; }
.g-plan--time li.is-past span { color: var(--ink-3); }
.g-plan--time li.is-act { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.g-plan--time li.is-act.is-past { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.g-plan--time li.is-act span { color: var(--accent-text); }

.g-checks--stop li::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; }

.g-lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-light { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-light__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.g-light__tag::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent); }
.g-light--green { --dot: #2E9E6A; } .g-light--orange { --dot: #E8A33D; } .g-light--red { --dot: #D9483B; }
.g-light b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-light p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-light .g-light__rule { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; font-weight: 650; color: var(--ink); }

.g-download { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-tint), var(--paper-raised)); box-shadow: inset 0 0 0 1px var(--line); }
.g-download__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: #fff; }
.g-download__icon .kz-icon { width: 26px; height: 26px; }
.g-download__title { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--ink); }
.g-download__text p:last-child { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.g-quiz__result ul { margin: 8px 0 0; padding-left: 18px; font-weight: 500; }
.g-quiz__result li { margin-top: 4px; }
.g-quiz__result.is-stop { background: var(--ink); color: var(--paper); }

@media (max-width: 900px) {
  .g-bricks--5 { grid-template-columns: 1fr 1fr; }
  .g-lights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-bricks--2, .g-bricks--5 { grid-template-columns: minmax(0, 1fr); }
  .g-download { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* Téléphone, suite (24 octobre 2026, retour de PA sur iPhone)
   - Texte courant : retour à la ligne normal. Sur iPhone, « text-wrap: pretty » coupait les lignes bien avant
     le bord des cartes pour équilibrer les fins de paragraphe. Les titres gardent leur équilibrage.
   - Haut de l'écran : un voile couleur de fond sous la barre, pour que le texte ne passe plus au-dessus d'elle.
   - Cadre à la hauteur du contenu (.is-tall-frame, posé par app.js) : haut de page à hauteur fixe. */
@media (max-width: 760px) {
  p, dd, li, .kz-lead, .kz-text, .jcard__rows dd, .article__lead, .post-card__text { text-wrap: wrap; }
  .site-nav::before {
    content: ""; position: absolute; inset: 0 0 auto; height: calc(env(safe-area-inset-top, 0px) + 20px); z-index: -1;
    background: linear-gradient(var(--paper) 55%, color-mix(in srgb, var(--paper) 0%, transparent)); pointer-events: none;
  }
}
.is-tall-frame .hero .kz-hero-center { min-height: 640px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Outils des offres : trois pastilles par ligne (deux sur téléphone), qui s'élargissent pour remplir chaque ligne, la dernière comprise. */
.offer__tools .ai-tools { display: flex; flex-wrap: wrap; }
.offer__tools .ai-tool { flex: 1 1 calc((100% - 16px) / 3); justify-content: center; }
@media (max-width: 520px) { .offer__tools .ai-tool { flex-basis: calc((100% - 8px) / 2); } }

/* Accueil, montée en compétences : les outils, communs au coaching et à la formation, sous les deux cartes. */
.skills-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-24); align-items: center; margin-top: var(--space-16); padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.skills-tools__text { display: grid; gap: 8px; }
.skills-tools__text p:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.skills-tools .ai-tools { display: flex; flex-wrap: wrap; }
.skills-tools .ai-tool { flex: 1 1 calc((100% - 24px) / 4); justify-content: center; background: var(--paper); }
@media (max-width: 1080px) { .skills-tools { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .skills-tools .ai-tool { flex-basis: calc((100% - 8px) / 2); } }

/* Pages légales : liens du pied de page, listes de mentions, champs encore à fournir. */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: var(--space-16); }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--ink); }
.legal__list { display: grid; margin: 0; }
.legal__list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-16); padding: 12px 0; border-top: 1px solid var(--line); }
.legal__list > div:first-child { border-top: 0; }
.legal__list dt { font-size: 15px; font-weight: 650; color: var(--ink); }
.legal__list dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.legal-todo { padding: 1px 6px; border-radius: 6px; background: #FFF4D6; color: #7A5300; font-size: .92em; }
.legal .article__body > p a { text-decoration: underline; }
@media (max-width: 560px) { .legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ==========================================================================
   Header (25 octobre 2026) : en haut de page, une barre ouverte sans cadre, large et aérée ;
   dès que la page défile (.is-scrolled, posé par app.js), elle se resserre en une pilule de verre
   plus étroite et plus basse. Menu ouvert sur téléphone : toujours la pilule, pour rester lisible.
   ========================================================================== */
.site-nav { --nav-h: 72px; transition: padding-top 500ms var(--ease-out); }
.site-nav.is-scrolled, .site-nav:has(.nav-burger[aria-expanded="true"]) { --nav-h: 60px; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
.site-nav .kz-nav {
  height: var(--nav-h); max-width: 1240px; padding: 6px 6px 6px 4px;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: max-width 600ms var(--ease-out), height 500ms var(--ease-out), padding 500ms var(--ease-out),
              background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.site-nav.is-scrolled .kz-nav, .site-nav:has(.nav-burger[aria-expanded="true"]) .kz-nav {
  max-width: 1040px; padding: 5px 5px 5px 8px;
  background: color-mix(in srgb, var(--paper-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .7),
              0 1px 2px rgba(11, 20, 36, .04), 0 12px 32px -14px rgba(11, 20, 36, .22);
}
.site-nav .kz-nav__pill, .site-nav .nav-end .nav-cta { height: calc(var(--nav-h) - 12px); transition: height 500ms var(--ease-out); }
.site-nav .kz-nav__brand .brand-logo { width: 124px; height: 33px; transition: transform 500ms var(--ease-out); transform-origin: left center; }
.site-nav.is-scrolled .kz-nav__brand .brand-logo { transform: scale(.92); }
/* Liens : plus fins, espacés, survol en léger fond */
.site-nav .kz-nav__links { gap: 4px; }
.site-nav .kz-nav__links > a, .site-nav .navdrop__btn { height: 38px; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2); }
.site-nav .kz-nav__links > a:hover, .site-nav .navdrop__btn:hover, .site-nav .navdrop__btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
}
.site-nav .kz-nav__links > a[aria-current="page"], .site-nav .navdrop__btn[aria-current] { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-text); }
/* Bouton : plus compact, ombre bleue discrète, flèche qui glisse au survol */
.site-nav .nav-cta { padding-left: 20px; font-size: 14.5px; letter-spacing: -.005em; box-shadow: 0 1px 2px rgba(11, 20, 36, .08), 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.site-nav .nav-cta .kz-btn__arrow .kz-icon { transition: transform 300ms var(--ease-out); }
.site-nav .nav-cta:hover .kz-btn__arrow .kz-icon { transform: translateX(2px); }
.mmenu { top: calc(env(safe-area-inset-top, 0px) + 10px + var(--nav-h) + 10px); }
@media (max-width: 760px) {
  .site-nav { --nav-h: 64px; }
  .site-nav .nav-end .nav-cta { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav .kz-nav, .site-nav .kz-nav__pill, .site-nav .nav-cta, .site-nav .kz-nav__brand .brand-logo { transition: none; }
}

/* ==========================================================================
   Guide « Votre métier est-il sur la trajectoire de l'IA ? » (25 octobre 2026) :
   lectures des offres, deux cas côte à côte, grille interactive des quatre A
   (une carte par offre, lecture sous chaque carte, répartition du chiffre d'affaires).
   ========================================================================== */
.g-levels--reads li:nth-child(1) .g-levels__n { --l: 100; color: #fff; }
.g-levels--reads li:nth-child(2) .g-levels__n { --l: 30; color: var(--accent-text); }
.g-levels--reads li:nth-child(3) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels--reads li:nth-child(4) .g-levels__n { background: #2E9E6A; color: #fff; }
.g-cases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.g-traj { display: grid; gap: var(--space-12); }
.g-traj[hidden] { display: none; }
.g-traj__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.g-traj__list { display: grid; gap: var(--space-12); }
.g-offer { display: grid; gap: 14px; padding: clamp(18px, 3vw, 24px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -40px rgba(15, 26, 58, .4); }
.g-offer__head { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 10px; align-items: end; }
.g-offer label > span, .g-offer legend { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-3); }
.g-offer input[type="text"], .g-offer input[type="number"], .g-offer select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--paper-sunken); box-shadow: inset 0 0 0 1px var(--line); font: 600 15px var(--font-sans); color: var(--ink); }
.g-offer input:focus-visible, .g-offer select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-offer__name input { font-weight: 750; }
.g-offer__del { height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: 650 13.5px var(--font-sans); color: var(--ink-3); cursor: pointer; }
.g-offer__del:hover { background: var(--paper-sunken); color: var(--ink); }
.g-offer__qs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.g-offer__anc { margin: 0; padding: 0; border: 0; min-width: 0; }
.g-offer__anc label { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 8px 11px; border-radius: 999px; background: var(--paper-sunken); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.g-offer__anc label > span { display: inline; margin: 0; font-size: 14px; color: inherit; }
.g-offer__anc label:has(input:checked) { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.g-offer__anc input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.g-offer__read { padding: 13px 15px; border-radius: 14px; background: var(--paper-sunken); font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.g-offer__read b { color: var(--ink); font-weight: 800; }
.g-offer__read.is-defendre { background: var(--accent); color: #fff; }
.g-offer__read.is-defendre b { color: #fff; }
.g-offer__read.is-repenser { background: var(--accent-tint); color: var(--ink-2); }
.g-offer__read.is-automatiser { background: var(--ink); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.g-offer__read.is-automatiser b { color: var(--paper); }
.g-offer__read.is-relais { background: color-mix(in srgb, #2E9E6A 13%, var(--paper-raised)); color: var(--ink-2); }
.g-offer__warn { display: block; margin-top: 6px; font-weight: 700; }

.g-traj__mix { padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-sunken); font-size: 15px; color: var(--ink-3); }
.g-traj__mix p { margin: 0; }
.g-traj__mix-title { margin-bottom: 10px !important; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-traj__bars { display: grid; gap: 8px; }
.g-traj__row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; font-weight: 650; color: var(--ink); }
.g-traj__row i { height: 12px; border-radius: 999px; background: var(--paper-raised); overflow: hidden; }
.g-traj__row i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-fast) var(--ease-out); }
.g-traj__row.is-repenser i b { background: color-mix(in srgb, var(--accent) 40%, var(--paper-raised)); }
.g-traj__row.is-automatiser i b { background: var(--ink); }
.g-traj__row.is-relais i b { background: #2E9E6A; }
.g-traj__row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.g-traj__hint { margin-top: 10px !important; font-size: 13.5px; }
[data-traj-copybox][hidden], [data-traj-example-note][hidden] { display: none; }

@media (max-width: 640px) {
  .g-cases--2, .g-offer__qs { grid-template-columns: minmax(0, 1fr); }
  .g-offer__head { grid-template-columns: minmax(0, 1fr) 110px; }
  .g-offer__del { grid-column: 1 / -1; justify-self: start; height: 32px; padding: 0 4px; }
  .g-traj__row { grid-template-columns: minmax(0, 1fr) 44px; }
  .g-traj__row i { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   Guide coût réel de l'IA (25 octobre 2026) : avertissement de date, sous-titre d'éditeur
   dans les tableaux, calculateur en quatre lignes (postes, consommation, temps, gain).
   ========================================================================== */
.g-cost-warn { margin-bottom: calc(var(--space-24) * -1); }
.g-table .g-cost-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.g-cost-compare .g-compare__col:first-child { background: var(--paper-sunken); }
.g-final > p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.g-calc { display: grid; gap: var(--space-12); padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -36px rgba(15, 26, 58, .4); }
.g-calc__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding: 18px; border: 0; border-radius: var(--radius-md); background: var(--paper-sunken); min-width: 0; }
.g-calc__group legend { float: left; grid-column: 1 / -1; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-calc__group legend span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; }
.g-calc__field { display: grid; gap: 6px; align-content: end; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--ink-2); }
.g-calc__field--wide { grid-column: 1 / -1; }
.g-calc input, .g-calc select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 15px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.g-calc select { padding-right: 8px; text-overflow: ellipsis; }
.g-calc input:focus-visible, .g-calc select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.g-calc__hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.g-calc__hint:empty { display: none; }
.g-calc__out { display: grid; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); }
.g-calc__title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.g-calc__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.g-calc__kpis div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 9%, transparent); }
.g-calc__kpis span { font-size: 12.5px; line-height: 1.35; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.g-calc__kpis b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--paper); }
.g-calc__kpis b.is-pos { color: #8FE3B5; }
.g-calc__kpis b.is-neg { color: #FFB4A8; }
.g-calc__bars { display: grid; gap: 8px; }
.g-calc__bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.g-calc__bar i { display: block; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 12%, transparent); position: relative; overflow: hidden; }
.g-calc__bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.g-calc__bar.is-gain i::after { background: var(--accent); }
.g-calc__bar b { font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.g-calc__verdict { margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--paper); }
.g-calc__verdict:empty { display: none; }

@media (max-width: 900px) {
  .g-calc__kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .g-calc__group { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .g-calc__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .g-calc__bar i { grid-column: 1 / -1; grid-row: 2; }
  .g-calc__kpis b { font-size: 19px; }
  .g-cost-warn { margin-bottom: 0; }
}

/* ==========================================================================
   Visuels des cartes de guide (25 octobre 2026) : un petit dessin par guide,
   tiré du modèle de chaque guide, dans les couleurs du design system.
   ========================================================================== */
.post-card--art { padding-top: 14px; }
.guide-art { position: relative; aspect-ratio: 2 / 1; margin: 0 -10px 4px; border-radius: calc(var(--radius-xl) - 10px); overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--halo) 38%, transparent), transparent 60%), linear-gradient(160deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 600ms var(--ease-soft); }
.post-card--art:hover .guide-art svg { transform: scale(1.035); }
.guide-art--cout, .guide-art--aiact { background: radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--halo) 34%, transparent), transparent 60%), linear-gradient(200deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art--skills { background: radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--halo) 40%, transparent), transparent 62%), linear-gradient(180deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art .ga-paper, .guide-art .ga-paper-f { fill: var(--paper-raised); }
.guide-art .ga-shadow { filter: drop-shadow(0 6px 10px rgba(11, 20, 36, .10)); }
.guide-art .ga-tint, .guide-art .ga-tint-f, .guide-art .ga-tint-f2 { fill: color-mix(in srgb, var(--accent) 16%, var(--paper-raised)); }
.guide-art .ga-halo-f { fill: color-mix(in srgb, var(--accent) 45%, var(--paper-raised)); }
.guide-art .ga-acc-f { fill: var(--accent); }
.guide-art .ga-ink-f { fill: var(--ink); }
.guide-art .ga-grid { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.guide-art .ga-path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.guide-art .ga-chip rect { fill: var(--paper-sunken); } .guide-art .ga-chip rect.on { fill: var(--ink); }
.guide-art .ga-txt text, .guide-art .ga-num text, .guide-art .ga-num-on, .guide-art .ga-sym, .guide-art .ga-small, .guide-art .ga-mono { font-family: var(--font-sans); font-weight: 800; text-anchor: middle; }
.guide-art .ga-txt text { font-size: 11px; fill: var(--ink-3); } .guide-art .ga-txt text.on { fill: var(--paper-raised); }
.guide-art .ga-bar rect { fill: color-mix(in srgb, var(--ink) 14%, var(--paper-raised)); }
.guide-art .ga-eq { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.guide-art .ga-coin circle { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 2; }
.guide-art .ga-sym { font-size: 14px; fill: var(--accent-text); }
.guide-art .ga-num text { font-size: 13px; fill: var(--ink-3); } .guide-art .ga-num text.on, .guide-art .ga-num-on { font-size: 13px; fill: var(--paper-raised); }
.guide-art .ga-text rect { fill: color-mix(in srgb, var(--ink) 12%, var(--paper-raised)); }
.guide-art .ga-green { fill: #2E9E6A; } .guide-art .ga-orange { fill: #E8A33D; } .guide-art .ga-red { fill: #D9483B; }
.guide-art .ga-dl rect { fill: var(--accent); } .guide-art .ga-dl path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-art .ga-tick circle { fill: var(--ink-3); } .guide-art .ga-tick-off { fill: var(--paper-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.guide-art .ga-small { font-size: 14px; fill: var(--ink); }
.guide-art .ga-brick rect { fill: var(--paper-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.guide-art .ga-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; fill: var(--ink); }
@media (max-width: 640px) { .guide-art { margin-inline: -6px; } }
@media (prefers-reduced-motion: reduce) { .guide-art svg { transition: none; } .post-card--art:hover .guide-art svg { transform: none; } }

/* ===== Cartes Transformation IA (25 octobre 2026) ===== */
.diag { padding-bottom: 6px; }
.diag__steps { position: relative; display: grid; gap: 2px; margin: 0; padding: 6px 16px 10px; list-style: none; }
.diag__steps::before { content: ""; position: absolute; left: 31px; top: 46px; bottom: 50px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent) 0 38%, var(--line-strong) 38% 100%); }
.diag__week { padding: 12px 0 4px 44px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.diag__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 10px 9px 0; border-radius: 14px; }
.diag__step b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.diag__step small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.diag__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.diag__dot .kz-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.diag__step.is-done .diag__dot { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.diag__step.is-now { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.diag__step.is-now .diag__dot { background: var(--paper-raised); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); animation: diag-pulse 2.4s var(--ease-in-out) infinite; }
.diag__step--end .diag__dot { background: var(--ink); box-shadow: none; color: var(--paper); }
.diag__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.diag__head b { display: inline; }
.diag__who {  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.diag__step.is-now .diag__who, .diag__step--end .diag__who { background: var(--accent-tint); color: var(--accent-text); }
.diag__choices { display: flex; gap: 6px; margin-top: 8px; }
.diag__choices i { padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-style: normal; font-weight: 600; color: var(--ink-2); }
@keyframes diag-pulse { 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 6%, transparent); } }
@media (max-width: 520px) {
  
}
@media (prefers-reduced-motion: reduce) { .diag__step.is-now .diag__dot { animation: none; } }
.jcard__result dd + dd { margin-top: 8px; }

.build__list { display: grid; gap: 8px; margin: 0; padding: 8px 14px 14px; list-style: none; }
.build__row { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper-raised); }
.build__row--now { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.build__row--next { opacity: .72; }
.build__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.build__head b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.build__proc { font-size: 13px; color: var(--ink-3); }
.build__state { margin-left: auto; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.build__row--done .build__state { background: var(--accent); color: var(--on-accent); }
.build__row--now .build__state { background: var(--accent-tint); color: var(--accent-text); }
.build__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.build__steps i { position: relative; padding-top: 10px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.build__steps i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--line-strong); }
.build__steps i.is-done { color: var(--ink-2); }
.build__steps i.is-done::before { background: var(--accent); }
.build__steps i.is-now { color: var(--accent-text); }
.build__steps i.is-now::before { background: linear-gradient(90deg, var(--accent) 0 55%, color-mix(in srgb, var(--accent) 25%, transparent) 55%); animation: build-fill 2.4s var(--ease-in-out) infinite alternate; background-size: 200% 100%; }
@keyframes build-fill { from { background-position: 30% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .build__steps i.is-now::before { animation: none; } }

.net__loop { stroke-dasharray: 3 5; }
.net__loop-head { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.net__loop-label { font-size: 12px; font-weight: 650; fill: var(--accent-text); text-anchor: middle; }
.viz__dot--live { animation: live-dot 1.8s var(--ease-in-out) infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .viz__dot--live { animation: none; } }

/* Typographie des cartes : trois tailles dans les visuels (15 titre, 13 texte, 12 repère), un seul gras par niveau */
.jcard__result dd { font-weight: 600; line-height: 1.45; }
.jcard__result dd + dd { margin-top: 10px; }
.jcard__rows > div:not(.jcard__result) dd { color: var(--ink-2); }
.app-bar b, .app-bar span { font-size: 13px; }
.diag__week { font-size: 12px; letter-spacing: .08em; }
.diag__step b, .build__head b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.diag__step small, .build__proc { font-size: 13px; line-height: 1.45; }
.diag__step small { margin-top: 3px; }
.diag__who, .build__state, .build__steps i { font-size: 12px; font-weight: 600; }
.diag__step { padding-block: 10px; }
.build__steps i { font-weight: 500; }
.build__steps i.is-done, .build__steps i.is-now { font-weight: 600; }
.viz__legend, .viz__tools li { font-size: 13px; font-weight: 500; }

/* ==========================================================================
   Finition (proposition du 25 octobre 2026)
   - Plus de halos ni de dégradés lumineux : papier, filets fins, un seul bleu.
   - Haut de page éditorial : texte aligné à gauche, preuve concrète à droite.
   ========================================================================== */
.kz-glow::before, .kz-glow::after, .jcard__stage::before, .hero-halo { display: none !important; }
.hero--ed { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 56px); }
.hero-ed { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(720px, calc(100svh - var(--layout-nav) - 180px)); padding-bottom: var(--space-48); }
.hero-ed__text { display: grid; gap: var(--space-24); justify-items: start; }
.hero-ed__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hero-ed__kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.hero--ed .kz-h--hero { font-size: clamp(40px, 1.1rem + 3.3vw, 72px); line-height: 1.02; text-align: left; text-wrap: balance; max-width: 13em; }
.hero--ed .kz-lead { max-width: 30em; margin: 0; text-align: left; font-size: clamp(17px, 1rem + .3vw, 20px); color: var(--ink-2); }
.hero--ed .kz-hero__actions { justify-content: flex-start; align-items: center; gap: var(--space-24); margin-top: var(--space-8); }
.hero-ed__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color 300ms var(--ease-out); }
.hero-ed__link .kz-icon { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.hero-ed__link:hover { border-color: var(--ink); }
.hero-ed__link:hover .kz-icon { transform: translateX(3px); }
.hero-ed__facts { display: flex; flex-wrap: wrap; gap: var(--space-32); margin: var(--space-16) 0 0; padding-top: var(--space-24); border-top: 1px solid var(--line); }
.hero-ed__facts div { display: grid; gap: 2px; }
.hero-ed__facts dt { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-ed__facts dd { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.hero-ed__visual { margin: 0; }
.hero-ed__visual .viz__card { box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11,20,36,.04), 0 30px 60px -30px rgba(11,20,36,.25); }
.hero--ed .hero-ed__text > *, .hero--ed .hero-ed__visual { animation: rise-in 900ms var(--ease-soft) both; }
.hero--ed .hero-ed__text > :nth-child(2) { animation-delay: 80ms; }
.hero--ed .hero-ed__text > :nth-child(3) { animation-delay: 160ms; }
.hero--ed .hero-ed__text > :nth-child(4) { animation-delay: 240ms; }
.hero--ed .hero-ed__text > :nth-child(5) { animation-delay: 320ms; }
.hero--ed .hero-ed__visual { animation-delay: 300ms; }
/* Logos : sous un filet, légende à gauche */
.hero--ed .logos { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: var(--space-32); margin-bottom: 0; padding: var(--space-32) 0 var(--space-48); border-top: 1px solid var(--line); }
.hero--ed .logos__caption { margin: 0; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
.hero--ed .logo { background: color-mix(in srgb, var(--ink) 46%, transparent); }
@media (max-width: 960px) {
  .hero-ed { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: var(--space-40); }
  .hero-ed__visual { order: 2; }
  .hero--ed .logos { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
}
@media (max-width: 520px) {
  .hero--ed { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 32px); }
  .hero--ed .kz-hero__actions { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .hero-ed__facts { gap: var(--space-20); }
  .hero-ed__facts dt { font-size: 19px; }
}
/* Titres en deux tons : le gris un peu plus soutenu, lisible sans tirer l'œil */
.kz-quiet { color: color-mix(in srgb, var(--ink) 52%, var(--paper)); }

@media (max-width: 520px) {
  .hero--ed .kz-h--hero { font-size: clamp(32px, 8.6vw, 40px); }
  .hero-ed__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero-ed__facts dt { font-size: 17px; }
  .hero-ed__facts dd { font-size: 12px; line-height: 1.35; }
}
.hero-ed { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero--ed .kz-h--hero { font-size: clamp(40px, 1rem + 3.2vw, 66px); max-width: none; }
@media (max-width: 960px) { .hero-ed { grid-template-columns: minmax(0, 1fr); } }
/* À propos : trois chiffres du parcours du fondateur */
.figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .figures { grid-template-columns: minmax(0, 1fr); } }

/* Haut de page : les trois temps de la transformation IA, sans état ni étape en cours */
.tp { border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11,20,36,.04), 0 30px 60px -30px rgba(11,20,36,.22); overflow: hidden; margin: 0; }
.tp .app-bar { position: static; margin: 0; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); transform: none; font-size: 13px; }
.tp__list { position: relative; display: grid; gap: 2px; margin: 0; padding: 10px 12px 12px; list-style: none; }
.tp__list::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 56px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tp__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 12px; }
.tp__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.tp__body { display: grid; gap: 4px; min-width: 0; }
.tp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.tp__head b { font-size: 15px; font-weight: 600; color: var(--ink); }
.tp__body small { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.tp__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.tp__tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: live-dot 1.8s var(--ease-in-out) infinite; }
.tp__weeks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.tp__weeks span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--paper-sunken); font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.tp__weeks b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp__chips i { padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-style: normal; font-weight: 500; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tp__tag--live::before { animation: none; } }
@media (max-width: 520px) { .tp__weeks { grid-template-columns: minmax(0, 1fr); } }
/* Coaching : l'icône Grapes à la place du portrait */
.prod-card__proof .brand-icon { width: 36px; height: 36px; flex: none; }
/* Haut de page sur téléphone : en dernier, pour passer devant les tailles d'ordinateur */
@media (max-width: 520px) {
  .hero--ed .kz-h--hero { font-size: clamp(30px, 8.4vw, 38px); }
  .hero-ed__facts dt { font-size: 15px; line-height: 1.25; }
}

/* ==========================================================================
   Cartes de la transformation IA (25 octobre 2026, demande de PA : titres plus jolis et lisibles)
   Le titre porte la carte : deux lignes, mot fort puis complément en gris. Le numéro devient un repère
   discret à côté de l'enjeu, pour ne plus concurrencer le titre.
   ========================================================================== */
.jcard .jcard__top { align-items: center; gap: 10px; }
.jcard .jcard__num {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px;
  background: var(--ink); background-image: none; color: var(--paper); -webkit-background-clip: border-box; background-clip: border-box;
  font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0;
}
.jcard .jcard__of { padding: 0; font-size: 13px; font-weight: 600; }
.jcard__title { margin-top: 6px; font-size: clamp(30px, 1.05rem + 1.45vw, 40px); line-height: 1.04; font-weight: 650; letter-spacing: -.028em; }
.jcard__title .kz-quiet { display: block; }
@media (min-width: 961px) { .jcard__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.jcard__text { gap: var(--space-16); }
.jcard__rows > div { padding: 10px 0; }
.jcard__rows > .jcard__result { margin-top: 4px; }
.jcard__result dd + dd { margin-top: 7px; }
.jcard__more { font-size: 15px; }
@media (max-width: 960px) { .jcard__title { font-size: clamp(28px, 1rem + 2.4vw, 36px); } }
.journey.is-compact .jcard__title { margin-top: 2px; font-size: 26px; }
.journey.is-compact .jcard .jcard__num { min-width: 32px; height: 32px; font-size: 13px; border-radius: 10px; }
.journey.is-compact .jcard__more { display: none; }

/* ==========================================================================
   Page Transformation IA plus concrète (25 octobre 2026, demande de PA)
   Étapes datées du diagnostic, fiche de piste, six formes de solution, schéma du cerveau d'entreprise.
   ========================================================================== */
.svc__steps b small { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); vertical-align: 2px; }
.svc__steps span { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svc__h3 { font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.18; font-weight: 650; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.svc__extra { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: var(--space-32); border-top: 1px solid var(--line); }
.svc__extra-text { display: grid; gap: var(--space-16); align-content: start; }
.svc__extra-text > p:not(.kz-label) { font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.svc__extra--stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.svc__extra--stack .svc__extra-text { max-width: 40em; }

/* Fiche de piste */
.fiche { margin: 0; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); overflow: hidden; }
.fiche .app-bar { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fiche__body { display: grid; gap: 14px; padding: 16px 18px 18px; }
.fiche__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; }
.fiche__head b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.fiche__tag { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fiche__rows { display: grid; margin: 0; }
.fiche__rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.fiche__rows dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fiche__rows dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.fiche__src { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.fiche__src--ok { background: var(--accent-tint); color: var(--accent-text); }
.fiche__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fiche__figures p { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-sunken); }
.fiche__figures small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.fiche__figures b { font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.fiche__figures span { font-size: 12px; color: var(--ink-3); }
.fiche__figures .is-on { background: var(--accent-tint); }
.fiche__figures .is-on small, .fiche__figures .is-on span { color: var(--accent-text); }
.fiche__figures .is-on b { font-size: 17px; color: var(--accent-text); }

/* Six formes de solution */
.forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.form { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: var(--space-20); border-radius: var(--radius-lg); background: var(--paper-sunken); }
.form__icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 12px; background: var(--paper-raised); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--line); }
.form__icon .kz-icon { width: 19px; height: 19px; }
.form b { font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--ink); }
.form p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.form small { padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.trust--left { justify-content: flex-start; margin-top: 0; text-align: left; }

/* Schéma du cerveau d'entreprise */
.ctx { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.35fr) 40px minmax(0, 1fr); align-items: center; margin: 0; padding: var(--space-32) var(--space-24) var(--space-24); border-radius: var(--radius-lg); background: var(--paper-sunken); }
.ctx__col { display: grid; gap: 10px; }
.ctx__label { margin: 0 0 2px 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ctx__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.ctx__item p { display: grid; gap: 2px; margin: 0; }
.ctx__item b { font-size: 15px; font-weight: 650; color: var(--ink); }
.ctx__item small { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ctx__icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-sunken); color: var(--ink-2); }
.ctx__col--out .ctx__icon { background: var(--accent-tint); color: var(--accent-text); }
.ctx__icon .kz-icon { width: 16px; height: 16px; }
.ctx__arrow { position: relative; height: 100%; min-height: 40px; }
.ctx__arrow i { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
.ctx__arrow i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.ctx__core { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-float); }
.ctx__core-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.ctx__core-head .brand-icon { width: 22px; height: 22px; }
.ctx__core-head b { font-size: 16px; font-weight: 650; color: var(--ink); }
.ctx__tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx__tiles li { padding: 6px 11px; border-radius: 10px; background: var(--paper-sunken); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ctx__tiles li.is-on { background: var(--accent); color: var(--on-accent); }
.ctx__note { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.ctx__note p { margin: 0; }
.ctx__note-type { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.ctx__note-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.ctx__note-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ctx__note-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px !important; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ctx__note-meta .is-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.ctx__note-meta .kz-icon { width: 13px; height: 13px; stroke-width: 2.5; }
.ctx__loop { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); font-size: 14.5px; font-weight: 600; color: var(--accent-text); text-align: center; }
.ctx__loop .kz-icon { flex: none; width: 17px; height: 17px; }

@media (max-width: 1000px) {
  .svc__extra { grid-template-columns: minmax(0, 1fr); }
  .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctx { grid-template-columns: minmax(0, 1fr); padding: var(--space-20) var(--space-16); }
  .ctx__arrow { height: 36px; min-height: 0; }
  .ctx__arrow i { left: 50%; right: auto; top: 4px; bottom: 6px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 11px); }
  .ctx__arrow i::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 560px) {
  .forms { grid-template-columns: minmax(0, 1fr); }
  .fiche__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fiche__figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fiche__figures .is-on { grid-column: 1 / -1; }
  .svc__steps b small { display: table; margin: 4px 0 0; }
  .ctx__loop { text-align: left; justify-content: flex-start; }
}

/* ==========================================================================
   Carte 03 : le cerveau (25 octobre 2026, demande de PA : même logique, plus lisible)
   Trois colonnes titrées (ce qui entre, le cerveau, qui en profite), puis ce que vous obtenez.
   ========================================================================== */
.net--full { display: block; width: 100%; height: auto; overflow: visible; }
.net__head { font-size: 13px; font-weight: 600; fill: var(--ink-3); text-anchor: middle; }
.net__head--gain { fill: var(--ink); text-anchor: start; }
.net--full .net__pill text { font-size: 13.5px; }
.net__sub { font-size: 12.5px; font-weight: 500; fill: var(--ink-3); text-anchor: middle; }
.net__sep { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.net__gain rect { fill: var(--accent-tint); }
.net__gain text { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.net__check { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.viz:has(.net--full) { width: min(100%, 440px); }

/* ==========================================================================
   Petites attentions d'interface (25 octobre 2026, demande de PA)
   - Page Transformation : barre collante des trois temps, l'étape en cours s'allume.
   - Cerveau : rubriques cliquables, une fiche d'exemple par rubrique ; flux qui circule sur les flèches.
   - Guides et articles : barre de lecture sous l'en-tête, bouton de retour en haut.
   - Formes de solution et sources du cerveau : léger relief au survol.
   ========================================================================== */
.steps-nav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 20px); z-index: 6;
  display: flex; gap: 2px; width: max-content; max-width: calc(100% - 32px); margin: var(--space-48) auto 0; padding: 5px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper-raised) 80%, 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: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.steps-nav.is-off { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.steps-nav a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.steps-nav a b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.steps-nav a:hover { color: var(--ink); background: var(--paper-sunken); }
.steps-nav a.is-done { color: var(--ink-2); }
.steps-nav a.is-active { background: var(--accent); color: var(--on-accent); }
.steps-nav a.is-active b { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
.steps-nav + .svc-detail { padding-top: var(--space-24); }
@media (max-width: 520px) { .steps-nav { margin-top: var(--space-32); } .steps-nav a { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; } }

/* Rubriques du cerveau, cliquables */
.ctx__hint { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ctx__tiles button { padding: 6px 11px; border: 0; border-radius: 10px; background: var(--paper-sunken); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.ctx__tiles button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--paper-sunken)); color: var(--ink); transform: translateY(-1px); }
.ctx__tiles button.is-on { background: var(--accent); color: var(--on-accent); transform: none; }
.ctx__note-type { display: flex; justify-content: space-between; gap: 8px; }
.ctx__note-type span { font-weight: 500; color: var(--ink-quiet); }
.ctx__note.is-swap { animation: ctx-swap 420ms var(--ease-out); }
@keyframes ctx-swap { from { opacity: 0; transform: translateY(6px); } }
.ctx__arrow i { background-size: 11px 2px; animation: ctx-flow 1.1s linear infinite; }
@keyframes ctx-flow { to { background-position: 11px 0; } }
@media (max-width: 1000px) { .ctx__arrow i { background-size: 2px 11px; animation-name: ctx-flow-v; } @keyframes ctx-flow-v { to { background-position: 0 11px; } } }
.ctx__item, .form { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.ctx__item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 26px -18px rgba(11, 20, 36, .35); }
.form:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.form:hover .form__icon { background: var(--accent); color: var(--on-accent); }
.form__icon { transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }

/* Barre de lecture et retour en haut */
.read-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px) + 16px); bottom: max(20px, env(safe-area-inset-bottom, 0px) + 20px); z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.to-top .kz-icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  .ctx__arrow i, .ctx__note.is-swap { animation: none; }
  .ctx__item:hover, .form:hover, .ctx__tiles button:hover { transform: none; }
  .steps-nav, .to-top { transition: none; }
}
.ctx__label { display: flex; align-items: center; gap: 8px; }
.ctx__label span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx__col--core { align-self: stretch; align-content: center; }
.ctx__note { min-height: 156px; align-content: start; }
@media (max-width: 1000px) { .ctx__note { min-height: 0; } }
.net--full .net__pill--out text { font-weight: 650; font-size: 13px; }

/* Diagnostic : ce que vous obtenez, en trois lignes (25 octobre 2026, demande de PA : le résultat, pas la méthode) */
.svc__steps--gains b { font-size: 19px; letter-spacing: -.01em; }
.svc__steps--gains li::before { background: var(--accent-tint); box-shadow: none; color: var(--accent-text); }
.svc__decide { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: var(--space-20); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.svc__decide .kz-icon { flex: none; width: 18px; height: 18px; color: var(--positive); }

/* Cartes de l'accueil et fiches Construction et Cerveau : le résultat d'abord (25 octobre 2026, demande de PA) */
.jcard__lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.jcard__rows > .jcard__result { margin-top: 0; padding: 16px 18px; }
.jcard__result dd { font-size: 16px; }
.journey.is-compact .jcard__lead { font-size: 16px; }
.svc__viz { display: grid; place-items: center; margin: 0; padding: var(--space-24) var(--space-16); border-radius: var(--radius-lg); background: var(--paper-sunken); }
@media (min-width: 961px) { .jcard__text { align-content: center; padding-bottom: var(--space-12); } }

/* ==========================================================================
   Carte 1 : passage d'une étape à l'autre (25 octobre 2026, demande de PA : sobre, soigné et fluide)
   app.js ajoute .is-playing et .diag__glide. Seuls transform et opacity s'animent, sur la même courbe :
   le surlignage glisse vers l'étape en cours, le trait bleu s'allonge (scaleY), les étapes à venir restent
   en retrait. Sans JavaScript ou avec le mouvement réduit : frise figée.
   ========================================================================== */
.diag__steps.is-playing { --glide-ease: cubic-bezier(.65, 0, .35, 1); --glide-time: 620ms; }
.diag__steps.is-playing::before { background: var(--line-strong); }
.diag__steps.is-playing::after {
  content: ""; position: absolute; left: 31px; top: var(--line-top, 46px); width: 2px; height: var(--line-len, 0px); border-radius: 2px;
  background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--line-p, 0)); will-change: transform;
  transition: transform var(--glide-time) var(--glide-ease);
}
.diag__glide {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  will-change: transform; transition: transform var(--glide-time) var(--glide-ease), height var(--glide-time) var(--glide-ease), opacity 600ms ease;
}
.is-playing .diag__step { z-index: 1; }
.is-playing .diag__step.is-now { background: transparent; }
.is-playing .diag__step > div { transition: opacity 700ms ease; }
.is-playing .diag__step:not(.is-done):not(.is-now) > div { opacity: .45; }
.is-playing .diag__dot { z-index: 2; transition: background-color 600ms ease, box-shadow 600ms ease, color 600ms ease; }
.is-playing .diag__step.is-now .diag__dot { animation: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.is-playing .diag__step--end:not(.is-done):not(.is-now) .diag__dot { background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); }
.is-playing .diag__step--end.is-now .diag__dot { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.is-playing .diag__who { transition: background-color 600ms ease, color 600ms ease; }

/* ---------- Relief du parcours : bandes de fond (accueil) ----------
   Le gris de page alterne avec un temps fort bleu nuit (devise et approche) et une bande blanche (secteurs) ;
   le bloc rendez-vous garde son bleu très clair et le pied de page reprend le bleu nuit.
   Chaque bande est un panneau arrondi en retrait des bords ; ses jetons locaux recolorent les composants. */
.band { margin-top: var(--space-104); margin-inline: clamp(8px, 1.6vw, 24px); padding-top: var(--space-104); padding-bottom: var(--space-104); border-radius: var(--radius-xl); }
.band--first { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.band--last { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.band + .section:not(.band) { padding-top: var(--space-104); }
.band--white { background: #FFFFFF; --paper-raised: var(--paper); --shadow-card: none; }
.band--white .sector { box-shadow: none; }

/* Temps fort sombre : jetons du thème sombre du design system, sur le bleu nuit de la marque */
.band--night {
  --paper: #0E1735; --paper-raised: #16204A; --paper-sunken: #121B3E;
  --ink: #F1F4FA; --ink-2: #C3CBDA; --ink-3: #A9B4C8; --ink-quiet: #8FA8FF; --ink-quiet-top: #B9C9FF;
  --line: #E8EDF71A; --line-strong: #E8EDF733; --halo: #3D5BFF; --accent: #3354FF; --accent-text: #8FA8FF; --accent-tint: #1B2A5E;
  --shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 18px 44px -10px rgba(0,0,0,0.5);
  color: var(--ink);
}
.band--night { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.band--night.band--first::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1000px, 90%); height: 100%; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 38%, transparent), transparent); filter: blur(30px); pointer-events: none; }
.band--night .statement__end { display: block; color: var(--ink-quiet); } /* la seconde phrase commence sa propre ligne */
.js .band--night.statement.is-live .w { opacity: .18; }
.js .band--night.statement.is-live .w.is-lit { opacity: 1; }
.band--night .stake__viz rect.is-on, .band--night .stake__viz circle { fill: var(--ink-quiet); }
.band--night .stakes__then .kz-icon { color: var(--ink-quiet); }
@media (max-width: 760px) { .band { margin-top: var(--space-64); padding-top: var(--space-64); padding-bottom: var(--space-64); border-radius: var(--radius-lg); } .band--first { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .band--last { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .band + .section:not(.band) { padding-top: var(--space-64); } }

/* Pied de page en bleu nuit (toutes les pages) : mêmes jetons que le temps fort, panneau arrondi en retrait des bords */
.footer {
  --paper: #0E1735; --ink: #F1F4FA; --ink-2: #C3CBDA; --ink-3: #A9B4C8; --line: #E8EDF71A;
  margin-inline: clamp(8px, 1.6vw, 24px); margin-bottom: clamp(8px, 1.6vw, 24px);
  border-top: 0; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink);
}
.footer__giant { color: color-mix(in srgb, var(--ink) 10%, transparent); }
@media (max-width: 760px) { .footer { border-radius: var(--radius-lg); } }

/* ==========================================================================
   Retours d'expérience du blog et guide design system (26 octobre 2026, demande de PA)
   - .case-* : la chaîne du rendez-vous à la présentation, dans l'article
     blog-retour-proposition-commerciale.html. Les styles g-* du guide y servent aussi.
   - .ds-* : nuancier, gabarits et couches du guide guide-design-system.html.
   ========================================================================== */
.post-tag--case { background: var(--ink); color: var(--paper); }
.article__body sup { font-size: .62em; font-weight: 700; line-height: 0; margin-left: 1px; }
.article__body sup a { color: var(--accent-text); text-decoration: none; }
.article__body > p a:not(.kz-btn), .case-trame a, .g-plan a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article__sources { display: grid; gap: var(--space-16); }
.article__body .g-table, .article__body .g-aside, .article__body .g-calc, .article__body .g-checks, .article__body .g-compare { margin-block: var(--space-4); }

.case-chain { display: grid; gap: 0; margin: var(--space-8) 0; padding: 0; list-style: none; counter-reset: cc; }
.case-chain > li { counter-increment: cc; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 14px; }
.case-chain > li::before { content: counter(cc); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 17px; font-weight: 800; color: var(--ink); }
.case-chain > li::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: 2px; width: 2px; background: var(--line-strong); }
.case-chain > li:last-child { padding-bottom: 0; }
.case-chain > li:last-child::after { content: none; }
.case-chain > li.is-human::before { background: var(--ink); color: var(--paper); box-shadow: none; }
.case-chain > li.is-ai::before { background: var(--accent); color: #fff; box-shadow: none; }
.case-step { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.case-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.case-step__head b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.case-step__who { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.is-ai .case-step__who { color: var(--accent-text); }
.case-step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.case-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.case-tools li { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.case-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-3); }
.case-legend span { display: inline-flex; align-items: center; gap: 8px; }
.case-legend i { width: 14px; height: 14px; border-radius: 5px; background: var(--ink); }
.case-legend i.is-ai { background: var(--accent); }
.case-legend i.is-tool { background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.case-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.case-split > div { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.case-split > div.is-on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent); }
.case-split small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.case-split b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.case-split p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.case-trame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: tr; }
.case-trame li { counter-increment: tr; position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.case-trame li::before { content: counter(tr); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; }
.case-trame b { display: block; color: var(--ink); }

.case-link { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out); }
.case-link:hover { transform: translateY(-2px); }
.case-link__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--paper) 12%, transparent); }
.case-link__icon .kz-icon { width: 26px; height: 26px; color: var(--paper); }
.case-link small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-night); }
.case-link b { display: block; margin-top: 2px; font-size: 17px; font-weight: 750; line-height: 1.35; color: var(--paper); }
.case-link > .kz-icon { width: 22px; height: 22px; color: var(--paper); }

/* Guide design system */
.ds-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ds-swatch { display: grid; gap: 2px; padding: 0 0 12px; border-radius: 14px; overflow: hidden; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.ds-swatch i { display: block; height: 58px; margin-bottom: 8px; background: var(--c); box-shadow: inset 0 -1px 0 var(--line); }
.ds-swatch b, .ds-swatch span, .ds-swatch code { padding-inline: 12px; }
.ds-swatch b { font-size: 14px; font-weight: 750; color: var(--ink); }
.ds-swatch code { font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); }
.ds-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ds-tpl { display: grid; gap: 8px; align-content: start; }
.ds-tpl__slide { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -16px rgba(11, 20, 36, .35); overflow: hidden; }
.ds-tpl__slide i { position: absolute; display: block; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, #fff); }
.ds-tpl__slide i.t { background: var(--ink); }
.ds-tpl__slide i.a { background: var(--accent); }
.ds-tpl__slide i.s { background: var(--accent-tint); }
.ds-tpl__slide.is-dark { background: var(--ink); }
.ds-tpl__slide.is-dark i { background: color-mix(in srgb, #fff 26%, var(--ink)); }
.ds-tpl__slide.is-dark i.t { background: #fff; }
.ds-tpl__slide.is-dark i.a { background: var(--accent); }
.ds-tpl b { font-size: 14.5px; font-weight: 750; color: var(--ink); }
.ds-tpl span { margin-top: -6px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ds-stack { display: grid; gap: 8px; }
.ds-stack > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.ds-stack > div:nth-child(1) { margin-inline: 0; }
.ds-stack > div:nth-child(2) { margin-inline: 14px; }
.ds-stack > div:nth-child(3) { margin-inline: 28px; }
.ds-stack > div:nth-child(4) { margin-inline: 42px; background: var(--ink); box-shadow: none; }
.ds-stack small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ds-stack b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.ds-stack p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ds-stack > div:nth-child(4) small { color: var(--accent-on-night); }
.ds-stack > div:nth-child(4) b { color: var(--paper); }
.ds-stack > div:nth-child(4) p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.guide-art--ds { background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--halo) 38%, transparent), transparent 60%), linear-gradient(170deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art .ga-sw { stroke: var(--paper-raised); stroke-width: 3; }

@media (max-width: 900px) {
  .ds-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .case-split, .case-trame { grid-template-columns: minmax(0, 1fr); }
  .case-chain > li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .case-chain > li::before { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; }
  .case-chain > li::after { left: 19px; top: 44px; }
  .case-link { grid-template-columns: minmax(0, 1fr) auto; }
  .case-link__icon { display: none; }
  .ds-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stack > div { grid-template-columns: minmax(0, 1fr); margin-inline: 0 !important; }
}