/* ============================================================
   SUMO ; page « Kit du Finisher » (Édition Finisher)
   ------------------------------------------------------------
   Prolonge style.css, carte-relief.css et produits.css (barre,
   pied de page, révélations [data-r], champs de formulaire).
   Préfixe « k ». Le kit est noir : il vit sur les fonds clairs,
   les fonds sombres servent à la technique et à l'achat.
   Une seule variable de couleur, --kc, recolore tous les
   dessins de la page (cerclage, trace, lettrage).
============================================================ */

.kit-page { --kc: #E8B647; background: var(--bg); }

/* La bibliothèque du dessin : présente dans la page (sinon Safari
   perd les dégradés), mais sans aucune emprise. */
.kdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------
   LE DESSIN DU KIT
------------------------------------------------------------ */
.kart { display: block; width: 100%; height: auto; overflow: visible; }
.kart[hidden] { display: none; }
/* commande en deux étapes : un bloc d'une autre étape disparaît (.field-group, .rbuy… imposent leur display) */
.kbuy [hidden] { display: none !important; }
.kart text { font-family: var(--font); }
.kart__plate { fill: #17181b; stroke: rgba(255,255,255,.08); stroke-width: .3; }
.kart__txt {
  fill: var(--kc); font-size: 3.7px; font-weight: 600; letter-spacing: .4px;
  transition: fill .6s var(--ease);
}
/* le logo SUMO est gravé dans le noir : il ne prend jamais la couleur du kit */
.kart__logo {
  fill: #0b0b0c; stroke: rgba(255,255,255,.07); stroke-width: .2;
  font-size: 6.6px; font-weight: 500; letter-spacing: 2.3px;
}
.kart__edge { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .7; }
.kart__ring { fill: none; stroke: var(--kc); stroke-width: 1.3; transition: stroke .6s var(--ease); }
.kart__trace {
  fill: none; stroke: var(--kc); stroke-width: 1.35;
  stroke-linejoin: round; stroke-linecap: round;
  transition: stroke .6s var(--ease);
}
.kart__trace-glow {
  fill: none; stroke: var(--kc); stroke-width: 3.2; stroke-opacity: .35;
  stroke-linejoin: round; filter: url(#kBlur);
  transition: stroke .6s var(--ease);
}
.kart__start { fill: #fff; stroke: var(--kc); stroke-width: 1; transition: stroke .6s var(--ease); }

/* ------------------------------------------------------------
   1. HERO
------------------------------------------------------------ */
.khero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(112px, 15vh, 160px) var(--gut) clamp(70px, 10vh, 110px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: radial-gradient(120% 85% at 50% 0%, #FFFFFF 0%, #F5F4F1 52%, #EBE9E4 100%);
}
.khero__glow {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  width: min(120vw, 1400px); aspect-ratio: 3 / 1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(200,154,75,.16) 0%, rgba(200,154,75,.05) 42%, transparent 68%);
}
.khero__copy { position: relative; z-index: 2; max-width: 780px; }
.khero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); }
.khero__eyebrow i {
  width: 7px; height: 7px; background: var(--accent); clip-path: var(--oct);
  animation: kPulse 2.4s ease-in-out infinite;
}
@keyframes kPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

.khero__title { margin-top: 20px; font-size: clamp(3rem, 7.4vw, 6.6rem); }
.khero__title .line > span { transition-duration: 1.2s; }
.khero__sub {
  margin: 26px auto 0; max-width: 44ch;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem); line-height: 1.55; color: var(--ink-60);
}
.khero__cta {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center;
}
.khero__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.khero__link svg { transition: transform .35s var(--ease); }
.khero__link:hover svg { transform: translateX(4px); }
.khero__price {
  margin-top: 22px; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}

.khero__stage {
  --lift: 0px;                         /* parallaxe, écrite par le JS */
  position: relative; z-index: 1;
  width: min(100%, 1060px); margin: clamp(26px, 5vh, 60px) auto 0;
  transform: translate3d(0, var(--lift), 0);
}
.khero__stage .kart { opacity: 0; animation: kRise 1.6s var(--ease) .3s forwards; }
@keyframes kRise {
  from { opacity: 0; transform: translateY(60px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* la trace se dessine une fois la pièce arrivée */
.kart--hero .kart__trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kDraw 2.8s var(--ease) 1.2s forwards; }
.kart--hero .kart__trace-glow { opacity: 0; animation: kFade 1.4s var(--ease) 3s forwards; }
@keyframes kDraw { to { stroke-dashoffset: 0; } }
@keyframes kFade { to { opacity: 1; } }

.khero__scroll { left: 50%; bottom: 24px; transform: translateX(-50%); color: var(--ink-40); }
.khero__scroll i { background: var(--ink-14); }

/* ------------------------------------------------------------
   2. MANIFESTE — les mots s'allument au défilement
------------------------------------------------------------ */
.kwords { background: #fff; padding: clamp(120px, 22vh, 260px) var(--gut); }
.kwords__text {
  max-width: 980px; margin: 0 auto;
  font-size: clamp(1.7rem, 4.1vw, 3.5rem); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.035em; color: var(--ink);
  text-wrap: pretty;
}
.kwords__text .kw { color: rgba(17,17,17,.14); transition: color .5s var(--ease); }
.kwords__text .kw.is-lit { color: var(--ink); }
.kwords__text .kw--accent.is-lit { color: var(--accent); }

/* ------------------------------------------------------------
   3. TROIS PIÈCES
------------------------------------------------------------ */
.kparts { background: var(--bg); padding: var(--sp) var(--gut); }
.kparts__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 6vh, 70px); text-align: center; }
.kparts__head .eyebrow { margin-bottom: 20px; }
.kparts__head .rdisplay { margin-inline: auto; }
.kparts__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px);
}
.kpart {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px); border-radius: 26px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.kpart:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.kpart__media {
  aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 26px;
  border-radius: 18px; background: radial-gradient(circle at 50% 40%, #FBFAF8, #ECEAE5);
  padding: 12%;
}
.kpart__media--wide { padding: 8% 5%; }
/* photos des pièces : elles remplissent le cadre */
.kpart__media--photo { padding: 0; overflow: hidden; }
.kpart__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kpart__media .kart { filter: drop-shadow(0 18px 22px rgba(17,17,17,.22)); }
.kpart__n { font-size: .74rem; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.kpart h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; }
.kpart p { margin-top: 10px; font-size: .97rem; line-height: 1.6; color: var(--ink-60); }
.kparts__grid [data-r]:nth-child(2) { transition-delay: .1s; }
.kparts__grid [data-r]:nth-child(3) { transition-delay: .2s; }

/* ------------------------------------------------------------
   4. ASSEMBLAGE — scène épinglée, pilotée par le défilement
------------------------------------------------------------ */
.kbuild {
  position: relative; height: 290vh;
  background: linear-gradient(#EFEEEA, #E7E5E0);
}
.kbuild__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(84px, 12vh, 120px) var(--gut) clamp(24px, 4vh, 44px);
  overflow: hidden;
}
.kbuild__head { text-align: center; }
.kbuild__head .eyebrow { margin-bottom: 14px; }
.kbuild__head .rdisplay { margin-inline: auto; }
/* v13 : la scène occupe exactement la place laissée entre le titre
   et les étapes, et n'en sort jamais (elle passait sur le texte
   quand l'écran était peu haut). Le dessin s'y inscrit sans être
   déformé ; tous ses mouvements restent dans son cadre. */
.kbuild__stage { position: relative; min-height: 0; overflow: hidden; margin: 14px 0 18px; }
.kart--build {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; overflow: hidden;
}
/* les mouvements (caméra, descente des pièces, plaquettes, onde)
   sont écrits par kit-finisher.js en attribut transform SVG */
.kart__magnet { animation: kGlow 1.8s ease-in-out infinite; }
@keyframes kGlow { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.kart__clac { fill: none; stroke: var(--kc); stroke-width: .9; opacity: 0; }

.kbuild__steps {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1080px; width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 34px);
}
.kstep {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 16px; border-top: 2px solid var(--ink-14);
  color: var(--ink-40);
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.kstep b { font-size: 1.02rem; font-weight: 700; color: inherit; letter-spacing: -0.01em; }
.kstep__n { font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.kstep__t { font-size: .9rem; line-height: 1.5; }
.kstep.is-on { color: var(--ink); border-color: var(--accent); }
.kstep.is-on .kstep__n { color: var(--accent); }

/* ------------------------------------------------------------
   5. SOUS LE CAPOT
------------------------------------------------------------ */
.keng { background: var(--noir); padding: var(--sp) var(--gut); }
.keng__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 7vh, 80px); text-align: center; }
.keng__head .eyebrow { margin-bottom: 20px; }
.keng__head .rdisplay { margin-inline: auto; }
.keng__grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center;
}
.keng__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.keng__fig figcaption { font-size: .74rem; font-style: italic; color: rgba(255,255,255,.38); }
.kside { width: min(100%, 440px); height: auto; overflow: visible; }
.kside text { font-family: var(--font); }
.kside__ground { stroke: rgba(255,255,255,.2); stroke-width: .5; }
.kside__part { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.75); stroke-width: .55; stroke-linejoin: round; }
.kside__part--lame { fill: rgba(255,255,255,.12); }
.kside__part--oct { fill: rgba(255,255,255,.07); }
.kside__hidden { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.45); stroke-width: .45; stroke-dasharray: 1.4 1; }
.kside__plate { fill: var(--kc); opacity: .9; }
.kside__magnet { fill: var(--accent); }
.kside__steel { fill: #C9CDD3; }
.kside__ref { stroke: rgba(255,255,255,.3); stroke-width: .4; stroke-dasharray: 1.6 1.2; }
.kside__arc { fill: none; stroke: var(--accent); stroke-width: .6; }
.kside__dim { stroke: rgba(255,255,255,.35); stroke-width: .35; }
.kside__lbl { fill: rgba(255,255,255,.6); font-size: 4.2px; font-weight: 600; letter-spacing: .1px; }
.kside__lead { stroke: rgba(200,154,75,.6); stroke-width: .35; }
.kside__pins circle { fill: var(--accent); }
.kside__pins text { fill: #1a1206; font-size: 4.6px; font-weight: 800; }

.keng__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 34px); }
.keng__list li { display: flex; gap: 18px; align-items: flex-start; }
.keng__n {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  clip-path: var(--oct); background: var(--accent);
  font-size: .8rem; font-weight: 800; color: #1a1206;
}
.keng__list h3 { font-size: 1.08rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.keng__list p { margin-top: 6px; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.55); }
.keng__list [data-r]:nth-child(2) { transition-delay: .08s; }
.keng__list [data-r]:nth-child(3) { transition-delay: .16s; }
.keng__list [data-r]:nth-child(4) { transition-delay: .24s; }

.keng__figs {
  max-width: 1120px; margin: clamp(60px, 10vh, 120px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: clamp(34px, 5vh, 54px); border-top: 1px solid rgba(255,255,255,.1);
}
.kfig { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.kfig__n {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; color: #fff;
}
.kfig__n em { font-style: normal; font-size: .42em; font-weight: 700; margin-left: .12em; color: var(--accent); letter-spacing: -0.01em; }
.kfig__l { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.keng__figs [data-r]:nth-child(2) { transition-delay: .08s; }
.keng__figs [data-r]:nth-child(3) { transition-delay: .16s; }
.keng__figs [data-r]:nth-child(4) { transition-delay: .24s; }

/* ------------------------------------------------------------
   6. PERSONNALISATION
------------------------------------------------------------ */
/* v13 : placée juste après « Trois pièces » (même fond) : fond blanc pour les distinguer */
.kplates { background: #fff; padding: var(--sp) var(--gut); text-align: center; }
.kplates__head { max-width: var(--maxw); margin: 0 auto; }
.kplates__head .eyebrow { margin-bottom: 20px; }
.kplates__head .rdisplay { margin-inline: auto; }
.kplates__head .rlead { margin-top: 26px; }
.kplates__zoom {
  max-width: 1180px; margin: clamp(44px, 7vh, 80px) auto 0;
  filter: drop-shadow(0 34px 40px rgba(17,17,17,.28));
}
/* curseur de frappe pendant l'écriture des plaquettes */
.kart__txt.is-typing { animation: kCaret .9s steps(1) infinite; }
@keyframes kCaret { 50% { opacity: .55; } }

.kcolors { margin-top: clamp(36px, 5vh, 54px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kcolors__sw { justify-content: center; margin-top: 0; }
.kcolors__read { font-size: .92rem; color: var(--ink-60); max-width: 52ch; }
.kcolors__read b { color: var(--ink); }

.kplates__facts {
  list-style: none; padding: 0;
  max-width: 900px; margin: clamp(46px, 7vh, 80px) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.kplates__facts li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.kplates__facts b { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; }
.kplates__facts span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }

/* ------------------------------------------------------------
   7. LES DEUX FORMULES
------------------------------------------------------------ */
.kcompare { background: #fff; padding: var(--sp) var(--gut); }
.kcompare__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 6vh, 70px); text-align: center; }
.kcompare__head .eyebrow { margin-bottom: 20px; }
.kcompare__head .rdisplay { margin-inline: auto; }
.kcompare__head .rlead { margin-top: 24px; }
.kcompare__grid {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: stretch;
}
.kplan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 44px); border-radius: 28px;
  border: 1px solid var(--line); background: var(--bg);
}
.kplan--hero { background: var(--noir); border-color: rgba(200,154,75,.5); color: #fff; }
.kplan__badge {
  position: absolute; top: 22px; right: 22px;
  padding: 6px 12px; border-radius: 100px;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #1a1206; background: var(--accent);
}
.kplan__name { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }
.kplan--hero .kplan__name { color: var(--accent); }
.kplan__price { margin-top: 12px; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.kplan__pitch { margin-top: 12px; font-size: .98rem; line-height: 1.5; color: var(--ink-60); }
.kplan--hero .kplan__pitch { color: rgba(255,255,255,.6); }
.kplan__list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kplan__list li { position: relative; padding-left: 28px; font-size: .94rem; line-height: 1.45; }
.kplan__list li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 16px; height: 16px; clip-path: var(--oct); background: var(--accent);
}
.kplan__list li::after {
  content: ""; position: absolute; left: 5px; top: calc(.2em + 4px);
  width: 6px; height: 4px; border-left: 1.6px solid #1a1206; border-bottom: 1.6px solid #1a1206;
  transform: rotate(-45deg);
}
.kplan__list li.is-off { color: var(--ink-40); text-decoration: line-through; text-decoration-color: var(--ink-14); }
.kplan__list li.is-off::before { background: var(--ink-14); }
.kplan__list li.is-off::after { border: 0; width: 8px; height: 1.6px; left: 4px; top: calc(.2em + 7px); background: var(--ink-40); transform: none; }
.kplan__btn { margin-top: 30px; align-self: flex-start; }
.kplan--hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.kcompare__grid [data-r]:nth-child(2) { transition-delay: .1s; }

/* ------------------------------------------------------------
   8. ACHAT
------------------------------------------------------------ */
.kbuy { position: relative; background: var(--noir); padding: var(--sp) var(--gut); border-top: 1px solid rgba(255,255,255,.07); }
.kbuy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 40% at 50% 0%, rgba(200,154,75,.10), transparent 70%);
}
.kbuy__head { position: relative; text-align: center; margin-bottom: clamp(40px, 6vh, 70px); }
.kbuy__head .eyebrow { margin-bottom: 20px; }
.kbuy__head .rdisplay { margin-inline: auto; }
.kbuy__head .rlead { margin-top: 22px; }
.kbuy__grid {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: start;
}
.kbuy__sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.kbuy__card {
  border-radius: 22px; padding: clamp(18px, 3vw, 36px) clamp(12px, 2vw, 26px);
  background: radial-gradient(120% 90% at 50% 10%, #FFFFFF 0%, #F1F0EC 60%, #E4E2DC 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.kbuy__card--photo { padding: 0; overflow: hidden; background: #E9E6E1; }
.kbuy__photo { display: block; width: 100%; height: auto; }
.kbuy__caption { text-align: center; display: flex; flex-direction: column; gap: 5px; }
.kbuy__caption span { font-size: .9rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.kbuy__caption em { font-style: italic; font-size: .74rem; color: rgba(255,255,255,.38); }

/* aperçu : pièces ou emplacements, selon la formule */
.kart__blades { opacity: 0; transition: opacity .5s var(--ease); }
.kart__pieces { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.kart__ghosts { opacity: 0; transition: opacity .5s var(--ease); }
.kart__ghost { fill: none; stroke: rgba(17,17,17,.38); stroke-width: .7; stroke-dasharray: 2.4 1.8; }
.kart__ghost-lbl { fill: rgba(17,17,17,.42); font-size: 4.2px; font-weight: 700; letter-spacing: 1.2px; }
.is-support .kart__blades { opacity: 1; }
.is-support .kart__pieces { opacity: 0; transform: translateY(-14px); }
.is-support .kart__ghosts { opacity: 1; }
.is-support .kart__shadows { opacity: 0; }
.kart__shadows { transition: opacity .5s var(--ease); }

.kbuy__form { gap: 26px; }
/* numérotation automatique des étapes : un bloc masqué (course,
   en formule « support seul ») ne compte pas */
.kbuy__form { counter-reset: kstep; }
.kstep-title::before { counter-increment: kstep; content: counter(kstep) " · "; }

.kformula { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kformula__opt { cursor: pointer; }
.kformula__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.kformula__box {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.kformula__opt:hover .kformula__box { border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.kformula__opt input:checked + .kformula__box {
  border-color: var(--accent); background: rgba(200,154,75,.10);
  box-shadow: 0 0 0 1px rgba(200,154,75,.35) inset;
}
.kformula__opt input:focus-visible + .kformula__box { box-shadow: 0 0 0 3px rgba(200,154,75,.3); }
.kformula__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kformula__top b { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.kformula__top em { font-style: normal; font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.kformula__desc { font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.48); }

/* pastilles de couleur sur fond sombre : contour clair */
.kbuy .psw__c { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.kbuy .psw.is-on .psw__c { box-shadow: 0 0 0 2px #fff; }

.kbuy__read { font-size: .86rem; color: rgba(255,255,255,.5); }
.kbuy__read b { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------
   9. QUESTIONS
------------------------------------------------------------ */
.kfaq { background: var(--bg); padding: var(--sp) var(--gut); }
.kfaq__head { max-width: 860px; margin: 0 auto clamp(30px, 5vh, 50px); }
.kfaq__head .eyebrow { margin-bottom: 18px; }
.kfaq__list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.kq { border-bottom: 1px solid var(--line); }
.kq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 2px;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 700; letter-spacing: -0.02em;
}
.kq summary::-webkit-details-marker { display: none; }
.kq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--ink-40); border-bottom: 2px solid var(--ink-40);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.kq[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--accent); }
.kq p { padding: 0 2px 26px; max-width: 64ch; font-size: 1rem; line-height: 1.65; color: var(--ink-60); }
.kq p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .kparts__grid { grid-template-columns: 1fr 1fr; }
  /* la 3e carte, seule sur sa ligne, garde la taille des deux autres */
  .kparts__grid .kpart:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(8px, 1.1vw, 14px)); }
  .keng__grid { grid-template-columns: 1fr; }
  .keng__figs { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .kbuy__grid { grid-template-columns: 1fr; }
  .kbuy__sticky { position: relative; top: 0; }
}
@media (max-width: 720px) {
  .kparts__grid { grid-template-columns: 1fr; }
  .kparts__grid .kpart:last-child { width: auto; justify-self: stretch; }
  .kpart__media--wide { aspect-ratio: 16 / 10; }
  .kbuild { height: 260vh; }
  .kbuild__pin { padding-top: 84px; }
  .kbuild__steps { grid-template-columns: 1fr; gap: 0; min-height: 6.6em; }
  /* sur téléphone, seule l'étape en cours garde son texte */
  .kstep { border-top: 0; padding-top: 0; }
  .kstep:not(.is-on) { display: none; }
  .kstep.is-on { border-left: 2px solid var(--accent); padding-left: 14px; }
  .kplates__facts { grid-template-columns: 1fr; gap: 14px; }
  .kcompare__grid { grid-template-columns: 1fr; }
  .kformula { grid-template-columns: 1fr; }
  .kfig__n { font-size: 2.6rem; }
}

/* ------------------------------------------------------------
   MOUVEMENT RÉDUIT : tout est posé d'emblée, rien ne bouge
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .khero__stage .kart { opacity: 1; animation: none; transform: none; }
  .kart--hero .kart__trace { stroke-dashoffset: 0; animation: none; }
  .kart--hero .kart__trace-glow { opacity: 1; animation: none; }
  .khero__eyebrow i, .kart__magnet, .kart__txt.is-typing { animation: none; }
  .kwords__text .kw { color: var(--ink); transition: none; }
  .kbuild { height: auto; }
  .kbuild__pin { position: relative; height: auto; gap: 30px; }
  .kbuild__stage { position: static; overflow: visible; }
  .kart--build { position: static; height: auto; width: 100%; max-height: 70vh; }
  .kpart, .kformula__box, .kart__pieces, .kart__blades, .kart__ghosts { transition: none; }
}

/* v12 : SUMO YŪSHŌ en préparation (liste d'attente) */
.kplan__price--sm { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.kbuy__done { font-size: .98rem; font-weight: 600; color: var(--lume, #CFF24A); }