/* ============================================================
   SPARK — feuille de styles
   1. Variables  2. Base  3. Composants  4. Sections  5. Pages  6. Responsive
   ============================================================ */

/* 1. VARIABLES ------------------------------------------------ */
:root {
  --c-primary: #0055f8;
  --c-primary-dark: #0042c2;
  --c-secondary: #c4f2fd;
  --c-text: #03041a;
  --c-muted: #4b4f66;
  --c-line: #e4e8f3;
  --c-bg: #ffffff;
  --c-bg-soft: #f5f8ff;

  /* Dégradé du logo : radial 50 % / 50 % */
  --grad-logo: radial-gradient(circle at 50% 50%, #4dd4ff 0%, #3653ff 50%, #3653ff 100%);
  --grad-brand: radial-gradient(circle at 85% 0%, #4dd4ff 0%, #3653ff 45%, #1b2fc4 100%);

  --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 10px 40px -12px rgba(3, 4, 26, .18);
  --shadow-sm: 0 4px 16px -6px rgba(3, 4, 26, .15);
  --container: 1160px;
  --header-h: 72px;

  /* Point d'accroche pour de futures animations */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .2s;
}

/* 2. BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; font-family: var(--font); color: var(--c-text); background: var(--c-bg);
  line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .6em; letter-spacing: -.02em; word-spacing: .14em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 6px; }
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.skip-link {
  position: absolute; left: -999px; top: 8px; background: var(--c-text); color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 200;
}
.skip-link:focus { left: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. COMPOSANTS ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  font: 700 1rem/1 var(--font); padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background var(--t), color var(--t), box-shadow var(--t), border-color var(--t), transform .25s var(--ease);
}
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 85, 248, .7); }
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--light { background: #fff; color: var(--c-primary-dark); }
.btn--light:hover { background: var(--c-secondary); }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); padding: 11px 22px; }
.btn--outline:hover { background: var(--c-primary); color: #fff; }
.btn--sm { padding: 11px 22px; font-size: .95rem; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.eyebrow {
  display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-primary-dark); background: var(--c-secondary); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}

/* Cadre média : accepte <img> ou <video> */
.media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--c-bg-soft);
  aspect-ratio: 4 / 3;
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; }
.brand img { max-width: none; height: 40px; width: auto; display: block; }
.brand-icon { display: block; width: 42px; height: 40px; flex: none; }
.brand-spin { display: block; width: 42px; height: 40px; overflow: hidden; }
.brand-text { display: block; width: 116px; height: 40px; overflow: hidden; margin-left: 4px; }
.brand-text img { margin-left: -41px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) { color: var(--c-text); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav a:not(.btn):hover { color: var(--c-primary); }
.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 12px;
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 20px; height: 2px; background: var(--c-text); border-radius: 2px; position: relative;
}
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* 4. SECTIONS ------------------------------------------------- */
section { padding: 96px 0; }
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); text-transform: uppercase; font-weight: 800; }
.section-head p { color: var(--c-muted); }
.section-head .lead { font-weight: 700; color: var(--c-text); font-size: 1.2rem; }

/* Hero */
.hero {
  position: relative; overflow: hidden; padding: 72px 0 96px; color: #fff;
  background:
    radial-gradient(circle at 82% 28%, rgba(77, 212, 255, .85) 0%, rgba(77, 212, 255, 0) 42%),
    radial-gradient(circle at 8% 100%, rgba(54, 83, 255, .9) 0%, rgba(54, 83, 255, 0) 55%),
    linear-gradient(135deg, #0a1a8c 0%, #1b2fc4 45%, #3653ff 100%);
}
.hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 0 70px rgba(255, 255, 255, .04), 0 0 0 140px rgba(255, 255, 255, .03); pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1, .hero .hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; -webkit-text-stroke: .02em currentColor; text-transform: uppercase; text-align: center; max-width: 900px; margin: 0 auto 56px; }
.hero-grid { display: grid; gap: 48px; align-items: center; grid-template-columns: .8fr 1.2fr; }
.hero .tagline { font-size: 1.3rem; font-style: italic; font-weight: 600; color: var(--c-secondary); margin-bottom: 1.4em; }
.hero p { color: rgba(255, 255, 255, .92); max-width: 560px; }
.hero-cta { text-align: center; margin-top: 56px; }

/* Visuel animé du hero : roue SPARK + tablette qui chevauche légèrement la roue (voir js/hero-demo.js)
   Un seul système connecté : halo lumineux derrière l'ensemble, la roue domine, la tablette passe devant à droite. */
.hd { --u: 1cqw; position: relative; width: 100%; max-width: 720px; margin-inline: auto; container-type: inline-size; }
/* lumière diffuse unifiant la scène */
.hd::before {
  content: ""; position: absolute; z-index: 0; left: -4%; right: -4%; top: 6%; height: 66%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 48%, rgba(120, 220, 255, .5), rgba(77, 140, 255, .28) 52%, rgba(54, 83, 255, 0) 100%); filter: blur(10px);
}
.hd-wheel { position: relative; z-index: 1; width: 55%; margin-left: 8%; aspect-ratio: 1024 / 1536; }
.hd-stand { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgba(3, 4, 26, .45)); }
/* le disque (centre 510,8 / 594,9 sur le canevas 1024 × 1536 de la borne, rayon 399,5) recouvre la roue de la borne ; il tourne autour de son centre */
.hd-disc { position: absolute; left: 9.648%; top: 11.909%; width: 80.47%; height: auto; transform-origin: 50% 50%; will-change: transform; }
/* pointeur fixe, repris de la borne et posé par-dessus le disque */
.hd-pointer { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.hd-pointer img { display: block; width: 100%; height: auto; clip-path: polygon(47.31% 12.11%, 52.98% 12.11%, 52.98% 13.34%, 50.1% 16.83%, 50% 16.83%, 47.31% 13.34%); }
/* liaison roue → tablette : deux fines courbes + particules, dessinées par js/hero-demo.js (svg.hd-wires) */
.hd-wires { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.hd-wires .hw-lines { animation: hd-pulse 4.2s ease-in-out infinite; }
@keyframes hd-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hd-wires .hw-lines { animation: none; } }

/* tablette : cadre graphite + écran, au premier plan, centrée à hauteur du moyeu de la roue */
.hd-screen {
  position: absolute; z-index: 3; left: 54%; top: 21.5%; width: 32%; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(145deg, #2b3252, #0b0f20 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 38px -12px rgba(3, 4, 26, .8), 0 8px 14px -6px rgba(3, 4, 26, .5);
}
.hd-screen::before { content: ""; position: absolute; top: 50%; left: calc(var(--u) * .45); width: calc(var(--u) * .4); height: calc(var(--u) * .4); margin-top: calc(var(--u) * -.2); border-radius: 50%; background: #3a4266; }
.hd-display { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--u) * 1.1); overflow: hidden; background: #0b1020; }
.hd-state { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.hd-state.is-active { opacity: 1; }
/* notification « Gagnant » (coin haut-droit de l'écran) et toast « Lead capturé » (bas de l'écran) : à l'intérieur de la tablette */
.hd-card, .hd-toast { opacity: 0; transition: opacity .45s ease, transform .45s var(--ease); pointer-events: none; }
.hd-card { transform: translateY(-10px) scale(.96); transform-origin: top right; }
.hd-toast { transform: translateY(10px) scale(.96); }
.hd-card.is-on, .hd-toast.is-on { opacity: 1; transform: none; }
.hd-card {
  position: absolute; top: calc(var(--u) * 2.2); right: calc(var(--u) * 2.2); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(var(--u) * .8); row-gap: calc(var(--u) * .15);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); background: rgba(255, 255, 255, .97); color: var(--c-text); border-radius: calc(var(--u) * 1.4);
  box-shadow: 0 12px 18px -6px rgba(3, 4, 26, .55), 0 2px 4px rgba(3, 4, 26, .25); font-size: calc(var(--u) * 1.4); line-height: 1.25;
}
.hd-card > * { grid-column: 1 / -1; }
.hd-card-label { font-weight: 800; font-size: calc(var(--u) * 1); letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }
.hd-card strong { font-size: calc(var(--u) * 1.9); font-weight: 800; white-space: nowrap; }
.hd-card span:not(.hd-card-label):not(.hd-card-gift) { grid-column: 1; color: var(--c-muted); white-space: nowrap; }
.hd-card-gift { grid-column: 2 !important; margin-top: calc(var(--u) * -.2); padding: calc(var(--u) * .25) calc(var(--u) * .9); border-radius: 999px; background: var(--c-secondary); color: #03355f; font-weight: 700; font-size: calc(var(--u) * 1.1); white-space: nowrap; }
.hd-toast {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(var(--u) * 2.4); display: flex; align-items: center; gap: calc(var(--u) * .7);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.4); background: rgba(3, 4, 26, .92); color: #fff; border-radius: 999px; font-weight: 700; font-size: calc(var(--u) * 1.3);
  box-shadow: 0 8px 14px -4px rgba(3, 4, 26, .6);
}
.hd-toast b { display: grid; place-items: center; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%; background: #22c55e; color: #fff; font-size: calc(var(--u) * 1.2); }
@media (prefers-reduced-motion: reduce) { .hd-state, .hd-card, .hd-toast { transition: none; } }

/* Pipeline « de l'attraction à la conversion » : une fiche prospect traverse les 5 étapes (voir js/pipeline.js).
   Le design de la fiche reprend celui du CRM SPARK : avatar bleu clair, pastille verte, libellés gris / valeurs en gras, étoiles, tags. */
.pipe-scroll { position: relative; margin-bottom: 112px; }
.pipe { --row: 84px; position: relative; max-width: 1080px; margin: 0 auto; }
/* Section épinglée : le wrapper est haut (--scroll-h), son contenu reste sticky ; la progression du scroll pilote l'animation (js/pipeline.js) */
.pipe-scroll.is-scrub { height: var(--scroll-h, 340vh); margin-bottom: clamp(72px, 9vh, 120px); }
.is-scrub .pipe-sticky { position: sticky; top: var(--header-h); display: flex; flex-direction: column; justify-content: flex-start; padding-top: 18px; padding-bottom: 8px; }
.pipe-sticky > .section-head { margin: 0 auto 26px; flex: none; }
.pipe-sticky > .section-head h2 { margin-bottom: .35em; }
.pipe-sticky > .section-head p { margin-bottom: .5em; }
.is-scrub .pipe-sticky .pipe { width: 100%; }

.pipe-stage { position: relative; min-height: 410px; }
.pipe-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.pipe-step { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pipe-dot {
  position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid #cfd8ee; color: #6b7490; transition: background .5s, border-color .5s, color .5s, box-shadow .5s;
}
.pipe-dot svg { width: 20px; height: 20px; }
.pipe-label { font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #6b7490; transition: color .5s; }
.pipe-step.is-active .pipe-dot { background: var(--grad-logo); border-color: transparent; color: #fff; }
.pipe-step.is-active .pipe-label { color: var(--c-text); }
.pipe-step.is-current .pipe-dot { box-shadow: 0 0 0 7px rgba(0, 85, 248, .13); }
.pipe-line { position: absolute; z-index: 1; left: 10%; right: 10%; top: 21px; height: 3px; border-radius: 3px; background: #e3e9f8; }
.pipe-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4dd4ff, #3653ff); transform: scaleX(var(--p, 1)); transform-origin: left center; transition: transform .85s cubic-bezier(.65, 0, .35, 1); }

.pipe-card {
  position: absolute; top: 116px; left: 50%; transform: translateX(-50%); width: min(640px, 100%); padding: 16px 22px 4px; background: #fff; border: 1px solid #e6ebf6; border-radius: 20px;
  box-shadow: 0 26px 50px -22px rgba(3, 4, 26, .3), 0 4px 12px -6px rgba(3, 4, 26, .14);
}
.pipe-notch { position: absolute; top: -8px; right: 24px; width: 16px; height: 16px; background: #fff; border-left: 1px solid #e6ebf6; border-top: 1px solid #e6ebf6; border-radius: 3px 0 0 0; transform: rotate(45deg); }
.pc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef1f8; }
.pc-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8f5ff; color: #38a8f8; }
.pc-avatar svg { width: 22px; height: 22px; }
.pc-id strong { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.pc-id span { color: #6b7490; font-size: .88rem; }
.pc-status { display: grid; justify-items: end; }
.st { grid-area: 1 / 1; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.st.is-on { opacity: 1; transform: none; }
.st--0 { background: #eef1f7; color: #59607a; } .st--1 { background: #e2efff; color: #0b4fc7; } .st--2 { background: #d6f6fd; color: #035a73; }
.st--3 { background: #d9f7e5; color: #1f5c3f; } .st--4 { background: #ece6ff; color: #4b2bb0; }
.pc-body { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 30px; }
.pc-col { min-width: 0; overflow: hidden; }
.row--deal { grid-column: 1 / -1; }
.row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; transition-delay: var(--d, 0s); }
.row.is-on { grid-template-rows: 1fr; opacity: 1; border-bottom: 1px solid #eef1f8; }
.row:last-child { border-bottom: 0 !important; }
.row-in { overflow: hidden; min-height: 0; }
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.row .k { color: #6b7490; font-size: .85rem; flex: none; }
.row .v { font-weight: 700; font-size: .88rem; text-align: right; white-space: nowrap; }
.row--tags .row-line { align-items: flex-start; }
.row--tags .k { padding-top: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; white-space: normal; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #eef3ff; color: #1d3a8a; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.chip--blue { background: #e2efff; color: #0b4fc7; } .chip--hot { background: #ffece3; color: #b23a0c; }
.chip-ico { width: 13px; height: 13px; }
.pill-ok { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #d9f7e5; color: #1f5c3f; font-weight: 700; font-size: .8rem; max-width: 100%; overflow-wrap: anywhere; }
.stars { letter-spacing: .12em; font-size: .95rem; }
.deal { font-size: 1.75rem; font-weight: 800; color: var(--c-primary); letter-spacing: -.02em; line-height: 1; }
.row--deal { margin-block: 6px 14px; border-bottom: 0 !important; }
.row--deal .row-line { padding: 14px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 85, 248, .05), rgba(77, 212, 255, .18)); }
.row--deal .k { font-size: .92rem; font-weight: 700; color: #3b4566; }

/* État animé : activé par js/pipeline.js (sans JS, l'état final s'affiche tel quel) */
.pipe-js .pipe-fill { transform: scaleX(var(--p, 0)); }
.pipe-js .pipe-card { transform: translate(var(--cx, 0px), var(--cy, 0px)); left: 0; right: auto; width: var(--cw, 300px); opacity: 0;
  transition: transform .85s cubic-bezier(.65, 0, .35, 1), width .85s cubic-bezier(.65, 0, .35, 1), opacity .6s ease, box-shadow .9s ease; }
/* la fiche s'ouvre : 2e colonne (qualification) à partir de « Convertir » */
.pipe-js .pc-body { grid-template-columns: 1.35fr 0fr; column-gap: 0; transition: grid-template-columns .85s cubic-bezier(.65, 0, .35, 1), column-gap .85s cubic-bezier(.65, 0, .35, 1); }
.pipe-js[data-step="3"] .pc-body, .pipe-js[data-step="4"] .pc-body { grid-template-columns: 1.35fr 1fr; column-gap: 30px; }
/* la fiche gagne en valeur : halo bleu de plus en plus présent */
.pipe-js[data-step="2"] .pipe-card { box-shadow: 0 26px 50px -22px rgba(3, 4, 26, .3), 0 4px 12px -6px rgba(3, 4, 26, .14), 0 0 0 1px rgba(0, 85, 248, .06); }
.pipe-js[data-step="3"] .pipe-card { box-shadow: 0 28px 56px -22px rgba(0, 85, 248, .28), 0 4px 12px -6px rgba(3, 4, 26, .12), 0 0 0 1px rgba(0, 85, 248, .12); }
.pipe-js[data-step="4"] .pipe-card { box-shadow: 0 34px 70px -24px rgba(0, 85, 248, .38), 0 6px 16px -8px rgba(3, 4, 26, .14), 0 0 0 1px rgba(77, 140, 255, .28); }
.pipe-js .pipe-card.is-visible { opacity: 1; }
.pipe-js .pipe-notch { left: calc(var(--nx, 50%) - 8px); right: auto; opacity: var(--notch, 1); transition: left .85s cubic-bezier(.65, 0, .35, 1), opacity .4s ease; }
.pipe:not(.pipe-js) .pipe-notch { display: none; }
.pipe:not(.pipe-js) .pipe-step .pipe-dot { background: var(--grad-logo); border-color: transparent; color: #fff; }
.pipe:not(.pipe-js) .pipe-step .pipe-label { color: var(--c-text); }
.pipe:not(.pipe-js) .st--4, .pipe:not(.pipe-js) .row { opacity: 1; transform: none; grid-template-rows: 1fr; }
.pipe:not(.pipe-js) .row { border-bottom: 1px solid #eef1f8; }
.pipe.is-reset *, .pipe.is-static * { transition: none !important; }

/* mode piloté par le scroll : aucune transition (le JS lisse lui-même le mouvement) */
.pipe.pipe-scrub .pipe-fill, .pipe.pipe-scrub .pipe-card, .pipe.pipe-scrub .pc-body, .pipe.pipe-scrub .pipe-notch, .pipe.pipe-scrub .st, .pipe.pipe-scrub .row { transition: none !important; }
.pipe.pipe-scrub .pipe-card { opacity: 1; }
.pipe.pipe-scrub .pc-body { grid-template-columns: minmax(0, 1fr) var(--b2, 0px); column-gap: var(--g2, 0px); }
.pipe.pipe-scrub .row { display: block; height: var(--h, 0px); opacity: var(--o, 0); overflow: hidden; border-bottom: 0 !important; }
.pipe.pipe-scrub .row-line { border-bottom: 1px solid #eef1f8; }
.pipe.pipe-scrub .row--deal .row-line { border-bottom: 0; }
.pipe.pipe-scrub .st { opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 7px)); }
.pipe.pipe-scrub .pipe-notch { opacity: var(--notch, 1); }

@media (max-width: 720px) {
  .pipe { --row: 52px; }
  .pipe-scroll { margin-bottom: 64px; }
  .pipe-stage { min-height: calc(var(--row) * 4 + 470px); }
  .pipe-track { display: block; }
  .pipe-step { flex-direction: row; align-items: flex-start; gap: 12px; height: var(--row); text-align: left; }
  .pipe-dot { width: 36px; height: 36px; }
  .pipe-dot svg { width: 17px; height: 17px; }
  .pipe-label { margin-top: 11px; font-size: .68rem; letter-spacing: .1em; }
  .pipe-line { left: 17px; right: auto; top: 18px; width: 3px; height: calc(var(--row) * 4); }
  .pipe-fill { transform: scaleY(var(--p, 1)); transform-origin: top center; background: linear-gradient(180deg, #4dd4ff, #3653ff); }
  .pipe-js .pipe-fill { transform: scaleY(var(--p, 0)); }
  .pipe-card, .pipe-js .pipe-card { top: 0; left: 128px; right: 0; width: auto; padding-inline: 14px; }
  .pipe-card { transform: none; }
  .pipe-js .pipe-card { transform: translate(0, var(--cy, 0px)); }
  .pc-body, .pipe-js .pc-body, .pipe-js[data-step] .pc-body, .pipe.pipe-scrub .pc-body { display: block; }
  .pc-col { overflow: visible; }
  .pc-col--a .row.is-on:last-child { border-bottom: 1px solid #eef1f8 !important; }
  .row--deal { margin-block: 4px 12px; }
  .row--deal .row-line { padding: 9px 12px; }
  .pipe-card .row .k { font-size: .8rem; }
  .pipe-card .row .v { font-size: .82rem; }
  .pc-head { grid-template-columns: auto 1fr; row-gap: 10px; gap: 10px; }
  .pc-avatar { width: 38px; height: 38px; }
  .pc-avatar svg { width: 19px; height: 19px; }
  .pc-id strong { font-size: 1rem; }
  .pc-id span { white-space: nowrap; }
  .pc-status { grid-column: 1 / -1; justify-items: start; min-height: 28px; }
  .pill-ok { font-size: .68rem; padding: 3px 7px; white-space: normal; }
  .row .v:has(.pill-ok) { min-width: 0; }
  .chip { font-size: .72rem; padding: 3px 9px; }
  .deal { font-size: 1.25rem; }
  .row--deal .row-line { padding: 9px 12px; }
  .pipe-notch { top: 11px; left: -8px; right: auto; border-top: 0; border-left: 1px solid #e6ebf6; border-bottom: 1px solid #e6ebf6; border-radius: 0 0 0 3px; }
  .pipe-js .pipe-notch { left: -8px; }
}

/* Étapes */
/* Étape 01 — photo du stand + carte « Visitors attracted » (voir js/stand.js) */
.media--stand { position: relative; }
.stand-photo { transform-origin: 60% 58%; }
.stand-stat {
  position: absolute; right: 4%; bottom: 5%; display: grid; gap: 2px; padding: 12px 18px 12px; min-width: 150px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px; box-shadow: 0 14px 30px -14px rgba(3, 4, 26, .5), 0 2px 6px rgba(3, 4, 26, .12);
}
.stat-label { font-size: .78rem; font-weight: 700; color: #4b5470; letter-spacing: .01em; }
.stat-row { display: flex; align-items: baseline; gap: 10px; }
.stat-num { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--c-text); font-variant-numeric: tabular-nums; }
.stat-tags { display: grid; align-items: center; }
.stat-delta { grid-area: 1 / 1; justify-self: start; white-space: nowrap; font-size: .85rem; font-weight: 800; color: #0f7a4a; background: #d9f7e5; border-radius: 999px; padding: 2px 10px; }
.stat-delta { opacity: 0; transform: translateY(6px); }
/* séquence (activée par js/stand.js ; sans JS, la photo et la valeur finale s'affichent directement) */
.stand-js .stand-photo { opacity: 0; transition: opacity 1.1s ease; }
.stand-js .stand-stat { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.stand-js.is-in .stand-photo { opacity: 1; animation: stand-drift 16s ease-out forwards; }
.stand-js.is-stat .stand-stat { opacity: 1; transform: none; }
.stand-js.is-delta .stat-delta { animation: stat-delta 2.1s ease both; }
@keyframes stand-drift { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes stat-delta { 0% { opacity: 0; transform: translateY(6px); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .stand-js .stand-photo, .stand-js .stand-stat { opacity: 1; transform: none; transition: none; animation: none; }
  .stand-js.is-in .stand-photo { animation: none; }
  .stat-delta { display: none; }
}
@media (max-width: 600px) {
  .stand-stat { right: 3%; bottom: 4%; padding: 8px 12px; min-width: 112px; border-radius: 13px; }
  .stat-label { font-size: .68rem; }
  .stat-num { font-size: 1.8rem; }
  .stat-delta { font-size: .72rem; padding: 1px 8px; }
}

/* Étape 02 — reconstitution de l'écran « Gifts / Your wheel » du logiciel SPARK, dans un cadre fixe de 1600 × 1200 px mis à l'échelle (js/engage.js) */
.media--eng { background: #f2f5f9; }
.eg-frame { position: relative; width: 100%; height: 100%; overflow: hidden; opacity: 1; transition: opacity .6s ease; }
.eg-frame.is-fading { opacity: 0; }
.eg-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; transform-origin: 0 0; background: #f2f5f9; color: #101828; font-size: 16px; line-height: 1.3; will-change: transform; user-select: none; }
.eg-stage * { box-sizing: border-box; }
.eg-page { display: grid; grid-template-columns: 330px 1fr; gap: 14px; padding: 16px; align-items: start; }
.eg-card { background: #fff; border: 1px solid #e5eaf2; border-radius: 16px; }
.eg-left { padding: 20px 24px 22px; }
.media--eng .eg-left h3, .media--eng .eg-right h3 { display: block; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.eg-wheel { display: block; width: 282px; height: 282px; margin: 16px auto 14px; overflow: visible; }
.eg-seg { fill: #fff; stroke: #0b0b0f; stroke-width: 1.3; transition: fill .35s ease; }
.eg-seg.is-hover { fill: #bcd5f4; stroke: #5b8fd6; }
.eg-seg.is-new { animation: eg-flash .5s ease-out; }
@keyframes eg-flash { 0% { filter: brightness(1.45) saturate(1.2); } 100% { filter: none; } }
.eg-num { font-weight: 800; font-size: 19px; text-anchor: middle; dominant-baseline: central; fill: #0b0b0f; transition: fill .35s ease; }
.eg-num.is-on { fill: #fff; }
.eg-cases { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 15px; }
.eg-cases .eg-frac { color: #475467; }
.eg-cases.is-complete { color: #059669; }
.eg-cases.is-complete .eg-frac { color: #059669; }
.eg-bar { height: 5px; border-radius: 4px; background: #e6ebf2; margin: 8px 0 14px; overflow: hidden; }
.eg-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: #0ea5ff; transition: width .45s ease, background .4s ease; }
.is-complete + .eg-bar i, .eg-bar.is-complete i { background: #10b981; }
.eg-help { margin: 0; text-align: center; font-size: 14px; color: #667085; line-height: 1.45; }
.eg-help + .eg-help { margin-top: 6px; }
.eg-help b { color: #101828; }
.eg-right { padding: 20px 26px 12px; }
.eg-head { display: flex; justify-content: space-between; align-items: center; }
.eg-head-r { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; color: #667085; }
.eg-total { background: #e4f4ff; color: #0284c7; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.eg-desc { margin: 10px 0 12px; font-size: 13px; line-height: 1.35; color: #98a2b3; }
.eg-desc b { color: #667085; }
.eg-row { height: 80px; margin-bottom: 8px; padding: 10px 16px 0; background: #fff; border: 1px solid #e5eaf2; border-radius: 14px; transition: background .4s ease, border-color .4s ease; }
.eg-row.is-placed { background: #ecfdf5; border-color: #6ee7b7; }
.eg-line { display: flex; align-items: center; gap: 10px; height: 38px; }
.eg-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 108px; height: 38px; border-radius: 10px; background: #eef2f7; color: #8fa0b6; font-weight: 800; font-size: 14px; transition: background .3s ease, color .3s ease; }
.eg-row.is-ready .eg-badge { background: #0f172a; color: #fff; }
.eg-row.is-placed .eg-badge { color: #fff; }
.eg-badge.is-dragging { opacity: .35; outline: 2px dashed rgba(15, 23, 42, .3); outline-offset: -2px; }
.eg-grip { width: 8px; height: 12px; background: radial-gradient(circle, currentColor 1.1px, transparent 1.4px) 0 0 / 4px 4px; }
.eg-input { position: relative; display: flex; align-items: center; height: 38px; padding: 0 12px; background: #fff; border: 1px solid #dde3ec; border-radius: 8px; font-size: 15px; color: #101828; white-space: nowrap; overflow: hidden; }
.eg-name { flex: 1; min-width: 0; }
.eg-qty { flex: none; width: 90px; }
.eg-ph { position: absolute; left: 12px; color: #98a2b3; }
.eg-input.has-text .eg-ph { display: none; }
.eg-input.is-focus { border: 2px solid #0ea5ff; padding: 0 11px; overflow: visible; box-shadow: 0 0 0 3px rgba(14, 165, 255, .12); }
.eg-input.is-focus.eg-qty::after { content: ""; position: absolute; right: 9px; top: 11px; width: 8px; height: 14px; background: linear-gradient(#6b7280, #6b7280) 0 0 / 100% 1px no-repeat; opacity: 0; }
.eg-caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: #101828; animation: eg-blink .9s steps(1) infinite; }
.eg-input.is-focus .eg-caret { display: inline-block; }
@keyframes eg-blink { 50% { opacity: 0; } }
.eg-select { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; width: 96px; height: 38px; padding: 0 10px 0 14px; background: #fff; border: 1px solid #dde3ec; border-radius: 8px; font-size: 15px; }
.eg-select::after, .eg-pick::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid #111; border-bottom: 1.8px solid #111; transform: rotate(45deg) translate(-2px, -2px); margin-left: 8px; flex: none; }
.eg-select.is-focus { border: 2px solid #0ea5ff; padding: 0 9px 0 13px; }
.eg-tail { flex: none; width: 66px; text-align: right; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 800; font-size: 13px; color: #0ea5ff; }
.eg-row.is-empty .eg-tail { color: #38bdf8; font-family: inherit; font-size: 18px; padding-right: 6px; }
.eg-sub { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; color: #98a2b3; height: 24px; }
.eg-row.is-ready .eg-sub { color: #667085; }
.eg-pick { display: inline-flex; align-items: center; height: 24px; padding: 0 8px 0 10px; border: 1px solid #dde3ec; border-radius: 6px; background: #fff; color: #101828; font-size: 13px; }
.eg-ok { color: #166534; font-weight: 800; }
.eg-rm { color: #1e3a8a; font-weight: 800; text-decoration: underline; }
/* liste déroulante du type de remise (sombre, comme dans le logiciel) */
.eg-pop { position: absolute; z-index: 5; width: 150px; padding: 6px; background: #3a3a3d; color: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12); font-size: 16px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.eg-pop.is-open { opacity: 1; transform: none; }
.eg-pop div { display: flex; align-items: center; height: 31px; padding: 0 10px 0 28px; border-radius: 6px; position: relative; }
.eg-pop div.is-sel::before { content: "✓"; position: absolute; left: 9px; }
.eg-pop div.is-hot { background: #0a63e0; }
/* curseur et étiquette de glisser-déposer */
.eg-cursor { position: absolute; z-index: 9; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.eg-cursor.is-on { opacity: 1; }
.eg-cursor svg { position: absolute; left: 0; top: 0; max-width: none; width: 30px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.eg-cursor .eg-hand { display: none; left: -10px; top: -4px; max-width: none; width: 34px; height: 34px; }
.eg-cursor.is-grab .eg-arrow { display: none; }
.eg-cursor.is-grab .eg-hand { display: block; }
.eg-chip { position: absolute; left: 20px; top: 4px; display: flex; align-items: center; gap: 9px; padding: 9px 18px 9px 13px; border-radius: 12px; background: #0f172a; color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; opacity: 0; transform: translate(-8px, 6px) scale(.92); transition: opacity .12s ease, transform .22s cubic-bezier(.2, .9, .3, 1.25); box-shadow: 0 16px 28px rgba(3, 4, 26, .45), 0 2px 6px rgba(0, 0, 0, .3); }
.eg-cursor.is-grab .eg-chip { opacity: 1; transform: translate(0, 0) scale(1.06) rotate(-2.5deg); }
.eg-cursor.is-press .eg-arrow { transform: scale(.86); transform-origin: 3px 2px; }
.eg-cursor .eg-arrow { transition: transform .08s ease; }
/* roue complète : message de réussite mis en valeur */
.eg-left.is-done { box-shadow: 0 0 0 2px rgba(16, 185, 129, .35), 0 18px 40px -18px rgba(16, 185, 129, .55); border-color: #6ee7b7; }
.eg-left { transition: box-shadow .6s ease, border-color .6s ease; }
@media (prefers-reduced-motion: reduce) { .eg-frame, .eg-seg, .eg-row, .eg-bar i, .eg-pop, .eg-chip, .eg-left { transition: none; } .eg-caret { animation: none; } }

/* Étape 03 « Collecter » : formulaire participant (smartphone) + CRM SPARK (écran), cadre fixe 1600 × 1200 mis à l'échelle (js/collect.js) */
.media--collect { background: #f6f8fc; }
.cl-frame { position: relative; width: 100%; height: 100%; overflow: hidden; transition: opacity .6s ease; }
.cl-frame.is-fading { opacity: 0; }
.cl-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; transform-origin: 0 0; background: radial-gradient(ellipse 70% 60% at 55% 45%, #fff, #eef3fb); font-family: "Montserrat", system-ui, sans-serif; color: #101828; line-height: 1.25; will-change: transform; user-select: none; }
.cl-stage * { box-sizing: border-box; }
.cl-stage h4, .cl-stage h5, .cl-stage p { margin: 0; text-transform: none; letter-spacing: 0; }
/* écran */
.cl-mon { position: absolute; filter: drop-shadow(0 30px 40px rgba(10, 30, 80, .2)); }
.cl-bez { position: relative; height: 778px; padding: 49px 49px 0 48px; background: #05070d; border-radius: 40px 40px 0 0; }
.cl-bez::before { content: ""; position: absolute; left: 50%; top: 22px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #1a2030; }
.cl-screen { position: relative; height: 700px; overflow: hidden; background: #f1f5f9; }
.cl-chin { height: 108px; border-radius: 0 0 40px 40px; background: linear-gradient(#dcdfe4, #b9bdc5); }
.cl-neck { position: absolute; left: 788px; top: 920px; width: 252px; height: 150px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(90deg, #8d929c, #e9ebef 45%, #a3a8b1); }
.cl-base { position: absolute; left: 724px; top: 1062px; width: 380px; height: 12px; border-radius: 50%; background: linear-gradient(#cfd2d8, #8d929c); }
/* Menu latéral SPARK (nouveau look) — dimensions en em, la taille de police du conteneur règle l'échelle (14px = taille native du CRM) */
.sb { position: absolute; left: 0; top: 0; bottom: 0; width: 15.5em; padding: 0 .64em 1.3em; display: flex; flex-direction: column; background: #0055f7; color: #fff; font-size: 14px; line-height: 1.2; }
.sb-brand { display: flex; align-items: center; gap: .5em; height: 5.14em; padding-left: .95em; font-size: 1em; font-weight: 700; flex: none; }
.sb-brand svg { width: 2.2em; height: 2.2em; }
.sb-nav { display: flex; align-items: center; gap: .65em; height: 2.43em; margin-bottom: .07em; padding: 0 .85em; border-radius: .6em; font-size: .93em; font-weight: 700; flex: none; }
.sb-nav svg { width: 1.1em; height: 1.1em; flex: none; }
.sb-nav.is-on { background: rgba(255, 255, 255, .22); }
.sb-adm { margin: .7em .85em 0; padding: .75em 0 0; border-top: 1px solid rgba(255, 255, 255, .22); height: 2.35em; font-size: .7em; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .6); flex: none; }
.sb-sp { flex: 1; }
.sb-off { display: flex; align-items: center; gap: .55em; margin-bottom: .55em; padding: 0 .9em; min-height: 2.85em; border-radius: 1.45em; background: #f43f3f; font-size: .78em; font-weight: 700; line-height: 1.2; flex: none; }
.sb-off i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: #fff; }
.sb-off span { max-width: 11em; }
.sb-off2 { min-height: 2.1em; padding-left: 1em; border-radius: 1.1em; font-size: 1.15em; font-weight: 400; }
.sb-user { display: flex; align-items: center; gap: .65em; margin: .3em 0 .5em; padding: 0 .35em; font-size: .85em; flex: none; }
.sb-user i { width: 2.3em; height: 2.3em; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .8em; }
.sb-user span { display: flex; flex-direction: column; } .sb-user em { font-style: normal; opacity: .5; font-size: .82em; }
.sb-lang { height: 1.95em; margin: 0 0 .85em; padding: 0 .75em; border-radius: 1em; background: #1a64ea; line-height: 1.95em; font-size: .78em; font-weight: 700; flex: none; }
/* CRM (1909 × 1194 px) */
.cl-crm { position: absolute; left: 0; top: 0; width: 1909px; height: 1194px; transform-origin: 0 0; background: #f1f5f9; font-size: 14px; }
.nx-main { position: absolute; left: 217px; top: 0; right: 0; bottom: 0; }
.nx-h { position: absolute; left: 30px; top: 20px; font-size: 24px; font-weight: 800; color: #0b1220; line-height: 32px; }
.nx-lead { position: absolute; left: 30px; top: 51px; font-size: 13.5px; color: #6b7280; }
.nx-tabs { position: absolute; left: 30px; right: 23px; top: 88px; height: 37px; border-bottom: 1px solid #dfe5ee; display: flex; gap: 18px; font-weight: 700; font-size: 13.5px; color: #475467; }
.nx-tabs span { padding: 10px 14px 0; height: 37px; } .nx-tabs .is-on { color: #0a2a8a; border-bottom: 2px solid #0a2a8a; }
.nx-card { position: absolute; left: 30px; right: 23px; background: #fff; border: 1px solid #e6ebf2; border-radius: 14px; }
.nx-c1 { top: 140px; height: 73px; } .nx-c2 { top: 218px; height: 120px; }
.nx-btn { position: absolute; height: 37px; padding: 0 16px; line-height: 35px; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; font-weight: 700; font-size: 13.5px; color: #0b1220; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: transform .12s ease, background .12s ease; }
.nx-c1 .nx-btn { left: 21px; top: 18px; } .nx-fil { right: 20px; top: 18px; }
.nx-btn.is-press { background: #e3e9f3; transform: translateY(1px) scale(.97); }
.nx-search { position: absolute; left: 21px; right: 107px; top: 18px; height: 37px; padding: 0 13px; line-height: 35px; border: 1px solid #dfe5ee; border-radius: 8px; color: #7b8698; font-size: 13px; white-space: nowrap; overflow: hidden; }
.nx-chp { position: absolute; left: 21px; top: 66px; display: flex; gap: 8px; }
.nx-chp span { height: 32px; padding: 0 14px; line-height: 30px; border: 1px solid #dfe5ee; border-radius: 16px; background: #fff; font-weight: 700; font-size: 13px; color: #1f2937; white-space: nowrap; }
.nx-chp i { font-style: normal; font-size: 11px; font-weight: 700; color: #94a3b8; margin-left: 3px; }
.nx-chp .is-on { background: #0a63f5; border-color: #0a63f5; color: #fff; } .nx-chp .is-on i { color: #dbe8ff; }
.nx-list { position: absolute; left: 30px; right: 23px; top: 343px; bottom: -20px; background: #fff; border: 1px solid #e6ebf2; border-radius: 14px; overflow: hidden; }
.nx-th { position: absolute; left: 21px; right: 21px; top: 18px; height: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #94a3b8; }
.nx-th span { position: absolute; top: 0; }
.nx-th span:nth-child(1) { left: 16px; } .nx-th span:nth-child(2) { left: 584px; } .nx-th span:nth-child(3) { left: 978px; } .nx-th span:nth-child(4) { left: 1062px; } .nx-th span:nth-child(5) { left: 1180px; }
.nx-rows { position: absolute; left: 21px; right: 21px; top: 39px; }
.nx-row { height: 58px; margin-bottom: 10px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); overflow: hidden; }
.nx-r { position: relative; height: 56px; }
.nx-r > span, .nx-r > i { position: absolute; }
.nx-bar { left: -1px; top: 7px; width: 3px; height: 40px; border-radius: 2px; } .nx-bar--g { background: #10b981; } .nx-bar--b { background: #0a63f5; }
.nx-ava { left: 15px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: #0b3aa8; }
.nx-ava1 { background: #0aa07a; } .nx-ava2 { background: #0b2a5c; } .nx-ava3 { background: #1d8cf8; }
.nx-nm { left: 62px; top: 11px; font-weight: 700; font-size: 14px; color: #08277f; white-space: nowrap; }
.nx-mail { display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: 700; font-size: 12.5px; line-height: 17px; color: #4b5563; white-space: nowrap; }
.nx-r > .nx-mail { left: 62px; top: 30px; padding-left: 0; font-weight: 500; }
.nx-r > .nx-mail--ok, .nx-r > .nx-mail--ko { padding-left: 6px; }
.nx-mail--ok { background: #d4f5df; color: #05603a; font-weight: 700; } .nx-mail--ko { background: #fde2e2; color: #b42318; font-weight: 700; }
.nx-gf { left: 583px; top: 12px; width: 375px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; color: #0b1220; }
.nx-gc { left: 583px; top: 30px; font-size: 10.5px; color: #98a2b3; white-space: nowrap; }
.nx-pot { left: 977px; top: 19px; } .nx-dash { color: #cbd5e1; font-size: 13px; }
.nx-stars { display: flex; gap: 1px; } .nx-stars svg { fill: #e2e8f0; stroke: none; } .nx-stars svg.on { fill: #f59e0b; }
.nx-st { left: 1061px; top: 18px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; line-height: 14px; white-space: nowrap; }
.nx-st--ret { background: #e3f8ed; color: #0fa968; } .nx-st--act { background: #e1f4fe; color: #0ea5e9; } .nx-st--man { background: #eceff4; color: #475467; font-size: 9.5px; line-height: 11px; padding: 3px 8px; top: 15px; text-align: center; }
.nx-nt { left: 1180px; top: 20px; width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #6b7280; }
.nx-open { right: 15px; top: 11px; width: 32px; height: 32px; border: 1px solid #dfe5ee; border-radius: 8px; display: grid; place-items: center; color: #0b1220; background: #fff; }
/* nouvelle ligne */
.nx-new { height: 0; margin-bottom: 0; border-width: 0; transition: height .55s cubic-bezier(.2, .7, .2, 1), margin-bottom .55s cubic-bezier(.2, .7, .2, 1); position: relative; box-shadow: none; }
.nx-new.is-open { height: 58px; margin-bottom: 10px; border-width: 1px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.nx-new::after { content: ""; position: absolute; inset: 0; background: rgba(10, 99, 224, .1); opacity: 0; pointer-events: none; }
.nx-new.is-hl::after { opacity: 1; animation: cl-hl 2.2s ease-out forwards; }
@keyframes cl-hl { 0% { opacity: 1; } 100% { opacity: 0; } }
/* fiche prospect (modale) */
.cl-veil { position: absolute; inset: 0; background: rgba(8, 15, 35, .5); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.cl-veil.is-on { opacity: 1; }
.cl-modal { position: absolute; left: 417px; top: 40px; width: 1080px; min-height: 800px; padding: 70px 24px 24px; background: #fff; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; color: #0b1220; }
.cl-modal.is-on { opacity: 1; transform: none; }
.cl-modal h6 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 700; line-height: 22px; text-transform: none; letter-spacing: 0; }
.nx-fx { position: absolute; right: 22px; top: 22px; display: flex; gap: 24px; color: #0b1220; }
.nx-fh { position: absolute; left: 26px; top: 66px; right: 26px; display: flex; gap: 16px; }
.nx-fav { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #e0ecff; color: #0a63f5; display: grid; place-items: center; font-weight: 800; font-size: 24px; }
.nx-fhm b { display: block; font-size: 26px; font-weight: 800; line-height: 32px; margin-top: -2px; }
.nx-fm { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; } .nx-fm .nx-mail { font-size: 14px; line-height: 20px; }
.nx-vf { padding: 0 8px; border-radius: 4px; background: #d4f5df; color: #05603a; font-size: 12px; font-weight: 700; line-height: 20px; }
.nx-fhm p { display: flex; flex-wrap: wrap; gap: 4px 18px; max-width: 480px; font-size: 13.5px; color: #6b7280; } .nx-fhm p b { display: inline; font-size: 13.5px; font-weight: 700; line-height: 20px; margin: 0; color: #0b1220; }
.nx-fb { position: absolute; left: 540px; bottom: -8px; display: flex; gap: 0; }
.nx-fb span { width: 40px; height: 40px; margin-left: 0; border: 1px solid #dfe5ee; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.nx-fb span + span { margin-left: 0; }
.nx-fc { display: flex; gap: 20px; margin-top: 128px; }
.nx-fl { width: 630px; } .nx-fr { width: 381px; margin-top: -122px; }
.nx-cd { background: #fff; border: 1px solid #e6ebf2; border-radius: 14px; padding: 16px 17px; margin-bottom: 14px; }
.nx-fl .nx-nc { background: #f4f1fe; border-color: #e4def8; padding: 16px 17px 24px; } .nx-nc p { margin: 11px 0 0; font-size: 15px; color: #475467; } .nx-nc u { color: #0a50e0; font-weight: 700; }
.nx-nc .nx-quote { margin: 11px 0 0; font-size: 15px; line-height: 1.5; color: #1f2937; }
.nx-mod { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: #e6efff; color: #0a50e0; font-size: 13.5px; font-weight: 700; }
.nx-ig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 18px; padding-bottom: 6px; }
.nx-ig small { display: block; font-size: 12.5px; color: #6b7280; } .nx-ig b { display: block; font-size: 15px; font-weight: 700; line-height: 21px; margin-top: 2px; }
.nx-pc { padding: 14px 17px; } .nx-pt { display: flex; justify-content: space-between; align-items: center; min-height: 44px; } .nx-pt small { font-size: 13px; color: #6b7280; } .nx-pt b { font-weight: 700; color: #475467; }
.nx-fs { display: flex; align-items: center; gap: 11px; } .nx-fs svg { fill: none; stroke: #b7c0d0; stroke-width: 1.6; stroke-linejoin: round; } .nx-fs svg.on { fill: #f59e0b; stroke: #f59e0b; } .nx-fs em { font-style: normal; font-size: 13px; color: #6b7280; }
.nx-hc ul { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; }
.nx-hc li { position: relative; padding: 0 0 12px 16px; border-left: 1px solid #dbe4f3; margin-left: 4px; }
.nx-hc li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #0a63f5; }
.nx-hc li b { display: block; font-size: 14px; font-weight: 700; line-height: 19px; } .nx-hc li small { display: block; font-size: 12.5px; color: #6b7280; margin-top: 1px; }
.nx-cc h6 { margin-bottom: 12px; } .nx-cp { padding: 8px 12px; margin-bottom: 8px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; }
.nx-cp b { display: block; font-size: 14px; font-weight: 700; line-height: 19px; } .nx-cp small { display: block; font-size: 12.5px; color: #6b7280; margin-top: 1px; }
.nx-cp.is-cur { background: #dfeafe; border-color: #dfeafe; }
/* toast */
.cl-toast { position: absolute; left: 50%; margin-left: -125px; top: 34px; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 10px; background: #0f172a; color: #fff; font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .4s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .5); z-index: 3; }
.cl-toast i { width: 9px; height: 9px; border-radius: 50%; background: #34d399; }
.cl-toast.is-on { opacity: 1; transform: none; }
.cl-link { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; pointer-events: none; overflow: visible; }
/* smartphone */
.cl-phone { position: absolute; padding: 12px; border-radius: 48px; background: #0b0f1a; box-shadow: 0 60px 90px -36px rgba(8, 20, 60, .6), 0 8px 26px rgba(8, 20, 60, .28), inset 0 0 0 2px #2a3144; }
.cl-pscreen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 38px; background: #f4f4f5; }
.cl-pin { position: absolute; left: 0; top: 0; width: 923px; height: 1998px; transform-origin: 0 0; background: #f4f4f5; font-family: "Montserrat", system-ui, sans-serif; color: #0b0b12; }
.ph-bar { position: absolute; left: 0; top: 0; width: 923px; height: 280px; background: linear-gradient(#0b55f5, #1565f7); color: #fff; }
.ph-time { position: absolute; left: 92px; top: 28px; font-size: 40px; font-weight: 600; } .ph-cam { position: absolute; left: 30px; top: 72px; font-size: 26px; }
.ph-sig { position: absolute; left: 662px; top: 54px; display: flex; gap: 5px; align-items: flex-end; height: 32px; } .ph-sig i { width: 9px; background: #fff; border-radius: 2px; } .ph-sig i:nth-child(1) { height: 10px; } .ph-sig i:nth-child(2) { height: 17px; } .ph-sig i:nth-child(3) { height: 24px; } .ph-sig i:nth-child(4) { height: 32px; }
.ph-5g { position: absolute; left: 722px; top: 50px; font-size: 32px; font-weight: 600; }
.ph-bat { position: absolute; left: 782px; top: 52px; width: 62px; height: 34px; border-radius: 10px; background: #fff; color: #1565f7; font-size: 24px; font-weight: 700; text-align: center; line-height: 34px; }
.ph-url { position: absolute; left: 38px; top: 140px; width: 847px; height: 100px; border-radius: 50px; background: #9db9fb; text-align: center; line-height: 100px; font-size: 40px; font-weight: 500; color: #0b0b12; }
.ph-card { position: absolute; left: 28px; top: 355px; width: 867px; height: 1355px; border-radius: 60px; background: #fff; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .22); }
.ph-logo { position: absolute; left: 0; right: 0; top: 96px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.ph-logo b { font-size: 76px; font-weight: 800; font-style: italic; letter-spacing: .03em; color: #0b1020; }
.ph-card h4 { position: absolute; left: 0; right: 0; top: 290px; text-align: center; font-size: 56px; font-weight: 700; }
.ph-sub { position: absolute; left: 0; right: 0; top: 388px; text-align: center; font-size: 33px; color: #6b7280; }
.ph-card label { position: absolute; font-size: 30px; font-weight: 700; }
.cl-in { position: absolute; height: 88px; border: 2px solid #dfe6f2; border-radius: 24px; background: #fff; padding: 0 30px; display: flex; align-items: center; font-size: 34px; color: #0b0b12; transition: border-color .15s ease, box-shadow .15s ease; }
.cl-in.is-focus { border-color: #09b3fb; box-shadow: 0 0 0 5px rgba(9, 179, 251, .18); }
.cl-caret { display: none; width: 3px; height: 40px; background: #0b0b12; margin-left: 2px; }
.cl-in.is-focus .cl-caret { display: block; animation: cl-blink 1s steps(1) infinite; }
@keyframes cl-blink { 50% { opacity: 0; } }
.ph-chk { position: absolute; left: 60px; top: 1056px; width: 38px; height: 38px; border-radius: 10px; border: 3px solid #8a93a6; display: grid; place-items: center; transition: background .2s ease, border-color .2s ease; }
.ph-chk svg { opacity: 0; transition: opacity .2s ease; }
.ph-chk.is-on { background: #0a84ff; border-color: #0a84ff; } .ph-chk.is-on svg { opacity: 1; }
.ph-agree { position: absolute; left: 127px; top: 1052px; width: 700px; font-size: 30px; line-height: 1.4; color: #6b7280; }
.ph-btn { position: absolute; left: 56px; top: 1183px; width: 755px; height: 114px; border-radius: 28px; background: #09b3fb; color: #00021a; font-size: 36px; font-weight: 800; text-align: center; line-height: 114px; overflow: hidden; transition: transform .12s ease, background .12s ease; }
.ph-btn.is-press { transform: scale(.975); background: #0a9fe0; }
.cl-tap { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(0, 2, 26, .22); opacity: 0; transform: scale(.2); }
.cl-tap.is-go { animation: cl-tap .6s ease-out; }
@keyframes cl-tap { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }
.ph-foot { position: absolute; left: 0; top: 1785px; width: 923px; height: 213px; background: #2f6df3; } .ph-foot div { position: absolute; left: 66px; top: 37px; width: 790px; height: 112px; border-radius: 56px; background: #8fcdfd; }
.ph-spin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 140px; text-align: center; color: #fff; background: radial-gradient(ellipse 80% 50% at 50% 30%, #6db27c, rgba(109, 178, 124, 0) 70%), linear-gradient(#58ab68, #4ca255); opacity: 0; transition: opacity .6s ease; }
.ph-spin small { font-size: 50px; font-weight: 700; letter-spacing: .02em; margin-bottom: 30px; }
.ph-spin strong { font-size: 118px; line-height: 1.08; font-weight: 800; text-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.ph-spin.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cl-frame, .nx-new, .cl-veil, .cl-modal, .cl-toast, .ph-spin, .ph-chk, .ph-btn { transition: none; } .cl-caret { animation: none; } .nx-new::after { animation: none; } }

/* Étape 04 « Convertir » : mêmes appareils que l'étape 03, cadre élargi à 2000 × 1500 px pour accueillir les CRM externes (js/convert.js) */
.media--convert .cl-stage { width: 2400px; height: 1800px; }
.cv-world { position: absolute; width: 1600px; height: 1200px; }
.cv-lines { position: absolute; left: 0; top: 0; width: 2400px; height: 1800px; pointer-events: none; overflow: visible; }
.cv-lines path { transition: opacity .6s ease; }
.cv-logo { position: absolute; width: 264px; height: 136px; margin: -68px 0 0 -132px; display: grid; place-items: center; background: #fff; border-radius: 22px; box-shadow: 0 18px 34px -16px rgba(10, 30, 80, .3), 0 0 0 1px rgba(16, 24, 40, .05); opacity: 0; transform: scale(.82); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1.1); }
.cv-logo.is-on { opacity: 1; transform: none; }
.cv-logo img { display: block; max-width: 172px; max-height: 74px; width: auto; height: auto; }
.is-narrow .cv-logo { width: 340px; height: 172px; margin: -86px 0 0 -170px; border-radius: 28px; }
.is-narrow .cv-logo img { max-width: 230px; max-height: 100px; }
.cv-cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; z-index: 9; }
.cv-cursor svg { position: absolute; left: -4px; top: -2px; max-width: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.cv-ring { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: rgba(10, 99, 224, .28); opacity: 0; transform: scale(.2); pointer-events: none; z-index: 8; }
.cv-ring.is-go { animation: cl-tap .6s ease-out; }
.cv-sarah { position: relative; }
.cv-sarah::after { content: ""; position: absolute; inset: 0; background: rgba(10, 99, 224, .1); opacity: 0; pointer-events: none; }
.cv-sarah.is-hl::after { animation: cl-hl 2.4s ease-out forwards; }
.cv-modal { top: 70px; }
/* smartphone : formulaire « New prospect » (923 × 1998 px d'origine) */
.pn-bar { position: absolute; left: 0; top: 0; width: 923px; height: 138px; background: #fff; color: #0b0b12; z-index: 3; }
.pn-time { position: absolute; left: 95px; top: 36px; display: flex; align-items: center; gap: 8px; font-size: 40px; font-weight: 600; }
.pn-bar .ph-sig { left: 662px; top: 52px; } .pn-bar .ph-sig i { background: #0b0b12; } .pn-wifi { position: absolute; left: 722px; top: 46px; } .pn-bar .ph-bat { left: 782px; top: 50px; width: 62px; background: #0b0b12; color: #fff; }
.pn-isl { position: absolute; left: 248px; top: 26px; width: 411px; height: 86px; z-index: 2; border-radius: 43px; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 26px; opacity: 0; transition: opacity .25s ease; }
.pn-isl b { width: 12px; height: 12px; border-radius: 50%; background: #fb923c; margin-right: 128px; }
.pn-isl.is-on { opacity: 1; }
.pn-sc { position: absolute; left: 0; top: 138px; width: 923px; padding: 42px 48px 70px; background: #fff; will-change: transform; }
.pn-sc label { display: block; margin: 28px 0 26px; font-size: 30px; font-weight: 700; line-height: 36px; }
.pn-h { margin: 0; font-size: 46px; font-weight: 800; line-height: 60px; letter-spacing: 0; text-transform: none; color: #0a1a4f; }
.pn-s { margin: 8px 0 0; font-size: 32px; line-height: 40px; color: #6b7280; } .pn-s b { color: #4b5563; }
.pn-scan { margin-top: 37px; padding: 35px; border: 2px dashed #cfd6e2; border-radius: 28px; background: #f8fafc; }
.pn-file { display: flex; align-items: center; gap: 12px; height: 46px; margin-bottom: 4px; font-size: 38px; color: #111; } .pn-file i { font-style: normal; padding: 0 28px; height: 42px; line-height: 42px; border-radius: 21px; background: #e5e7eb; font-size: 26px; color: #111; }
.pn-scanb { position: relative; padding: 0 56px 0 86px; }
.pn-scanb { display: flex; align-items: center; justify-content: center; width: 757px; height: 125px; text-align: center; border: 2px solid #dfe6f2; border-radius: 24px; background: #fff; font-size: 34px; font-weight: 700; line-height: 40px; color: #0a1a4f; } .pn-scanb svg { position: absolute; left: 40px; top: 50%; margin-top: -17px; }
.pn-scan p { margin: 22px 0 0; font-size: 28px; line-height: 38px; color: #6b7280; }
.pn-sec { margin-top: 42px; font-size: 26px; font-weight: 700; letter-spacing: .08em; color: #64748b; line-height: 32px; }
.pn-sec + .pn-2 label, .pn-sec + label { margin-top: 14px; }
.pn-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pn-in { position: relative; height: 95px; padding: 0 30px; display: flex; align-items: center; border: 2px solid #dfe6f2; border-radius: 24px; background: #fff; font-size: 34px; color: #0b0b12; white-space: nowrap; }
.pn-c { justify-content: center; }
.pn-mrow { display: flex; gap: 20px; } .pn-mrow .pn-in { flex: 1 1 auto; } .pn-find { flex: none; width: 314px; height: 85px; margin-top: 5px; border: 2px solid #eef1f6; border-radius: 24px; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #94a3b8; }
.pn-hint { margin: 22px 0 0; font-size: 28px; line-height: 33px; color: #6b7280; }
.pn-chev { position: absolute; right: 24px; top: 26px; }
.pn-sh { display: flex; align-items: center; gap: 8px; margin-top: 50px; margin-bottom: 0; } .pn-tri { font-size: 22px; }
.pn-sales { max-height: 0; overflow: hidden; transition: max-height .8s cubic-bezier(.3, .7, .2, 1); }
.pn-sales label:first-child { margin-top: 30px; }
.pn-v { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; } .pn-v.is-on { opacity: 1; transform: none; }
.pn-sc .pn-nl { margin-top: 33px; margin-bottom: 24px; }
.pn-note { position: relative; height: 172px; padding: 20px 30px; border: 2px solid #dfe6f2; border-radius: 24px; overflow: hidden; font-size: 34px; line-height: 42px; color: #0b0b12; }
.pn-ph { position: absolute; left: 30px; top: 20px; color: #a4abb8; }
.pn-note.has-text .pn-ph { display: none; }
.pn-recrow { position: relative; height: 84px; margin-top: 32px; }
.pn-recrow > * { position: absolute; left: 0; top: 0; }
.pn-rec { height: 84px; padding: 0 38px 0 36px; line-height: 84px; border-radius: 42px; background: #eef1f6; font-size: 30px; font-weight: 700; color: #374151; white-space: nowrap; transition: transform .12s ease, background .12s ease; }
.pn-rec.is-press { transform: scale(.96); background: #e1e6ef; }
.pn-stop { display: none; height: 84px; padding: 0 38px 0 34px; align-items: center; gap: 12px; border-radius: 42px; background: #f04444; color: #fff; font-size: 30px; font-weight: 700; }
.pn-stop i { width: 26px; height: 26px; border-radius: 6px; background: #dbe7ff; }
.pn-recl { display: none; left: 232px; top: 8px; width: 590px; line-height: 34px; font-size: 28px; color: #6b7280; } .pn-recl b { color: #f04444; }
.pn-ana { display: none; height: 84px; padding: 0 34px; line-height: 80px; border: 2px solid #d9d3f7; border-radius: 42px; background: #f6f4ff; color: #5b21b6; font-size: 30px; font-weight: 700; white-space: nowrap; }
.pn-recrow.is-rec .pn-rec, .pn-recrow.is-ana .pn-rec { visibility: hidden; }
.pn-recrow.is-rec .pn-stop { display: flex; } .pn-recrow.is-rec .pn-recl { display: block; }
.pn-recrow.is-rec .pn-stop i { animation: cl-blink 1s steps(1) infinite; }
.pn-recrow.is-ana .pn-ana { display: block; animation: pn-pulse 1s ease-in-out infinite; }
@keyframes pn-pulse { 50% { opacity: .55; } }
.pn-sc .pn-recrow + label { margin-top: 36px; margin-bottom: 20px; }
.pn-stars { display: flex; gap: 28px; }
.pn-stars svg { fill: none; stroke: #b7c0d0; stroke-width: 1.6; transition: fill .3s ease, stroke .3s ease, transform .3s ease; }
.pn-stars svg.is-on { fill: #f59e0b; stroke: #f59e0b; transform: scale(1.06); }
.pn-nr { margin: 22px 0 0; font-size: 28px; line-height: 36px; color: #98a2b3; transition: opacity .3s ease; }
.pn-nr.is-gone { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.pn-tg { white-space: nowrap; }
.pn-chk { display: flex; gap: 24px; align-items: flex-start; margin-top: 44px; }
.pn-chk i { flex: none; width: 44px; height: 44px; margin-top: 6px; border-radius: 12px; background: #0a84ff; display: grid; place-items: center; }
.pn-chk p { margin: 0; font-size: 32px; line-height: 44px; color: #6b7280; } .pn-chk span { color: #98a2b3; }
.pn-btns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; }
.pn-btns span { height: 88px; padding: 0 36px; line-height: 84px; border: 2px solid #dfe6f2; border-radius: 24px; font-size: 34px; font-weight: 700; }
.pn-btns .pn-b1 { background: #09b3fb; border-color: #09b3fb; color: #00021a; }
@media (prefers-reduced-motion: reduce) { .cv-logo, .pn-sales, .pn-v, .pn-stars svg, .pn-isl, .cv-lines path { transition: none; } .cv-sarah.is-hl::after { animation: none; } .pn-ana, .pn-stop i { animation: none; } }

/* Étape 05 « Mesurer » : reconstitution du Tableau de bord SPARK, cadre fixe 1066 × 800 px mis à l'échelle (js/measure.js) ; recomposé sur mobile */
.media--measure { background: #f1f5f9; }
.ms-frame { position: relative; width: 100%; height: 100%; overflow: hidden; transition: opacity .6s ease; }
.ms-frame.is-fading { opacity: 0; }
.ms-stage { position: absolute; left: 0; top: 0; width: 1066px; height: 800px; transform-origin: 0 0; background: #f1f5f9; color: #0b1220; font-family: "Montserrat", system-ui, sans-serif; line-height: 1.25; user-select: none; }
.ms-stage * { box-sizing: border-box; }
.ms-stage h5, .ms-stage h6, .ms-stage p { margin: 0; text-transform: none; letter-spacing: 0; }
.ms-stage .sb { font-size: 10.9px; }
.ms-main { position: absolute; left: 169px; top: 0; right: 0; bottom: 0; padding: 20px 22px 0; display: flex; flex-direction: column; gap: 12px; }
.ms-head { display: flex; justify-content: space-between; align-items: flex-start; height: 44px; flex: none; }
.ms-head h5 { font-size: 24px; font-weight: 800; line-height: 28px; }
.ms-head p { margin-top: 2px; font-size: 12px; color: #6b7280; }
.ms-hr { display: flex; align-items: center; gap: 8px; }
.ms-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ms-sel { font-weight: 500; color: #1f2937; }
.ms-act { font-size: 10px; font-weight: 700; color: #10b981; }
.ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: none; }
.ms-card { position: relative; background: #fff; border: 1px solid #e5eaf2; border-radius: 12px; transition: border-color .4s ease, box-shadow .4s ease; }
.ms-k { height: 118px; padding: 16px 18px 0; }
.ms-card small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #7b8698; }
.ms-n { display: block; margin-top: 8px; font-size: 40px; line-height: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-k em { display: block; margin-top: 6px; font-style: normal; font-size: 10.5px; color: #98a2b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-bar { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 4px; border-radius: 3px; background: #e6ebf2; overflow: hidden; }
.ms-bar u { display: block; width: 0; height: 100%; border-radius: 3px; background: currentColor; text-decoration: none; }
.ms-c-cy .ms-n, .ms-c-cy .ms-bar { color: #0cb4ff; } .ms-c-gr .ms-n, .ms-c-gr .ms-bar { color: #10b981; } .ms-c-or .ms-n, .ms-c-or .ms-bar { color: #f59e0b; }
.ms-c-cy.is-live { border-color: #b6e3ff; box-shadow: 0 12px 26px -16px rgba(14, 165, 255, .6); }
.ms-c-gr.is-live { border-color: #a7ead0; box-shadow: 0 12px 26px -16px rgba(16, 185, 129, .6); }
.ms-c-or.is-live { border-color: #fbd9a0; box-shadow: 0 12px 26px -16px rgba(245, 158, 11, .6); }
.ms-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: 200px; flex: none; }
.ms-prog { padding: 18px 18px 0; } .ms-prog .ms-n { color: #0b1220; font-size: 34px; line-height: 38px; } .ms-prog em { display: block; margin-top: 6px; font-style: normal; font-size: 10.5px; color: #98a2b3; }
.ms-prog .ms-bar { top: 112px; bottom: auto; } .ms-prog .ms-bar u { background: #8a93a6; }
.ms-prog.is-live { border-color: #cfd6e4; box-shadow: 0 12px 26px -16px rgba(60, 70, 100, .5); }
.ms-stage h6 { font-size: 12.5px; font-weight: 800; line-height: 18px; }
.ms-chart { padding: 14px 16px 6px; } .ms-svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.ms-gl { stroke: #edf1f6; stroke-width: 1; stroke-dasharray: 2 3; } .ms-gt { font-size: 9px; fill: #98a2b3; font-family: inherit; }
.ms-ln { fill: none; stroke: #0a63f5; stroke-width: 2.2; stroke-linecap: round; }
.ms-pt { fill: #fff; stroke: #0a63f5; stroke-width: 2; opacity: 0; transition: opacity .3s ease; }
.ms-bot { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ms-dep, .ms-job { padding: 16px 18px 0; overflow: hidden; }
.ms-dgrid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.ms-map { display: block; width: 210px; height: 210px; }
.ms-fr { fill: #eef2fb; stroke: #fff; stroke-width: .8; }
.ms-rg { fill: #0a63f5; stroke: #fff; stroke-width: .5; opacity: 0; transition: opacity .5s ease; } .ms-rg.is-on { opacity: 1; } .ms-r3 { fill: #0a2a7a; }
.ms-top { padding-top: 8px; } .ms-t5 { color: #0a2a7a; font-size: 11px; margin-bottom: 4px; }
.ms-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tr { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; height: 28px; border-bottom: 1px solid #edf1f6; font-size: 10.5px; opacity: 0; transition: opacity .3s ease; }
.ms-tr i { font-style: normal; color: #98a2b3; } .ms-tr b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-job { text-align: center; } .ms-job h6 { text-align: left; }
.ms-dn { display: block; width: 250px; height: 250px; margin: 0 auto; } .ms-ds { transition: none; } .ms-dp { font-size: 7.5px; font-weight: 800; fill: #111; font-family: inherit; opacity: 0; transition: opacity .3s ease; }
.ms-leg { display: flex; justify-content: center; gap: 14px; font-size: 10px; color: #4b5563; } .ms-leg span { display: inline-flex; align-items: center; gap: 5px; } .ms-lg { width: 8px; height: 8px; border-radius: 50%; }
.ms-rep { margin-top: 8px; font-size: 9.5px; color: #98a2b3; text-align: left; }
/* mobile : mise en page recomposée en taille réelle */
.media--measure.is-narrow { aspect-ratio: auto; }
.is-narrow.media--measure .ms-frame { height: auto; }
.ms-stage.is-narrow { position: relative; width: 100%; height: auto; transform: none; padding: 14px; }
.is-narrow .sb, .is-narrow .ms-btn { display: none; }
.is-narrow .ms-main { position: static; padding: 0; gap: 10px; }
.is-narrow .ms-head { height: auto; align-items: center; }
.is-narrow .ms-head h5 { font-size: 20px; line-height: 24px; } .is-narrow .ms-head p { font-size: 12px; }
.is-narrow .ms-act { font-size: 11px; }
.is-narrow .ms-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
.is-narrow .ms-k { height: auto; min-height: 112px; padding: 14px 14px 26px; }
.is-narrow .ms-card small { font-size: 9.5px; } .is-narrow .ms-n { margin-top: 6px; font-size: 32px; line-height: 36px; }
.is-narrow .ms-k em { margin-top: 4px; font-size: 10.5px; white-space: normal; line-height: 1.3; overflow: visible; }
.is-narrow .ms-bar { left: 14px; right: 14px; bottom: 12px; }
.is-narrow .ms-mid { grid-template-columns: 1fr; height: auto; gap: 10px; }
.is-narrow .ms-prog { padding: 14px 14px 38px; } .is-narrow .ms-prog .ms-bar { top: auto; bottom: 14px; }
.is-narrow .ms-chart { padding: 14px; }
.is-narrow .ms-bot { display: flex; flex-direction: column; gap: 10px; }
.is-narrow .ms-dep, .is-narrow .ms-job { padding: 14px; }
.is-narrow .ms-dgrid { grid-template-columns: 1fr; gap: 6px; } .is-narrow .ms-map { margin: 0 auto; }
.is-narrow .ms-tr { height: 28px; font-size: 12px; }
.is-narrow .ms-dn { width: 220px; height: 220px; }
@media (prefers-reduced-motion: reduce) { .ms-frame, .ms-card, .ms-pt, .ms-rg, .ms-tr, .ms-dp { transition: none; } }

.steps { display: grid; gap: 112px; }
.step { display: grid; gap: 64px; align-items: center; grid-template-columns: 1fr 1fr; }
.step:nth-child(even) .step-text { order: 2; }
.section-head .section-label, .section-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--c-text); margin-bottom: 20px; }
.section-head p.section-label { color: var(--c-text); }
.section-label img { width: 44px; height: 44px; }
.step-title { display: flex; align-items: center; gap: 12px; }
.step-icon { width: 48px; height: 48px; flex: none; }
.step h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; text-transform: uppercase; margin-bottom: .3em; }
.step .accroche { font-style: italic; font-weight: 700; color: var(--c-primary-dark); font-size: 1.15rem; }
.step p:last-child { color: var(--c-muted); }

/* Références */
/* Écran d'accueil : plein écran, avant le hero bleu */
.intro-screen { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 0 0 36px; background: #fff; }
.intro-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 48px 24px; }
.intro-title { margin: 0 0 .32em; word-spacing: .22em; font-size: clamp(2.2rem, 6vw, 5.4rem); text-wrap: balance; max-width: none; font-weight: 800; line-height: .96; letter-spacing: -.045em; text-transform: uppercase; color: var(--c-text); }
/* « GAMIFIEZ » : noir au chargement, puis la couleur glisse vers le bleu dégradé du logo (animée par js/main.js) */
.grad-word { display: inline-block; font-size: 1.4em; line-height: .95; margin-bottom: .04em; }
.grad-word.grad-word--inline { font-size: inherit; line-height: inherit; margin: 0; }
@media (min-width: 640px) { .intro-title { white-space: nowrap; } }
.intro-text { max-width: 680px; margin: 0 auto 2em; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: #3f4560; line-height: 1.55; }
.intro-btn { padding: 18px 38px; }
/* « Ils nous font confiance » : séparateurs fins, texte centré, logos sobres sur une ligne */
.intro-trust { padding-top: 8px; }
.trust-line { display: flex; align-items: center; gap: 28px; margin: 0 0 34px; font-size: .95rem; color: #3f4560; text-align: center; }
.trust-line::before, .trust-line::after { content: ""; flex: 1; height: 1px; background: #e4e8f3; }
.trust-line strong { color: var(--c-text); font-weight: 800; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px 36px; }
.logos li { display: grid; place-items: center; padding: 6px 4px; }
.logos img { height: auto; width: auto; max-width: 150px; max-height: 40px; filter: grayscale(1) brightness(0); opacity: .82; transition: filter .45s ease, opacity .45s ease; }
.logos li:hover img { filter: none; opacity: 1; }

/* CTA */
/* Roue SPARK du CTA final : très grande roue coupée par le bas de la section, un seul segment (lien) « Contactez-nous » (js/cta-wheel.js) */
.cta-wheel { --w: clamp(780px, 100vw, 1500px); position: relative; height: calc(var(--w) * .235); margin-top: 48px; overflow: hidden; }
.cta-wheel .sw { position: absolute; left: 50%; top: 0; width: var(--w); max-width: none; height: var(--w); transform: translateX(-50%); overflow: visible; }
.sw-disc { transform-origin: 500px 500px; }
.sw-cta { cursor: pointer; outline: none; }
.sw-btn rect { fill: #fff; transition: fill .25s ease; }
.sw-t { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 16px; fill: var(--c-primary-dark); }
.sw-ar { font-size: 16px; }
.sw-cta:hover .sw-btn rect, .sw-cta:focus-visible .sw-btn rect { fill: var(--c-secondary); }
.sw-hov { fill: #fff; opacity: 0; transition: opacity .25s ease; }
.sw-cta:hover .sw-hov, .sw-cta:focus-visible .sw-hov { opacity: .08; }
.sw-cta:focus-visible path:first-of-type { stroke: #fff; stroke-width: 6; }
.cta-wheel noscript, .cta-wheel noscript a { display: inline-block; }
.cta { background: var(--grad-brand); color: #fff; text-align: center; padding: 120px 0 0; overflow: hidden; }
.cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; text-transform: uppercase; }
.cta .accroche { font-style: italic; font-weight: 700; font-size: 1.3rem; }
.cta p { max-width: 640px; margin-inline: auto; }
.cta .btn { margin-top: 16px; }

/* Footer */
.site-footer { background: var(--c-text); color: #d6d9ee; padding: 64px 0 32px; font-size: .95rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; }
.footer-grid h2 { color: #fff; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.footer-grid p { margin-bottom: .4em; }
.footer-brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.footer-brandline p { margin: 0; }
.footer-logo { height: 44px; width: 44px; }
.footer-brand { color: #fff; font-weight: 700; font-size: 1.1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.socials { display: flex; gap: 12px; margin-top: 16px; }
.socials a, .socials span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.socials a:hover { background: var(--c-primary); border-color: var(--c-primary); }
.socials span { opacity: .55; cursor: default; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.copyright { text-align: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .88rem; }

/* 5. PAGES SECONDAIRES --------------------------------------- */
.page-head { background: var(--c-bg-soft); padding: 64px 0 48px; text-align: center; }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; text-transform: uppercase; margin-bottom: .3em; }
.page-head p { color: var(--c-muted); max-width: 640px; margin-inline: auto; }
.page-body { padding: 64px 0 96px; }
/* Page « L'équipe » (equipe.html) */
.team-head { padding: 72px 0 56px; }
.team-head h1 { max-width: 880px; margin-inline: auto; }
.team-head p { max-width: 720px; }
.team-head .section-label { margin-bottom: 18px; color: var(--c-primary); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
.team-photo { background: var(--c-bg-soft); padding: 0; }
.team-photo img { display: block; width: 100%; max-width: 860px; height: auto; margin-inline: auto; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 5%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 5%); mask-composite: intersect; }
.team-sec { padding: 88px 0; }
.team-story { padding: 72px 0 16px; text-align: center; }
.team-story .container { max-width: 820px; }
.team-story p { color: var(--c-muted); font-size: 1.1rem; }
.team-story p:last-child { margin-bottom: 0; }
.team-sec--soft { background: var(--c-bg-soft); }
.team-split { display: grid; gap: 28px; align-items: start; }

@media (max-width: 720px) {
  .tl .pipe-track { display: grid; }
  .tl .pipe-step { flex-direction: column; align-items: center; height: auto; text-align: center; gap: 8px; }
  .tl .pipe-dot { width: 34px; height: 34px; } .tl .pipe-dot svg { width: 16px; height: 16px; }
  .tl .pipe-line { left: 10%; right: 10%; top: 16px; width: auto; height: 3px; }
  .tl .pipe-fill { transform: scaleX(var(--p, 0)); transform-origin: left center; background: linear-gradient(90deg, #4dd4ff, #3653ff); }
  .tl .pipe-label { font-size: .56rem; letter-spacing: .03em; }
}

.team-split h2, .team-sec .section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); text-transform: uppercase; font-weight: 800; }
.team-split p { color: var(--c-muted); }
.flow { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; }
.flow li { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text); }
.flow li + li::before { content: "→"; display: inline-block; margin-right: 14px; margin-left: -6px; color: var(--c-primary); font-weight: 800; }
.flow li + li { position: relative; }
.team-sec .section-head { margin-bottom: 44px; }
.values { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.value { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); }
.value h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .5em; color: var(--c-text); }
.value p { margin: 0; color: var(--c-muted); }
.members { display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.member { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--c-text); }
.member-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.member-in { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--c-primary); box-shadow: 0 6px 16px -6px rgba(0, 85, 248, .7); transition: transform .3s var(--ease), background var(--t); }
.member-in svg { width: 20px; height: 20px; fill: #fff; }
.member:hover .member-photo, .member:focus-visible .member-photo { transform: translateY(-4px); box-shadow: 0 18px 44px -14px rgba(3, 4, 26, .3); }
.member:hover .member-in, .member:focus-visible .member-in { transform: scale(1.1); background: var(--c-primary-dark); }
.member-name { margin-top: 18px; font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.member-role { color: var(--c-primary); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.member-job { color: var(--c-muted); font-size: .98rem; margin-top: 6px; max-width: 24ch; line-height: 1.4; }
@media (min-width: 900px) { .team-split { grid-template-columns: .8fr 1.2fr; gap: 64px; } }
@media (max-width: 820px) {
  .values { grid-template-columns: 1fr; }
  .members { grid-template-columns: 1fr; max-width: 320px; }
  .team-sec { padding: 64px 0; }
  .team-head { padding: 52px 0 40px; }
}


.form-card {
  max-width: 760px; margin: -8px auto 0; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px;
}
.form-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .95rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--c-text); padding: 14px 16px; border: 1.5px solid #b9c0d8; border-radius: var(--radius-sm); background: #fff; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(0, 85, 248, .35); border-color: var(--c-primary); }
.req { color: #b3261e; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--c-muted); }
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--c-primary); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 20px; padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: #e6f7ee; color: #0b5c33; border: 1px solid #9fdcbb; }
.form-status--error { background: #fdecea; color: #8a1c14; border: 1px solid #f1aaa5; }
.form-actions { margin-top: 24px; }

.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: 1.4rem; margin-top: 2em; }
.todo { background: #fff6d6; padding: 2px 6px; border-radius: 4px; }

/* Intro du header (page d'accueil) :
   0 → 2,6 s : le logo tourne seul au centre
   2,6 → 3,6 s : logo + nom glissent ensemble vers la gauche (le nom apparaît dès le départ)
   3,6 s : les boutons apparaissent */
.site-header {
  --dx: calc(50vw - (100vw - min(100vw - 32px, var(--container))) / 2 - 21px);      /* logo seul centré (intro) */
  --dx-full: calc(50vw - (100vw - min(100vw - 32px, var(--container))) / 2 - 81px); /* logo + nom centrés (au défilement) */
}
.intro .brand { animation: brand-move 1s 2.6s cubic-bezier(.65, 0, .35, 1) backwards; }
.intro .brand-icon { animation: header-in .5s ease-out backwards; }
.intro .brand-spin { animation: brand-spin 2.4s .1s cubic-bezier(.4, 0, .2, 1) both; }
.intro .brand-text { animation: header-in .6s 2.6s ease-out backwards; }
.intro .nav, .intro .burger { animation: header-in .6s 3.6s ease-out backwards; }
@keyframes brand-move { from { transform: translateX(var(--dx)); } to { transform: translateX(0); } }
@keyframes brand-spin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
@keyframes header-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .intro .brand, .intro .brand-icon, .intro .brand-spin, .intro .brand-text, .intro .nav, .intro .burger { animation: none; }
}

/* Au défilement (page d'accueil) : logo + nom reviennent au centre, le menu s'efface, « En savoir plus » devient flottant */
.brand { transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.brand-text, .nav, .burger { transition: opacity .35s ease, visibility 0s; }
.site-header.is-scrolled .brand { transform: translateX(var(--dx-full)); }
.site-header.is-scrolled .nav,
.site-header.is-scrolled .burger { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; border-color: #fff; box-shadow: 0 12px 30px -8px rgba(3, 4, 26, .45);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s .4s, background var(--t);
}
.site-header.is-scrolled + .fab { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .25s var(--ease), visibility 0s, background var(--t), color var(--t); }
.site-header.is-scrolled.hide-fab + .fab { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .brand, .brand-text, .nav, .burger, .fab { transition: none !important; } }

/* Apparition au défilement (activée par js/early.js ; sans JS tout reste visible) */
.reveal-ready [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0); will-change: opacity, transform;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.reveal-ready [data-reveal="media"] { transform: translate3d(0, 36px, 0) scale(.965); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Survol : léger zoom sur les boutons et les liens (souris uniquement) */
.nav a:not(.btn), .footer-list a, .footer-brandline a, .consent a, .section-head a { display: inline-block; transition: color var(--t), transform .25s var(--ease); }
.footer-list a, .footer-brandline a { transform-origin: left center; }
.socials a { transition: background var(--t), border-color var(--t), transform .25s var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: scale(1.05); }
  .site-header.is-scrolled + .fab:hover { transform: scale(1.05); }
  .nav a:not(.btn):hover, .footer-list a:hover, .footer-brandline a:hover { transform: scale(1.06); }
  .socials a:hover { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .btn:hover, .nav a:hover, .footer-list a:hover, .footer-brandline a:hover, .socials a:hover { transform: none !important; } }

/* 6. RESPONSIVE ---------------------------------------------- */
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .hero-grid, .step { grid-template-columns: 1fr; gap: 36px; }
  .step:nth-child(even) .step-text { order: 0; }
  .steps { gap: 80px; }
  .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 22px 12px; }
  .logos li { min-width: 0; max-width: 100%; }
  .logos img { max-width: 100%; max-height: 34px; }
  .trust-line { gap: 14px; font-size: .85rem; }
  .trust-line::before, .trust-line::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .burger { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 20px; border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--c-line); }
  .nav .btn { margin-top: 16px; }
}
@media (max-width: 600px) {
  /* mobile : même composition, tablette plus large pour rester lisible */
  .hd { --u: 1.6cqw; }
  .hd-wheel { width: 62%; margin-left: 3%; }
  .hd-screen { left: 46%; top: 17%; width: 50%; }

  .form-card { padding: 24px 18px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Multilingue : sélecteur de langue du pied de page, adaptations des textes plus longs (js/main.js mémorise le choix) */
.footer-lang-title { margin-top: 26px; }
.lang-switch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-decoration: none; transition: background var(--t), color var(--t), border-color var(--t); }
.lang-switch a:hover { background: rgba(255, 255, 255, .14); }
.lang-switch a[aria-current="true"] { background: #fff; border-color: #fff; color: var(--c-primary-dark); }
html:not([lang="fr"]) .intro-title { white-space: normal; text-wrap: balance; max-width: 16em; margin-inline: auto; }
html[lang="de"] p, html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { hyphens: auto; overflow-wrap: break-word; }
html[lang="es"] p, html[lang="en"] p { overflow-wrap: break-word; }

/* Menu déroulant de langue (header, à droite de « Contactez nous ») */
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-text); font: 800 .8rem/1 var(--font); letter-spacing: .06em; cursor: pointer; transition: border-color var(--t), color var(--t), box-shadow var(--t); }
.lang-btn svg { transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--c-primary); color: var(--c-primary); }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 168px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow); }
.lang-list[hidden] { display: none; }
.nav .lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px; border: 0; border-radius: 10px; color: var(--c-text); font-weight: 600; font-size: .94rem; transform: none; }
.nav .lang-list a b { font-size: .72rem; letter-spacing: .08em; color: var(--c-muted); }
.nav .lang-list a:hover { background: var(--c-bg-soft); color: var(--c-primary); transform: none; }
.nav .lang-list a[aria-current="true"] { background: var(--c-bg-soft); color: var(--c-primary); }
@media (max-width: 720px) {
  .lang-menu { margin-top: 14px; }
  .lang-list { position: static; margin-top: 8px; box-shadow: none; }
}
@media (max-width: 640px) { html[lang="es"] .grad-word, html[lang="de"] .grad-word { font-size: 1.1em; } }
.grad-word { padding-top: .14em; margin-top: -.14em; }   /* les accents (GAMIFICACIÓN) ne sont pas coupés par le dégradé du texte */

/* Mobile uniquement : logo toujours à gauche, bouton burger toujours visible à droite (pas d'intro centrée, pas de masquage au défilement).
   Corrige aussi le menu qui mettait plus de 3 s à apparaître sur l'accueil (le délai de l'animation d'intro se relançait à chaque ouverture). */
@media (max-width: 720px) {
  .intro .brand, .intro .brand-text, .intro .nav, .intro .burger { animation: none; }
  .site-header.is-scrolled .brand { transform: none; }
  .site-header.is-scrolled .nav, .site-header.is-scrolled .burger { opacity: 1; visibility: visible; transition: none; }
}

/* Page FAQ (faq.html) : sommaire à gauche, questions en accordéon (js/faq.js) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faq-search { max-width: 560px; margin: 28px auto 0; }
.faq-search input { width: 100%; padding: 16px 22px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; color: var(--c-text); box-shadow: var(--shadow-sm); }
.faq-search input:focus { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.faq-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-toc { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
.faq-toc h2 { margin: 0 0 14px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.faq-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-toc a { display: block; text-decoration: none; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--c-text); }
.faq-toc a:hover, .faq-toc a.is-on { background: var(--c-bg-soft); color: var(--c-primary-dark); }
.faq-cat { margin-bottom: 56px; scroll-margin-top: 110px; }
.faq-cat h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; }
.faq-desc { margin: 0 0 20px; color: var(--c-muted); }
.faq-item { margin-bottom: 10px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; scroll-margin-top: 110px; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: #c9d6f5; }
.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 700; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--c-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .25s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 14px; }
.faq-a { padding: 0 22px 20px; color: var(--c-muted); }
.faq-a p { margin: 0 0 .9em; } .faq-a ul { margin: 0 0 .9em; padding-left: 1.2em; } .faq-a li { margin-bottom: .35em; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-note { padding: 12px 16px; border-radius: 10px; background: var(--c-bg-soft); color: var(--c-text); font-size: .95rem; }
.faq-none { padding: 24px; text-align: center; color: var(--c-muted); }
.faq-more { text-align: center; margin-top: 8px; }
@media (max-width: 860px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .faq-toc { position: static; }
  .faq-toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-toc a { padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: .88rem; }
}
.faq-a h3 { margin: 1.1em 0 .4em; font-size: 1.02rem; font-weight: 800; color: var(--c-text); } .faq-a h3:first-child { margin-top: 0; }

/* Page « Visualiser mon SPARK » : configurateur 3D (roue-3d/) intégré en iframe */
.page-body--wide .container { max-width: 1280px; }
.roue3d-frame { display: block; width: 100%; height: min(88vh, 860px); border: 0; border-radius: 16px; background: #0b2a66; box-shadow: 0 10px 40px rgba(11, 42, 102, .12); }
@media (max-width: 860px) { .roue3d-frame { height: 1800px; } }