/* ===========================================================================
   KLASSIO — la vitrine (landing une page)
   Sections institutionnelles : en-tête, héros, atouts, modules, chiffres,
   à propos, galerie, FAQ, contact, pied de page en rideau.

   Même contrat que cine.css : classes préfixées `kx-`, fichier chargé par la
   landing seulement, jamais par l'application. Les scènes pilotées par le
   défilement (vision, rôles, journée, manifeste, devise) vivent dans cine.css.

   IDENTITÉ
   La référence du propriétaire est un site d'université : structure claire,
   serif d'autorité, cartes photographiques, pastilles d'icônes rondes, filet
   doré. On en garde la grammaire et on la passe aux couleurs de Klassio :
   le bleu marine devient le vert forêt, l'or reste l'or de la marque, et le
   lime garde la signature des boutons. Les pastilles sont RONDES exprès :
   c'est le « O » de Klassio, répété comme un motif.
   =========================================================================== */

:root {
  --v-forest: #14301F;
  --v-forest-2: #0D2216;
  --v-gold: #E3A82B;          /* aplats et filets seulement */
  --v-gold-ink: #7F5700;      /* or pour du TEXTE sur crème : 6,0:1 (10,6:1 en sombre) */
  --v-card: #FFFFFF;
  --v-card-soft: #F4F1E4;
  --v-shadow: 0 1px 2px rgba(22, 36, 28, 0.05), 0 18px 40px -18px rgba(22, 36, 28, 0.22);
  --v-shadow-hi: 0 2px 4px rgba(22, 36, 28, 0.06), 0 28px 60px -20px rgba(22, 36, 28, 0.3);
  --v-wrap: 1220px;
  --v-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v-serif: "Fraunces", Georgia, serif;
  --v-label: "Archivo", "Plus Jakarta Sans", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --v-card: #1A1D1B;
  --v-card-soft: #202420;
  --v-gold-ink: #E9BC55;
  --v-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --v-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 60px -20px rgba(0, 0, 0, 0.8);
}

.kx-wrap {
  max-width: var(--v-wrap);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ---- Typographie commune ---------------------------------------------- */
.kx-eyebrow {
  display: inline-block;
  font-family: var(--v-label);
  font-stretch: 118%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v-gold-ink);
}
.kx-title {
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 0;
  text-wrap: balance;
}
.kx-title em { font-style: italic; font-weight: 500; color: var(--lime-deep); }
:root[data-theme="dark"] .kx-title em { color: var(--lime); }
.kx-rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 22px 0;
  background: var(--v-gold);
  transform-origin: left;
}
.kx-lead {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}
.kx-sec { padding: clamp(80px, 10vw, 140px) 0; position: relative; }

/* Pastille ronde : le « O » de Klassio, en motif. */
.kx-dot-ic {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #F5F8EF;
  background: var(--v-forest);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v-forest) 10%, transparent);
}
.kx-dot-ic.gold {
  background: var(--v-gold);
  color: #2A1D00;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v-gold) 16%, transparent);
}
.kx-dot-ic .kx-ic { width: 24px; height: 24px; }
:root[data-theme="dark"] .kx-dot-ic:not(.gold) { background: #24452F; }

/* Lien flèche « Explorer → » */
.kx-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v-label);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.kx-arrow-link .kx-ic { width: 16px; height: 16px; transition: transform 0.35s var(--v-ease); }
.kx-arrow-link:hover .kx-ic,
.kx-arrow-link:focus-visible .kx-ic { transform: translateX(4px); }

/* ===========================================================================
   En-tête : barre utilitaire + navigation
   =========================================================================== */
.kx-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.kx-topbar {
  background: var(--v-forest-2);
  color: rgba(238, 244, 234, 0.82);
  font-size: 12.5px;
  height: 36px;
  overflow: hidden;
  transition: margin-top 0.45s var(--v-ease);
}
.kx-topbar-in {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kx-tb-lieu { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kx-tb-lieu .kx-ic { width: 15px; height: 15px; color: var(--v-gold); }
.kx-tb-links { display: flex; align-items: center; gap: 22px; }
.kx-tb-links a { color: inherit; transition: color 0.2s; white-space: nowrap; }
.kx-tb-links a:hover, .kx-tb-links a:focus-visible { color: #fff; }
.kx-tb-sep { width: 1px; height: 14px; background: rgba(238, 244, 234, 0.25); }
/* Au défilement, la barre utilitaire se retire : la navigation seule suffit. */
.kx-head:has(.navbar.scrolled) .kx-topbar { margin-top: -36px; }

.kx-head .navbar.kx-nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px max(32px, calc((100vw - var(--v-wrap)) / 2 + 32px));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, padding 0.35s;
}
.kx-head .navbar.kx-nav.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
  padding-top: 10px;
  padding-bottom: 10px;
}
.kx-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.kx-brand img { width: 40px; height: 40px; border-radius: 11px; }
.kx-brand b {
  display: block;
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.kx-brand small {
  display: block;
  margin-top: 4px;
  font-family: var(--v-label);
  font-stretch: 110%;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --ink-soft et non --ink-faint : à 9,5 px, --ink-faint tombait à 4,4:1
     sur le fond sombre (mesuré) — sous le seuil AA. */
  color: var(--ink-soft);
}
.kx-nav .nav-links a { font-size: 14px; }
.kx-nav .nav-actions { display: flex; align-items: center; gap: 10px; }

/* ===========================================================================
   Le « O » de KLASSIO en architecture
   Des lettres monumentales, en relief : chaque lettre porte son épaisseur,
   éclairée d'en haut à gauche. Au repos, KLASSIO se lit comme un bâtiment ;
   pendant la plongée, on passe l'arche du « O ».

   RIEN ICI NE TOUCHE À LA MÉCANIQUE DU PORTAIL. Pas d'opacité (décision 2),
   pas d'inclinaison (le propriétaire l'a refusée pendant la plongée : main.js
   écrit de toute façon la transformation du mot-marque). Le relief est fait
   d'ombres portées successives, en `em` pour suivre la taille du mot : c'est
   ce que la plongée agrandit avec lui, sans rien recalculer.
   =========================================================================== */
.kx-archi .glyph-char:not(.glyph-o-wrap) {
  text-shadow:
    0.004em 0.006em 0 var(--kx-relief-1),
    0.008em 0.012em 0 var(--kx-relief-1),
    0.012em 0.018em 0 var(--kx-relief-2),
    0.016em 0.024em 0 var(--kx-relief-2),
    0.020em 0.030em 0 var(--kx-relief-3),
    0.024em 0.036em 0 var(--kx-relief-3),
    0.028em 0.042em 0 var(--kx-relief-4),
    0.032em 0.048em 0 var(--kx-relief-4),
    0.05em 0.1em 0.08em var(--kx-relief-ombre);
}
.kx-archi .glyph-o-outer {
  box-shadow:
    0.004em 0.006em 0 var(--kx-relief-1),
    0.008em 0.012em 0 var(--kx-relief-1),
    0.012em 0.018em 0 var(--kx-relief-2),
    0.016em 0.024em 0 var(--kx-relief-2),
    0.020em 0.030em 0 var(--kx-relief-3),
    0.024em 0.036em 0 var(--kx-relief-3),
    0.028em 0.042em 0 var(--kx-relief-4),
    0.032em 0.048em 0 var(--kx-relief-4),
    0.05em 0.1em 0.08em var(--kx-relief-ombre);
}
/* L'épaisseur est VERTE : des lettres sombres aux flancs éclairés de lime,
   c'est la signature de la marque, lisible dans les deux thèmes. */
.kx-archi {
  --kx-relief-1: #5C9600;
  --kx-relief-2: #4C7E00;
  --kx-relief-3: #3C6500;
  --kx-relief-4: #2D4C00;
  --kx-relief-ombre: rgba(22, 48, 31, 0.28);
}
:root[data-theme="dark"] .kx-archi {
  --kx-relief-1: #8FCC00;
  --kx-relief-2: #74A800;
  --kx-relief-3: #5A8400;
  --kx-relief-4: #405E00;
  --kx-relief-ombre: rgba(0, 0, 0, 0.6);
}
/* Le sol : une ombre elliptique sous le bâtiment, qui l'ancre dans l'écran. */
.kx-archi::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -0.16em;
  height: 0.18em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--kx-relief-ombre), transparent);
  filter: blur(0.04em);
  pointer-events: none;
  z-index: -1;
}

/* ===========================================================================
   Le héros, à l'intérieur du « O »
   On y arrive en plongeant. Même contenu, tenu à plat, en mouvement réduit
   ou sans script : dans ces deux cas la couche du portail devient une section
   ordinaire sous le mot-marque (voir la fin de ce bloc). Aucun texte n'est
   perdu, et rien n'est écrit deux fois.
   =========================================================================== */
.portal-reveal.kx-reveal-hero { padding: 0; }
.kx-reveal-hero .kx-o-scene .kx-plate::after {
  background:
    linear-gradient(90deg, rgba(250, 248, 239, 0.97) 0%, rgba(250, 248, 239, 0.9) 34%, rgba(250, 248, 239, 0.25) 62%, rgba(250, 248, 239, 0) 80%),
    linear-gradient(0deg, rgba(250, 248, 239, 0.9) 0%, transparent 22%);
}
:root[data-theme="dark"] .kx-reveal-hero .kx-o-scene .kx-plate::after {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.96) 0%, rgba(17, 17, 17, 0.86) 36%, rgba(17, 17, 17, 0.3) 64%, rgba(17, 17, 17, 0.1) 82%),
    linear-gradient(0deg, rgba(17, 17, 17, 0.92) 0%, transparent 24%);
}
.kx-reveal-hero .kx-o-scene .kx-plate img { object-position: 70% 50%; }
.portal-reveal .telemetry-hud.kx-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--v-wrap);
  height: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-h, 72px) + 60px) 32px 110px;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  align-items: center;
  text-align: left;
  gap: 32px;
}
.kx-hero-copy { color: var(--ink); }
.kx-hero-title {
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.kx-hero-title em { display: block; font-style: italic; font-weight: 500; color: var(--lime-deep); }
:root[data-theme="dark"] .kx-hero-title em { color: var(--lime); }
.kx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kx-hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.kx-avatars { display: flex; }
.kx-avatars span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  margin-left: -8px;
  color: #F5F8EF;
  background: var(--v-forest);
}
.kx-avatars span:first-child { margin-left: 0; }
.kx-avatars span:nth-child(2) { background: var(--v-gold); color: #2A1D00; }
.kx-avatars span:nth-child(3) { background: #3D6B4A; }
.kx-avatars span:nth-child(4) { background: var(--lime-deep); }
.kx-avatars .kx-ic { width: 16px; height: 16px; }
.kx-hero-trust b { color: var(--ink); }
/* Le médaillon, posé sur la photo comme le « Top 100 » de la référence —
   mais il dit un fait du produit, pas un classement inventé. */
.kx-hero-badge {
  justify-self: end;
  align-self: end;
  margin-bottom: 30px;
  width: 210px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: var(--v-forest);
  color: #EEF4EA;
  box-shadow: var(--v-shadow-hi);
}
.kx-hero-badge .kx-ic { width: 30px; height: 30px; color: var(--v-gold); }
.kx-hero-badge small { display: block; margin-top: 16px; font-size: 12px; opacity: 0.75; }
.kx-hero-badge b {
  display: block;
  margin-top: 4px;
  font-family: var(--v-serif);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
}
.kx-hero-badge span { display: block; margin-top: 6px; font-size: 12.5px; opacity: 0.75; }

/* Repli : mouvement réduit ou sans script. La couche du portail cesse d'être
   un hublot et devient une section, sous le mot-marque. Les règles de
   style.css la masquent en `!important` ; celles-ci, plus précises, gagnent. */
@media (prefers-reduced-motion: reduce) {
  .portal-reveal.kx-reveal-hero {
    display: block !important;
    position: relative !important;
    clip-path: none !important;
    min-height: 88vh;
  }
  .kx-reveal-hero .kx-o-scene { opacity: 1; }
  .kx-reveal-hero .telemetry-hud { opacity: 1 !important; }
}

/* ===========================================================================
   Bandeau des atouts — il chevauche le bas du héros, comme dans la référence
   =========================================================================== */
.kx-strip { position: relative; z-index: 6; margin-top: -72px; }
.kx-strip-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--v-card);
  border-radius: 18px;
  box-shadow: var(--v-shadow-hi);
  border: 1px solid var(--line-soft);
}
.kx-strip-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 26px;
}
.kx-strip-item + .kx-strip-item { border-left: 1px solid var(--line-soft); }
.kx-strip-item h3 { margin: 4px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.kx-strip-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ===========================================================================
   Les modules — cartes photographiques
   =========================================================================== */
.kx-modules-grid {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.kx-modules-intro { position: sticky; top: 130px; }
.kx-modules-intro .btn { margin-top: 30px; }
.kx-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--v-shadow);
  transition: box-shadow 0.4s var(--v-ease), transform 0.4s var(--v-ease);
}
.kx-card:hover { box-shadow: var(--v-shadow-hi); }
.kx-card:nth-child(4) { grid-column: 2; }
.kx-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v-card-soft);
  background-size: cover;
}
.kx-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--v-ease);
}
.kx-card:hover .kx-card-img img { transform: scale(1.05); }
.kx-card .kx-dot-ic {
  position: relative;
  margin: -28px auto 0;
  z-index: 2;
  border: 4px solid var(--v-card);
  box-shadow: none;
}
.kx-card-body { padding: 14px 22px 22px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.kx-card h3 { margin: 6px 0 8px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.kx-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); flex: 1; }
.kx-card .kx-arrow-link { justify-content: center; }

/* Arrivée des cartes : désordonnées, puis posées (repris du moteur « Site
   Immersif »). L'état d'ARRIVÉE est l'état normal ; le départ n'existe que
   sous .kx-arriving, posé par cine.js — sans script, elles sont en place. */
.kx-arriving .kx-card {
  transform: translate3d(var(--dx, 0), var(--dy, 120px), 0) rotate(var(--rot, 0deg));
  opacity: 0;
}
.kx-arriving.in-view .kx-card {
  transform: none;
  opacity: 1;
  transition: transform 1.1s var(--v-ease) var(--dl, 0s), opacity 0.7s var(--v-ease) var(--dl, 0s);
}

/* ===========================================================================
   Chiffres — bande vert forêt
   Des FAITS du produit, pas des métriques d'usage : Klassio n'a encore aucun
   établissement client, et un « 12 000 élèves » inventé serait un mensonge
   que le premier directeur démasquerait.
   =========================================================================== */
.kx-stats {
  background: var(--v-forest);
  color: #EEF4EA;
  position: relative;
  overflow: hidden;
}
.kx-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 120% at 10% 0%, rgba(184, 240, 0, 0.08), transparent 60%),
    radial-gradient(30% 100% at 90% 100%, rgba(227, 168, 43, 0.1), transparent 60%);
  pointer-events: none;
}
.kx-stats-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 46px;
  padding-bottom: 46px;
}
.kx-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 20px;
}
.kx-stat + .kx-stat { border-left: 1px solid rgba(238, 244, 234, 0.14); }
.kx-stat .kx-ic { flex: none; width: 34px; height: 34px; color: var(--v-gold); }
.kx-stat b {
  display: block;
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.kx-stat span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(238, 244, 234, 0.78); }

/* ===========================================================================
   À propos
   =========================================================================== */
.kx-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.kx-about-img {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3.3;
  box-shadow: var(--v-shadow-hi);
  background-size: cover;
}
.kx-about-img img { width: 100%; height: 100%; object-fit: cover; }
.kx-about-img figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(13, 34, 22, 0.72);
  color: #EEF4EA;
  font-size: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kx-about-copy .btn { margin-top: 26px; }
.kx-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kx-feat {
  background: var(--v-card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: var(--v-shadow);
}
.kx-feat .kx-ic { width: 26px; height: 26px; color: var(--v-gold-ink); }
.kx-feat h3 { margin: 12px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.kx-feat p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Comment ça marche : quatre étapes sur une ligne de temps */
.kx-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(56px, 7vw, 90px);
}
.kx-steps::before {
  content: "";
  position: absolute;
  left: 27px;
  right: 27px;
  top: 27px;
  height: 2px;
  background: linear-gradient(90deg, var(--v-gold), var(--lime-deep));
  transform: scaleX(var(--kx-steps-p, 1));
  transform-origin: left;
}
.kx-step { position: relative; }
.kx-step .kx-dot-ic { font-family: var(--v-serif); font-size: 20px; font-weight: 600; }
.kx-step:nth-child(even) .kx-dot-ic { background: var(--v-gold); color: #2A1D00; }
.kx-step h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.kx-step p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }

/* ===========================================================================
   Galerie — la vie d'une école, en colonnes qui défilent à des vitesses
   différentes (parallaxe douce, pilotée par cine.js).
   =========================================================================== */
.kx-gal-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.kx-gal-head .kx-lead { max-width: 42ch; }
.kx-gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.kx-gal-col { display: flex; flex-direction: column; gap: 18px; will-change: transform; }
.kx-gal-col:nth-child(2) { margin-top: 90px; }
.kx-gal figure {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-color: var(--v-card-soft);
  box-shadow: var(--v-shadow);
}
.kx-gal img { width: 100%; height: auto; display: block; }
.kx-gal figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 18px 16px;
  background: linear-gradient(0deg, rgba(13, 34, 22, 0.85), transparent);
  color: #F5F7F0;
  font-size: 13.5px;
  font-weight: 600;
}
.kx-gal figcaption small {
  display: block;
  font-family: var(--v-label);
  font-stretch: 112%;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-gold);
  margin-bottom: 4px;
}

/* ===========================================================================
   FAQ
   =========================================================================== */
.kx-faq { background: var(--bg-alt); }
.kx-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.kx-faq-intro { position: sticky; top: 130px; }
.kx-faq-intro .kx-arrow-link { margin-top: 26px; }
.kx-acc {
  border-bottom: 1px solid var(--line);
}
.kx-acc:first-child { border-top: 1px solid var(--line); }
.kx-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
}
.kx-acc summary::-webkit-details-marker { display: none; }
.kx-acc summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 11px 1.6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.6px 11px no-repeat;
  transition: transform 0.35s var(--v-ease), background-color 0.35s;
}
.kx-acc[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--lime);
  border-color: var(--lime);
}
.kx-acc summary:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 4px; border-radius: 6px; }
.kx-acc-body { padding: 0 4px 24px; max-width: 64ch; color: var(--ink-soft); font-size: 15px; line-height: 1.68; }
.kx-acc-body p { margin: 0 0 10px; }
/* Vert forêt en clair : --lime-deep ne donnait que 3,1:1 sur le crème. */
.kx-acc-body a { color: var(--v-forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; }
:root[data-theme="dark"] .kx-acc-body a { color: var(--lime); }

/* ===========================================================================
   Contact
   =========================================================================== */
.kx-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.kx-contact-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.kx-contact-points li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.kx-contact-points .kx-dot-ic { width: 42px; height: 42px; box-shadow: none; }
.kx-contact-points .kx-dot-ic .kx-ic { width: 19px; height: 19px; }
.kx-contact-points b { display: block; color: var(--ink); }
.kx-form-card {
  background: var(--v-card);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 38px);
  box-shadow: var(--v-shadow-hi);
}
.kx-form-card h3 { margin: 0 0 20px; font-family: var(--v-serif); font-weight: 600; font-size: 22px; color: var(--ink); }
/* Les aides du formulaire (« facultatif », « C'est à cette adresse… ») sont
   en --ink-faint dans style.css : 3,97:1 sur la carte en thème sombre. Elles
   portent une information — on les remonte ici, sans toucher l'application. */
.kx-form-card .hint, .kx-form-card .muted { color: var(--ink-soft); }

/* ===========================================================================
   Pied de page en rideau (d'après le « motion footer » fourni)
   Le pied de page est FIXE sous la page ; son enveloppe, dans le flux, le
   découpe. En remontant, la page se lève comme un rideau et le découvre.
   Porté en JavaScript simple : GSAP est interdit par la CSP, et le projet
   n'a pas de chaîne de build. Pas d'aimantation : le propriétaire a retiré
   les effets souris.
   =========================================================================== */
.kx-foot-curtain {
  position: relative;
  height: 100vh;
  height: 100svh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.kx-foot {
  --fp: 1;                           /* progression du lever : arrivée */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--v-forest-2);
  color: #EEF4EA;
}
.kx-foot-aurora {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 80vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 240, 0, 0.16) 0%, rgba(227, 168, 43, 0.1) 40%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  animation: kx-breathe 8s ease-in-out infinite alternate;
}
@keyframes kx-breathe {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  to { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
.kx-foot-grid {
  position: absolute;
  inset: 0;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(238, 244, 234, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238, 244, 234, 0.035) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.kx-foot-giant {
  position: absolute;
  left: 50%;
  bottom: -4vh;
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: 25vw;
  line-height: 0.78;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 244, 234, 0.08);
  background: linear-gradient(180deg, rgba(184, 240, 0, 0.16) 0%, transparent 62%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translate(-50%, calc((1 - var(--fp)) * 12vh)) scale(calc(0.82 + var(--fp) * 0.18));
  opacity: var(--fp);
  pointer-events: none;
  user-select: none;
}
.kx-foot-marquee {
  position: absolute;
  top: 44px;
  left: -5%;
  width: 110%;
  overflow: hidden;
  border-top: 1px solid rgba(238, 244, 234, 0.12);
  border-bottom: 1px solid rgba(238, 244, 234, 0.12);
  background: rgba(13, 34, 22, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 15px 0;
  transform: rotate(-2deg);
  z-index: 2;
}
.kx-foot-track {
  display: flex;
  width: max-content;
  animation: kx-marquee 46s linear infinite;
}
.kx-foot-track span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--v-label);
  font-stretch: 118%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(238, 244, 234, 0.7);
  white-space: nowrap;
}
.kx-foot-track i { font-style: normal; color: var(--lime); }
@keyframes kx-marquee { to { transform: translateX(-50%); } }
.kx-foot-center {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 20px;
  text-align: center;
  transform: translateY(calc((1 - var(--fp)) * 50px));
  opacity: var(--fp);
}
.kx-foot-center h2 {
  margin: 0 0 14px;
  font-family: var(--v-serif);
  font-weight: 600;
  font-size: clamp(46px, 8vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(238, 244, 234, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kx-foot-center h2 em { font-style: italic; font-weight: 500; }
.kx-foot-center > p { margin: 0 0 34px; color: rgba(238, 244, 234, 0.75); font-size: 16px; max-width: 46ch; }
.kx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kx-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 15px;
  color: #F5F8EF;
  background: linear-gradient(145deg, rgba(238, 244, 234, 0.07), rgba(238, 244, 234, 0.02));
  border: 1px solid rgba(238, 244, 234, 0.14);
  box-shadow: inset 0 1px 1px rgba(238, 244, 234, 0.1), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.35s var(--v-ease), border-color 0.35s, transform 0.35s var(--v-ease);
}
.kx-pill:hover, .kx-pill:focus-visible {
  border-color: rgba(238, 244, 234, 0.34);
  background: linear-gradient(145deg, rgba(238, 244, 234, 0.13), rgba(238, 244, 234, 0.04));
  transform: translateY(-2px);
}
.kx-pill.lime { background: var(--lime); color: #142000; border-color: transparent; }
.kx-pill.lime:hover, .kx-pill.lime:focus-visible { background: #C9FF3D; }
.kx-pill .kx-ic { width: 18px; height: 18px; }
.kx-pills.small { margin-top: 18px; }
.kx-pills.small .kx-pill { padding: 10px 18px; font-size: 13px; font-weight: 600; color: rgba(238, 244, 234, 0.8); }
.kx-foot-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(20px, 4vw, 48px) 28px;
  font-family: var(--v-label);
  font-stretch: 110%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 244, 234, 0.6);
}
.kx-foot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  border: 1px solid rgba(238, 244, 234, 0.14);
  color: rgba(238, 244, 234, 0.75);
}
.kx-foot-badge b { color: #fff; letter-spacing: 0.06em; }
.kx-foot-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: kx-pulse 2s ease-in-out infinite;
}
@keyframes kx-pulse { 50% { transform: scale(1.5); opacity: 0.6; } }
.kx-top-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #EEF4EA;
  background: rgba(238, 244, 234, 0.06);
  border: 1px solid rgba(238, 244, 234, 0.16);
  transition: background 0.3s, transform 0.35s var(--v-ease);
}
.kx-top-btn:hover, .kx-top-btn:focus-visible { background: rgba(238, 244, 234, 0.14); transform: translateY(-3px); }
.kx-top-btn .kx-ic { width: 20px; height: 20px; }

/* Le rideau suppose que tout le pied de page tienne dans la hauteur de
   l'écran : il est fixe, on ne peut pas y défiler. Le seuil était trop
   prudent (680 px de haut, et tous les téléphones) : dans une fenêtre de
   MacBook — ~640 px utiles une fois la barre du navigateur ôtée — et sur
   téléphone, l'effet de fin disparaissait alors que le contenu réel n'occupe
   que ~375 px (mesuré le 01/10). On resserre donc la mise en page sur les
   écrans bas et étroits, et on ne garde le bloc ordinaire que là où il ne
   tiendrait vraiment pas. */
@media (max-height: 760px) {
  .kx-foot-center { padding-top: 96px; padding-bottom: 12px; }
  .kx-foot-center h2 { font-size: clamp(40px, 7vw, 92px); margin-bottom: 10px; }
  .kx-foot-center > p { margin-bottom: 22px; font-size: 15px; }
  .kx-pills.small { margin-top: 12px; }
  .kx-foot-bar { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 760px) {
  .kx-foot-marquee { top: 70px; }
  .kx-foot-center { padding: 112px 16px 8px; }
  .kx-foot-center h2 { font-size: clamp(38px, 11vw, 52px); }
  .kx-foot-center > p { font-size: 14px; margin-bottom: 18px; }
  .kx-foot-center .kx-pills:not(.small) .kx-pill { padding: 12px 20px; }
  .kx-pills.small { gap: 8px; margin-top: 12px; }
  .kx-pills.small .kx-pill { padding: 7px 13px; font-size: 12px; }
  .kx-foot-bar { gap: 8px; padding-top: 12px; padding-bottom: 14px; }
}
@media (max-height: 559px), (max-width: 760px) and (max-height: 699px) {
  .kx-foot-curtain { height: auto; clip-path: none; }
  .kx-foot { position: relative; height: auto; min-height: 100svh; }
  .kx-foot-center { padding-top: 140px; padding-bottom: 60px; }
}

/* ===========================================================================
   Mouvement réduit
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kx-foot-aurora, .kx-foot-track, .kx-foot-badge i { animation: none; }
  .kx-card, .kx-card-img img, .kx-arrow-link .kx-ic, .kx-pill, .kx-top-btn { transition: none; }
}

/* ===========================================================================
   Tablette et téléphone
   =========================================================================== */
@media (max-width: 1060px) {
  .kx-tb-links a:not(.kx-tb-keep) { display: none; }
  .kx-tb-sep { display: none; }
  .portal-reveal .telemetry-hud.kx-hero { grid-template-columns: 1fr; padding-bottom: 150px; }
  .kx-hero-badge { display: none; }
  .kx-strip-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-strip-item:nth-child(3) { border-left: 0; }
  .kx-strip-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .kx-modules-grid { grid-template-columns: 1fr; }
  .kx-modules-intro { position: static; }
  .kx-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .kx-stat:nth-child(4) { border-left: 0; }
  .kx-about-grid { grid-template-columns: 1fr 1fr; }
  .kx-about-img { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .kx-faq-grid, .kx-contact-grid { grid-template-columns: 1fr; }
  .kx-faq-intro { position: static; }
}
@media (max-width: 760px) {
  .kx-wrap { padding-left: 20px; padding-right: 20px; }
  .kx-tb-lieu span { display: none; }
  .kx-brand small { display: none; }
  .kx-head .navbar.kx-nav { padding-left: 16px; padding-right: 16px; }
  .kx-strip { margin-top: -40px; }
  .kx-strip-card { grid-template-columns: 1fr; }
  .kx-strip-item + .kx-strip-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .kx-strip-item { padding: 20px; }
  .kx-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kx-card:nth-child(4) { grid-column: auto; }
  .kx-card:nth-child(5) { grid-column: 1 / -1; }
  .kx-card-body { padding: 12px 14px 18px; }
  .kx-card p { font-size: 12.5px; }
  .kx-stats-row { grid-template-columns: 1fr 1fr; }
  .kx-stat { padding: 6px 10px; gap: 10px; }
  .kx-stat + .kx-stat { border-left: 0; }
  .kx-stat .kx-ic { width: 26px; height: 26px; }
  .kx-stat:last-child { grid-column: 1 / -1; }
  .kx-about-grid { grid-template-columns: 1fr; }
  .kx-feats { grid-template-columns: 1fr 1fr; }
  .kx-steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .kx-steps::before { display: none; }
  .kx-gal-head { display: block; }
  .kx-gal { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kx-gal-col { gap: 12px; }
  .kx-gal-col:nth-child(2) { margin-top: 40px; }
  .kx-gal-col:nth-child(3) { display: none; }
  .kx-foot-giant { font-size: 30vw; }
  .kx-foot-bar { flex-direction: column; text-align: center; }
  .kx-pill { padding: 14px 22px; }
}
/* Sous 560 px, deux colonnes de cartes laissaient ~160 px de large : les
   titres se cassaient en deux lignes et « En savoir plus » en trois. Une
   carte par rangée, photo à gauche, texte à droite — lisible à 375 px. */
@media (max-width: 560px) {
  .kx-cards { grid-template-columns: 1fr; gap: 12px; }
  .kx-card:nth-child(n) { grid-column: auto; flex-direction: row; align-items: stretch; }
  .kx-card-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
  .kx-card .kx-dot-ic { position: absolute; left: calc(38% - 22px); top: 14px; margin: 0; width: 44px; height: 44px; border-width: 3px; }
  .kx-card .kx-dot-ic .kx-ic { width: 19px; height: 19px; }
  .kx-card-body { text-align: left; padding: 14px 16px 16px 30px; }
  .kx-card h3 { margin-top: 0; font-size: 16px; }
  .kx-card p { margin-bottom: 10px; }
  .kx-card .kx-arrow-link { justify-content: flex-start; font-size: 11px; white-space: nowrap; }
}
/* ===========================================================================
   Tout Klassio — l'inventaire complet (01/10)
   Six familles, chaque fonction du logiciel. Cartes blanches et cartes vert
   forêt en alternance ; arrivée désordonnée puis posée, comme les modules
   (départ sous .kx-arriving seulement — sans script, tout est en place).
   =========================================================================== */
.kx-all { background: var(--v-card-soft); }
.kx-all-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.kx-all-head .kx-lead { margin-top: 0; }
.kx-all-head .btn { margin-top: 22px; }
.kx-fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kx-fam {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: 20px;
  background: var(--v-card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--v-shadow);
  transition: box-shadow 0.4s var(--v-ease), transform 0.4s var(--v-ease);
}
.kx-fam:hover { box-shadow: var(--v-shadow-hi); transform: translateY(-4px); }
.kx-fam header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.kx-fam .kx-dot-ic { width: 46px; height: 46px; }
.kx-fam .kx-dot-ic .kx-ic { width: 21px; height: 21px; }
.kx-fam h3 { flex: 1; margin: 0; font-family: var(--v-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--ink); }
.kx-fam-n {
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 99px;
  text-align: center;
  font-family: var(--v-label);
  font-weight: 700;
  font-size: 12px;
  background: color-mix(in srgb, var(--lime) 30%, transparent);
  color: var(--ink);
}
.kx-fam ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kx-fam li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.kx-fam li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lime) 34%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--lime-deep);
}
.kx-fam li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.32em + 4px);
  width: 4px;
  height: 6px;
  border: solid var(--v-forest);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
/* Les cartes vert forêt : le même contenu, en négatif. */
.kx-fam.forest { background: var(--v-forest); border-color: transparent; }
.kx-fam.forest h3 { color: #F3F0E4; }
.kx-fam.forest li { color: #C9D3C4; }
.kx-fam.forest .kx-fam-n { background: rgba(184, 240, 0, 0.16); color: #DDF7A0; }
.kx-fam.forest li::before { background: rgba(184, 240, 0, 0.14); box-shadow: inset 0 0 0 1.5px #B8F000; }
.kx-fam.forest li::after { border-color: #B8F000; }
:root[data-theme="dark"] .kx-fam li::after { border-color: var(--lime); }
.kx-arriving .kx-fam {
  transform: translate3d(var(--dx, 0), var(--dy, 120px), 0) rotate(var(--rot, 0deg));
  opacity: 0;
}
.kx-arriving.in-view .kx-fam {
  transform: none;
  opacity: 1;
  transition: transform 1.1s var(--v-ease) var(--dl, 0s), opacity 0.7s var(--v-ease) var(--dl, 0s);
}
.kx-arriving.in-view .kx-fam:hover { transform: translateY(-4px); }
@media (max-width: 1060px) {
  .kx-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-all-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .kx-fams { grid-template-columns: 1fr; gap: 14px; }
  .kx-fam { padding: 22px 20px 20px; }
  .kx-fam h3 { font-size: 19px; }
  .kx-fam li { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-fam { transition: none; }
}

/* ===========================================================================
   Tarifs (01/10/2026) — montants identiques à la table plans du serveur.
   Quatre offres, la deuxième en vert forêt pour le rythme — sans badge
   « la plus choisie » : Klassio n'a pas encore de clients pour l'affirmer.
   =========================================================================== */
.kx-tarifs-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.kx-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.kx-price {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: var(--v-card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--v-shadow);
  transition: transform 0.4s var(--v-ease), box-shadow 0.4s var(--v-ease);
}
.kx-price:hover { transform: translateY(-4px); box-shadow: var(--v-shadow-hi); }
.kx-price h3 { margin: 0; font-family: var(--v-serif); font-weight: 600; font-size: 24px; color: var(--ink); }
.kx-price-range { margin: 8px 0 22px; font-size: 14px; color: var(--ink-soft); min-height: 42px; }
.kx-price-amount { margin: 0 0 24px; color: var(--ink); }
.kx-price-amount b { font-family: var(--v-serif); font-weight: 600; font-size: clamp(34px, 3.2vw, 44px); letter-spacing: -0.02em; }
.kx-price-amount small { font-size: 14px; color: var(--ink-soft); }
.kx-price-cta { margin-top: auto; justify-content: center; }
.kx-price.forest { background: var(--v-forest); border-color: transparent; }
.kx-price.forest h3, .kx-price.forest .kx-price-amount { color: #F3F0E4; }
.kx-price.forest .kx-price-range, .kx-price.forest .kx-price-amount small { color: #C9D3C4; }
.kx-tarifs-foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.kx-inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kx-inclus li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-soft); }
.kx-inclus li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 34%, transparent); box-shadow: inset 0 0 0 1.5px var(--lime-deep); }
.kx-inclus li::after { content: ""; position: absolute; left: 6px; top: calc(0.2em + 4px); width: 4px; height: 7px; border: solid var(--v-forest); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
:root[data-theme="dark"] .kx-inclus li::after { border-color: var(--lime); }
.kx-tarifs-aside { padding: 22px 24px; border-radius: 18px; background: var(--v-card-soft); border: 1px solid var(--line-soft); }
.kx-tarifs-aside p { margin: 0 0 12px; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.kx-tarifs-aside b { color: var(--ink); }
.kx-tarifs-note { margin-top: 16px !important; font-size: 13.5px !important; }
.kx-tarifs-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; }
.kx-arriving .kx-price { transform: translate3d(0, 120px, 0); opacity: 0; }
.kx-arriving.in-view .kx-price { transform: none; opacity: 1; transition: transform 1s var(--v-ease), opacity 0.7s var(--v-ease); }
.kx-arriving.in-view .kx-price:nth-child(2) { transition-delay: 0.07s; }
.kx-arriving.in-view .kx-price:nth-child(3) { transition-delay: 0.14s; }
.kx-arriving.in-view .kx-price:nth-child(4) { transition-delay: 0.21s; }
.kx-arriving.in-view .kx-price:hover { transform: translateY(-4px); transition-delay: 0s; }
@media (max-width: 1060px) {
  .kx-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-tarifs-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kx-prices { grid-template-columns: 1fr; gap: 12px; }
  .kx-price-range { min-height: 0; margin-bottom: 14px; }
  .kx-price-amount { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .kx-price { transition: none; } }

/* Les cartes qui n'ont pas encore « atterri » attendent décalées de côté
   (--dx). html { overflow-x: hidden } ne suffit pas sur mobile : le viewport
   de mise en page s'élargissait jusqu'à 432 px, et la barre de navigation fixe
   avec lui — le bouton « Voir la démo » sortait de l'écran à 375 px.
   `clip` et non `hidden` : hidden ferait de <main> un conteneur de défilement
   et casserait tous les `position: sticky` des scènes. */
#contenu { overflow-x: clip; }
/* Posée par entree.js quand la page s'ouvre sur une ancre : saut direct. */
html.kx-ancre { scroll-behavior: auto; }