/* ============================================================================
   Well-come — vitrine well-come.io, direction « Précision suisse » (validée le 2026-10-15 ;
   référence : docs/design-2026/precision-suisse/). Gabarits : templates/ ; textes : content/.
   CSS vanilla, zéro build, zéro CDN, compatible CSP stricte (aucun style inline :
   toutes les variantes passent par des classes et des attributs data-*).
   Typo : Inter variable auto-hébergée (même famille que l'interface borne v2).
   Accent unique : rouge Well-come #e02b20. Le dégradé rouge → or est réservé au
   « -come » du logo, au liseré (3 px) et à une lueur diffuse.
   ========================================================================== */

/* ---------------------------------------------------------------- Police */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');   /* = URL du preload (layout.php) */
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --paper: #ffffff;
  --paper-2: #f5f5f2;
  --paper-3: #ecece7;
  --ink: #111214;
  --ink-2: #26282d;
  --text: #3b3d42;
  --muted: #5e6168;          /* AA sur blanc et sur --paper-2 */
  --faint: #80838a;          /* grands textes seulement (≥ 3:1, y compris sur le halo du héros) */
  --line: #e3e3de;
  --line-2: #cfcfc8;

  --red: #e02b20;            /* rouge Well-come — 4,6:1 sur blanc */
  --red-ink: #c8231a;        /* petit texte rouge sur fond gris */
  --red-050: #fdefed;
  --gold: #edc976;
  --brand-line: linear-gradient(90deg, #e02b20 0%, #ea3c3b 38%, #edc976 100%);

  --ok: #047857;  --ok-bg: #e7f5ee;
  --down: #b42318; --down-bg: #fdecea;

  --dark: #111214;
  --dark-2: #1b1c20;
  --on-dark: #f5f5f2;
  --on-dark-muted: #a7a9b0;
  --red-on-dark: #ff6a5c;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(17, 18, 20, .05), 0 0 0 1px rgba(17, 18, 20, .04);
  --shadow-2: 0 24px 48px -28px rgba(17, 18, 20, .28), 0 0 0 1px rgba(17, 18, 20, .05);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11' 0, 'ss03' 0;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Layout */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(72px, 10vw, 144px); }
.sec--alt { background: var(--paper-2); }
.sec--tight { padding-block: clamp(48px, 6vw, 88px); }

/* En-tête de section éditorial : index + libellé à gauche, titre à droite */
.sec-head { display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid var(--ink); margin-bottom: clamp(40px, 6vw, 80px); }
.sec-idx { display: flex; gap: 14px; align-items: baseline; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sec-idx span { color: var(--red-ink); font-variant-numeric: tabular-nums; }
.sec-head h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); max-width: 18ch; }
.sec-lead { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 56ch; line-height: 1.55; }
@media (min-width: 960px) {
  .sec-head { grid-template-columns: 3fr 9fr; gap: 24px; }
}

/* ---------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px rgba(224, 43, 32, .7); }
.btn--primary:hover { background: #c8231a; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--red); color: var(--red-ink); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- Liseré de marque */
.brand-line { height: 3px; background: var(--brand-line); }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 152px; height: auto; }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: block; padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 999px; }
.nav a:hover { background: var(--paper-2); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-decoration: none; padding: 8px 6px; }
.lang:hover { color: var(--ink); }
.header-cta { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn[hidden] { display: none; }
.mobile-nav { border-top: 1px solid var(--line); background: #fff; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { padding-block: 8px 16px; }
.mobile-nav a { display: block; padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 16px; width: 100%; }
@media (min-width: 1100px) {
  .nav { display: block; }
  .header-actions { margin-left: 8px; }
  .header-cta { display: inline-flex; }
  .menu-btn { display: none; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .header-cta { display: inline-flex; }
}

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; overflow: hidden; padding-top: clamp(28px, 4vw, 40px); }
.hero__glow {
  position: absolute; pointer-events: none; z-index: 0;
  width: 980px; height: 980px; right: -260px; top: 40px;
  background: radial-gradient(closest-side, rgba(237, 201, 118, .30), rgba(234, 60, 59, .10) 55%, rgba(234, 60, 59, 0) 100%);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 48px; }
.hero__copy { display: flex; flex-direction: column; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.kicker::before { content: ''; width: 10px; height: 10px; background: var(--red); flex: none; }
.hero h1 { margin-top: 24px; font-size: clamp(2.75rem, 5.6vw, 5rem); letter-spacing: -.045em; line-height: .98; font-weight: 600; }
.hero h1 .dot { color: var(--red); }
.hero h1 .soft { display: block; margin-top: .22em; font-size: .56em; letter-spacing: -.035em; color: var(--faint); font-weight: 500; }
.hero__lead { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 34em; }
.hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.facts { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 18px 16px 0 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; }
.facts dd { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (max-width: 599px) {
  .facts { grid-template-columns: 1fr; }
  .facts div, .facts div + div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .facts dd { margin-top: 0; text-align: right; }
}
.hero__stage { position: relative; display: flex; justify-content: center; margin: 0; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 0 32px; align-items: end; }
  .hero__copy { align-self: center; padding-bottom: 40px; }
}

/* La borne réelle en pupitre, vue produit (dessin généré, cf. « BORNE (dessin) ») + fiche technique, sans
   cotes ni dimensions (décision du 2026-10-16). Sur grand écran, la figure tient dans la hauteur de la
   fenêtre (en-tête compris) pour que le socle reste au-dessus de la ligne de flottaison ; la fiche se
   place à droite de la colonne (--hk-art, --hk-ratio : bloc @gen:lectern). */
.hero__stage::after { content: ''; position: absolute; z-index: 0; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--line-2); }
.hk { position: relative; z-index: 1; width: 100%; max-width: 440px; margin-inline: auto; }
.hk__spec { margin: 6px 0 28px; font-size: 13px; line-height: 1.3; }
.hk__spec-t { padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hk__spec div { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.hk__spec dt { color: var(--muted); white-space: nowrap; }
.hk__spec dd { color: var(--ink); font-weight: 500; text-align: right; }
.hk-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(17, 18, 20, .4); }
.hk-sw--w { background: #fff; }
.hk-sw--b { background: #1b1c20; }
@media (min-width: 640px) {
  .hk { max-width: 600px; }
  .hk__art { width: var(--hk-art); }
  .hk__spec { position: absolute; right: 0; top: 43%; width: 15.5em; margin: 0; }
}
@media (min-width: 1024px) {
  .hk { width: min(100%, calc((100vh - 132px) * var(--hk-ratio))); max-width: none; margin-right: 0; }
}
@media (prefers-reduced-motion: no-preference) { .hk__spec { animation: hkFade .7s ease .5s both; } }
@keyframes hkFade { from { opacity: 0; } }

/* Logos clients : bandeau pleine largeur sous le héros */
.trust { position: relative; z-index: 1; border-bottom: 1px solid var(--line); background: var(--paper); }
.trust__in { display: grid; gap: 18px; padding-block: 28px 30px; align-items: center; }
.trust__label { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trust__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; align-items: center; }
.trust__logos li { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; min-width: 0; }
.trust__logos img { height: 36px; width: auto; min-width: 0; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .62; transition: opacity .25s ease, filter .25s ease; }
.trust__logos img:hover { opacity: 1; filter: none; }
.trust__logos img[alt="YNEO"] { height: 30px; }
@media (min-width: 640px) { .trust__logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 960px) { .trust__in { grid-template-columns: 3fr 9fr; gap: 24px; } .trust__logos li { justify-content: center; } }

/* ============================================================================
   BORNE (dessin) — la borne RÉELLE en pupitre : écran 32″ paysage incliné vers l'arrière, une seule
   colonne plate (panneau), socle aux angles arrondis, blanc mat ; sans marque, sans cotes.
   Socle, colonne, dos et tranches de l'écran : SVG généré depuis la géométrie de la borne
   (templates/partials/art/lectern.php ← docs/illustrations/build.py). L'écran est l'interface v2 en
   HTML, posée sur la dalle par une matrice affine : la boîte .dev a le rapport du dessin, la zone
   active y est placée en % (bloc @gen:lectern, réécrit par le générateur).
   ========================================================================== */
.dev { position: relative; width: 100%; }
.dev__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dev__face { position: absolute; transform-origin: 0 0; }
.dev__face .dev__screen { border-radius: 0; }
/* @gen:lectern — généré par docs/illustrations/build.py (ne pas modifier à la main) */
.dev { aspect-ratio: 512.0 / 734.2; }
.dev__face { left: 17.554%; top: 4.376%; width: 68.362%; transform: matrix(0.88295, 0.12151, -0.28904, 0.90185, 0, 0); }
.hk { --hk-art: 74.53%; --hk-ratio: 0.9357; }
.dev--hw { aspect-ratio: 512.0 / 734.2; }
.dev--hw32 .dev__face { left: 17.554%; top: 4.376%; width: 68.362%; }
.dev--hw21 .dev__face { left: 26.017%; top: 9.531%; width: 44.862%; }
/* @gen:end */
/* Cadre d'écran vu de face (parcours §01) : --cm = pixels par centimètre, posé par le contexte */
.dev__display {
  position: relative; z-index: 2;
  padding: calc(var(--cm) * 1.3);
  border-radius: calc(var(--cm) * 1.1);
  background: linear-gradient(180deg, #1e2026 0%, #121318 26%, #0c0d10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px #050506,
    0 calc(var(--cm) * 5) calc(var(--cm) * 9) calc(var(--cm) * -3) rgba(20, 20, 40, .32);
}
.dev__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--cm, 10px) * .35); background: #050505; }
.dev__glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .025) 30%, rgba(255, 255, 255, 0) 30.2%); }

/* ============================================================================
   INTERFACE BORNE v2 — reproduction de la mise en page PAYSAGE (Tailwind v2 → CSS maison).
   Unité virtuelle : 1 px d'un écran 1920 × 1080 paysage (= var(--u)). Plus de colonnes,
   moins de rangées ; les petits textes (pastilles, fonctions) sont légèrement grossis
   pour rester lisibles en vignette.
   ========================================================================== */
.k-screen { container-type: inline-size; position: absolute; inset: 0; --u: calc(100cqw / 1920); }
.k-mini { container-type: inline-size; position: relative; --u: calc(100cqw / 620); }
.k-root { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #050505; color: #fff; font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; user-select: none; }
.k-root p { text-wrap: wrap; }
.k-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.k-orb--1 { width: calc(var(--u) * 1150); height: calc(var(--u) * 1150); top: calc(var(--u) * -500); left: calc(var(--u) * -400); background: radial-gradient(circle, rgba(251, 146, 60, .42) 0%, rgba(251, 146, 60, 0) 68%); }
.k-orb--2 { width: calc(var(--u) * 1350); height: calc(var(--u) * 1350); bottom: calc(var(--u) * -640); right: calc(var(--u) * -480); background: radial-gradient(circle, rgba(168, 85, 247, .36) 0%, rgba(168, 85, 247, 0) 68%); }

/* Accent société (fontcolor) */
.acc-amber  { --k-acc: #f59e0b; --card-accent: #f59e0b; }
.acc-blue   { --k-acc: #3b82f6; --card-accent: #3b82f6; }
.acc-green  { --k-acc: #10b981; --card-accent: #10b981; }
.acc-violet { --k-acc: #a855f7; --card-accent: #a855f7; }
.hue-25  { background: hsl(25 50% 30%); }
.hue-145 { background: hsl(145 50% 30%); }
.hue-200 { background: hsl(200 50% 30%); }
.hue-270 { background: hsl(270 50% 30%); }
.hue-320 { background: hsl(320 50% 30%); }

/* En-tête des écrans */
.k-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 24) calc(var(--u) * 44); background: rgba(10, 10, 10, .55); border-bottom: max(1px, calc(var(--u) * 1.5)) solid rgba(255, 255, 255, .05); }
.k-back { font-size: calc(var(--u) * 32); line-height: 1.4; color: var(--k-acc, #fb923c); }
.k-brand { font-size: calc(var(--u) * 20); letter-spacing: .3em; text-transform: uppercase; color: #5c5c5c; }
.k-title { font-size: calc(var(--u) * 76); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; text-align: center; color: #fff; max-width: calc(var(--u) * 1640); margin-inline: auto; }

/* Recherche (société ou personne) */
.k-search { position: relative; width: calc(100% - var(--u) * 160); max-width: calc(var(--u) * 860); margin: 0 auto calc(var(--u) * 36); display: flex; align-items: center; padding: calc(var(--u) * 20) calc(var(--u) * 30) calc(var(--u) * 20) calc(var(--u) * 84); border-radius: calc(var(--u) * 24); background: rgba(255, 255, 255, .07); border: max(1px, calc(var(--u) * 1.5)) solid color-mix(in srgb, var(--k-acc, #fb923c) 50%, transparent); font-size: calc(var(--u) * 32); line-height: 1.3; color: #fff; }
.k-search svg { position: absolute; left: calc(var(--u) * 30); top: 50%; width: calc(var(--u) * 34); height: calc(var(--u) * 34); transform: translateY(-50%); color: #737373; }
.k-search--idle { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); color: #8a8a8a; font-weight: 300; }
.k-caret { display: inline-block; width: calc(var(--u) * 3); height: 1.15em; margin-left: calc(var(--u) * 2); background: #fff; animation: kBlink 1.06s steps(2, start) infinite; }
@keyframes kBlink { to { visibility: hidden; } }

/* Écran « Quelle société venez-vous voir ? » : 4 sociétés sur une rangée */
.k-cl { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 24) calc(var(--u) * 80) calc(var(--u) * 72); }
.k-cl .k-search { margin: calc(var(--u) * 36) auto calc(var(--u) * 50); }
.k-cards { display: flex; justify-content: center; gap: calc(var(--u) * 34); }
.k-co { position: relative; flex: none; width: calc(var(--u) * 410); height: calc(var(--u) * 398); padding: calc(var(--u) * 60) calc(var(--u) * 24) calc(var(--u) * 34); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--u) * 14); border-radius: calc(var(--u) * 40); background: rgba(255, 255, 255, .03); border: max(1px, calc(var(--u) * 1.5)) solid rgba(255, 255, 255, .07); overflow: hidden; }
.k-co::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 45%, var(--card-accent, transparent), transparent 65%); opacity: .10; pointer-events: none; }
.k-co--closed { opacity: .55; }
.k-co--closed .k-co__logo { filter: grayscale(60%) brightness(.85); }
.k-co--closed::before { opacity: 0; }
.k-co__logo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.k-co__logo svg { width: calc(var(--u) * 216); height: calc(var(--u) * 216); }
.k-co__name { width: 100%; font-size: calc(var(--u) * 42); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pill { position: absolute; top: calc(var(--u) * 18); right: calc(var(--u) * 18); z-index: 1; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 7) calc(var(--u) * 16); border-radius: 999px; font-size: calc(var(--u) * 27); font-weight: 500; line-height: 1.35; white-space: nowrap; }
.k-pill i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; flex: none; }
.k-pill em { font-style: normal; color: #a3a3a3; margin-left: calc(var(--u) * 2); }
.k-pill--open { background: rgba(16, 185, 129, .35); color: #d1fae5; border: max(1px, calc(var(--u) * 1.5)) solid rgba(52, 211, 153, .5); }
.k-pill--open i { background: #34d399; box-shadow: 0 0 calc(var(--u) * 6) rgba(52, 211, 153, .5); animation: kDot 2.6s ease-in-out infinite; }
.k-pill--closed { background: rgba(38, 38, 38, .8); color: #e5e5e5; border: max(1px, calc(var(--u) * 1.5)) solid rgba(82, 82, 82, .5); }
.k-pill--closed i { background: #a3a3a3; }
@keyframes kDot { 0%, 100% { box-shadow: 0 0 calc(var(--u) * 6) rgba(52, 211, 153, .5); } 50% { box-shadow: 0 0 calc(var(--u) * 14) rgba(52, 211, 153, .9); } }

/* Écran « Qui souhaitez-vous voir ? » : recherche, 5 personnes sur une rangée, clavier maison */
.k-el { flex: 1; display: flex; flex-direction: column; }
.k-el .k-title { margin-top: calc(var(--u) * 34); margin-bottom: calc(var(--u) * 26); padding-inline: calc(var(--u) * 44); font-size: calc(var(--u) * 70); }
.k-grid { display: grid; grid-template-columns: repeat(5, calc(var(--u) * 270)); justify-content: center; gap: calc(var(--u) * 28); padding: 0 calc(var(--u) * 80); }
.k-emp { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 20) calc(var(--u) * 14); border-radius: calc(var(--u) * 32); background: rgba(255, 255, 255, .03); border: max(1px, calc(var(--u) * 1.5)) solid rgba(255, 255, 255, .07); min-width: 0; }
.k-av { position: relative; width: calc(var(--u) * 138); height: calc(var(--u) * 138); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 48); font-weight: 300; color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .05), 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0, 0, 0, .4); flex: none; }
.k-dot { position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; border: calc(var(--u) * 3) solid #0a0a0a; background: var(--k-acc, #fb923c); box-shadow: 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--k-acc, #fb923c) 70%, transparent); }
.k-emp__txt { width: 100%; text-align: center; }
.k-emp__name { display: block; font-size: calc(var(--u) * 30); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-emp__job { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 25); font-weight: 300; line-height: 1.3; color: #a3a3a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.k-kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: calc(var(--u) * 16) calc(var(--u) * 40) calc(var(--u) * 20); background: rgba(23, 23, 23, .95); border-top: max(1px, calc(var(--u) * 1.5)) solid rgba(255, 255, 255, .1); box-shadow: 0 calc(var(--u) * -10) calc(var(--u) * 40) rgba(0, 0, 0, .4); }
.k-kb__top { display: flex; align-items: center; justify-content: space-between; max-width: calc(var(--u) * 1240); margin: 0 auto calc(var(--u) * 10); padding-inline: calc(var(--u) * 8); }
.k-kb__hint { font-size: calc(var(--u) * 22); font-weight: 300; color: #8a8a8a; }
.k-kb__done { padding: calc(var(--u) * 6) calc(var(--u) * 20); font-size: calc(var(--u) * 26); font-weight: 500; color: #fb923c; }
.k-kb__row { display: flex; justify-content: center; gap: calc(var(--u) * 10); }
.k-kb__row + .k-kb__row { margin-top: calc(var(--u) * 8); }
.k-kb__row--last { gap: calc(var(--u) * 14); }
.k-kb__row + .k-kb__row--last { margin-top: calc(var(--u) * 14); }
.k-key { min-width: calc(var(--u) * 96); min-height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .08); font-size: calc(var(--u) * 28); font-weight: 500; color: #fff; }
.k-key--hit { background: rgba(251, 146, 60, .6); transform: scale(.92); }
.k-key--fn { background: rgba(251, 146, 60, .2); color: #fbbf24; }
.k-key--space { flex: 1; max-width: calc(var(--u) * 620); font-size: calc(var(--u) * 22); }
.k-key--wide { min-width: calc(var(--u) * 150); }
.k-key svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }

/* Overlay d'appel bidirectionnel : carte centrée ≈ 40 % de la largeur, fond peu flouté */
.k-call { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-inline: calc(var(--u) * 24); background: rgba(10, 10, 10, .5); backdrop-filter: blur(calc(var(--u) * 6)); -webkit-backdrop-filter: blur(calc(var(--u) * 6)); }
.k-call__card { width: 100%; max-width: calc(var(--u) * 768); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 30); padding: calc(var(--u) * 56) calc(var(--u) * 60); text-align: center; border-radius: calc(var(--u) * 48); background: rgba(23, 23, 23, .92); border: max(1px, calc(var(--u) * 1.5)) solid rgba(255, 255, 255, .1); box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 120) rgba(0, 0, 0, .6); }
.k-call__ph { position: relative; width: calc(var(--u) * 230); height: calc(var(--u) * 230); }
.k-call__ph .k-av { width: 100%; height: 100%; font-size: calc(var(--u) * 80); transition: box-shadow .4s ease; }
.k-wave { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 3) solid transparent; opacity: 0; pointer-events: none; }
.k-call__name { font-size: calc(var(--u) * 56); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.k-call__job { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 30); font-weight: 300; color: #8a8a8a; }
.k-call__status { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 32); font-weight: 300; color: #b5b5b5; }
.k-hang { display: flex; align-items: center; gap: calc(var(--u) * 16); padding: calc(var(--u) * 26) calc(var(--u) * 64); border-radius: 999px; background: #ef4444; font-size: calc(var(--u) * 30); font-weight: 500; color: #fff; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 25) calc(var(--u) * -5) rgba(239, 68, 68, .3); }
.k-hang svg { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.k-call--ringing .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(251, 146, 60, .4), 0 0 calc(var(--u) * 60) rgba(251, 146, 60, .25); }
.k-call--ringing .k-wave { animation: kSonarO 2.1s cubic-bezier(.16, 1, .3, 1) infinite; }
.k-call--ringing .k-wave--2 { animation-delay: .7s; }
.k-call--ringing .k-wave--3 { animation-delay: 1.4s; }
.k-call--active .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(52, 211, 153, .5), 0 0 calc(var(--u) * 80) rgba(52, 211, 153, .3); animation: kBreath 2.4s ease-in-out infinite; }
.k-call--active .k-wave { animation: kSonarG 2.4s ease-out infinite; }
.k-call--active .k-wave--2 { animation-delay: 1.2s; }
.k-call--active .k-wave--3 { display: none; }
.k-call--thanks .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(251, 191, 36, .45), 0 0 calc(var(--u) * 60) rgba(251, 191, 36, .25); animation: kBreath 2s ease-in-out infinite; }
.k-call--thanks .k-hang { visibility: hidden; }
@keyframes kSonarO { 0% { transform: scale(1); opacity: 0; border-color: rgba(251, 146, 60, .85); } 10% { opacity: .85; } 100% { transform: scale(1.9); opacity: 0; border-color: rgba(251, 146, 60, 0); } }
@keyframes kSonarG { 0% { transform: scale(1); opacity: 0; border-color: rgba(52, 211, 153, .7); } 15% { opacity: .6; } 100% { transform: scale(1.55); opacity: 0; border-color: rgba(52, 211, 153, 0); } }
@keyframes kBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Cycle FR → EN → DE (tuile Multilingue, §03) : une keyframe par mot, sans animation-delay → un seul mot visible à tout instant */
@keyframes kCycle { 0%, 30% { opacity: 1; transform: translateY(0); } 33%, 97% { opacity: 0; transform: translateY(-.11em); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes kCycB { 0%, 30% { opacity: 0; transform: translateY(.11em); } 33%, 63% { opacity: 1; transform: translateY(0); } 66%, 100% { opacity: 0; transform: translateY(-.11em); } }
@keyframes kCycC { 0%, 63% { opacity: 0; transform: translateY(.11em); } 66%, 96% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(-.11em); } }

/* Écran de veille */
.k-ss { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 48); background: radial-gradient(ellipse at center, rgba(251, 146, 60, .09), transparent 60%), #050505; }
.k-ss__f { position: relative; display: flex; align-items: center; justify-content: center; }
.k-ss__f svg { width: calc(var(--u) * 240); height: calc(var(--u) * 240); color: rgba(251, 146, 60, .95); filter: drop-shadow(0 0 calc(var(--u) * 40) rgba(251, 146, 60, .35)); animation: kTap 2.4s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.k-ss__r { position: absolute; top: 50%; left: 50%; width: calc(var(--u) * 172); height: calc(var(--u) * 172); margin-top: calc(var(--u) * 69); border-radius: 50%; border: calc(var(--u) * 3) solid rgba(251, 146, 60, .6); transform: translate(-50%, -50%); opacity: 0; animation: kRipple 2.4s cubic-bezier(.16, 1, .3, 1) infinite; }
.k-ss__p { font-size: calc(var(--u) * 72); font-weight: 200; letter-spacing: -.01em; color: #fafafa; line-height: 1.2; text-align: center; }
.k-ss__p small { display: block; margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 38); font-weight: 300; letter-spacing: .01em; color: rgba(251, 146, 60, .85); }
@keyframes kTap { 0%, 100% { transform: translateY(-8%) scale(1); opacity: .85; } 45%, 55% { transform: translateY(8%) scale(.92); opacity: 1; } }
@keyframes kRipple { 0%, 45% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 55% { transform: translate(-50%, -50%) scale(1); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }

/* ============================================================================
   01 — Parcours visiteur
   ========================================================================== */
/* Trois étapes cliquables pilotant UNE grande borne (site.js pose data-step / data-phase / data-typed).
   Mobile : la borne d'abord (elle ne bouge pas quand le texte de l'étape change), les étapes dessous. */
.tour { display: grid; gap: 28px; grid-template-areas: "stage" "copy"; }
.tour__copy { grid-area: copy; min-width: 0; }
.tour__stage { grid-area: stage; min-width: 0; margin: 0; container-type: inline-size; }
@media (min-width: 1024px) {
  .tour { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "copy stage"; gap: 56px; align-items: start; }
}
.tour__steps { border-bottom: 1px solid var(--line-2); }
.tstep { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; width: 100%; padding: 18px 4px 20px 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); cursor: pointer; font: inherit; color: var(--muted); }
.tstep__n { padding-top: 5px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.tstep__body { min-width: 0; }
.tstep__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--muted); transition: color .2s ease; }
.tstep__d { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.tstep:hover .tstep__t { color: var(--ink); }
.tstep.is-active .tstep__n { color: var(--red-ink); }
.tstep.is-active .tstep__t { color: var(--ink); }
.tstep.is-active .tstep__d { color: var(--text); }
.tstep:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
.tstep__tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--red-050); color: var(--red-ink); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.tstep__tag svg { width: 14px; height: 14px; }
/* Filet supérieur : noir sur l'étape active, avec la progression en rouge pendant la lecture */
.tstep__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.tstep.is-active .tstep__bar { background: var(--ink); }
.tstep__bar::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--red); }
.tour.is-playing .tstep.is-active .tstep__bar::after { animation: tProgress var(--dur, 5s) linear both; }
.tour__steps li:nth-child(1) .tstep { --dur: 5.2s; }
.tour__steps li:nth-child(2) .tstep { --dur: 5.6s; }
.tour__steps li:nth-child(3) .tstep { --dur: 10.4s; }
@keyframes tProgress { to { transform: scaleX(1); } }
.tour__foot { margin-top: 22px; display: grid; gap: 16px; justify-items: start; }
.play-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s ease; }
.play-btn:hover { border-color: var(--ink); }
.play-btn svg { width: 16px; height: 16px; }
.play-btn[hidden] { display: none; }
.play-btn__play { display: none; }
.play-btn[data-paused="true"] .play-btn__play { display: block; }
.play-btn[data-paused="true"] .play-btn__pause { display: none; }
.tour__note { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tour__note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--red); }
/* Mobile : toutes les descriptions restent affichées (rien ne saute pendant la lecture, la Pause ne bouge pas) */
@media (max-width: 1023px) {
  .tstep { padding-block: 14px 16px; }
}

/* La grande borne : l'écran vu de face + l'amorce du pied réel, une colonne plate (panneau) en noir mat */
.tour__dev { --cm: calc(100cqw / 73); position: relative; }
.tour__col { position: relative; width: calc(var(--cm) * 24); height: clamp(36px, 11cqw, 96px); margin: 0 auto; background: linear-gradient(90deg, #121316 0%, #24252a 7%, #2b2c31 50%, #222327 93%, #101113 100%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.tour__col::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.tour__cap { margin-top: 4px; text-align: center; font-size: 13px; color: var(--muted); }

/* États de l'écran */
.tour-k .k-view { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.tour-k[data-step="1"] .k-view--co,
.tour-k[data-step="2"] .k-view--emp,
.tour-k[data-step="3"] .k-view--emp { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.tour-k[data-step="1"] .k-view--co .k-in,
.tour-k[data-step="2"] .k-view--emp .k-in { animation: kIn .6s var(--ease) both; }
.tour-k .k-d1 { animation-delay: .08s !important; }
.tour-k .k-d2 { animation-delay: .16s !important; }
.tour-k .k-d3 { animation-delay: .24s !important; }
.tour-k .k-d4 { animation-delay: .32s !important; }
.tour-k .k-d5 { animation-delay: .40s !important; }
.tour-k .k-d6 { animation-delay: .48s !important; }
@keyframes kIn { from { opacity: 0; transform: translateY(calc(var(--u) * 26)) scale(.97); } to { opacity: 1; transform: none; } }
/* Toucher : carte société (étape 1) puis personne (étape 2) */
.tour-k .k-co, .tour-k .k-emp { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.tour-k[data-phase="tap"] .k-view .k-tapme.k-in { border-color: rgba(251, 146, 60, .85); background-color: rgba(251, 146, 60, .10); box-shadow: 0 0 calc(var(--u) * 60) rgba(251, 146, 60, .28); animation: kPress .45s ease both; }
@keyframes kPress { 0% { transform: scale(1); } 40% { transform: scale(.95); } 100% { transform: scale(1); } }
/* Recherche : « M », puis « Ma » ; la liste se filtre (Thomas Keller, Emma Rossi disparaissent) */
.tour-k .k-search { gap: 0; }
.k-ph { color: #737373; font-weight: 300; }
.tour-k .k-typed span { display: none; }
.tour-k[data-typed="1"] .k-t1, .tour-k[data-typed="2"] .k-t1, .tour-k[data-typed="2"] .k-t2 { display: inline; }
.tour-k[data-typed="1"] .k-ph, .tour-k[data-typed="2"] .k-ph { display: none; }
.tour-k[data-typed="1"] .k-nomatch, .tour-k[data-typed="2"] .k-nomatch { display: none; }
.tour-k .k-grid { display: flex; justify-content: center; }
.tour-k .k-emp { flex: none; width: calc(var(--u) * 270); }
.tour-k[data-phase="m"] .k-key--m, .tour-k[data-phase="ma"] .k-key--a { animation: kKeyHit .4s ease both; }
@keyframes kKeyHit { 0%, 100% { background-color: rgba(255, 255, 255, .08); transform: scale(1); } 35% { background-color: rgba(251, 146, 60, .6); transform: scale(.92); } }

/* Appel : confirmation → sonnerie → conversation audio → remerciement */
.tour-call { z-index: 3; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.tour-k[data-step="3"] .tour-call { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.tour-k[data-step="3"] .tour-call .k-call__card { animation: kPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes kPop { from { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.tour-call .k-call__card { gap: calc(var(--u) * 28); max-width: calc(var(--u) * 820); }
.tour-call .k-call__status { display: flex; justify-content: center; }
.k-st { display: none; align-items: center; }
.tour-k[data-phase="ring"] .k-st--ring, .tour-k[data-phase="talk"] .k-st--talk { display: inline-flex; }
.tour-k[data-phase="talk"] .k-call__status { color: #d1fae5; }
.k-live { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin-right: calc(var(--u) * 14); border-radius: 50%; background: #34d399; box-shadow: 0 0 calc(var(--u) * 14) rgba(52, 211, 153, .8); }
.k-timer { margin-left: .3em; font-variant-numeric: tabular-nums; }
.tour-k[data-phase="confirm"] .k-call__status, .tour-k[data-phase="thanks"] .k-call__status { display: none; }
.k-call__thanks { display: none; font-size: calc(var(--u) * 58); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.k-call__thanks small { display: block; margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 34); font-weight: 300; letter-spacing: 0; color: #fcd34d; }
.tour-k[data-phase="thanks"] .k-call__thanks { display: block; }
.tour-k[data-phase="thanks"] .k-call__name, .tour-k[data-phase="thanks"] .k-call__job, .tour-k[data-phase="thanks"] .k-call__acts { display: none; }
/* Avatar : halo orange (confirmation, sonnerie), vert (conversation), or (merci) */
.tour-call .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(251, 146, 60, .4), 0 0 calc(var(--u) * 60) rgba(251, 146, 60, .25); }
.tour-k[data-phase="ring"] .k-wave { animation: kSonarO 2.1s cubic-bezier(.16, 1, .3, 1) infinite; }
.tour-k[data-phase="ring"] .k-wave--2 { animation-delay: .7s; }
.tour-k[data-phase="ring"] .k-wave--3 { animation-delay: 1.4s; }
.tour-k[data-phase="talk"] .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(52, 211, 153, .5), 0 0 calc(var(--u) * 80) rgba(52, 211, 153, .3); animation: kBreath 2.4s ease-in-out infinite; }
.tour-k[data-phase="talk"] .k-wave { animation: kSonarG 2.4s ease-out infinite; }
.tour-k[data-phase="talk"] .k-wave--2 { animation-delay: 1.2s; }
.tour-k[data-phase="talk"] .k-wave--3 { display: none; }
.tour-k[data-phase="thanks"] .k-call__ph .k-av { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(251, 191, 36, .45), 0 0 calc(var(--u) * 60) rgba(251, 191, 36, .25); }
/* Bande audio : micro · niveaux · haut-parleur (conversation en cours) */
.k-audio { display: none; align-items: center; gap: calc(var(--u) * 28); padding: calc(var(--u) * 16) calc(var(--u) * 36); border-radius: 999px; background: rgba(52, 211, 153, .08); border: max(1px, calc(var(--u) * 1.5)) solid rgba(52, 211, 153, .28); color: #a7f3d0; }
.tour-k[data-phase="talk"] .k-audio { display: flex; }
.k-audio__ic { width: calc(var(--u) * 46); height: calc(var(--u) * 46); flex: none; }
.k-lvl { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 76); }
.k-lvl i { width: calc(var(--u) * 11); height: 100%; border-radius: 999px; background: #34d399; transform: scaleY(.4); }
.k-lvl i:nth-child(1), .k-lvl i:nth-child(11) { transform: scaleY(.25); }
.k-lvl i:nth-child(2), .k-lvl i:nth-child(9) { transform: scaleY(.55); }
.k-lvl i:nth-child(3), .k-lvl i:nth-child(7) { transform: scaleY(.85); }
.k-lvl i:nth-child(5) { transform: scaleY(1); }
.k-lvl i:nth-child(6), .k-lvl i:nth-child(10) { transform: scaleY(.65); }
.tour-k[data-phase="talk"] .k-lvl i { animation: kLvl .9s ease-in-out infinite alternate; }
.tour-k[data-phase="talk"] .k-lvl i:nth-child(2n) { animation-duration: .65s; }
.tour-k[data-phase="talk"] .k-lvl i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -.3s; }
.tour-k[data-phase="talk"] .k-lvl i:nth-child(4n+1) { animation-delay: -.5s; }
.tour-k[data-phase="talk"] .k-lvl i:nth-child(5n) { animation-duration: .75s; animation-delay: -.2s; }
@keyframes kLvl { from { transform: scaleY(.16); } to { transform: scaleY(1); } }
/* Boutons : Raccrocher (sonnerie, conversation) ; Appeler / Annuler (confirmation) */
.k-call__acts { display: flex; justify-content: center; }
.k-confirm { display: none; align-items: center; gap: calc(var(--u) * 20); }
.tour-k[data-phase="confirm"] .k-confirm { display: flex; }
.tour-k[data-phase="confirm"] .tour-call .k-hang { display: none; }
.k-callbtn { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 26) calc(var(--u) * 60); border-radius: 999px; background: #10b981; font-size: calc(var(--u) * 30); font-weight: 500; color: #fff; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 25) calc(var(--u) * -5) rgba(16, 185, 129, .35); }
.k-callbtn svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.k-cancel { padding: calc(var(--u) * 26) calc(var(--u) * 44); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: calc(var(--u) * 30); color: #d4d4d4; }
.tour-k[data-phase="confirm"] .k-callbtn { animation: kPress .45s ease 1.15s both; }
/* Petit écran (téléphone) : textes clés de la borne grossis pour rester lisibles, carte d'appel agrandie */
@container (max-width: 560px) {
  .tour-k .k-back, .tour-k .k-search { font-size: max(calc(var(--u) * 32), 8px); }
  .tour-k .k-co__name { font-size: max(calc(var(--u) * 42), 9px); }
  .tour-k .k-pill { top: calc(var(--u) * 12); right: calc(var(--u) * 12); font-size: max(calc(var(--u) * 27), 7px); }
  .tour-k .k-pill--closed { left: calc(var(--u) * 12); flex-wrap: wrap; justify-content: center; row-gap: 0; border-radius: calc(var(--u) * 26); }
  .tour-k .k-pill--closed em { flex-basis: 100%; margin-left: 0; text-align: center; }
  .tour-k .k-sep { display: none; }
  .tour-k .k-emp__name { font-size: max(calc(var(--u) * 30), 8px); line-height: 1.15; white-space: normal; }
  .tour-k .k-emp__job { display: none; }
  .tour-k .k-el .k-title { margin-top: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 12); }
  .tour-k .k-el .k-search { margin-bottom: calc(var(--u) * 18); }
  .tour-k .k-av { width: calc(var(--u) * 116); height: calc(var(--u) * 116); }
  .tour-k .k-co { padding-top: calc(var(--u) * 104); }
  .tour-k .k-co__logo svg { width: calc(var(--u) * 170); height: calc(var(--u) * 170); }
  .tour-k .k-key { font-size: max(calc(var(--u) * 28), 7px); }
  .tour-k .k-kb__hint, .tour-k .k-kb__done { font-size: max(calc(var(--u) * 22), 6.5px); }
  .tour-call { --u: calc(100cqw / 1500); }
  .tour-call .k-call__card { gap: calc(var(--u) * 20); padding: calc(var(--u) * 34) calc(var(--u) * 44); }
  .tour-call .k-call__ph { width: calc(var(--u) * 170); height: calc(var(--u) * 170); }
  .tour-call .k-call__ph .k-av { width: 100%; height: 100%; font-size: calc(var(--u) * 60); } /* l'avatar remplit son cercle : centré sur les anneaux */
  .tour-call .k-call__status { font-size: max(calc(var(--u) * 32), 9.5px); }
  .tour-call .k-call__job { font-size: max(calc(var(--u) * 28), 8.5px); }
  .tour-call .k-hang, .tour-call .k-callbtn, .tour-call .k-cancel { font-size: max(calc(var(--u) * 30), 9px); }
}
/* Pause (bouton ou section hors écran) : tout se fige */
.tour.is-frozen .tour-k *:not(.k-in), .tour.is-frozen .tour-k *::before, .tour.is-frozen .tour-k *::after,
.tour.is-frozen .tstep__bar::after { animation-play-state: paused !important; }

.pillars { margin-top: clamp(64px, 8vw, 112px); display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.pillar { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.pillar__ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--red-050); color: var(--red); }
.pillar__ic svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.pillar p { font-size: 15.5px; color: var(--muted); }
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .pillar { border-bottom: 0; padding: 32px 32px 32px 0; }
  .pillar + .pillar { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* ============================================================================
   02 — Deux situations
   ========================================================================== */
.situations { display: grid; gap: 24px; }
.situation { background: var(--paper); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.situation__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.situation__tag::before { content: ''; width: 7px; height: 7px; background: var(--red); }
.situation h3 { margin-top: 22px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.035em; }
.situation > p { margin-top: 14px; color: var(--muted); max-width: 46ch; }
.cases { margin-top: 32px; border-top: 1px solid var(--line); }
.moments { margin-top: auto; padding-top: 28px; }
.moments p { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.moments ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.moments li { padding: 7px 12px; border-radius: 999px; background: var(--paper-2); font-size: 14px; font-weight: 500; color: var(--ink); }
.case { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.case:last-child { border-bottom: 0; padding-bottom: 0; }
.case__plan { width: 64px; height: 64px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); }
.case__plan svg { width: 44px; height: 44px; }
.case__k { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.case h4 { margin-top: 4px; font-size: 1.08rem; letter-spacing: -.015em; line-height: 1.3; }
.case p { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.case__pb { margin-top: 10px; font-size: 13px; color: var(--ink); }
.case__pb b { font-weight: 600; color: var(--red-ink); margin-right: 6px; }
@media (min-width: 960px) { .situations { grid-template-columns: 1fr 1fr; } }

/* Mises en situation au trait (élévations à l'échelle, templates/partials/blocks.php) ; la borne y est la
   borne réelle en pupitre, vue de trois quarts, avec son écran de veille (fragments générés :
   templates/partials/art/lectern-line-*.php ← docs/illustrations/build.py ; classes ilk-*). */
.situation__art { margin-bottom: 28px; border-radius: var(--r-md); background: var(--paper-2); overflow: hidden; }
.situation__art svg { width: 100%; height: auto; }
.il-floor { fill: none; stroke: var(--ink); stroke-width: 1; }
.il-faint { fill: none; stroke: var(--line-2); stroke-width: 1; }
.il-fill { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.il-soft { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.il-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.il-thin { stroke-width: 1; }
.il-bar { stroke-width: 2.4; }
.il-ink { fill: var(--ink); }
.il-red { fill: var(--red); }
.il-red-line { fill: none; stroke: var(--red); stroke-width: 1.1; stroke-linecap: round; }
.il-gold { fill: var(--gold); stroke: var(--ink); stroke-width: 1; }
.il-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.il-glass { fill: #e9edec; stroke: var(--ink); stroke-width: 1; }
.il-glint { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.il-leaf { fill: #cfd9c8; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.il-shadow { fill: rgba(17, 18, 20, .16); }
.il-txt { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.il-cap { font-family: var(--font); font-size: 7.5px; font-weight: 600; letter-spacing: .1em; fill: var(--muted); }
.ilk-edge, .ilk-top, .ilk-front, .ilk-side, .ilk-shell, .ilk-face { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.ilk--w .ilk-top, .ilk--w .ilk-front { fill: var(--paper); }
.ilk--w .ilk-edge, .ilk--w .ilk-side { fill: var(--paper-3); }
.ilk--w .ilk-shell { fill: #c4c6c9; }
.ilk--b .ilk-top { fill: #3b3e46; }
.ilk--b .ilk-front { fill: #2b2e36; }
.ilk--b .ilk-edge, .ilk--b .ilk-side { fill: #1b1d22; }
.ilk--b .ilk-shell { fill: #24262c; }
.ilk-face { fill: #121318; }
.ilk-glass { fill: #050505; }
.ilk-tap { fill: none; stroke: #fb923c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ilk-l1 { fill: #f5f5f5; }
.ilk-l2 { fill: #fb923c; }
@media (max-width: 639px) {
  .il-cap { font-size: 9px; }
  .situation__art { margin: -24px -24px 24px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}


/* ============================================================================
   03 — Fonctionnalités (bento)
   ========================================================================== */
.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.tile--white { background: var(--paper); box-shadow: var(--shadow-1); }
.tile--dark { background: var(--dark); color: var(--on-dark-muted); }
.tile--dark > h3 { color: var(--on-dark); }
.tile__ic { width: 36px; height: 36px; color: var(--red); }
.tile--dark .tile__ic { color: var(--red-on-dark); }
.tile__ic svg { width: 28px; height: 28px; }
.tile > h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -.025em; line-height: 1.15; }
.tile > p { font-size: 15.5px; line-height: 1.55; max-width: 44ch; color: var(--muted); }
.tile--dark > p { color: var(--on-dark-muted); }
.tile__vis { margin-top: auto; padding-top: 12px; }
.tile__badge { position: absolute; top: clamp(22px, 2.6vw, 32px); right: clamp(22px, 2.6vw, 32px); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.tile--dark .tile__badge { color: var(--on-dark-muted); }

/* Visuels des tuiles */
.voice-vis { position: relative; margin-top: auto; display: grid; place-items: center; padding-top: 20px; }
.voice-vis .k-mini { width: min(100%, 360px); aspect-ratio: 620 / 800; }
.voice-vis .k-root { background: transparent; overflow: visible; }
.voice-vis .k-call { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.voice-vis .k-audio { display: flex; }
.voice-vis .k-call__card { box-shadow: 0 30px 60px -30px rgba(251, 146, 60, .35), 0 0 0 1px rgba(255, 255, 255, .08); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.chip svg { width: 16px; height: 16px; color: var(--red); }
.toast { margin-top: 14px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-2); max-width: 380px; }
.toast__ic { width: 36px; height: 36px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.toast__ic span { width: 14px; height: 14px; background: var(--red); }
.toast b { display: block; font-size: 14px; color: var(--ink); }
.toast small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.toast time { font-size: 12px; color: var(--muted); align-self: start; }
.ml-vis { margin-top: auto; }
.ml-words { position: relative; height: 1.1em; font-size: clamp(2.6rem, 4.6vw, 3.6rem); font-weight: 200; letter-spacing: -.035em; color: var(--ink); line-height: 1; }
.ml-words span { position: absolute; left: 0; top: 0; opacity: 0; }
.ml-words span:first-child { opacity: 1; }
/* Tuiles « Multilingue » et « Communication audio » : l'animation se joue UNE fois quand la tuile
   devient visible (site.js pose .is-on ; jamais en mouvement réduit), dure moins de 5 s, puis l'image
   reste fixe (WCAG 2.2.2). Sans script : image fixe. */
.ml-vis.is-on .ml-words span { animation: kCycle 4.8s linear both; }
.ml-vis.is-on .ml-words span:nth-child(2) { animation-name: kCycB; }
.ml-vis.is-on .ml-words span:nth-child(3) { animation-name: kCycC; }
.voice-vis .k-call--active .k-call__ph .k-av, .voice-vis .k-call--active .k-wave { animation: none; }
.voice-vis.is-on .k-call--active .k-call__ph .k-av { animation: kBreath 2.4s ease-in-out 2; }
.voice-vis.is-on .k-call--active .k-wave--1 { animation: kSonarG 2.4s ease-out 2; }
.voice-vis.is-on .k-call--active .k-wave--2 { animation: kSonarG 2.4s ease-out 1.2s 1; }
.ml-langs { margin-top: 14px; display: flex; gap: 6px; }
.ml-langs span { font-size: 12px; font-weight: 600; letter-spacing: .14em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); }
.co-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.co-mini > div { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--dark); display: grid; place-items: center; padding: 10px; overflow: hidden; }
.co-mini svg { width: 70%; height: auto; }
.co-mini .is-closed svg { opacity: .55; filter: grayscale(.6) brightness(.85); }
.co-mini em { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, .8); }
.co-mini .is-closed em { background: #a3a3a3; box-shadow: none; }
.swatches { display: flex; gap: 10px; margin-top: auto; align-items: flex-end; }
.sw { flex: 1; border-radius: 12px; padding: 10px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; background: var(--dark); color: #fff; font-size: 12px; font-weight: 500; }
.sw i { display: block; width: 22px; height: 22px; border-radius: 50%; }
.sw--amber i { background: #f59e0b; } .sw--blue i { background: #3b82f6; } .sw--green i { background: #10b981; }
.sw span { color: var(--on-dark-muted); }
.sw b { font-weight: 500; }
.sw--amber b { color: #f59e0b; } .sw--blue b { color: #60a5fa; } .sw--green b { color: #34d399; }
.flow { margin-top: auto; border-top: 1px solid var(--line-2); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.flow li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.flow b { width: 18px; font-size: 12px; font-weight: 600; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.flow .alt { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.upd { margin-top: auto; display: grid; gap: 8px; font-size: 13.5px; }
.upd div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.upd i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.upd span { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-tbl { margin-top: auto; width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-1); }
.admin-tbl th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.admin-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.admin-tbl tr:last-child td { border-bottom: 0; }
.admin-tbl .c { text-align: center; }
.av-s { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-right: 10px; font-size: 11px; font-weight: 500; color: #fff; vertical-align: middle; }
.tg { display: inline-block; width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; vertical-align: middle; }
.tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.tg.on { background: var(--red); }
.tg.on::after { left: 14px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .t-voice { grid-column: span 12; }
  .t-notif, .t-ml { grid-column: span 6; }
  .t-multi, .t-design, .t-flow { grid-column: span 4; }
  .t-upd { grid-column: span 5; }
  .t-admin { grid-column: span 7; }
}
@media (min-width: 1100px) {
  .t-voice { grid-column: span 7; grid-row: span 2; }
  .t-notif, .t-ml { grid-column: span 5; }
  .t-upd { grid-column: span 4; }
  .t-admin { grid-column: span 8; }
}

/* ============================================================================
   04 — Matériel
   ========================================================================== */
.hw { display: grid; gap: 48px; }
/* Les deux tailles, dessinées comme le héros (vue produit) et à la même échelle (même cadre : bloc
   @gen:lectern) : 32″ pied blanc, 21″ pied noir — même pied, seul l'écran change. Côte à côte à toutes
   les largeurs (la comparaison est le propos), sur un fond clair ; légende = pastille de finition du héros. */
.hw-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(4px, 2vw, 24px); align-content: start;
  padding: clamp(18px, 3.5vw, 40px) clamp(8px, 2.5vw, 32px) clamp(16px, 2.5vw, 28px);
  border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(110% 75% at 50% 38%, #fff 0%, var(--paper-2) 68%, var(--paper-3) 100%);
}
.hw-kiosk { margin: 0; min-width: 0; }
.hw-kiosk figcaption { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.specs { border-top: 1px solid var(--ink); }
.specs div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.specs dd { color: var(--ink); font-size: 16px; line-height: 1.5; }
.specs dd small { display: block; color: var(--muted); font-size: 14px; }
@media (min-width: 960px) {
  .hw { grid-template-columns: 7fr 5fr; align-items: start; gap: 64px; }
}

/* ============================================================================
   05 — Tarifs
   ========================================================================== */
.plans { display: grid; gap: 16px; }
.plan { position: relative; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; }
.plan--featured { box-shadow: var(--shadow-2); }
.plan--featured::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; color: var(--ink); }
.plan__badge { white-space: nowrap; font-size: 11.5px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--red-050); color: var(--red-ink); }
.price { margin-top: 24px; display: flex; align-items: flex-end; gap: 12px; color: var(--ink); }
.price__from { font-size: 15px; color: var(--muted); padding-bottom: 14px; }
.price__amt { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 600; letter-spacing: -.06em; line-height: .85; font-variant-numeric: tabular-nums; }
.price__unit { padding-bottom: 8px; font-size: 15px; line-height: 1.3; color: var(--muted); }
.price__unit b { display: block; font-size: 18px; color: var(--ink); font-weight: 600; }
/* EN : devise avant le montant (« From CHF 249 per month ») */
.price--cur-first { align-items: baseline; flex-wrap: wrap; row-gap: 4px; }
.price--cur-first .price__from, .price--cur-first .price__unit { padding-bottom: 0; white-space: nowrap; }
.price--cur-first .price__from b { font-size: 18px; color: var(--ink); font-weight: 600; }
.price--quote .price__amt { font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.045em; line-height: 1; }
.plan__sub { margin-top: 14px; font-size: 15px; color: var(--muted); }
.plan ul { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.plan li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--red); }
.plan .btn { margin-top: 32px; align-self: flex-start; }
.pricing-note { margin-top: 24px; font-size: 14.5px; color: var(--muted); }
@media (min-width: 900px) { .plans { grid-template-columns: 7fr 5fr; } }

/* ============================================================================
   06 — Presse
   ========================================================================== */
.press { border-top: 1px solid var(--ink); }
.press li { border-bottom: 1px solid var(--line); }
.press a { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 22px 0; text-decoration: none; color: var(--ink); }
.press__date { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.press__logo { height: 30px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; opacity: .78; }
.press__what { font-size: 15px; color: var(--muted); }
.press__what b { display: block; color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.press__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.press__cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.press a:hover .press__cta { color: var(--red-ink); }
.press a:hover .press__cta svg { transform: translate(2px, -2px); }
.press a:hover .press__logo { filter: none; opacity: 1; }
.press__logo-cell { display: none; }
@media (min-width: 760px) {
  .press a { grid-template-columns: 130px 180px 1fr auto; }
  .press__logo-cell { display: block; }
}

/* ============================================================================
   07 — FAQ
   ========================================================================== */
.faq-grid { display: grid; gap: 40px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 22px 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-wrap: wrap; }
.faq summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details[open] summary i { border-color: var(--red); }
.faq details p { padding: 0 44px 24px 0; color: var(--muted); max-width: 68ch; }
.faq__aside p { color: var(--muted); font-size: 15.5px; max-width: 32ch; }
.faq__aside .link-arrow { margin-top: 18px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: 3fr 9fr; gap: 24px; }
  .faq__aside { position: sticky; top: 104px; align-self: start; }
}

/* ============================================================================
   08 — Contact (bande sombre, lueur rouge → or)
   ========================================================================== */
.contact { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark-muted); }
.contact::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-line); }
.contact__glow { position: absolute; pointer-events: none; width: 900px; height: 900px; left: -320px; bottom: -520px; background: radial-gradient(closest-side, rgba(234, 60, 59, .26), rgba(237, 201, 118, .08) 60%, rgba(237, 201, 118, 0)); }
.contact .sec-head { border-top-color: rgba(255, 255, 255, .7); }
.contact .sec-idx { color: var(--on-dark); }
.contact .sec-idx span { color: var(--red-on-dark); }
.contact h2 { color: var(--on-dark); }
.contact .sec-lead { color: var(--on-dark-muted); }
.contact__grid { position: relative; display: grid; gap: 48px; }
.coords { display: grid; gap: 0; align-content: start; border-top: 1px solid rgba(255, 255, 255, .14); }
.coords div { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.coords dt { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.coords dd { margin-top: 4px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; color: var(--on-dark); }
.coords a { display: inline-block; padding-block: 11px; margin-block: -11px; text-decoration: none; } /* cible tactile 44 px, rendu inchangé */
.coords a:hover { color: var(--red-on-dark); }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--on-dark); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--on-dark); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px; padding: 13px 14px; transition: border-color .2s ease, background-color .2s ease; }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-muted) 50%), linear-gradient(135deg, var(--on-dark-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { color: var(--ink); }
/* Focus : anneau clair, distinct de la bordure rouge d'un champ en erreur (qui la garde) */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px var(--on-dark); }
.field ::placeholder { color: #8b8d94; }
.form__row { display: grid; gap: 16px; }
.form .btn { justify-self: start; margin-top: 6px; }
.form__note { font-size: 13px; color: var(--on-dark-muted); }
/* Formulaire réel (POST /contact) : champ facultatif, erreurs serveur (422/503), champ piège */
.field__opt { font-weight: 400; color: var(--on-dark-muted); }
.field [aria-invalid="true"] { border-color: var(--red-on-dark); background-color: rgba(255, 106, 92, .08); }
.field-error { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--red-on-dark); }
.form-alert { padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 106, 92, .55); background: rgba(255, 106, 92, .12); font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: 80px; } }

/* ---------------------------------------------------------------- Pages utilitaires (confirmation, 404) */
.page-msg { position: relative; overflow: hidden; min-height: 62vh; padding-block: clamp(72px, 11vw, 152px); }
/* Lueur du héros, estompée vers le bas (la section est plus courte que le halo : pas de bord net) */
.page-msg .hero__glow { -webkit-mask-image: linear-gradient(180deg, #000 28%, transparent 62%); mask-image: linear-gradient(180deg, #000 28%, transparent 62%); }
.page-msg__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.page-msg h1 { margin-top: 22px; font-size: clamp(2.6rem, 5.4vw, 4.5rem); letter-spacing: -.045em; line-height: 1; }
.page-msg h1 .dot { color: var(--red); }
.page-msg__lead { margin-top: 22px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 34em; }
.page-msg .btn { margin-top: 32px; }
.page-msg__ic { width: 56px; height: 56px; margin-bottom: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--red-050); color: var(--red); }
.page-msg__ic svg { width: 28px; height: 28px; }
.page-msg__code { margin-bottom: 26px; font-size: clamp(5rem, 14vw, 10rem); font-weight: 600; letter-spacing: -.06em; line-height: .85; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Footer */
.site-footer { padding-block: 48px 40px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 28px; }
.footer__brand img { width: 136px; }
.footer__brand p { margin-top: 14px; font-size: 14.5px; color: var(--muted); max-width: 36ch; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 14.5px; }
/* Cibles tactiles de 44 px de haut (mobile), sans chevauchement entre les lignes */
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.footer__nav a:hover { color: var(--red-ink); }
.footer__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.swiss { display: inline-flex; align-items: center; gap: 8px; }
.swiss i { position: relative; width: 14px; height: 14px; background: var(--red); border-radius: 2px; }
.swiss i::before, .swiss i::after { content: ''; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.swiss i::before { width: 8px; height: 2.6px; }
.swiss i::after { width: 2.6px; height: 8px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 5fr 7fr; align-items: start; } .footer__nav { justify-content: flex-end; } }

/* ---------------------------------------------------------------- Apparition au scroll
   CSS seul (scroll-driven animations) : sans support, le contenu est simplement visible.
   Jamais de contenu masqué en attente d'un script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Mouvement borné
   Hors du parcours §01 (qui a son bouton Pause), aucune boucle infinie : chaque animation décorative
   s'arrête avant 5 s puis l'image reste fixe (WCAG 2.2.2). */
.k-ss__f svg, .k-ss__r { animation-iteration-count: 2; }
.k-pill--open i { animation-duration: 2.4s; animation-iteration-count: 2; }

/* ---------------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ml-words span:first-child { opacity: 1; }
  .ml-words span:not(:first-child) { display: none; }
  .k-call--ringing .k-wave--1, .k-call--active .k-wave--1 { opacity: .5; transform: scale(1.25); border-color: rgba(251, 146, 60, .6); }
  .k-call--ringing .k-wave--2 { opacity: .25; transform: scale(1.55); border-color: rgba(251, 146, 60, .5); }
  .k-call--active .k-wave--1 { border-color: rgba(52, 211, 153, .6); }
  .k-ss__r { opacity: .4; transform: translate(-50%, -50%) scale(1.2); }
  .k-caret { visibility: visible; }
}

/* ---------------------------------------------------------------- Ajustements mobile */
@media (max-width: 639px) {
  .case { grid-template-columns: 48px 1fr; gap: 14px; }
  .case__plan { width: 48px; height: 48px; }
  .case__plan svg { width: 34px; height: 34px; }
  .admin-tbl th, .admin-tbl td { padding: 9px 6px; }
  .admin-tbl th { letter-spacing: 0; font-size: 11px; }
  .admin-tbl td:first-child { padding-left: 12px; white-space: normal; }
  .av-s { display: none; }
}
/* Le long libellé du bouton d'essai ne doit pas élargir la carte tarif (débordement à 390 px) */
@media (max-width: 479px) { .plan .btn { white-space: normal; text-align: left; } }