/* ============================================================
   KUERKOD — Maquette principale · clone social-business.fr
   Palette Kuerkod exclusive (jamais #226D7A / #22B8D1) · typo Fraunces/Inter.
   Ordre : :root (tokens consolidés) → reset → utilitaires → sections
           → configurateur → motion → responsive global.
   ============================================================ */

/* ============================================================
   1 · :root — variables Kuerkod (seule différence vs benchmark)
   ============================================================ */
:root{
  /* ---- Couche 1 · Rampe brute (une seule teinte : bleu, hue 220→232) ---- */
  --ku-blue-25:#F5F8FF; --ku-blue-50:#EAF1FF; --ku-blue-100:#D7E3FF;
  --ku-blue-200:#B4C8FF; --ku-blue-300:#89A6FF; --ku-blue-400:#5B7CFF;
  --ku-blue-500:#2C4BFF; --ku-blue-600:#1E38DB; --ku-blue-700:#1A2FA6;
  --ku-blue-800:#152470; --ku-blue-900:#0E1845; --ku-blue-950:#070C1E;
  --ku-ink-25:#F6F8FC; --ku-ink-50:#EEF1F8; --ku-ink-100:#E2E7F2;
  --ku-ink-200:#CBD3E6; --ku-ink-300:#A6B1CE; --ku-ink-400:#7C88A8;
  --ku-ink-500:#5A6684; --ku-ink-600:#414C68; --ku-ink-700:#2C3550;

  /* ---- Couche 2 · Alias sémantiques (clair — défaut) ---- */
  --brand:#2C4BFF; --brand-hover:#1E38DB; --brand-active:#1A2FA6; --brand-soft:#EAF1FF; --on-brand:#FFFFFF;
  --accent:#1E3AE0;   /* accent secondaire : bleu plus profond → tension des dégradés/CTA (jamais une 2e teinte) */
  --bg:#F5F8FF; --bg-alt:#EAF1FF; --surface:#FFFFFF; --surface-sunken:#F6F8FC;
  --border:#E2E7F2; --border-strong:#CBD3E6;
  --text:#0E1845; --text-soft:#3D4A66; --text-muted:#5A6684;
  --star:#FFB800; --star-onlight:#C77400; --focus-ring:#2C4BFF;
  /* Sombre (footer, CTA final, nav, fonds nuit) */
  --bg-dark:#070C1E; --surface-dark:#0E1845; --surface-dark-2:#152470;
  --text-on-dark:#D7E3FF; --text-soft-on-dark:#A6B1CE; --link-on-dark:#5B7CFF;
  --border-on-dark:rgba(255,255,255,.10);

  /* ---- Couche 3 · Utilitaires neutres conservés ---- */
  --white:#fff; --paper:#fff; --line:#E2E7F2;

  /* ---- Typographie ---- */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ---- Layout ---- */
  --wrap:1080px;

  /* ---- Élévation Fluent (double-calque key+ambient) ---- */
  --el-2:0 1px 2px rgba(15,23,43,.14),0 0 2px rgba(15,23,43,.12);
  --el-4:0 2px 4px rgba(15,23,43,.13),0 0 2px rgba(15,23,43,.11);
  --el-8:0 4px 8px rgba(15,23,43,.12),0 0 2px rgba(15,23,43,.10);
  --el-16:0 8px 16px rgba(15,23,43,.12),0 0 2px rgba(15,23,43,.10);
  --el-28:0 14px 28px rgba(15,23,43,.20),0 0 8px rgba(15,23,43,.14);
  --el-64:0 32px 64px rgba(15,23,43,.22),0 0 8px rgba(15,23,43,.16);
  --el-brand-4:0 2px 4px rgba(44,75,255,.22),0 0 2px rgba(44,75,255,.14);
  --el-brand-8:0 4px 8px rgba(44,75,255,.24),0 0 2px rgba(44,75,255,.16);
  --el-brand-16:0 8px 16px rgba(44,75,255,.28),0 0 2px rgba(44,75,255,.16);

  /* ---- Rayons (échelle unique cohérente) ---- */
  --r-none:0; --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* ---- Motion (tokens Fluent connected) ---- */
  --dur-ultrafast:50ms; --dur-faster:100ms; --dur-fast:150ms; --dur-normal:200ms;
  --dur-gentle:250ms; --dur-slow:300ms; --dur-slower:400ms;
  --curve-easyease:cubic-bezier(.33,0,.67,1);
  --curve-decel:cubic-bezier(0,0,0,1); --curve-decel-max:cubic-bezier(.1,.9,.2,1);
  --curve-accel:cubic-bezier(1,0,1,1); --curve-accel-max:cubic-bezier(.9,.1,1,.2);
  --ease:cubic-bezier(0,0,0,1); /* legacy → alias decel */
}

/* ============================================================
   2 · Reset & base
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:16px;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
sup{font-size:.55em;top:-.55em;position:relative}
svg{flex:none}

/* ============================================================
   3 · Utilitaires partagés
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.section{padding:6% 0;position:relative}
.center{text-align:center}
.bg-sky{background:var(--bg-alt)}
.bg-sky-2{background:var(--ku-blue-100)}
.bg-sky-3{background:var(--surface-sunken)}
.bg-paper{background:var(--paper)}

.section__head{text-align:center;max-width:46em;margin:0 auto 46px}
/* Rupture de rythme : quelques sections ouvrent alignées à gauche plutôt que
   centrées, pour casser la régularité mécanique « tout centré ». */
.section__head--start{text-align:left;margin-left:0;max-width:38em}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:16px;font-weight:700;
  color:var(--brand);margin:0 0 14px;
}
.eyebrow--c{display:flex;justify-content:center}
.eyebrow--light{color:var(--ku-blue-400)}

/* Signature Kuerkod — hexagone de marque en CONTOUR, leitmotiv des intros de
   section. Toujours en --brand, quel que soit le ton de l'eyebrow qui l'accueille. */
.ku-hex{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round}
.roi-pill .ku-hex{width:14px;height:14px}
.config__cat .ku-hex{width:12px;height:12px;vertical-align:-1px}

/* Séparateur signature : l'hexagone posé sur un filet bleu qui s'estompe. */
.ku-hexrule{display:flex;align-items:center;justify-content:center;gap:18px;
  max-width:1120px;margin:0 auto;padding:22px 24px}
.ku-hexrule::before,.ku-hexrule::after{content:"";height:1px;flex:1;max-width:160px}
.ku-hexrule::before{background:linear-gradient(90deg,transparent,var(--ku-blue-100))}
.ku-hexrule::after{background:linear-gradient(90deg,var(--ku-blue-100),transparent)}
.ku-hexrule .ku-hex{width:22px;height:22px;stroke-width:1.6}

.h2{
  font-weight:700;font-size:clamp(30px,3.4vw,38px);
  line-height:1.2;color:var(--text);margin:0;
}
.hl{color:var(--brand)}
.lead{
  font-size:16px;color:var(--text-soft);
  max-width:40em;line-height:1.5;margin:14px auto 0;
}
.link-more{color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:6px}

/* ---- Boutons globaux ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;padding:12px 30px;border-radius:var(--r-pill);
  cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;
  box-shadow:0 7px 22px -6px rgba(44,75,255,.2);
  transition:all .2s;
}
.btn::after{content:'→';opacity:0;margin-left:-1em;transition:all .2s}
.btn:hover{padding:12px 2em 12px .7em}
.btn:hover::after{opacity:1;margin-left:0}
.btn--lg{font-size:16px}
.btn--sm{font-size:14px}
.btn--cyan,.btn--primary{background:var(--brand);color:#fff}
.btn--teal{background:var(--brand);color:#fff}
.btn--ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.btn--ghost:hover{background:rgba(238,241,255,.5)}
.btn--white{background:#fff;color:var(--brand)}
.btn--white:hover{color:var(--brand-hover)}
.btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ============================================================
   3.bis · Composants .ksp — carrousel d'avis
   ============================================================ */

/* Pilule sombre sous le titre témoignages */
/* Variante BLEUE du motif pilule (décliné du fond sombre de #comment) —
   casse la monotonie inter-sections ; la coche blanche reste lisible sur le bleu. */
.ksp__pill{
  display:inline-block;background:var(--brand);color:#fff;border-radius:var(--r-pill);
  padding:7px 24px;max-width:60%;margin:18px auto 0;font-size:15px;line-height:1.5;
  box-shadow:0 10px 24px -12px rgba(44,75,255,.55);
  transition:transform 300ms ease;
}
.ksp__pill:hover{transform:scale(1.05)}

/* Agrégat honnête sous le titre — étoiles or + promesse qualitative (aucun chiffre non sourcé) */
.ksp__agg{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;margin:16px auto 0;font-size:16px;color:var(--text-soft)}
.ksp__agg-txt b{color:var(--text);font-weight:800}
/* Cadre d'honnêteté VISIBLE au-dessus des cartes : le visiteur voit que ce sont
   des exemples illustratifs, pas des relevés d'avis certifiés. */
.ksp__illus{
  display:flex;align-items:center;justify-content:center;gap:9px;
  max-width:660px;margin:22px auto 16px;padding:11px 20px;
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);border-radius:var(--r-pill);
  font-size:13.5px;line-height:1.45;color:var(--text-soft);text-align:left;
}
.ksp__illus b{color:var(--brand);font-weight:800}
.ksp__illus-ic{flex:none;color:var(--brand)}
/* Mention d'honnêteté : les cartes sont des exemples, pas des avis nominatifs vérifiés */
.ksp__note{text-align:center;margin:18px auto 0;font-size:12.5px;color:var(--text-muted)}

/* Carrousel horizontal d'avis Google (défilement CSS infini) */
.ksp__tems-marq{overflow:hidden;margin-top:8px}
.ksp__tems-track{display:flex;width:max-content;animation:kspTems 60s linear infinite}
.ksp__tems-marq:hover .ksp__tems-track{animation-play-state:paused}
.ksp__tems-set{display:flex;gap:20px;padding-right:20px;flex:none}
.gtem{
  width:340px;flex:none;background:#fff;border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--el-4);display:flex;flex-direction:column;gap:10px;
}
/* Largeurs variées : casse l'effet « cartes clonées » du carrousel */
.gtem--tight{width:300px}
.gtem--wide{width:392px}
/* Métrique-clé mise en avant dans la citation (bleu marque) */
.gtem__hl{color:var(--brand);font-weight:800}
.gtem__head{display:flex;align-items:center;gap:10px}
/* Avatar métier : hexagone bleu (même leitmotiv que les mini-hexagones du hero)
   + pictogramme de secteur en blanc — plus incarné que des initiales génériques. */
.gtem__av{width:44px;height:44px;flex:none;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,var(--accent),var(--brand));color:#fff}
.gtem__av svg{width:22px;height:22px;display:block}
.gtem__who{flex:1;min-width:0}
.gtem__who b{display:block;color:var(--text);font-size:14px;font-weight:800}
.gtem__who span{color:var(--text-muted);font-size:12.5px}
.gtem__g{width:24px;height:24px;flex:none;object-fit:contain}
.gtem__stars{color:var(--star-onlight);letter-spacing:2px;font-size:16px}
.gtem p{font-size:14px;line-height:1.55;color:var(--text-soft);margin:0}
@keyframes kspTems{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   4 · SECTION .kktop — Barre promo + Navbar mega-menu + Hero
   ============================================================ */
.kktop{
  --kk-e: cubic-bezier(.22,.7,.2,1);
  font-family:var(--font-body);
  color:var(--text);line-height:1.6;position:relative;
}
.kktop img{display:block;max-width:100%}
.kktop a{color:inherit;text-decoration:none}
.kktop button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.kktop svg{flex:none}

/* ---- Promo bar (benchmark : bandeau blanc, texte sombre) ---- */
.kktop .kk-promo{
  background:#fff;color:var(--text);font-size:14px;font-weight:600;
  line-height:1em;padding:10px 16px;text-align:center;display:block;
}

/* ---- Navbar (pilule sombre ; fixée au scroll, bande transparente) ---- */
.kktop .kk-nav{
  position:relative;z-index:90;
  background:var(--bg-dark);padding:5px 0 20px;
}
.kktop .kk-nav.is-fixed .kk-nav__row{
  position:fixed;top:10px;left:0;right:0;z-index:95;margin:0 auto;
}
.kktop .kk-nav__row{
  width:95%;max-width:1080px;margin:15px auto 0;padding:0 30px;
  display:flex;align-items:center;height:70px;gap:6px;border-radius:var(--r-pill);
  background:radial-gradient(ellipse at top, rgba(15,23,43,.91) 1%, rgba(10,14,30,.92) 22%, rgba(1,5,10,.85) 100%);
  box-shadow:0 12px 18px -6px rgba(15,23,43,.7);
  transition:box-shadow 300ms ease;
}
.kktop .kk-nav__row:hover{
  background:radial-gradient(ellipse at top,#0F172B 0%,#0A1440 40%,#01050a 100%);
  box-shadow:0 12px 18px -6px rgba(44,75,255,.18);
}
.kktop .kk-brand{display:flex;align-items:center;margin-right:14px}
.kktop .kk-brand__logo{height:40px;width:auto;filter:brightness(0) invert(1);transition:transform .25s var(--kk-e)}
.kktop .kk-brand:hover .kk-brand__logo{transform:translateY(-1px)}
.kktop .kk-brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

.kktop .kk-menu{display:flex;align-items:center;justify-content:center;flex:1;gap:2px}
.kktop .kk-menu__item{position:relative}
.kktop .kk-menu__link{
  display:flex;align-items:flex-start;gap:4px;padding:0 22px 0 0;
  font-size:14px;font-weight:600;color:#fff;border-radius:0;background:none;
  transition:color .3s ease;
}
.kktop .kk-menu__link:hover{color:var(--bg-alt);background:none}
.kktop .kk-menu__link:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Détail de marque : le caret générique devient un micro-hexagone Kuerkod
   (brand), qui pivote au survol pour signaler l'ouverture du menu. */
.kktop .kk-menu__caret{
  width:10px;height:11px;margin-top:4px;align-self:flex-start;
  background:var(--brand);
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
  transition:transform .25s var(--kk-e),background .25s var(--kk-e);
}
.kktop .kk-menu__item:hover .kk-menu__caret,
.kktop .kk-menu__item:focus-within .kk-menu__caret{
  transform:rotate(30deg);background:var(--ku-blue-300);
}
@media (prefers-reduced-motion:reduce){
  .kktop .kk-menu__caret{transition:none}
  .kktop .kk-menu__item:hover .kk-menu__caret,
  .kktop .kk-menu__item:focus-within .kk-menu__caret{transform:none}
}

.kktop .kk-dd{
  position:absolute;top:calc(100% - 1px);left:0;width:240px;min-width:0;
  background:var(--text);border-top:3px solid var(--brand);border-radius:0;padding:20px 0;
  box-shadow:0 2px 5px rgba(15,23,43,.1);
  opacity:0;visibility:hidden;transform:none;
  transition:opacity .3s ease,visibility .3s;
  z-index:5;
}
.kktop .kk-menu__item:hover .kk-dd,
.kktop .kk-menu__item:focus-within .kk-dd{opacity:1;visibility:visible}
.kktop .kk-dd__link{
  display:block;font-size:14px;font-weight:600;color:#fff;padding:6px 20px;
  transition:background .15s var(--kk-e),opacity .15s var(--kk-e);
}
.kktop .kk-dd__link:hover,.kktop .kk-dd__link:focus-visible{background:rgba(15,23,43,.03);opacity:.7;color:#fff;outline:none}

.kktop .kk-nav__end{position:relative;margin-left:auto;display:flex;align-items:center;gap:6px}
.kktop .kk-login{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:400;color:#fff;
  background:transparent;border:0;border-radius:0;padding:0;
  margin-right:30px;transition:opacity .3s ease;
}
.kktop .kk-login:hover{opacity:.7;color:#fff}
.kktop .kk-login:focus-visible{outline:2px solid #fff;outline-offset:2px}

.kktop .kk-burger{display:none;flex-direction:column;gap:5px;padding:10px 6px}
.kktop .kk-burger span{width:24px;height:2.4px;background:#fff;border-radius:2px;transition:transform .25s var(--kk-e),opacity .2s}
.kktop .kk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.kktop .kk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kktop .kk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---- Boutons kk ---- */
.kktop .kk-btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  border-radius:var(--r-pill);padding:14px 26px;line-height:1;white-space:nowrap;
  transition:transform .2s var(--kk-e),box-shadow .2s var(--kk-e),background .2s var(--kk-e),color .2s var(--kk-e);
}
.kktop .kk-btn--lg{padding:17px 32px;font-size:16px}
.kktop .kk-btn--sm{padding:11px 20px;font-size:14px}
.kktop .kk-btn--cyan{background:var(--brand);color:#fff;box-shadow:0 12px 26px -10px rgba(44,75,255,.45)}
.kktop .kk-btn--cyan:hover{background:var(--ku-blue-400);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(61,91,255,.55)}
.kktop .kk-btn--ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.kktop .kk-btn--ghost:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.kktop .kk-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.kktop .kk-btn--cyan:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px var(--accent)}

/* ---- Menu mobile (panneau déroulant sous le burger) ---- */
.kktop .kk-mob{
  position:absolute;top:44px;right:0;width:300px;z-index:120;
  background:var(--text);border-top:3px solid var(--brand);padding:5%;
  box-shadow:0 2px 5px rgba(15,23,43,.1);
  opacity:0;visibility:hidden;transition:opacity .3s var(--kk-e),visibility .3s;
}
.kktop .kk-mob[hidden]{display:none}
.kktop .kk-mob.is-open{opacity:1;visibility:visible}
.kktop .kk-mob__main,
.kktop .kk-mob__sub{
  display:block;font-size:14px;color:#fff;padding:10px 5%;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .15s var(--kk-e),opacity .15s var(--kk-e);
}
.kktop .kk-mob__main{font-weight:600}
.kktop .kk-mob__sub{padding-left:14%}
.kktop .kk-mob__main:hover,.kktop .kk-mob__sub:hover{background:rgba(15,23,43,.03);opacity:.7;color:#fff}

/* ---- Hero ---- */
.kktop .kk-hero{
  position:relative;overflow:hidden;
  background:#fff;
}
/* Composition asymétrique : la carte-copie (contenue) sert de socle, la photo
   duotone est plus large, chevauche son coin droit et déborde en haut/bas. */
.kktop .kk-hero__grid{
  position:relative;z-index:1;max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:0.96fr 1.14fr;gap:0;align-items:stretch;
  padding:92px 0 64px;
}
/* Carte-copie volontairement plus PROFONDE que le fond duotone de la photo :
   la photo (bleu clair) chevauche visiblement ce socle bleu médium. */
.kktop .kk-hero__copy{
  position:relative;z-index:1;
  background:var(--ku-blue-100);border-radius:var(--r-xl);padding:48px 64px 48px 40px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.kktop .kk-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:var(--r-xl);padding:8px 18px;
  font-size:16px;font-weight:500;color:var(--brand);line-height:1.3;margin:0 0 14px;
}
.kktop .kk-display{font-weight:700;font-size:clamp(30px,4.8vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--text);margin:0}
.kktop .kk-lead{font-size:16px;color:var(--text);max-width:40em;line-height:1.5;margin:18px 0 26px}
.kktop .kk-lead b{color:var(--text);font-weight:700}

.kktop .kk-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.kktop .kk-hero__cta > span{margin:0 10px;font-size:15px;color:var(--text)}
.kktop .kk-hero__cta .kk-btn{
  font-size:15px;font-weight:600;padding:12px 30px;gap:0;
  transition:all .2s;
}
.kktop .kk-hero__cta .kk-btn::before,
.kktop .kk-hero__cta .kk-btn::after{content:none}
.kktop .kk-hero__cta .kk-btn:hover{transform:none;padding:12px 2em 12px .7em}
.kktop .kk-hero__cta .kk-btn--cyan{
  background:var(--brand);color:#fff;border-radius:var(--r-pill);
  box-shadow:0 7px 22px -6px rgba(44,75,255,.2);
}
.kktop .kk-hero__cta .kk-btn--cyan:hover{background:var(--brand);box-shadow:0 7px 22px -6px rgba(44,75,255,.2)}
.kktop .kk-hero__cta .kk-btn--ghost{
  background:#fff;border:2px solid var(--brand);color:var(--brand);
  border-radius:var(--r-pill);box-shadow:none;
}
.kktop .kk-hero__cta .kk-btn--ghost:hover{background:#fff;color:var(--brand)}

.kktop .kk-hero__blurb{display:flex;align-items:center;gap:14px;padding-top:16px}
.kktop .kk-hero__avatars{width:150px;height:auto;flex:none;display:block}
.kktop .kk-hero__blurb-title{font-size:15px;font-weight:700;color:var(--text);margin:0}
.kktop .kk-hero__blurb-sub{font-size:16px;color:var(--brand);margin:0}

.kktop .kk-hero__media{
  position:relative;z-index:2;
  margin-left:-7%;margin-right:-3%;
}
/* Halo de marque derrière le média : lueur bleue diffuse qui détache la gamme
   produit du fond blanc du hero (meilleure séparation figure/fond). Clippée par
   overflow:hidden de .kk-hero → aucun débordement horizontal. */
.kktop .kk-hero__media::before{
  content:"";position:absolute;z-index:-1;inset:-7% -5% -9% -3%;pointer-events:none;
  background:radial-gradient(58% 56% at 56% 46%,rgba(44,75,255,.20),rgba(44,75,255,.05) 62%,transparent 74%);
  filter:blur(6px);
}
/* Ombre portée franche et directionnelle : la photo projette vers le bas-gauche
   SUR la carte-copie, ce qui rend le chevauchement asymétrique lisible. Renforcée
   d'un liseré bleu net + d'une lueur brand ascensionnelle → point focal produit
   n°2 assumé (relief Fluent), sans jamais dépasser le H1 Fraunces (focal n°1). */
.kktop .kk-hero__shot{
  position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  width:100%;height:100%;
  /* Liseré bleu net (détoure la figure) + deux calques directionnels bespoke +
     lueur brand ascensionnelle + profondeur/ambiance --el-64. */
  box-shadow:
    0 0 0 1px rgba(44,75,255,.14),
    -22px 0 44px -20px rgba(14,24,69,.62),
    -30px 34px 60px -30px rgba(14,24,69,.52),
    0 30px 62px -26px rgba(44,75,255,.30),
    var(--el-64);
}
/* Cadrage : X=62% centre la composition sur la carte « Votre avis compte ! »
   (point focal du produit) et affiche la gamme complète sans tronquer de plaque
   sur les bords. */
.kktop .kk-hero__shot img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;
  /* Densifie très légèrement le duotone (visuel un peu pâle) sans virer la teinte. */
  filter:saturate(1.07) contrast(1.035);}
/* Scrim de marque : léger dégradé bleu qui frange le coin haut-gauche (côté
   chevauchement avec la carte-copie), voile discrètement la rangée haute et
   fonce le bas. Renforce la séparation photo/copie, donne de la profondeur et
   fait ressortir le H1 Fraunces comme point focal — sans masquer la gamme. */
.kktop .kk-hero__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
  background:
    linear-gradient(118deg,rgba(44,75,255,.30) 0%,rgba(44,75,255,.10) 22%,transparent 44%),
    linear-gradient(180deg,rgba(44,75,255,.18) 0%,transparent 30%),
    linear-gradient(0deg,rgba(14,24,69,.28) 0%,rgba(14,24,69,.07) 14%,transparent 32%);
  mix-blend-mode:multiply;
}
.kktop .kk-hero__video{
  position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:var(--r-xl);
}

/* =====================================================================
   MOMENT SIGNATURE — tap NFC → avis Google 5 étoiles qui surgit.
   100 % CSS/SVG inline (aucun asset, aucun JS). Overlay absolu contenu
   par l'overflow:hidden du .kk-hero__shot : 0 CLS, 0 débordement, ne
   touche pas à l'image LCP. Boucle lente (6.6s) et discrète.
   ===================================================================== */
.kktop .kk-sig{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;overflow:hidden;
}
/* --- Point de tap NFC (carte + ondes) --- */
.kktop .kk-sig__tap{
  position:absolute;left:24%;bottom:21%;
  width:44px;height:44px;display:grid;place-items:center;
}
.kktop .kk-sig__card{
  position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:var(--brand);
  box-shadow:0 6px 16px -4px rgba(14,24,69,.5),inset 0 0 0 1px rgba(255,255,255,.22);
  animation:kk-sig-press 6.6s ease-in-out infinite;
}
.kktop .kk-sig__ring{
  position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:2px solid var(--brand);
  opacity:0;transform:scale(.35);transform-origin:center;
  animation:kk-sig-ripple 6.6s ease-out infinite;
}
.kktop .kk-sig__ring:nth-child(2){animation-delay:.45s}
.kktop .kk-sig__ring:nth-child(3){animation-delay:.9s}
/* --- Notification d'avis (illustrative, générique) --- */
.kktop .kk-sig__notif{
  position:absolute;left:15%;bottom:31%;
  display:flex;align-items:center;gap:10px;
  max-width:76%;padding:9px 13px 9px 10px;
  background:#fff;border-radius:14px;
  box-shadow:var(--el-16),0 10px 26px -12px rgba(14,24,69,.5);
  opacity:0;transform:translateY(16px) scale(.94);will-change:transform,opacity;
  animation:kk-sig-pop 6.6s ease-in-out infinite;
}
.kktop .kk-sig__g{flex:none;display:grid;place-items:center;line-height:0}
.kktop .kk-sig__notif-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.kktop .kk-sig__notif-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.15;white-space:nowrap}
.kktop .kk-sig__stars{display:block;height:14px;width:auto;fill:var(--star)}

@keyframes kk-sig-pop{
  0%,6%   {opacity:0;transform:translateY(16px) scale(.94)}
  12%     {opacity:1;transform:translateY(-4px) scale(1.02)}
  16%     {opacity:1;transform:translateY(0) scale(1)}
  80%     {opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(-8px) scale(.98)}
}
@keyframes kk-sig-ripple{
  0%  {opacity:0;transform:scale(.35)}
  3%  {opacity:.5}
  16% {opacity:0;transform:scale(1.95)}
  100%{opacity:0;transform:scale(1.95)}
}
@keyframes kk-sig-press{
  0%,100%{transform:scale(1)}
  3%     {transform:scale(.88)}
  8%     {transform:scale(1)}
}
/* Reduced-motion : on FIGE sur une frame lisible (avis affiché), aucune boucle. */
@media (prefers-reduced-motion:reduce){
  .kktop .kk-sig__notif{animation:none;opacity:1;transform:none}
  .kktop .kk-sig__card{animation:none}
  .kktop .kk-sig__ring{animation:none;opacity:.32;transform:scale(1.35)}
  .kktop .kk-sig__ring:nth-child(3){opacity:0}
}
/* Mobile : léger recadrage du moment pour rester net et sans débord à 390px. */
@media (max-width:520px){
  .kktop .kk-sig__notif{left:8%;bottom:30%;padding:8px 11px 8px 9px}
  .kktop .kk-sig__notif-title{font-size:12px}
  .kktop .kk-sig__tap{left:22%;bottom:19%}
}

.kktop .d1{transition-delay:.05s}
.kktop .d2{transition-delay:.10s}
.kktop .d3{transition-delay:.16s}
.kktop .d4{transition-delay:.22s}
.kktop .d5{transition-delay:.28s}
.kktop .d6{transition-delay:.34s}

@media (max-width:980px){
  .kktop .kk-menu{display:none}
  .kktop .kk-burger{display:flex}
  .kktop .kk-login{
    border:0;padding:0;margin-right:0;width:42px;height:42px;
    justify-content:center;border-radius:10px;
  }
  .kktop .kk-login svg{width:22px;height:22px}
  .kktop .kk-login .kk-login__txt{display:none}
  .kktop .kk-brand__logo{height:38px}
}
@media (max-width:980px){
  .kktop .kk-hero__grid{grid-template-columns:1fr;gap:36px;padding:48px 26px 40px}
  /* repli 1 colonne : la photo repasse sous la copie, sans chevauchement ni débord,
     et retrouve son cadrage paysage 3:2 (gamme complète visible) */
  .kktop .kk-hero__copy{padding:44px 34px}
  .kktop .kk-hero__media{max-width:560px;margin:0 auto}
  .kktop .kk-hero__shot{height:auto;aspect-ratio:3/2}
}
@media (max-width:767px){
  .kktop .kk-promo{font-size:12.5px;padding:8px 12px}
  .kktop .kk-nav__row{padding:0 18px}
  .kktop .kk-hero__grid{padding:38px 20px 30px;gap:28px}
  .kktop .kk-hero__cta{flex-direction:column;align-items:stretch}
  .kktop .kk-hero__cta .kk-btn{justify-content:center;text-align:center}
  .kktop .kk-hero__cta > span{text-align:center;margin:6px 0}
  .kktop .kk-hero__avatars{width:90px}
}

/* ============================================================
   6 · .ku-swf — Secteurs + caractéristiques (section fusionnée)
   ============================================================ */
.ku-swf{
  font-family:var(--font-body);
  color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.ku-swf *{box-sizing:border-box}

/* Secteurs : grille rythmée de familles de métiers, chacune signée d'un
   hexagone bleu (leitmotiv du hero). Remplace l'ancien mono-bloc de chips ;
   les cartes s'alignent en haut → hauteurs libres = rythme naturel. */
.ku-swf .ku-sec--merged{background:#fff;padding:6% 0;position:relative}
.ku-swf .ku-merge{width:90%;max-width:1080px;margin:0 auto}

.ku-swf .ku-merge__intro{max-width:44em;margin:0 0 40px}
.ku-swf .ku-merge__h2{font-size:30px;line-height:1.15;color:var(--text);text-align:left;margin:0}

.ku-swf .ku-fam{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
/* Cartes de secteurs surélevées : surface claire nuancée (dégradé bleu 25→50)
   posée sur un liseré + ombre Fluent → même altitude que les blocs hero/ROI,
   fin de l'effet « bloc bleu pâle plat ». Le header est séparé des chips par un
   filet bleu pour hiérarchiser (titre de famille vs métiers). */
.ku-swf .ku-fam__card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--ku-blue-25) 100%);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 28px;
  box-shadow:var(--el-8);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ku-swf .ku-fam__card:hover{transform:translateY(-4px);border-color:var(--ku-blue-200);box-shadow:var(--el-brand-16)}
.ku-swf .ku-fam__hd{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--ku-blue-100)}
.ku-swf .ku-fam__hex{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,var(--ku-blue-400),var(--ku-blue-600));
}
.ku-swf .ku-fam__hex svg{width:24px;height:24px;display:block}
.ku-swf .ku-fam__t{font-size:17px;font-weight:700;color:var(--text);margin:0}
.ku-swf .ku-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.ku-swf .ku-chip{background:var(--ku-blue-50);border:1px solid var(--ku-blue-100);border-radius:var(--r-pill);padding:6px 15px;font-size:13px;font-weight:600;color:var(--ku-blue-700)}

.ku-swf .ku-mini{list-style:none;margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--ku-blue-100);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ku-swf .ku-mini li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--text)}
.ku-swf .ku-mini__ic{width:48px;height:48px;flex:none;background:var(--bg-alt);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid;place-items:center;color:var(--brand)}

@media (max-width:980px){
  .ku-swf .ku-sec--merged{padding:80px 0}
  .ku-swf .ku-mini{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .ku-swf .ku-sec--merged{padding:50px 0}
  .ku-swf .ku-fam{grid-template-columns:1fr}
  .ku-swf .ku-fam__card{padding:22px 20px}
  .ku-swf .ku-mini{grid-template-columns:1fr;gap:12px}
}

/* ============================================================
   7 · .hv-* — Comment ça marche + Vidéos + Stats + Benefits
   ============================================================ */
.hv-sect{
  scroll-margin-top:90px;
}

.hv-badge-row{margin:18px 0 0}
.hv-badge{
  display:inline-block;background:var(--text);color:#fff;border-radius:var(--r-pill);
  padding:7px 24px;font-size:15px;line-height:1.5;
  transition:transform 300ms ease;
}
.hv-badge:hover{transform:scale(1.05)}

.hv-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.hv-step{
  border-radius:var(--r-2xl);overflow:hidden;padding:40px 20px 350px;cursor:grab;
  background-image:var(--step-img,none),linear-gradient(208deg,var(--brand) 1%,var(--brand) 15%,var(--accent) 100%);
  background-position:center bottom,center;
  background-size:contain,cover;
  background-repeat:no-repeat;
  color:#fff;text-align:left;
}
.hv-step--1{--step-img:url("assets/nfc-hand.webp")}
.hv-step--2{--step-img:url("assets/drive/focus-google-crop.webp")}
.hv-step--3{--step-img:url("assets/trio-social.webp")}
.hv-step h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.12;letter-spacing:-.015em;font-optical-sizing:auto;margin:0 0 10px;color:#fff;text-align:left}
.hv-step p{font-size:16px;color:#fff;line-height:1.3;margin:0}

@media (max-width:980px){
  .hv-steps{grid-template-columns:1fr;gap:15px}
  .hv-step{padding-bottom:300px}
}
@media (prefers-reduced-motion:reduce){
  .hv-badge{transition:none!important}
}

/* ============================================================
   8 · .ksp — Social proof (témoignages)
   ============================================================ */
.ksp{display:block;background:var(--surface-sunken)}
.ksp__panel{padding:6% 0;background:transparent}
.ksp .section__head{margin-bottom:46px}

@media (max-width:980px){
  .ksp__panel{padding:80px 0}
  .ksp .section__head{margin-bottom:36px}
  .ksp__pill{display:none}
}
@media (max-width:767px){
  .ksp__panel{padding:50px 0}
  .gtem{width:280px;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .ksp__tems-track{animation:none}
}

/* ============================================================
   8.ter · .ku-manifesto — bande éditoriale pleine largeur (RUPTURE)
   Manifeste de marque : pause premium entre les témoignages et la surface
   d'achat. Fond navy monochrome (distinct du pic ROI par le sens du dégradé et
   la lueur brand), grande typo Fraunces posée en asymétrie, hexagone leitmotiv
   débordant en filigrane. Aucune animation propre → reduced-motion safe
   (le reveal data-anim est neutralisé sous prefers-reduced-motion).
   ============================================================ */
.ku-manifesto{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(84% 118% at 12% 2%,rgba(44,75,255,.24),transparent 56%),
    linear-gradient(158deg,var(--ku-blue-900) 0%,var(--ku-blue-950) 100%);
  color:var(--text-on-dark);
  padding:clamp(56px,8vw,104px) 0;
}
.ku-manifesto__inner{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:0 26px;
}
.ku-manifesto__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ku-blue-300);margin:0 0 22px;
}
.ku-manifesto__eyebrow .ku-hex{stroke:var(--ku-blue-300)}
.ku-manifesto__quote{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em;
  color:var(--ku-blue-25);margin:0;max-width:16em;text-wrap:balance;
}
.ku-manifesto__quote em{font-style:normal;color:var(--ku-blue-300)}
.ku-manifesto__sig{
  margin:26px 0 0;font-size:clamp(15px,1.6vw,18px);line-height:1.5;
  color:var(--text-soft-on-dark);max-width:34em;
}
/* Hexagone leitmotiv débordant à droite → asymétrie, clippé par overflow:hidden
   (aucun débordement horizontal, y compris à 390px). */
.ku-manifesto__hex{
  position:absolute;z-index:0;pointer-events:none;
  top:50%;right:-7%;transform:translateY(-50%);
  width:min(50vw,432px);height:auto;aspect-ratio:1/1;
  fill:none;stroke:var(--ku-blue-700);stroke-width:.35;opacity:.5;
}
@media (max-width:767px){
  .ku-manifesto{padding:52px 0}
  .ku-manifesto__quote{max-width:none}
  .ku-manifesto__eyebrow{margin-bottom:18px}
  .ku-manifesto__hex{width:74vw;right:-24%;opacity:.38}
}

/* ============================================================
   8.bis · BANDE CANAUX — une plaque par canal (funnel → configurateur)
   ============================================================ */
.kx-chan{background:#fff;padding:6px 20px 48px}
.kx-chan__wrap{max-width:var(--wrap);margin:0 auto;text-align:center}
.kx-chan__eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 18px}
.kx-chan__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.kx-chan__chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);
  font-size:14px;font-weight:600;color:var(--text-soft);box-shadow:var(--el-2);
  transition:color var(--dur-fast) var(--curve-decel),border-color var(--dur-fast) var(--curve-decel),
    box-shadow var(--dur-fast) var(--curve-decel),transform var(--dur-fast) var(--curve-decel)}
.kx-chan__ic{display:inline-flex;color:var(--text-muted);transition:color var(--dur-fast) var(--curve-decel)}
.kx-chan__ic svg{display:block}
.kx-chan__chip:hover{color:var(--brand);border-color:var(--brand);box-shadow:var(--el-brand-4);transform:translateY(-1px)}
.kx-chan__chip:hover .kx-chan__ic{color:var(--brand)}
.kx-chan__chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

@media (max-width:767px){
  .kx-chan{padding:4px 14px 40px}
  .kx-chan__chip{padding:8px 13px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .kx-chan__chip{transition:none}
  .kx-chan__chip:hover{transform:none}
}

/* ============================================================
   9 · .kk-faq + .kk-cta + .kk-foot (close)
   ============================================================ */
.kk-faq,.kk-cta,.kk-foot{
  font-family:var(--font-body);
  color:var(--text);
}
.kk-faq *,.kk-cta *,.kk-foot *{box-sizing:border-box}

.kk-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:700;
  color:var(--brand);margin:0 0 14px}
.kk-eyebrow--c{justify-content:center;display:flex}
.kk-eyebrow--light{color:var(--ku-blue-200)}

.kk-h2{font-weight:700;font-size:30px;line-height:1.2;margin:0;color:var(--text)}
.kk-h2 .kk-hl{color:var(--brand)}
.kk-h2--light{color:#fff;font-size:35px;font-weight:700}
.kk-h2--light .kk-hl{color:var(--ku-blue-200)}

.kk-lead{font-size:16px;color:var(--text-soft);max-width:40em;line-height:1.5;margin:14px auto 0}
.kk-lead--light{color:rgba(255,255,255,.88);max-width:34em}

.kk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  border:none;border-radius:var(--r-pill);padding:12px 30px;cursor:pointer;text-decoration:none;
  box-shadow:0 7px 22px -6px rgba(44,75,255,.2);transition:all .2s;font-family:inherit}
.kk-btn--lg{font-size:16px}
.kk-btn--cyan{background:var(--brand);color:#fff}
.kk-btn--white{background:#fff;color:var(--brand)}
.kk-btn--white:hover{background:rgba(238,241,255,.5)}
.kk-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
/* Effet flèche Divi — scopé hors header (.kktop retraité aux batches hero-top/navbar) */
.kk-cta .kk-btn::after{content:'→';opacity:0;margin-left:-1em;transition:all .2s}
.kk-cta .kk-btn:hover{padding:12px 2em 12px .7em}
.kk-cta .kk-btn:hover::after{opacity:1;margin-left:0}

/* FAQ */
.kk-faq{background:var(--surface-sunken);padding:6% 0}
.kk-faq__wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.kk-faq__head{text-align:center;max-width:46em;margin:0 auto 46px}
/* Variante CONTOUR du motif pilule (ni sombre comme #comment, ni bleue comme
   #social-proof) — troisième déclinaison pour rythmer les intros de section. */
.kk-faq__pill{
  display:inline-block;background:var(--brand-soft);color:var(--brand);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--brand);
  padding:7px 24px;margin:18px auto 0;font-size:15px;font-weight:600;line-height:1.5;
  transition:transform 300ms ease;
}
.kk-faq__pill:hover{transform:scale(1.05)}

.kk-faq__list{max-width:820px;margin:0 auto;display:grid;gap:15px}
.kk-faq__item{background:var(--bg-alt);border:none;border-radius:var(--r-pill);
  overflow:hidden;transition:border-radius 300ms ease}
.kk-faq__item[open]{border-radius:var(--r-lg);background:var(--bg-alt)}
.kk-faq__item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;
  gap:10px;align-items:center;font-size:16px;font-weight:700;color:var(--text);line-height:1.4}
.kk-faq__item summary::-webkit-details-marker{display:none}
.kk-faq__item summary:hover{color:var(--brand)}
.kk-faq__ic{position:relative;flex:none;width:22px;height:22px;color:var(--brand);
  transition:transform .28s var(--ease)}
.kk-faq__ic::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;border-radius:1px;
  transform:translate(-50%,-70%) rotate(45deg);transition:transform .28s var(--ease)}
.kk-faq__item[open] .kk-faq__ic::before{transform:translate(-50%,-30%) rotate(225deg)}
.kk-faq__body{overflow:hidden;padding-bottom:12px}
.kk-faq__item p{margin:10px 20px;padding:0;color:var(--text-soft);font-size:16px;line-height:1.3}
.kk-faq__item p strong{color:var(--text);font-weight:700}

/* CTA expert */
.kk-cta{background:#fff;padding:30px 0 0}
.kk-cta__wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.kk-cta__band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:44px;margin-bottom:80px;
  background:linear-gradient(144deg,#3D55FF 0%,var(--brand) 22%,#1B2FAF 99%);
  color:#fff;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.kk-cta__title{font-size:35px;font-weight:700;color:#fff;line-height:1.3;margin:0}
.kk-cta__sub{font-size:20px;color:var(--bg-alt);line-height:1.4;margin:14px 0 0;max-width:34em}
.kk-cta__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:0;align-items:center}
.kk-cta__actions > span{color:#fff;font-weight:600;margin:0 10px}
/* Actions secondaires : outline sur la bande → la carte-formulaire reste le seul bloc plein. */
.kk-cta__actions .kk-btn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55)}
.kk-cta__actions .kk-btn:hover{background:#fff;color:var(--brand)}
.kk-cta__actions .kk-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Carte de capture B2B (fond clair sur la bande bleue) */
.pro-form{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--el-28);padding:26px;color:var(--text);
}
.pro-form__title{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:22px;color:var(--text);line-height:1.2;margin:0 0 16px;
}
.pro-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pro-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pro-field--full{grid-column:1 / -1}
.pro-field label{font-size:13px;font-weight:700;color:var(--text-soft)}
.pro-input{
  height:48px;width:100%;border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:0 14px;background:var(--surface-sunken);
  font-family:inherit;font-size:15px;color:var(--text);
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pro-input::placeholder{color:var(--text-muted)}
.pro-input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,75,255,.18)}
.pro-form__submit{
  width:100%;min-height:48px;margin-top:18px;
  border-radius:var(--r-pill);background:var(--brand);color:var(--on-brand);
  font-weight:700;font-size:15.5px;box-shadow:var(--el-brand-8);
  transition:background var(--dur-fast) var(--curve-easyease),transform var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pro-form__submit:hover{background:var(--brand-hover);transform:translateY(-2px);box-shadow:var(--el-brand-16)}
.pro-form__submit:active{transform:translateY(0);box-shadow:var(--el-brand-4)}
.pro-form__submit:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8)}
.pro-form__note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted)}
.pro-consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px}
.pro-consent__box{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.pro-consent__box:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-xs)}
.pro-consent__label{font-size:13px;line-height:1.45;font-weight:600;color:var(--text-soft);cursor:pointer}
.pro-form__sent{margin:12px 0 0;font-size:13px;line-height:1.5;font-weight:600;color:var(--brand)}
.pro-form__sent a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Footer */
.kk-foot-sect{display:block;margin:0;padding:0}
.kk-foot{background:#0F172B;border-top:1px solid rgba(255,255,255,.10);color:#fff;
  padding:30px 0 40px;font-size:14px;line-height:1.66}
.kk-foot__wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.kk-foot a{color:inherit;text-decoration:none;transition:color .15s var(--ease),padding .15s var(--ease)}

.kk-foot__top{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:start}

.kk-foot__col h4{color:#fff;font-size:20px;margin:0 0 10px;font-weight:700}
.kk-foot__col nav + nav{margin-top:28px}
.kk-foot__col a{display:block;font-size:14px;color:#fff;line-height:2.4em}
.kk-foot__col a:hover{color:var(--link-on-dark);padding-left:4px}
.kk-foot__sub{margin:8px 0 0;line-height:1.6em}
.kk-foot__sub strong{color:#fff;font-weight:700;font-size:14px}
.kk-foot__sub ~ a{padding-left:20px;line-height:1.6em;padding-top:3px;padding-bottom:3px}

/* Carte marque claire (dernière colonne) */
.kk-foot__brandcard{background:linear-gradient(180deg,#fff 0%,var(--bg-alt) 55%);border-radius:var(--r-xl);
  padding:20px 20px 10px;color:#0F172B}
.kk-foot__logo{display:inline-block;width:85%}
.kk-foot__logo img{display:block;width:100%;height:auto}
.kk-foot__tag{margin-top:14px;font-size:13.5px;color:#0F172B;line-height:1.6}
.kk-foot__tag strong{color:#0F172B;font-weight:700;display:block;margin-bottom:4px}
.kk-foot__line{margin:10px 0 0;font-size:13px;color:#0F172B;line-height:1.5}
.kk-foot__line a{color:#0F172B;font-weight:600}
.kk-foot__line a:hover{color:var(--brand)}

.kk-foot__callpill{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:14px;background:var(--brand);border-radius:var(--r-pill);padding:10px;color:#fff;
  font-size:13.5px;transition:background .3s ease}
.kk-foot__callpill strong{font-weight:800}
.kk-foot__callpill:hover{background:linear-gradient(211deg,var(--brand),#4a6fce)}
.kk-foot__callic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex:none}

@media (max-width:980px){
  .kk-foot__top{grid-template-columns:1fr 1fr;gap:26px}
  .kk-cta__band{grid-template-columns:1fr}
  .kk-faq{padding:80px 0}
  .kk-faq__pill{display:none}
}
@media (max-width:767px){
  .kk-faq{padding:50px 0}
  .kk-cta{padding:20px 0 0}
  .kk-faq__list{max-width:none}
  .kk-faq__item summary{font-size:15.5px;padding:18px 20px}
  .kk-cta__band{padding:28px 24px;border-radius:var(--r-lg);margin-bottom:60px}
  .kk-cta__title{font-size:28px}
  .kk-cta__sub{font-size:17px}
  .kk-cta__actions .kk-btn{width:100%}
  .kk-cta__actions > span{width:100%;text-align:center;margin:6px 0}
  .kk-foot{padding:24px 0 32px}
  .kk-foot__top{grid-template-columns:1fr;gap:28px}
}
@media (max-width:479px){
  .kk-faq__head{margin-bottom:34px}
  .pro-form{padding:22px}
  .pro-form__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pro-input,.pro-form__submit,.kk-cta__actions .kk-btn{transition:none}
  .pro-form__submit:hover{transform:none}
}

/* ============================================================
   10 · CONFIGURATEUR (.config)
   ============================================================ */
.config{
  font-family:var(--font-body);
  color:var(--text);
  background:linear-gradient(180deg,var(--surface-sunken) 0%,var(--bg-alt) 100%);
  padding:56px 20px;box-sizing:border-box;position:relative;
}
.config *,.config *::before,.config *::after{box-sizing:border-box}
.config svg{display:inline-block}

.config__shell{
  max-width:1120px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 30px 60px -28px rgba(15,23,43,.18);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}

.config__media{
  background:linear-gradient(160deg,var(--surface-sunken) 0%,var(--ku-blue-100) 100%);
  padding:30px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line);
}
.config__stage{
  position:relative;background:radial-gradient(circle at 50% 40%,var(--white) 0%,var(--surface-sunken) 75%);
  border-radius:var(--r-lg);border:1px solid var(--line);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.config__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(15,23,43,.22))}
.config__badge{
  position:absolute;top:14px;left:14px;
  background:linear-gradient(135deg,var(--brand),var(--accent));color:var(--white);
  padding:6px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 6px 14px -6px rgba(44,75,255,.6);
}
.config__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.config__thumb{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:8px;cursor:pointer;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,box-shadow .15s;
}
.config__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.config__thumb:hover{border-color:var(--ku-blue-400)}
.config__thumb.is-active{border-color:var(--brand);box-shadow:0 0 0 3px var(--ku-blue-200)}
.config__thumb:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.config__trust{display:flex;align-items:center;gap:8px;justify-content:center;margin:0;font-size:12px;color:var(--text-muted);font-weight:600}
.config__trust svg{width:16px;height:16px;fill:var(--accent);stroke:none}

.config__form{padding:30px 32px;display:flex;flex-direction:column;gap:20px}
.config__cat{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
/* Titre produit du configurateur — repris dans la règle display groupée
   (Fraunces 560) ci-dessous ; ici seuls la taille et l'interligne propres. */
.config__title{margin:4px 0 8px;font-size:28px;line-height:1.14;color:var(--text)}
.config__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.config__stars{color:var(--star);font-weight:700;letter-spacing:1px}
.config__stars span{color:var(--star)}
.config__stock{display:inline-flex;align-items:center;gap:6px;color:var(--ku-blue-600);font-weight:700}
.config__stock .dot{width:8px;height:8px;background:var(--ku-blue-600);border-radius:50%;box-shadow:0 0 0 3px rgba(44,75,255,.22)}
.config__ref{color:var(--ku-ink-300);font-size:12px}
.config__pitch{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-soft)}

.config__cartbtn{
  margin-left:auto;position:relative;appearance:none;border:1px solid var(--line);
  background:var(--white);width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);transition:all .15s;
}
.config__cartbtn:hover{border-color:var(--brand);color:var(--brand)}
.config__cartbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.config__cartbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.config__cartbtn-count{
  position:absolute;top:-6px;right:-6px;background:var(--brand);color:var(--white);
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--white);
}

.config__tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-alt);
  padding:5px;border-radius:var(--r-md);border:1px solid var(--line);
}
.config__tab{
  appearance:none;border:none;background:transparent;padding:11px 14px;font-family:inherit;
  font-size:14px;font-weight:700;color:var(--text-soft);border-radius:var(--r-sm);cursor:pointer;transition:all .18s;
}
.config__tab:hover{color:var(--text)}
.config__tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.config__tab.is-active{background:var(--white);color:var(--brand);box-shadow:0 4px 14px -4px rgba(44,75,255,.25)}

.config__panel{display:flex;flex-direction:column;gap:18px}
.config__field{display:flex;flex-direction:column;gap:10px}
.config__label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text)}
.config__req{color:var(--ku-blue-700);font-weight:800}
.config__label-mode{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent)}

.config__tiers{display:grid;grid-template-columns:repeat(var(--tier-cols,5),1fr);gap:8px}
.config__tier{
  position:relative;appearance:none;border:1.5px solid var(--line);background:var(--white);
  padding:10px 6px 8px;border-radius:var(--r-md);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .12s;
}
.config__tier:hover{border-color:var(--ku-blue-400);background:var(--surface-sunken)}
.config__tier:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.config__tier.is-selected{border-color:var(--brand);background:var(--bg-alt);box-shadow:0 0 0 3px var(--ku-blue-200)}
.config__tier-qty{font-size:18px;font-weight:800;color:var(--text);line-height:1}
.config__tier.is-selected .config__tier-qty{color:var(--brand-hover)}
.config__tier-unit{font-size:11px;color:var(--text-muted);font-weight:700}
.config__tier.is-selected .config__tier-unit{color:var(--brand)}
.config__tier-disc{
  position:absolute;top:-8px;right:-6px;background:var(--ku-blue-600);color:var(--white);
  font-size:9px;font-weight:800;padding:2px 6px;border-radius:var(--r-pill);letter-spacing:.03em;
  box-shadow:0 4px 8px -3px rgba(44,75,255,.5);
}
.config__tier-check{
  position:absolute;top:6px;left:6px;width:14px;height:14px;background:var(--brand);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.config__tier-check svg{width:9px;height:9px;fill:none;stroke:var(--white);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.config__logo{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.config__logo-head{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.config__check{position:relative;display:inline-block;flex-shrink:0;margin-top:1px;width:22px;height:22px}
.config__logo-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.config__check-box{display:block;width:22px;height:22px;border:2px solid var(--ku-ink-300);border-radius:6px;background:var(--white);transition:all .15s}
.config__check-box svg{
  width:14px;height:14px;margin:2px 0 0 2px;fill:none;stroke:var(--white);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:all .15s;
}
.config__logo-input:checked + .config__check-box{background:var(--brand);border-color:var(--brand)}
.config__logo-input:checked + .config__check-box svg{opacity:1;transform:scale(1)}
.config__logo-input:focus-visible + .config__check-box{outline:2px solid var(--brand);outline-offset:2px}
.config__logo-text{flex:1;display:flex;flex-direction:column;gap:2px}
.config__logo-title{font-size:14px;font-weight:700;color:var(--text)}
.config__logo-desc{font-size:12px;color:var(--text-muted);line-height:1.45}
.config__logo-price{font-size:14px;font-weight:800;color:var(--brand);white-space:nowrap}

.config__upload{display:none}
.config__upload.is-open{display:block;animation:cfgFade .2s ease}
@keyframes cfgFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.config__dropzone{
  display:block;border:1.5px dashed var(--ku-blue-400);border-radius:var(--r-md);background:var(--white);
  padding:18px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;position:relative;
}
.config__dropzone:hover{border-color:var(--brand);background:var(--surface-sunken)}
.config__dropzone.is-drag{border-color:var(--brand);background:var(--bg-alt)}
.config__file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.config__file:focus-visible + .config__drop-inner{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--r-sm)}
.config__drop-inner{display:flex;flex-direction:column;align-items:center;gap:4px}
.config__drop-icon{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.config__drop-title{font-size:13px;color:var(--text-soft)}
.config__drop-title em{color:var(--brand);font-style:normal;font-weight:700}
.config__drop-info{font-size:11px;color:var(--text-muted)}

.config__upload-err{margin:8px 0 0;padding:8px 10px;background:rgba(26,47,166,.08);border:1px solid rgba(26,47,166,.25);
  border-radius:var(--r-sm);color:var(--ku-blue-700);font-size:12px;font-weight:600}
.config__filelist{margin-top:8px}
.config__fileitem{display:flex;align-items:center;gap:10px;background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.config__file-thumb{width:40px;height:40px;border-radius:6px;background:var(--white);border:1px solid var(--line);object-fit:cover;flex-shrink:0}
.config__file-thumb--icon{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.config__file-thumb--icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.config__fileinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.config__filename{font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.config__filesize{font-size:11px;color:var(--text-muted)}
.config__fileremove{appearance:none;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:700;
  cursor:pointer;padding:6px 8px;border-radius:6px;transition:color .15s,background .15s}
.config__fileremove:hover{color:var(--ku-blue-700);background:rgba(26,47,166,.08)}

.config__stepper{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 4px;border-top:1px dashed var(--line)}
.config__stepper-label{font-size:13px;color:var(--text-muted)}
.config__stepper-ctrl{display:flex;align-items:center;gap:8px}
.config__step{
  appearance:none;width:36px;height:36px;border:1.5px solid var(--line);background:var(--white);
  border-radius:10px;font-size:20px;font-weight:700;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.config__step:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:var(--surface-sunken)}
.config__step:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.config__step:disabled{opacity:.35;cursor:not-allowed}
.config__step-val{min-width:44px;text-align:center;font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}

.config__recap{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.config__recap-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--text-soft)}
.config__recap-row span:last-child{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.config__recap-row[data-r-disc-row] span:last-child{color:var(--ku-blue-600)}
.config__recap-ref{color:var(--text-muted);font-weight:600;margin-right:6px;text-decoration:line-through}
.config__recap-row[data-r-logo-row] span:last-child{color:var(--brand)}
.config__recap-row--total{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
.config__recap-row--total span:first-child{font-weight:800;color:var(--text)}
.config__recap-row--total span:last-child{font-size:18px;color:var(--brand-hover)}

.config__cta{
  appearance:none;border:none;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:var(--white);font-family:inherit;font-size:15px;font-weight:800;padding:16px 20px;border-radius:var(--r-md);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 14px 26px -10px rgba(44,75,255,.55);
  transition:transform .12s,box-shadow .15s,filter .15s;
}
.config__cta:hover{transform:translateY(-1px);box-shadow:0 18px 30px -10px rgba(44,75,255,.65);filter:brightness(1.04)}
.config__cta:active{transform:translateY(0)}
.config__cta:focus-visible{outline:2px solid var(--brand-hover);outline-offset:3px}
.config__cart-icon{width:18px;height:18px;display:inline-flex}
.config__cart-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.config__reassurance{max-width:1120px;margin:28px auto 0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.config__reassur-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  transition:border-color .15s,transform .12s;
}
.config__reassur-item:hover{border-color:var(--ku-blue-400);transform:translateY(-2px)}
.config__reassur-icon{width:42px;height:42px;color:var(--brand);display:grid;place-items:center;
  background:var(--brand-soft);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.config__reassur-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.config__reassur-title{font-size:12.5px;font-weight:800;color:var(--text)}
.config__reassur-sub{font-size:11px;color:var(--text-muted);line-height:1.3}

.config__specs{max-width:1120px;margin:28px auto 0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.config__specs h3{margin:0 0 16px;font-size:16px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
.config__specs h3::before{content:"";display:block;width:4px;height:18px;background:linear-gradient(var(--brand),var(--accent));border-radius:2px}
.config__specs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0}
.config__specs-list > div{background:var(--white);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.config__specs-list dt{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.config__specs-list dd{margin:0;font-size:14.5px;color:var(--text);font-weight:700}

.config__overlay{position:fixed;inset:0;background:rgba(15,23,43,.5);z-index:999;opacity:0;transition:opacity .25s ease}
.config__overlay.is-open{opacity:1}
.config__cart{
  position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--white);
  box-shadow:-20px 0 50px -20px rgba(15,23,43,.32);z-index:1000;
  transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;
}
.config__cart.is-open{transform:translateX(0)}
.config__cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.config__cart-head h3{margin:0;font-size:17px;font-weight:800;color:var(--text)}
.config__cart-close{appearance:none;border:none;background:transparent;width:32px;height:32px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center}
.config__cart-close:hover{background:var(--bg-alt);color:var(--text)}
.config__cart-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.config__cart-items{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:10px}
.config__cart-empty{color:var(--text-muted);font-size:13px;text-align:center;margin:30px 0}
.config__cart-line{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.config__cart-line-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.config__cart-line-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.config__cart-line-title{font-size:13px;color:var(--text);font-weight:700}
.config__cart-line-sub{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.config__cart-line-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.config__cart-line-total{font-size:14px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.config__cart-line-remove{appearance:none;border:none;background:transparent;color:var(--ku-ink-300);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:var(--r-xs)}
.config__cart-line-remove:hover{color:var(--ku-blue-700)}
.config__cart-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.config__cart-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.config__cart-sum span:first-child{color:var(--text-soft);font-weight:600}
.config__cart-sum span:last-child{font-size:18px;font-weight:800;color:var(--brand-hover);font-variant-numeric:tabular-nums}
.config__cart-cta{
  appearance:none;border:none;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:var(--white);font-family:inherit;font-size:14px;font-weight:800;padding:14px;border-radius:10px;cursor:pointer;
  box-shadow:0 12px 22px -10px rgba(44,75,255,.55);
}
.config__cart-cta:hover{filter:brightness(1.04)}
.config__cart-cta:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}

.config__toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);
  background:var(--text);color:var(--white);padding:12px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;box-shadow:0 16px 30px -10px rgba(15,23,43,.4);
  z-index:1100;opacity:0;transition:transform .3s ease,opacity .3s ease;
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.config__toast.is-visible{opacity:1;transform:translate(-50%,0)}
.config__toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ku-blue-600);display:inline-block}

@media (max-width:980px){
  .config{padding:30px 14px}
  .config__shell{grid-template-columns:1fr}
  .config__media{border-right:none;border-bottom:1px solid var(--line)}
  .config__form{padding:24px 20px}
  .config__reassurance{grid-template-columns:repeat(2,1fr)}
  .config__specs-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:479px){
  .config__title{font-size:22px}
  .config__tiers{grid-template-columns:repeat(3,1fr) !important}
  .config__reassurance{grid-template-columns:1fr}
  .config__specs-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .config *,.config *::before,.config *::after{transition:none !important;animation:none !important}
}

/* ============================================================
   11 · MOTION — reveal au scroll
   ============================================================ */
[data-anim]{opacity:0;transition:opacity .22s ease-out,transform .22s ease-out}
[data-anim="up"]{transform:translateY(24px)}
[data-anim="zoom"]{transform:scale(.94);transition-duration:.2s}
[data-anim="fade"]{transform:none}
[data-anim="drop"]{opacity:0;transform:translateY(-10%);transition:opacity .45s cubic-bezier(.77,0,.175,1),transform .45s cubic-bezier(.77,0,.175,1)}
.kk-cta__band[data-anim]{transform:translateY(24px);transition-duration:.25s}
.kk-foot[data-anim]{transform:translateY(24px)}
[data-anim].in{opacity:1;transform:none}
[data-anim="drop"].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1 !important;transform:none !important}
}

/* ============================================================
   12 · RESPONSIVE global (utilitaires partagés)
   ============================================================ */
@media (max-width:980px){
  .section{padding:80px 0}
  .section__head{margin-bottom:36px}
}
@media (max-width:767px){
  .wrap{padding:0 18px}
  .section{padding:50px 0}
}

/* ---- Échelle typographique responsive (seuils Divi) ----
   Le benchmark AGRANDIT les H2 sur tablette (30 → 35px). */
@media (min-width:768px) and (max-width:980px){
  .h2,.kk-h2,.ku-swf .ku-merge__h2{font-size:35px}
}
@media (max-width:767px){
  .h2,.kk-h2,.ku-swf .ku-merge__h2{font-size:25px}
  .kktop .kk-display{font-size:30px}
}

/* ============================================================
   13 · WIDGET WhatsApp flottant
   ============================================================ */
.kk-wa{
  position:fixed;bottom:20px;left:20px;z-index:9000;
  display:flex;align-items:center;gap:12px;
  transform:scale3d(0,0,0);transform-origin:bottom left;
}
.kk-wa.is-show{animation:kkWaPop .5s cubic-bezier(.18,.89,.32,1.28) forwards}
@keyframes kkWaPop{from{transform:scale3d(0,0,0)}to{transform:scale3d(1,1,1)}}
.kk-wa__btn{
  width:60px;height:60px;flex:none;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;
  box-shadow:1px 6px 24px 0 rgba(44,75,255,.24);
  transition:background .3s ease;
}
.kk-wa__btn:hover{background:var(--brand-hover)}
.kk-wa__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.kk-wa__btn svg{width:36px;height:36px;fill:#fff}
.kk-wa__tip{
  background:#fff;border-radius:var(--r-lg);padding:10px 16px;
  font-size:14px;font-weight:600;color:#0F172B;
  box-shadow:0 6px 20px rgba(15,23,43,.15);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .kk-wa{transform:none}
  .kk-wa.is-show{animation:none}
}

/* Panier flottant (benchmark : bulle sombre en bas à droite) */
.kk-cart{
  position:fixed;bottom:20px;right:20px;z-index:9000;
  width:58px;height:58px;border-radius:50%;background:#0F172B;
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(15,23,43,.3);
  transition:box-shadow .3s ease,transform .3s ease;
}
.kk-cart:hover{transform:scale(1.06);box-shadow:0 10px 26px rgba(15,23,43,.4)}
.kk-cart svg{width:26px;height:26px;fill:#fff}
.kk-cart__n{
  position:absolute;top:-4px;left:-4px;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--brand);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;
}

/* ============================================================
   Typographie — Fraunces (display éditorial) + Inter (corps/UI)
   Tokens : --font-display / --font-body (voir :root en tête).
   ============================================================ */
/* Display éditorial : Fraunces, tracking serré, graisse contrastée.
   Familles/optique ici ; le hero (.kktop .kk-display) porte sa propre
   graisse 700 + tracking -.03em (specificité supérieure). */
.kk-display,.h2,.kk-h2,.kk-cta__title,.ku-swf .ku-merge__h2,.config__title{
  font-family:var(--font-display);
  font-weight:560;
  letter-spacing:-.02em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   Étoiles SVG (exception or) — or-sur-clair par défaut
   ============================================================ */
.ku-stars{display:inline-block;flex:none;height:1em;width:auto;vertical-align:-.15em;fill:var(--star-onlight)}
.ku-stars--ondark{fill:var(--star)}
.gtem__stars{line-height:0}
.gtem__stars .ku-stars{fill:var(--brand)}
.config__stars{color:var(--text-muted);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.config__stars-num{color:var(--text-muted);font-weight:700}

/* ============================================================
   Navbar — matière acrylic verre sombre + ombre qui monte
   ============================================================ */
.kktop .kk-nav{background:var(--bg-dark)}
.kktop .kk-nav__row{
  background:rgba(15,23,43,.72);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--el-16);
  transition:box-shadow var(--dur-normal) var(--curve-easyease),background var(--dur-normal) var(--curve-easyease);
}
.kktop .kk-nav__row:hover{
  background:rgba(15,23,43,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--el-16);
}
.kktop .kk-nav.is-fixed .kk-nav__row{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--el-28),0 12px 26px -8px rgba(44,75,255,.28);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kktop .kk-nav__row,.kktop .kk-nav__row:hover{background:rgba(14,24,69,.96)}
}
.kktop .kk-menu__link:hover{color:var(--text-on-dark)}

/* Mega-menu + menu mobile — surface nuit + élévation */
.kktop .kk-dd{background:var(--surface-dark);box-shadow:var(--el-16);border-top:3px solid var(--brand)}
.kktop .kk-mob{
  background:rgba(15,23,43,.90);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--el-64);border-top:3px solid var(--brand);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kktop .kk-mob{background:rgba(14,24,69,.98)}
}

/* ============================================================
   Boutons — cycle d'élévation marque (primaires) / plats (ghost)
   ============================================================ */
.btn--cyan,.kk-btn--cyan,.kktop .kk-btn--cyan{
  border-radius:var(--r-pill);
  box-shadow:var(--el-brand-8);
  transition:transform var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease),background var(--dur-fast) var(--curve-easyease);
}
.btn--cyan:hover,.kk-btn--cyan:hover,.kktop .kk-btn--cyan:hover{
  transform:translateY(-2px);
  box-shadow:var(--el-brand-16);
  background:var(--brand-hover);
}
.btn--cyan:active,.kk-btn--cyan:active,.kktop .kk-btn--cyan:active{
  transform:translateY(0);
  box-shadow:var(--el-brand-4);
}
.btn--cyan:focus-visible,.kk-btn--cyan:focus-visible,.kktop .kk-btn--cyan:focus-visible,.config__cta:focus-visible{
  outline:2px solid #fff;outline-offset:0;
  box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8);
}
/* Ghost / secondaires — plats, stroke remplace la key-light */
.btn--ghost,.kk-btn--ghost,.kktop .kk-btn--ghost{
  box-shadow:inset 0 0 0 2px var(--brand);
}
/* CTA configurateur (bloc) — élévation marque, garde son rayon */
.config__cta,.config__cart-cta{
  box-shadow:var(--el-brand-8);
  transition:transform var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease),filter var(--dur-fast) var(--curve-easyease);
}
.config__cta:hover,.config__cart-cta:hover{transform:translateY(-2px);box-shadow:var(--el-brand-16)}
.config__cta:active{transform:translateY(0);box-shadow:var(--el-brand-4)}

/* ============================================================
   Cards — borderless + élévation ; liseré sur fond teinté
   ============================================================ */
.gtem{
  border:none;
  box-shadow:var(--el-4);
  transition:transform var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.gtem:hover{transform:translateY(-4px);box-shadow:var(--el-16),inset 0 0 0 1.5px var(--ku-blue-200)}

/* ============================================================
   Sections nuit — surfaces bleu-nuit (plus de gris neutre)
   ============================================================ */
.kk-foot{background:var(--surface-dark)}

/* WhatsApp FAB — bleu marque (glyphe reste reconnaissable) */
.kk-wa__btn{box-shadow:0 6px 24px 0 rgba(44,75,255,.30)}

/* ============================================================
   Reduced-motion — désactive les nouveaux transforms/transitions
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .gtem,
  .btn--cyan,.kk-btn--cyan,.kktop .kk-btn--cyan,
  .config__cta,.config__cart-cta,.kktop .kk-nav__row{transition:none!important}
  .gtem:hover,
  .btn--cyan:hover,.kk-btn--cyan:hover,.kktop .kk-btn--cyan:hover,
  .config__cta:hover,.config__cart-cta:hover{transform:none!important}
}

/* ============================================================
   UPGRADE CONTENU · Promo bar (3 réassurances) + Hero (preuve/CTA/micro)
   Monochrome bleu Fluent — tokens design system uniquement
   ============================================================ */

/* ---- Promo bar : 3 réassurances SVG bleues, séparateurs · ---- */
.kktop .kk-promo{
  background:var(--surface);color:var(--text-soft);
  padding:8px 16px;font-size:13.5px;font-weight:600;line-height:1.2;
  text-align:center;border-bottom:1px solid var(--border);
}
.kktop .kk-promo__list{
  list-style:none;margin:0 auto;padding:0;max-width:1080px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 0;
}
.kktop .kk-promo__item{display:inline-flex;align-items:center;gap:7px}
.kktop .kk-promo__item + .kk-promo__item::before{
  content:"·";color:var(--border-strong);font-weight:700;margin:0 14px;
}
.kktop .kk-promo__ic{color:var(--brand);flex:none;display:block}

@media (max-width:640px){
  .kktop .kk-promo{padding:8px 12px;font-size:12.5px}
  .kktop .kk-promo__item + .kk-promo__item::before{margin:0 10px}
}
/* ≤480 : rotation cross-fade des 3 messages, 1 à la fois */
@media (max-width:480px){
  .kktop .kk-promo__list{position:relative;min-height:20px;gap:0}
  .kktop .kk-promo__item{
    position:absolute;inset:0;justify-content:center;
    opacity:0;animation:kkPromoRot 12s linear infinite;
  }
  .kktop .kk-promo__item:nth-child(1){animation-delay:0s}
  .kktop .kk-promo__item:nth-child(2){animation-delay:4s}
  .kktop .kk-promo__item:nth-child(3){animation-delay:8s}
  .kktop .kk-promo__item + .kk-promo__item::before{content:none}
}
@keyframes kkPromoRot{
  0%{opacity:0}
  3%,28%{opacity:1}
  33%,100%{opacity:0}
}
@media (max-width:480px) and (prefers-reduced-motion:reduce){
  .kktop .kk-promo__item{position:static;animation:none;opacity:1}
  .kktop .kk-promo__item:nth-child(n+2){display:none}
}

/* ---- Hero : ligne de preuve au-dessus du H1 ---- */
.kktop .kk-hero__rating{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 9px;
}
.kktop .kk-hero__rating .ku-stars{height:17px;fill:var(--brand)}
.kktop .kk-hero__rating-txt{font-size:14.5px;font-weight:600;color:var(--text-soft)}
.kktop .kk-hero__rating-txt b{color:var(--text);font-weight:700}

/* ---- Hero : 2 CTA (gap propre, cible tactile 48px) ---- */
.kktop .kk-hero__cta{gap:12px}
.kktop .kk-hero__cta .kk-btn{
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px;
}
.kktop .kk-hero__cta .kk-btn:hover{padding:12px 28px}

/* ---- Hero : micro-ligne prix + teaser configurateur ---- */
.kktop .kk-hero__micro{
  margin:14px 0 4px;font-size:13.5px;line-height:1.5;color:var(--text-muted);
}
.kktop .kk-hero__micro b{color:var(--text);font-weight:700}
.kktop .kk-hero__micro a{color:var(--brand);font-weight:600;text-decoration:none}
.kktop .kk-hero__micro a:hover{text-decoration:underline}

@media (max-width:767px){
  .kktop .kk-hero__rating{justify-content:flex-start;margin-bottom:14px}
  .kktop .kk-hero__micro{font-size:13px}
}

/* ============================================================
   Trois étapes — bloc livraison datée (sous les 3 cards)
   Monochrome bleu · check SVG · date réelle JS + fallback statique
   ============================================================ */
.kv-ship{
  margin-top:26px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}

@media (max-width:640px){
  .kv-ship{margin-top:22px}
}

/* ============================================================
   13 · ROI + Comparatif (#roi) — preuve chiffrée + méthodes
   ============================================================ */
/* Rupture tonale : le ROI devient le moment sombre "signature" de la page.
   Fond navy + halo bleu lumineux en haut ; les blocs qui portent la donnée
   (calculateur, tableau) restent des CARTES CLAIRES posées sur ce fond. */
.roi{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 78% at 50% -8%,rgba(91,124,255,.20),transparent 62%),
    linear-gradient(178deg,var(--ku-blue-900) 0%,var(--ku-blue-950) 100%);
  color:var(--text-on-dark);
}
.roi .wrap{position:relative;z-index:1}

/* Hexagone-signature en filigrane — « la marque à l'hexagone ». Grand,
   monochrome bleu, très discret, clippé par overflow:hidden de .roi. */
.roi-hexmark{
  position:absolute;z-index:0;pointer-events:none;
  top:-16%;right:-20%;width:min(94vw,880px);height:auto;aspect-ratio:1/1;
  color:var(--ku-blue-400);
}
.roi-hexmark path{
  fill:none;stroke:currentColor;stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
}
.roi-hexmark path.roi-hexmark__o{opacity:.30;stroke-width:2.6}
.roi-hexmark path.roi-hexmark__i{opacity:.18;fill:rgba(91,124,255,.05)}
/* Mobile : filigrane contenu — le décor reste dans un cadre maîtrisé (largeur
   plafonnée, faible débord clippé par overflow:hidden de .roi) et ne dépend plus
   du overflow-x du body pour ne pas provoquer de scroll horizontal. */
@media (max-width:640px){.roi-hexmark{top:-5%;right:-14%;width:min(78vw,320px)}}
.roi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Pilule d'accroche — variante sur fond sombre */
.roi-pill-row{margin:0 0 16px}
.roi-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:var(--text-on-dark);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 16px;border-radius:var(--r-pill);
}
.roi-pill svg{flex:none}
.roi-pill .ku-hex{stroke:var(--ku-blue-300)}

/* Titre du pic sombre : Fraunces clair, un cran au-dessus de l'échelle .h2 */
.roi #roi-title{
  color:var(--ku-blue-25);
  font-size:clamp(33px,3.8vw,45px);
  line-height:1.1;letter-spacing:-.025em;
}
.roi #roi-title .hl{color:var(--ku-blue-300)}


/* Comparatif — conteneur scrollable (SEUL élément à scroller en X) */
.roi-cmp{position:relative;margin-top:44px}
.roi-cmp__scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--el-16);
}
.roi-cmp__scroll:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.roi-table{
  min-width:720px;width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:14.5px;line-height:1.4;background:var(--surface);
}
.roi-table th,.roi-table td{
  padding:15px 18px;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--border);color:var(--text-soft);
}
.roi-table thead th{
  padding-top:18px;padding-bottom:18px;
  font-weight:700;font-size:14px;letter-spacing:-.01em;
  color:var(--text);background:var(--surface-sunken);
  border-bottom:1px solid var(--border-strong);vertical-align:bottom;
}
/* 1re colonne (intitulés) — sticky à gauche */
.roi-table__crit,
.roi-table th[scope="row"]{
  position:sticky;left:0;z-index:3;
  text-align:left;min-width:150px;
  background:var(--surface);font-weight:700;color:var(--text);
  box-shadow:1px 0 0 var(--border);
}
.roi-table__crit{background:var(--surface-sunken);z-index:4}
.roi-table th[scope="row"]{font-family:'Inter','Inter Fallback',system-ui,sans-serif;font-size:14px}

/* Colonne Kuerkod — surlignée + ring marque */
.roi-table__ku{
  background:var(--bg-alt);color:var(--text);
  border-left:2px solid var(--brand);border-right:2px solid var(--brand);
}
.roi-table thead .roi-table__ku{
  background:var(--brand-soft);border-top:2px solid var(--brand);
  border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);
}
.roi-table tbody tr:last-child .roi-table__ku{
  border-bottom:2px solid var(--brand);
  border-bottom-left-radius:var(--r-md);border-bottom-right-radius:var(--r-md);
}
.roi-table__ku b{color:var(--brand);font-weight:800}
.roi-table__hname{display:block;font-weight:700}
.roi-table__badge{
  display:inline-block;margin-bottom:8px;
  font-family:'Inter','Inter Fallback',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--on-brand);background:var(--brand);
  padding:4px 10px;border-radius:var(--r-xs);box-shadow:var(--el-brand-8);
}
.roi-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-xs);
  background:var(--brand-soft);color:var(--brand);
}

/* Survol/focus des lignes : surbrillance douce bleue pour suivre la ligne du
   regard sans écraser la colonne Kuerkod (qui garde son emphase). */
.roi-table tbody th[scope="row"]{transition:background var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease),color var(--dur-fast) var(--curve-easyease)}
.roi-table tbody td:not(.roi-table__ku){transition:background var(--dur-fast) var(--curve-easyease)}
.roi-table tbody tr:hover th[scope="row"],
.roi-table tbody tr:hover td:not(.roi-table__ku),
.roi-table tbody tr:focus-within th[scope="row"],
.roi-table tbody tr:focus-within td:not(.roi-table__ku){background:var(--ku-blue-50)}
/* Fil conducteur bleu à gauche de la ligne survolée : la surbrillance prend vie
   et guide le regard, sans écraser la colonne Kuerkod. */
.roi-table tbody tr:hover th[scope="row"],
.roi-table tbody tr:focus-within th[scope="row"]{
  color:var(--brand);box-shadow:inset 3px 0 0 var(--brand),1px 0 0 var(--border);
}

/* Ligne « Conforme Google » — toutes cochées : mise en scène pour qu'elle ne
   lise pas comme une rangée neutre. Léger fond bleu + note de contexte honnête. */
.roi-conform td:not(.roi-table__ku){background:var(--ku-blue-25)}
.roi-conform th[scope="row"]{
  background:var(--ku-blue-25);box-shadow:inset 3px 0 0 var(--brand),1px 0 0 var(--border);
}
.roi-conform__note{
  display:block;margin-top:4px;
  font-family:'Inter','Inter Fallback',system-ui,sans-serif;
  font-size:11.5px;font-weight:500;line-height:1.35;color:var(--text-muted);
  max-width:22em;white-space:normal;
}
.roi-conform .roi-check{background:var(--brand);color:#fff}

/* Indice de débordement (fondu bord droit, visible quand ça scrolle) */
.roi-cmp::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
  pointer-events:none;opacity:0;
  transition:opacity var(--dur-normal) var(--curve-easyease);
  background:linear-gradient(90deg,transparent,var(--surface));
  border-top-right-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg);
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .roi-cmp::after{opacity:1}
}
@media (max-width:640px){
  .roi-table th,.roi-table td{padding:13px 14px}
  .roi-table__crit,.roi-table th[scope="row"]{min-width:132px}
}
@media (prefers-reduced-motion:reduce){
  .roi-cmp::after,
  .roi-table tbody th[scope="row"],
  .roi-table tbody td:not(.roi-table__ku){transition:none}
}

/* ============================================================
   8.ter · Témoignages — avis nominatifs localisés
   ============================================================ */

/* --- Pastille check de l'entête témoignages (remplace l'emoji) --- */
.ksp__pill-check{vertical-align:-3px;margin-right:7px;flex:none}

/* --- Témoignages : avatar dégradé intra-hue + badge « Mise en situation » --- */
.gtem__av{background:linear-gradient(135deg,var(--ku-blue-400),var(--ku-blue-700))}
.gtem__head{align-items:flex-start}
.gtem__av,.gtem__who{align-self:center}
/* Étiquette « Mise en situation » : cadrage honnête assumé, non fine-print.
   Teinte marque + libellé lisible → le visiteur voit clairement qu'il s'agit
   d'un exemple d'usage, ce qui renforce la confiance plutôt que de la diluer. */
.gtem__badge{
  display:inline-flex;align-items:center;gap:5px;flex:none;align-self:flex-start;
  font-size:11px;font-weight:700;color:var(--brand);white-space:nowrap;line-height:1;
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);
  border-radius:var(--r-pill);padding:3px 9px 3px 6px;
}
.gtem__badge .gtem__sit{width:12px;height:12px;flex:none;fill:var(--brand)}
.gtem__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* --- Responsive --- */
@media (max-width:640px){
  .gtem__badge{font-size:10.5px;padding:3px 8px 3px 5px}
}

/* ============================================================
   CONFIGURATEUR (#configurer) — preuve, prix TTC dominant,
   champ URL avis Google, « Total TTC »
   ============================================================ */

/* Prix TTC dominant (headline unité) */
.config__price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:12px 0 2px;
}
.config__price-lead{font-size:13px;font-weight:600;color:var(--text-muted)}
.config__price-ttc{
  font-size:34px;font-weight:800;line-height:1;color:var(--brand);
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}
.config__price-tax{font-size:15px;font-weight:700;color:var(--text-muted)}
.config__price-ht{font-size:13px;font-weight:600;color:var(--text-muted)}
.config__price-incl{
  flex-basis:100%;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--text-soft);
  display:inline-flex;align-items:center;gap:6px;
}
.config__price-incl svg{
  width:15px;height:15px;flex:none;
  fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
/* Sélection courante — lève l'ambiguïté avec « À partir de » */
.config__price-sel{
  flex-basis:100%;margin-top:5px;
  font-size:13px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:.005em;
}

/* Ligne de preuve — en tête du panneau */
.config__proof{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;margin:0;
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-md);
}
.config__proof .ku-stars{height:15px;fill:var(--brand)}
.config__proof-txt{font-size:13.5px;font-weight:600;color:var(--text-soft)}
.config__proof-txt b{font-weight:800;color:var(--text)}

/* Champ URL avis Google */
.config__gfield{gap:8px}
.config__opt{
  margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:2px 9px;line-height:1.4;
}
.config__input{
  width:100%;box-sizing:border-box;min-height:46px;padding:12px 14px;
  font-family:inherit;font-size:16px;line-height:1.3;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease);
}
.config__input::placeholder{color:var(--text-muted)}
.config__input:hover{border-color:var(--border-strong)}
.config__input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,75,255,.18);
}
.config__hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}

.config__help{font-size:13px}
.config__help>summary{
  display:inline-flex;align-items:center;gap:7px;width:max-content;
  padding:6px 0;color:var(--brand);font-weight:700;cursor:pointer;
  list-style:none;
}
.config__help>summary::-webkit-details-marker{display:none}
.config__help>summary::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--dur-fast) var(--curve-easyease);
}
.config__help[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.config__help>summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-xs)}
.config__help-body{
  margin-top:8px;padding:12px 14px;
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;line-height:1.55;color:var(--text-soft);
}
.config__help-body ol{margin:0;padding-left:18px}
.config__help-body li{margin:4px 0}
.config__help-body b{color:var(--text);font-weight:700}

/* Option « configurer plus tard » (case réutilise .config__check) */
.config__later{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  min-height:44px;font-size:13px;line-height:1.4;color:var(--text-soft);
}
.config__later .config__check{margin-top:0}
.config__later-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.config__later-input:checked + .config__check-box{background:var(--brand);border-color:var(--brand)}
.config__later-input:checked + .config__check-box svg{opacity:1;transform:scale(1)}
.config__later-input:focus-visible + .config__check-box{outline:2px solid var(--brand);outline-offset:2px}
.config__later-txt b{font-weight:700;color:var(--text)}
/* URL grisée quand « plus tard » est coché (amélioration progressive) */
.config__gfield:has(.config__later-input:checked) .config__input,
.config__gfield:has(.config__later-input:checked) .config__hint,
.config__gfield:has(.config__later-input:checked) .config__help{opacity:.5}

/* Note gamme / autres canaux — honnêteté du tunnel */
.config__note{
  margin:12px 0 0;padding:11px 13px;
  font-size:12.5px;line-height:1.5;color:var(--text-soft);
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-md);
}
.config__note a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Note TVA sous le total */
.config__recap-note{margin:2px 0 0;font-size:11.5px;color:var(--text-muted);text-align:right}

@media (max-width:640px){
  .config__price-ttc{font-size:30px}
  .config__proof{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .config__input,
  .config__help>summary::after{transition:none}
}

/* ============================================================
   UPGRADE CONTENU · FAQ objections + Footer (disclaimer/tel/pro/paiement)
   + Barre d'achat sticky mobile. Monochrome bleu Fluent, tokens only.
   ============================================================ */

/* ---- FAQ : accordéon d'objections, chevron SVG rotatif ---- */
.kk-faq__item{
  background:var(--surface-sunken);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow var(--dur-fast) var(--curve-easyease),border-color var(--dur-fast) var(--curve-easyease);
}
.kk-faq__item[open]{
  background:var(--surface);
  border-color:var(--border-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--el-8);
}
.kk-faq__item summary{
  list-style:none;cursor:pointer;
  padding:18px 22px;min-height:56px;
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  font-size:16.5px;font-weight:600;color:var(--text);line-height:1.4;
  touch-action:manipulation;
}
.kk-faq__item summary::-webkit-details-marker{display:none}
.kk-faq__q{flex:1 1 auto;min-width:0}
.kk-faq__item summary:hover{color:var(--brand)}
.kk-faq__item summary:hover .kk-faq__chev{color:var(--brand-hover)}
.kk-faq__item summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r-lg)}
.kk-faq__chev{
  flex:none;color:var(--brand);
  transition:transform var(--dur-normal) var(--curve-easyease);
}
.kk-faq__item[open] .kk-faq__chev{transform:rotate(180deg)}
.kk-faq__item[open] summary{color:var(--brand)}
.kk-faq__body{overflow:hidden;padding:0 0 16px}
.kk-faq__item p{margin:2px 22px 0;padding:0;color:var(--text-soft);font-size:15.5px;line-height:1.55}
.kk-faq__item p strong{color:var(--text);font-weight:700}
.kk-faq__item p a{color:var(--brand);font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--curve-easyease)}
.kk-faq__item p a:hover{border-bottom-color:currentColor}
.kk-faq__item[open] .kk-faq__body{animation:kkFaqIn var(--dur-gentle) var(--curve-decel)}
@keyframes kkFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- Footer : bloc bas (pro + contact), paiement, disclaimer ---- */
.kk-foot__bottom{
  margin-top:34px;padding-top:26px;
  border-top:1px solid var(--border-on-dark);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
}
.kk-foot__pro{
  flex:1 1 340px;
  display:inline-flex;align-items:center;gap:14px;
  min-height:48px;padding:14px 18px;
  background:var(--surface-dark-2);
  border:1px solid var(--border-on-dark);
  border-radius:var(--r-lg);
  color:var(--text-on-dark);font-size:14.5px;line-height:1.35;
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease),transform var(--dur-fast) var(--curve-easyease);
  touch-action:manipulation;
}
.kk-foot__pro:hover{border-color:var(--brand);box-shadow:var(--el-brand-8);transform:translateY(-2px)}
.kk-foot__pro-ic{flex:none;color:var(--link-on-dark);display:grid;place-items:center}
.kk-foot__pro-txt{flex:1 1 auto}
.kk-foot__pro-txt strong{color:var(--on-brand);font-weight:700}
.kk-foot__pro-arr{flex:none;color:var(--link-on-dark);transition:transform var(--dur-fast) var(--curve-easyease)}
.kk-foot__pro:hover .kk-foot__pro-arr{transform:translateX(4px)}
.kk-foot__contact{display:flex;flex-wrap:wrap;gap:10px;flex:0 1 auto}
.kk-foot__contact-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border:1px solid var(--border-on-dark);border-radius:var(--r-pill);
  color:var(--text-on-dark);font-weight:600;font-size:14px;background:transparent;
  transition:background var(--dur-fast) var(--curve-easyease),border-color var(--dur-fast) var(--curve-easyease),color var(--dur-fast) var(--curve-easyease);
  touch-action:manipulation;
}
.kk-foot__contact-btn:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.kk-foot__contact-btn svg{flex:none}

/* Paiement sécurisé + logos monochromes */
.kk-foot__pay{
  margin-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
}
.kk-foot__pay-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-soft-on-dark)}
.kk-foot__pay-row{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.kk-foot__pay-item{display:inline-flex}
.kk-foot__pay-logo{width:40px;height:26px;display:block;color:var(--ku-ink-400);transition:color var(--dur-fast) var(--curve-easyease)}
.kk-foot__pay-item:hover .kk-foot__pay-logo{color:var(--text-soft-on-dark)}

/* Disclaimer légal */
.kk-foot__legal{
  margin-top:24px;padding-top:18px;
  border-top:1px solid var(--border-on-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;
}
.kk-foot__disclaimer{margin:0;font-size:12.5px;color:var(--text-soft-on-dark);line-height:1.5}
.kk-foot__copy{margin:0;font-size:12.5px;color:var(--text-soft-on-dark)}

/* ---- Barre d'achat sticky mobile (glass bleu, ≤980px) ---- */
.kk-sticky{display:none}
@media (max-width:980px){
  .kk-sticky{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:rgba(246,248,255,.72);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    backdrop-filter:blur(24px) saturate(140%);
    border-top:1px solid var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--el-28);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(120%);
    transition:transform var(--dur-gentle) var(--curve-decel-max);
    will-change:transform;
  }
  .kk-sticky.is-show{transform:translateY(0)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .kk-sticky{background:rgba(246,248,255,.98)}
  }
}
.kk-sticky__in{
  display:flex;align-items:center;gap:12px;
  max-width:680px;margin:0 auto;padding:10px 14px;
}
.kk-sticky__thumb{width:40px;height:40px;flex:none;border-radius:var(--r-md);object-fit:cover;box-shadow:var(--el-4)}
.kk-sticky__txt{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0;flex:1 1 auto}
.kk-sticky__price{font-size:14.5px;font-weight:600;color:var(--text);white-space:nowrap}
.kk-sticky__price b{font-weight:800;color:var(--text)}
.kk-sticky__micro{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.kk-sticky__cta{
  flex:0 0 auto;min-width:46%;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-brand);font-weight:700;font-size:15px;
  text-decoration:none;white-space:nowrap;box-shadow:var(--el-brand-8);
  touch-action:manipulation;
  transition:background var(--dur-fast) var(--curve-easyease),transform var(--dur-faster) var(--curve-easyease);
}
.kk-sticky__cta:hover{background:var(--brand-hover)}
.kk-sticky__cta:active{transform:translateY(1px)}
.kk-sticky__cta:focus-visible{outline:2px solid #fff;outline-offset:-4px;box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8)}

/* FAB WhatsApp + panier : remontent au-dessus de la barre sticky */
.kk-wa{transition:bottom var(--dur-gentle) var(--curve-decel-max)}
.kk-cart{transition:box-shadow .3s ease,transform .3s ease,bottom var(--dur-gentle) var(--curve-decel-max)}
body.kk-hasbar .kk-wa,
body.kk-hasbar .kk-cart{bottom:calc(64px + env(safe-area-inset-bottom) + 12px)}

@media (max-width:980px){
  .kk-foot__bottom{flex-direction:column;align-items:stretch;gap:14px}
  .kk-foot__contact{flex:1 1 auto}
  .kk-foot__contact-btn{flex:1 1 0}
}
@media (max-width:640px){
  .kk-faq__item summary{font-size:15.5px;padding:16px 18px;gap:12px}
  .kk-faq__item p{margin:2px 18px 0}
  .kk-foot__pay{justify-content:center;flex-direction:column;text-align:center;gap:10px}
  .kk-foot__pay-row{justify-content:center}
  .kk-foot__legal{flex-direction:column;text-align:center;gap:6px}
  .kk-sticky__cta{min-width:44%;padding:0 14px;font-size:14.5px}
  .kk-sticky__price{font-size:14px}
}
@media (max-width:380px){
  .kk-sticky__micro{display:none}
  .kk-sticky__in{gap:10px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  .kk-sticky{transition:none}
  .kk-wa,.kk-cart{transition:box-shadow .3s ease,transform .3s ease}
  .kk-faq__item[open] .kk-faq__body{animation:none}
  .kk-faq__chev,.kk-foot__pro,.kk-foot__pro-arr,.kk-foot__contact-btn,.kk-sticky__cta{transition:none}
}

/* ============================================================
   AUDIT FIXES (gardiens couleur + design) — overrides finaux
   ============================================================ */
/* [couleur-moyenne] contraste AA : lignes en --ku-ink-300 (2:1) → --text-muted (5,7:1) */
.config__ref{color:var(--text-muted)}
/* [design-haute] navbar : rester navy-bleu (marque) au scroll, pas ardoise */
.kktop .kk-nav__row{
  background:linear-gradient(rgba(20,36,112,.82),rgba(14,24,69,.9)),rgba(15,23,43,.6);
}
.kktop .kk-nav__row:hover{
  background:linear-gradient(rgba(24,42,128,.86),rgba(16,28,86,.92)),rgba(15,23,43,.6);
}
.kktop .kk-nav.is-fixed .kk-nav__row{
  background:linear-gradient(rgba(28,48,140,.9),rgba(18,32,100,.94)),rgba(15,23,43,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--el-28),0 12px 28px -8px rgba(44,75,255,.38);
}
/* [design-haute] widget WhatsApp : tip masqué par défaut, au survol/focus uniquement */
.kk-wa__tip{opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity var(--dur-fast) var(--curve-easyease),transform var(--dur-fast) var(--curve-easyease)}
.kk-wa:hover .kk-wa__tip,.kk-wa:focus-within .kk-wa__tip{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.kk-wa__tip{transition:none}}
/* [couleur] hero : le duotone navy→bleu clair est désormais cuit dans hero-family.webp
   (traitement PIL) — plus de voile CSS grayscale/multiply ni de masque de fondu. */
/* [design-basse] souder navbar et hero (moins de vide blanc) */
.kktop .kk-hero{padding-top:2.4%}
/* [design-basse] logos de paiement footer : carte claire lisible sur navy */
.kk-foot__pay-logo{color:var(--surface-dark)}
.kk-foot__pay-item{background:rgba(255,255,255,.92);border-radius:6px;padding:5px 9px;display:inline-flex;align-items:center}
.kk-foot__pay-item:hover .kk-foot__pay-logo{color:var(--surface-dark)}

/* =================================================================
   AXES #2 (CTA unifiés) + #1 (réassurance au point de bascule)
   ================================================================= */

/* (b) Trustrow sous le CTA [data-add] du configurateur */
.config__trustrow{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:14px}
.config__trustpills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.config__trustpills li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1;color:var(--text-soft);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 13px}
.config__trustpills li svg{flex:none;color:var(--brand)}
.config__trustpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;color:var(--text-muted)}
.config__trustpay svg{flex:none;height:24px;width:auto}

@media (max-width:640px){
  .config__trustpills li{font-size:12px;padding:6px 11px}
}

/* ============================================================
   AXES #5 (calculateur ROI) · #11 (count-up) · #6 (cut-off)
   Monochrome bleu strict · tokens existants uniquement
   ============================================================ */

/* --- Axe #5 · Calculateur ROI interactif -------------------- */
.roi-calc{
  margin-top:44px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--el-16);
  padding:32px 30px;
  position:relative;
  overflow:hidden;
}
.roi-calc::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--ku-blue-400));
}
.roi-calc__top{margin-bottom:26px;max-width:54em}
.roi-calc__title{
  font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);line-height:1.15;margin:0 0 6px;
}
.roi-calc__lead{font-size:14.5px;line-height:1.5;color:var(--text-soft);margin:0}

.roi-calc__grid{
  display:grid;grid-template-columns:1fr 1fr auto;gap:26px 32px;align-items:start;
}
.roi-calc__ctrl{display:flex;flex-direction:column;gap:14px;min-width:0}
.roi-calc__lbl{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:.005em;
}
.roi-calc__out-val{
  font-weight:800;font-size:18px;color:var(--brand);letter-spacing:-.01em;
  min-width:2.5ch;text-align:right;font-variant-numeric:tabular-nums;
}
.roi-calc__field{
  display:inline-flex;align-items:center;gap:2px;align-self:start;
  background:var(--surface-sunken);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:0 14px;
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.roi-calc__field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,75,255,.18)}
.roi-calc__num{
  width:4.5ch;height:48px;border:0;background:transparent;
  font-family:inherit;font-size:17px;font-weight:800;color:var(--text);
  text-align:right;-moz-appearance:textfield;appearance:textfield;
}
.roi-calc__num::-webkit-outer-spin-button,
.roi-calc__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-calc__num:focus{outline:none}
.roi-calc__euro{font-size:16px;font-weight:800;color:var(--text-soft)}

/* Curseurs — piste + poignée en var(--brand) */
.roi-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:24px;background:transparent;cursor:pointer;margin:0;
  --roi-fill:50%;
}
.roi-range::-webkit-slider-runnable-track{
  height:7px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand) var(--roi-fill),var(--ku-blue-100) var(--roi-fill));
}
.roi-range::-moz-range-track{height:7px;border-radius:var(--r-pill);background:var(--ku-blue-100)}
.roi-range::-moz-range-progress{height:7px;border-radius:var(--r-pill);background:var(--brand)}
.roi-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:var(--brand);border:4px solid var(--surface);box-shadow:var(--el-brand-8);
  transition:transform var(--dur-fast) var(--curve-easyease);
}
.roi-range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--brand);border:4px solid var(--surface);box-shadow:var(--el-brand-8);
}
.roi-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.roi-range:focus-visible{outline:none}
.roi-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8)}
.roi-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8)}

/* Sortie live */
.roi-calc__result{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:26px 0 0;padding:20px 22px;
  background:var(--brand-soft);border:1px solid var(--ku-blue-100);
  border-radius:var(--r-lg);
  font-size:16px;line-height:1.35;color:var(--text-soft);font-weight:600;
}
.roi-calc__seg{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.roi-calc__seg--hi{color:var(--text)}
.roi-calc__seg b{
  font-size:22px;font-weight:800;color:var(--brand);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Quand l'estimation atteint le plafond d'affichage : on assume la borne comme
   un ordre de grandeur (et non une prévision au centime). Étiquette sobre, bleue. */
.roi-calc__ca-note{
  align-self:center;margin-left:2px;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--ku-blue-50);color:var(--brand);
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.3;white-space:nowrap;
}
.roi-calc__ca-note[hidden]{display:none}
.roi-calc__arr{flex:none;align-self:center}
.roi-calc__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;margin-top:22px;
}
.roi-calc__disclaimer{
  flex:1 1 320px;margin:0;font-size:12px;line-height:1.5;color:var(--text-muted);
}
.roi-calc__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-brand);font-weight:700;font-size:15px;
  box-shadow:var(--el-brand-8);white-space:nowrap;
  transition:background var(--dur-fast) var(--curve-easyease),transform var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.roi-calc__cta:hover{background:var(--brand-hover);transform:translateY(-2px);box-shadow:var(--el-brand-16)}
.roi-calc__cta:active{transform:translateY(0);box-shadow:var(--el-brand-4)}
.roi-calc__cta:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(44,75,255,.35),var(--el-brand-8)}

@media (max-width:980px){
  .roi-calc__grid{grid-template-columns:1fr 1fr;gap:24px 28px}
  .roi-calc__ctrl--num{grid-column:1 / -1}
}
@media (max-width:640px){
  .roi-calc{padding:26px 20px}
  .roi-calc__grid{grid-template-columns:1fr;gap:22px}
  .roi-calc__result{font-size:15px;flex-direction:column;align-items:flex-start;gap:6px}
  .roi-calc__arr{transform:rotate(90deg);margin-left:4px}
  .roi-calc__foot{flex-direction:column;align-items:stretch}
  .roi-calc__cta{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .roi-calc__field,.roi-calc__cta,.roi-range::-webkit-slider-thumb{transition:none}
  .roi-calc__cta:hover{transform:none}
}

/* --- Axe #6 · Cut-off d'expédition temps réel --------------- */
.kv-cutoff{
  display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:9px 11px;
  margin:0;padding:11px 20px;
  background:var(--brand-soft);color:var(--brand);
  border:1px solid var(--ku-blue-100);
  border-radius:var(--r-pill);box-shadow:var(--el-brand-8);
  font-size:14.5px;font-weight:700;line-height:1.35;text-align:center;
}
.kv-cutoff__ic{flex:none;width:19px;height:19px}
.kv-cutoff__lead b{font-weight:800;white-space:nowrap}
.kv-cutoff__pill{
  display:inline-flex;align-items:center;
  background:var(--brand);color:var(--on-brand);border-radius:var(--r-pill);
  padding:3px 11px;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kv-cutoff__pill[hidden]{display:none}

.config__cutoff{
  flex-basis:100%;margin-top:8px;
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  padding:8px 14px;
  background:var(--brand-soft);border:1px solid var(--ku-blue-100);
  border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;color:var(--text-soft);line-height:1.3;
}
.config__cutoff svg{flex:none;width:17px;height:17px}
.config__cutoff b{color:var(--brand);font-weight:800;white-space:nowrap}

.kk-sticky__cutoff{
  display:inline-flex;align-items:center;gap:5px;margin-top:1px;
  font-size:11.5px;font-weight:700;color:var(--brand);line-height:1.15;
}
.kk-sticky__cutoff[hidden]{display:none}
.kk-sticky__cutoff svg{flex:none;width:13px;height:13px}

@media (max-width:640px){
  .kv-cutoff{font-size:13.5px;padding:10px 16px}
}
@media (max-width:380px){
  .kk-sticky__cutoff{display:none}
}


/* =================================================================
   AXES #3 (pack par défaut + decoy) · #4 (aperçu live logo) · #8 (cibles tactiles)
   ================================================================= */

/* #3 — Renfort visuel du pack « Populaire » (quantité 5) */
.config__tier.config__tier--popular{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand),var(--el-brand-16);
  padding-bottom:15px;
}
.config__tier-pop{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:3px;
  background:var(--brand);color:var(--on-brand);
  font-size:7.5px;font-weight:800;line-height:1;letter-spacing:.01em;
  padding:2px 3px;border-radius:0 0 10px 10px;
  white-space:nowrap;overflow:hidden;
}
.config__tier-pop svg{width:8px;height:8px;fill:none;stroke:var(--on-brand);stroke-width:2.2;stroke-linejoin:round;flex:none}

/* #4 — Aperçu LIVE du logo en overlay sur la plaque */
.config__stage-logo{
  position:absolute;top:23%;left:50%;transform:translateX(-50%);
  width:30%;max-width:118px;height:auto;z-index:2;
  border-radius:var(--r-md);object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(44,75,255,.30));
}
.config__stage-logo:not([hidden]){
  animation:pop var(--dur-normal) var(--curve-decel) both;
}
@keyframes pop{
  from{opacity:0;transform:translateX(-50%) scale(.8)}
  to{opacity:1;transform:translateX(-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .config__stage-logo:not([hidden]){animation:none}
}

/* #8 — Cibles tactiles >=44px (configurateur + panier) */
.config__step{width:44px;height:44px}
.config__cart-close{width:44px;height:44px}
.config__thumb{min-width:44px;min-height:44px}
.config__fileremove{position:relative}
.config__fileremove::before{content:"";position:absolute;inset:-12px}
.config__cart-line-remove{position:relative}
.config__cart-line-remove::before{content:"";position:absolute;inset:-12px}

/* ============================================================
   Polices auto-hébergées — variable latin, 0 round-trip Google.
   Fraunces (display · opsz 9–144, wght 400–700) + Inter (UI, wght 400–800).
   font-display:swap → texte lisible tout de suite ; repli calibré plus bas.
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/fraunces-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   AXE #12 · Anti-CLS — police de repli calibrée (metric override)
   Repli sur Arial ajusté aux métriques d'Inter (corps/UI) : réserve la
   bonne hauteur de ligne avant le swap → pas de « text jump ».
   Le display Fraunces garde Georgia en repli immédiat (voir --font-display).
   ============================================================ */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:107.12%;
  ascent-override:90.44%;
  descent-override:22.52%;
  line-gap-override:0%;
}

/* ============================================================
   AXE #9 · Skip link — accès direct au contenu (WCAG 2.4.1)
   Hors focus : escamoté au-dessus du viewport. Au focus clavier :
   descend, épinglé en haut, cible ≥44px.
   ============================================================ */
.kk-skip{
  position:fixed;
  top:8px;
  left:8px;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:var(--r-md);
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  text-decoration:none;
  box-shadow:var(--el-brand-16);
  transform:translateY(-150%);
  transition:transform var(--dur-gentle) var(--curve-decel);
}
.kk-skip:focus,
.kk-skip:focus-visible{
  transform:translateY(0);
  outline:2px solid #fff;
  outline-offset:2px;
}
#contenu:focus{outline:none}
#contenu:focus-visible{outline:none}

/* ============================================================
   AXE #7 · LCP hero — <picture> conserve le remplissage de la figure
   (l'<img> gardait width:100%/height:100% sur son parent direct).
   ============================================================ */
.kktop .kk-hero__shot picture{display:block;height:100%}

@media (prefers-reduced-motion:reduce){
  .kk-skip{transition:none}
}

/* fix : l'apercu logo reste cache tant qu'aucun logo (bat le reset img{display:block}) */
.config__stage-logo[hidden]{display:none}

/* ============ Illustrations Lottie (flat monochrome bleu, discrètes) ============ */
.kk-lottie{display:block;width:100%;max-width:100%;line-height:0}
.kk-lottie svg{display:block!important;width:100%!important;height:auto!important}

/* étapes : Lottie à la place des images de fond */
.hv-step{padding:34px 24px 26px;display:flex;flex-direction:column;position:relative}
.hv-step--1,.hv-step--2,.hv-step--3{--step-img:none}
.hv-step__anim{width:100%;max-width:250px;aspect-ratio:1/1;margin:16px auto 0}
@media (prefers-reduced-motion:reduce){.hv-step__anim{opacity:.96}}

/* Extension Lottie : puce config, icônes bénéfices */
/* Signature du calculateur : graphe SVG propriétaire — barres avis (dégradé
   brand→accent), ligne de note, readout étoilé. Illustratif, séparé du calcul.
   Animé au scroll via l'état .roi-calc.in (aucun JS dédié). */
.roi-chart{max-width:480px;margin:12px auto 24px}
.roi-chart__svg{display:block;width:100%;height:auto}
.roi-chart text{font-family:'Inter','Inter Fallback',system-ui,sans-serif}
.roi-chart__grid line{stroke:var(--border);stroke-width:1.4}
.roi-chart__grid .roi-chart__axis{stroke:var(--border-strong)}
.roi-chart__bar{fill:url(#roiBar);transform-box:fill-box;transform-origin:50% 100%}
.roi-chart__line{stroke:var(--ku-blue-900);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.roi-chart__dot{fill:var(--surface);stroke:var(--ku-blue-900);stroke-width:2.5}
.roi-chart__mon text{fill:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.02em}
.roi-chart__axis-t{fill:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.03em}
.roi-chart__leg-sw{fill:url(#roiBar)}
.roi-chart__leg-t{fill:var(--text-muted);font-size:12px;font-weight:600}
.roi-chart__vals text{fill:var(--ku-blue-700);font-size:10px;font-weight:700;letter-spacing:.01em}
.roi-chart__read-bg{fill:var(--brand-soft);stroke:var(--ku-blue-100);stroke-width:1}
.roi-chart__star{fill:var(--star)}
.roi-chart__read-t{fill:var(--text);font-size:14px;font-weight:800;letter-spacing:-.01em}
@media (max-width:640px){.roi-chart{max-width:360px}}

@media (prefers-reduced-motion:no-preference){
  /* Réactivité au drag des curseurs : la géométrie (y/height des barres, d de la
     ligne, cx/cy des points) glisse en ~.25s — repaint JS rendu perceptible. */
  .roi-chart__bar{transform:scaleY(0);transition:transform .5s var(--curve-decel),y .25s var(--curve-decel),height .25s var(--curve-decel)}
  .roi-chart__dot{transition:cx .25s var(--curve-decel),cy .25s var(--curve-decel)}
  .roi-calc.in .roi-chart__bar{transform:scaleY(1)}
  .roi-calc.in .roi-chart__bar:nth-of-type(1){transition-delay:.02s}
  .roi-calc.in .roi-chart__bar:nth-of-type(2){transition-delay:.09s}
  .roi-calc.in .roi-chart__bar:nth-of-type(3){transition-delay:.16s}
  .roi-calc.in .roi-chart__bar:nth-of-type(4){transition-delay:.23s}
  .roi-calc.in .roi-chart__bar:nth-of-type(5){transition-delay:.30s}
  .roi-calc.in .roi-chart__bar:nth-of-type(6){transition-delay:.37s}
  .roi-chart__line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .68s var(--curve-decel) .3s,d .25s var(--curve-decel)}
  .roi-calc.in .roi-chart__line{stroke-dashoffset:0}
  .roi-chart__dots,.roi-chart__read,.roi-chart__leg,.roi-chart__vals{opacity:0;transition:opacity .3s ease-out}
  .roi-calc.in .roi-chart__leg{opacity:1;transition-delay:.18s}
  .roi-calc.in .roi-chart__vals{opacity:1;transition-delay:.50s}
  .roi-calc.in .roi-chart__dots{opacity:1;transition-delay:.55s}
  .roi-calc.in .roi-chart__read{opacity:1;transition-delay:.86s}
}
/* Badge « puce NFC programmée » — SVG/CSS léger (remplace un Lottie 82 Ko). */
.config__chip{position:absolute;left:14px;bottom:14px;width:78px;height:78px;z-index:3;pointer-events:none;
  color:var(--brand);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--el-8);padding:9px}
.config__chip-ic{display:block;width:100%;height:100%}
.config__chip-w{opacity:.28}
@keyframes chipWave{0%,55%,100%{opacity:.28}22%{opacity:1}}
.config__chip-w1{animation:chipWave 2s var(--curve-easyease,ease-in-out) infinite}
.config__chip-w2{animation:chipWave 2s var(--curve-easyease,ease-in-out) .18s infinite}
.config__chip-w3{animation:chipWave 2s var(--curve-easyease,ease-in-out) .36s infinite}
@supports not (backdrop-filter:blur(1px)){.config__chip{background:rgba(255,255,255,.95)}}
@media (max-width:640px){.config__chip{width:64px;height:64px;left:10px;bottom:10px;padding:8px}}
@media (prefers-reduced-motion:reduce){.config__chip-w{animation:none;opacity:1}}