/* ==========================================================================
   Renfort Social — Landing bêta
   Design system : "frosted link dashboard on rice paper" (Dub-like)
   ========================================================================== */

:root {
  /* Colors */
  --canvas: #ffffff;
  --paper: #f5f5f5;
  --paper-2: #fafafa;
  --ash: #e5e5e5;
  --smoke: #d4d4d4;
  --pebble: #c8c8c8;
  --ink: #0a0a0a;
  --charcoal: #171717;
  --graphite: #262626;
  --slate: #404040;
  --steel: #525252;
  --fog: #737373;
  --silver: #a3a3a3;
  --blue: #2563eb;
  --blue-soft: #dbeaff;
  --blue-light: #93c5fd;
  --sapphire: #1e40af;
  --mint: #dcfce7;
  --green: #16a34a;
  --tangerine: #ea580c;
  --tangerine-soft: #ffedd5;
  --lavender: #7c3aed;
  --lavender-soft: #ede9fe;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --yellow-soft: #fef3c7;
  --conic: conic-gradient(from -81deg, #ff0000, #eab308 99deg, #5cff80 162deg, #00fff9 216deg, #3a8bfd 288deg, #855afc);

  /* Type */
  --font-display: 'Satoshi', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius */
  --r-tag: 9999px;
  --r-card: 12px;
  --r-input: 6px;
  --r-btn: 8px;
  --r-lg: 16px;

  /* Shadows */
  --sh-subtle: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  --sh-ring: rgba(0, 0, 0, 0.1) 0 0 0 4px;
  --sh-md: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
  --sh-lg: rgba(0, 0, 0, 0.09) 0 20px 20px 0;

  --maxw: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue-soft); color: var(--ink); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

/* Dotted grid texture */
.dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ---------- Progress bar ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: var(--blue); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.logo svg { width: 34px; height: 26px; }
.logo .logo-l { transition: transform .5s var(--ease); transform-origin: 30% 70%; }
.logo .logo-r { transition: transform .5s var(--ease); transform-origin: 60% 70%; }
.logo:hover .logo-l { transform: translateY(-2px) rotate(-6deg); }
.logo:hover .logo-r { transform: translateY(-3px) rotate(4deg); }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; transition: transform .45s var(--ease), background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--ash); }
.nav.hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.nav-links { display: flex; gap: 2px; position: relative; }
.nav-links a { position: relative; z-index: 1; padding: 6px 14px; border-radius: var(--r-tag); font-size: 14px; font-weight: 500; color: var(--slate); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--r-tag); background: var(--paper); opacity: 0; transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s; pointer-events: none; }
.nav-cta { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta .btn-outline { display: none; } }
@media (max-width: 640px) {
  .nav-cta .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .nav-cta .btn svg.arrow { display: none; }
  .beta-badge { font-size: 12px; text-align: left; }
  .hs-count { display: none; }
}

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-btn); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .3s var(--ease); overflow: hidden; isolation: isolate; }
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: var(--sh-subtle); }
.btn-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .3s; }
.btn-dark:hover::before { opacity: 1; }
.btn-dark:hover { background: #222; }
.btn-outline { background: #fff; color: var(--charcoal); border-color: var(--ash); box-shadow: var(--sh-subtle); }
.btn-outline:hover { border-color: var(--smoke); background: var(--paper-2); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--sapphire); }
.btn-pill { border-radius: var(--r-tag); }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn:active { transform: scale(.97); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: none; box-shadow: rgb(255, 255, 255) 0 0 0 2px, var(--blue) 0 0 0 4px; }

/* ---------- Pills / tags ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-tag); font-size: 13px; font-weight: 500; color: var(--charcoal); background: #fff; border: 1px solid var(--ash); white-space: nowrap; }
.pill .ico { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
.pill .ico svg { width: 12px; height: 12px; }
.ico-orange { background: var(--tangerine-soft); color: var(--tangerine); }
.ico-violet { background: var(--lavender-soft); color: var(--lavender); }
.ico-green { background: var(--mint); color: var(--green); }
.ico-blue { background: var(--blue-soft); color: var(--blue); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-tag); border: 1px solid var(--ash); background: #fff; font-size: 12px; font-weight: 500; color: var(--steel); }
.eyebrow svg { width: 13px; height: 13px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-tag); font-size: 11px; font-weight: 500; line-height: 1.6; }
.badge-mint { background: var(--mint); color: #166534; }
.badge-blue { background: var(--blue-soft); color: var(--sapphire); }
.badge-orange { background: var(--tangerine-soft); color: #9a3412; }
.badge-violet { background: var(--lavender-soft); color: #5b21b6; }
.badge-red { background: var(--red-soft); color: #991b1b; }
.badge-gray { background: var(--paper); color: var(--steel); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Typography ---------- */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; line-height: 1.04; color: var(--ink); margin: 0; }
.h-hero { font-size: clamp(40px, 6.4vw, 76px); }
.h-section { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; }
.muted { color: var(--fog); }
.blue { color: var(--blue); }
.lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.56; color: var(--steel); margin: 0; }
.mono { font-family: var(--font-mono); }

/* split text */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- Section scaffolding ---------- */
section { position: relative; }
.section { padding: 120px 0; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--ash); border-bottom: 1px solid var(--ash); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (max-width: 640px) { .section { padding: 80px 0; } .section-head { margin-bottom: 40px; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: 140px 0 40px; overflow: hidden; }
.hero-glow { position: absolute; width: 640px; height: 640px; left: 50%; top: 0; margin-left: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .10), transparent 60%); pointer-events: none; transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: transform .8s var(--ease); }
.hero-inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.beta-badge { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: var(--r-tag); border: 1px solid var(--ash); background: #fff; font-size: 13px; font-weight: 500; box-shadow: var(--sh-subtle); transition: border-color .2s, box-shadow .3s; }
.beta-badge:hover { border-color: var(--smoke); box-shadow: var(--sh-md); }
.beta-badge .live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.beta-badge .live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: .5; animation: ping 1.8s var(--ease) infinite; }
.beta-badge .tag { padding: 2px 10px; border-radius: var(--r-tag); background: var(--ink); color: #fff; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.beta-badge .tag svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.beta-badge:hover .tag svg { transform: translateX(2px); }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

.hero-title { max-width: 900px; }
.hero-title .underline { position: relative; display: inline-block; }
.hero-title .underline svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.hero-title .underline path { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.hero-sub { max-width: 640px; }
.hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-pills .pill { border-color: transparent; background: transparent; transition: background .25s, border-color .25s, transform .35s var(--ease); cursor: default; }
.hero-pills .pill:hover { background: #fff; border-color: var(--ash); transform: translateY(-2px); }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-note { font-size: 13px; color: var(--fog); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 14px; height: 14px; color: var(--green); }

/* ---------- Mockup frame ---------- */
.stage { position: relative; margin-top: 64px; perspective: 1600px; }
.mockup { position: relative; background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg); box-shadow: var(--sh-ring), var(--sh-lg); overflow: hidden; transform-origin: 50% 0; }
.mockup-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--ash); background: var(--paper-2); }
.mockup-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ash); }
.mockup-bar .url { margin: 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--fog); padding: 3px 12px; border-radius: var(--r-input); background: #fff; border: 1px solid var(--ash); }
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 440px; }
.app-side { border-right: 1px solid var(--ash); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.app-side .logo { font-size: 13px; padding: 4px 8px 14px; }
.app-side .logo svg { width: 24px; height: 18px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-btn); font-size: 13px; color: var(--slate); }
.side-item svg { width: 15px; height: 15px; color: var(--fog); }
.side-item.active { background: var(--blue-soft); color: var(--sapphire); font-weight: 500; }
.side-item.active svg { color: var(--blue); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--ash); font-size: 12px; }
.side-foot b { display: block; font-weight: 600; color: var(--charcoal); }
.side-foot small { color: var(--fog); font-size: 11px; }
.app-main { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; text-align: left; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-top h4 { margin: 0; font-size: 15px; font-weight: 600; }
.search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--ash); border-radius: var(--r-input); font-size: 12px; color: var(--silver); min-width: 180px; }
.search svg { width: 13px; height: 13px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; flex: none; }
.av-blue { background: #3b82f6; } .av-teal { background: #14b8a6; } .av-violet { background: #8b5cf6; } .av-orange { background: #f97316; } .av-pink { background: #ec4899; } .av-green { background: #22c55e; } .av-ink { background: var(--charcoal); }
.avatar.sm { width: 24px; height: 24px; font-size: 9px; }

.rows { display: flex; flex-direction: column; border: 1px solid var(--ash); border-radius: var(--r-card); overflow: hidden; }
.row { display: grid; grid-template-columns: 32px minmax(120px, 1.3fr) auto 120px auto; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--ash); background: #fff; transition: background .2s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--paper-2); }
.row .who b { display: block; font-size: 13px; font-weight: 600; }
.row .who small { display: block; font-size: 11.5px; color: var(--fog); }
.row .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.match { font-size: 11px; color: var(--fog); }
.match .bar { height: 4px; border-radius: 4px; background: var(--paper); overflow: hidden; margin-top: 4px; }
.match .bar i { display: block; height: 100%; background: var(--blue); border-radius: inherit; width: var(--w, 90%); }
.propose { min-width: 92px; }
.propose.sent { background: var(--mint); color: #166534; }
.propose.sent:hover { background: var(--mint); }

.toast { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--ash); box-shadow: var(--sh-md); font-size: 13px; font-weight: 500; white-space: nowrap; }
.toast .ti { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.toast .ti svg { width: 13px; height: 13px; }
.toast small { display: block; font-weight: 400; color: var(--fog); font-size: 11.5px; }
.hero-toast-1 { top: -26px; right: 56px; }
.hero-toast-2 { bottom: -26px; right: 96px; }
.hero-toast-3 { bottom: 120px; left: -48px; }
.float-a { animation: floatA 6s ease-in-out infinite; }
.float-b { animation: floatB 7s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes floatB { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .row { grid-template-columns: 32px 1fr auto; }
  .row .tags, .row .match { display: none; }
  .toast { display: none; }
  .search { display: none; }
}

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: 28px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .pill { color: var(--steel); transition: color .2s, border-color .2s, transform .3s var(--ease); }
.marquee .pill:hover { color: var(--ink); border-color: var(--smoke); transform: translateY(-2px); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-label { text-align: center; font-size: 13px; color: var(--fog); margin: 48px 0 0; }

/* ==========================================================================
   PROBLÈME (pinned)
   ========================================================================== */
.problem { height: 260vh; }
.problem-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.problem-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.problem-text { display: flex; flex-direction: column; gap: 20px; }
.problem-lines { display: grid; }
.problem-lines > * { grid-area: 1 / 1; }
.problem-lines h2 { opacity: 0; }
.problem-lines h2:first-child { opacity: 1; }
.red { color: var(--red); }
.problem-scene { position: relative; height: 460px; }
.phone-card { position: absolute; left: 0; top: 10px; width: 260px; background: #fff; border: 1px solid var(--ash); border-radius: 28px; padding: 18px 14px; box-shadow: var(--sh-ring), var(--sh-lg); }
.phone-card h5 { margin: 4px 6px 12px; font-size: 14px; }
.call { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; border-bottom: 1px solid var(--paper); }
.call:last-child { border-bottom: 0; }
.call .ci { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red); flex: none; }
.call .ci svg { width: 13px; height: 13px; }
.call b { display: block; font-size: 12.5px; font-weight: 600; }
.call small { display: block; font-size: 11px; color: var(--red); }
.call time { margin-left: auto; font-size: 10.5px; color: var(--silver); font-family: var(--font-mono); }
.planning { position: absolute; right: 0; top: 70px; width: 330px; background: #fff; border: 1px solid var(--ash); border-radius: var(--r-card); padding: 14px; box-shadow: var(--sh-md); }
.planning h5 { margin: 0 0 10px; font-size: 13px; display: flex; justify-content: space-between; }
.planning h5 span { color: var(--fog); font-weight: 400; font-size: 11px; }
.plan-grid { display: grid; grid-template-columns: 48px repeat(7, 1fr); gap: 4px; font-size: 10px; color: var(--fog); }
.plan-grid .c { height: 22px; border-radius: 5px; background: var(--paper); transition: background .3s, color .3s; display: grid; place-items: center; }
.plan-grid .c.ok { background: var(--blue-soft); }
.plan-grid .c.x { color: transparent; }
.plan-grid .c.x::after { content: "✕"; font-size: 11px; font-weight: 700; }
.plan-grid .lbl { display: flex; align-items: center; }
.plan-grid .hd { text-align: center; }
.nobody { position: absolute; left: 120px; bottom: 40px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--ash); border-radius: var(--r-card); box-shadow: var(--sh-md); }
.nobody .x { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.nobody .x svg { width: 16px; height: 16px; }
.nobody b { display: block; color: var(--red); font-size: 15px; }
.nobody small { color: var(--fog); font-size: 12px; }
.sticky-note { position: absolute; right: 30px; top: -10px; width: 150px; padding: 14px; background: #fde68a; border-radius: 4px; box-shadow: var(--sh-md); font-family: 'Caveat', cursive; font-size: 20px; line-height: 1.1; color: #422006; rotate: 6deg; }
@media (max-width: 900px) {
  .problem { height: auto; }
  .problem-pin { position: relative; height: auto; padding: 100px 0; }
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .problem-lines h2 { opacity: 1 !important; }
  .problem-lines { display: flex; flex-direction: column; gap: 6px; }
  .problem-scene { height: 440px; max-width: 420px; }
  .planning { width: 270px; top: 120px; }
  .sticky-note { right: 0; }
  .nobody { left: 10px; bottom: 0; }
}

/* ==========================================================================
   DEUX BESOINS
   ========================================================================== */
.reveal-logo { text-align: center; padding: 140px 0 40px; }
.reveal-logo .big-logo { display: inline-flex; align-items: center; gap: 18px; }
.reveal-logo .big-logo svg { width: 84px; height: 64px; }
.reveal-logo .big-logo span { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 7vw, 84px); letter-spacing: -.035em; color: var(--ink); }
.reveal-logo p { margin: 16px 0 0; }

.needs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 860px; margin: 0 auto; }
.need-plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ash); background: #fff; display: grid; place-items: center; color: var(--fog); }
.need-plus svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .needs { grid-template-columns: 1fr; } .need-plus { margin: 0 auto; } }

/* Interactive card w/ spotlight */
.card { position: relative; background: #fff; border: 1px solid var(--ash); border-radius: var(--r-card); padding: 24px; transition: border-color .25s, box-shadow .35s var(--ease), transform .45s var(--ease); isolation: isolate; }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, .07), transparent 55%); }
.card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, .55), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card:hover { box-shadow: var(--sh-md); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card-lg { border-radius: var(--r-lg); }
.card h3 { margin: 14px 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.55; }
.icon-box { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.icon-box svg { width: 18px; height: 18px; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--slate); }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }

/* ==========================================================================
   ÉTABLISSEMENTS (sticky storytelling)
   ========================================================================== */
.story { display: grid; grid-template-columns: .8fr 1.4fr; gap: 64px; }
.app { grid-template-columns: 220px minmax(0, 1fr); }
.screen .row { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.screen .row .match { display: none; }
.kanban { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.kcard > div { min-width: 0; }
.kcard b, .kcard small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-steps { display: flex; flex-direction: column; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: .25; transition: opacity .5s var(--ease); }
.step.active { opacity: 1; }
.step .num { font-family: var(--font-mono); font-size: 12px; color: var(--fog); display: flex; align-items: center; gap: 10px; }
.step .num::after { content: ""; height: 1px; width: 40px; background: var(--ash); }
.step h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.11; letter-spacing: -.02em; color: var(--ink); }
.step p { margin: 0; color: var(--steel); max-width: 420px; }
.story-visual { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.screens { position: relative; width: 100%; aspect-ratio: 1.25; }
.screen { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
.screen.active { opacity: 1; transform: none; pointer-events: auto; }
.screen .mockup { height: 100%; display: flex; flex-direction: column; }
.screen .app { flex: 1; min-height: 0; grid-template-columns: 150px minmax(0, 1fr); }
.screen .app-side { padding: 12px 8px; }
.screen .side-item { font-size: 12px; padding: 6px 8px; }

.story-progress { position: absolute; left: -32px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 8px; }
.story-progress i { width: 3px; height: 26px; border-radius: 3px; background: var(--ash); transition: background .3s, height .3s; }
.story-progress i.on { background: var(--blue); height: 40px; }

/* screen 1 : form */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-btn); background: var(--paper); gap: 2px; }
.seg span { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--fog); display: inline-flex; align-items: center; gap: 6px; }
.seg span svg { width: 13px; height: 13px; }
.seg span.on { background: #fff; color: var(--red); box-shadow: var(--sh-subtle); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld label { display: block; font-size: 11px; color: var(--fog); margin-bottom: 4px; font-weight: 500; }
.fld .in { height: 34px; border: 1px solid var(--ash); border-radius: var(--r-input); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12.5px; }
.fld .in svg { width: 13px; height: 13px; color: var(--fog); }
.fld .in.focus { border-color: var(--ink); box-shadow: var(--sh-subtle-2, rgba(0,0,0,.06) 0 0 0 3px); }
.caret { display: inline-block; width: 1px; height: 14px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.publish-row { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.screen.active .pulse { animation: pulse 2s var(--ease) infinite 1.4s; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } 80%, 100% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } }

/* screen pop-in children */
.screen [data-pop] { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.screen.active [data-pop] { opacity: 1; transform: none; }
.screen.active [data-pop="1"] { transition-delay: .25s; }
.screen.active [data-pop="2"] { transition-delay: .5s; }
.screen.active [data-pop="3"] { transition-delay: .75s; }
.screen.active [data-pop="4"] { transition-delay: 1.1s; }
.screen.active [data-pop="5"] { transition-delay: 1.6s; }
.screen.active [data-pop="6"] { transition-delay: 2.1s; }

.screen .toast { display: flex; }
.s3-toasts { position: absolute; right: -24px; top: 90px; display: flex; flex-direction: column; gap: 10px; }
.s3-toasts .toast { position: static; }
.row.picked { background: #f8fbff; box-shadow: inset 3px 0 0 var(--blue); }

/* screen 4 : kanban */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; min-height: 0; }
.kcol { background: var(--paper-2); border: 1px solid var(--ash); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kcol h6 { margin: 0; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-radius: 6px; color: #fff; }
.kcol:nth-child(1) h6 { background: #1e3a8a; } .kcol:nth-child(2) h6 { background: #3b82f6; } .kcol:nth-child(3) h6 { background: #2563eb; } .kcol:nth-child(4) h6 { background: var(--green); }
.kcard { background: #fff; border: 1px solid var(--ash); border-radius: 8px; padding: 8px; display: flex; gap: 8px; align-items: center; font-size: 11px; transition: transform .3s var(--ease), box-shadow .3s; }
.kcard:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.kcard b { display: block; font-size: 11.5px; }
.kcard small { color: var(--fog); font-size: 10px; }
.kcard.mover { position: relative; z-index: 3; }
.screen.active .kcard.mover { animation: moveCard 1.6s var(--ease) 1.2s forwards; }
@keyframes moveCard { 0% { transform: none; box-shadow: none; } 30% { transform: translate(0, -6px) rotate(-3deg); box-shadow: var(--sh-md); } 100% { transform: translate(calc(100% + 18px), -6px) rotate(0); box-shadow: var(--sh-md); } }
.s4-toast { position: absolute; right: -24px; bottom: 50px; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-visual { order: -1; top: 64px; height: auto; padding: 16px 0; z-index: 2; background: linear-gradient(#fff 85%, rgba(255,255,255,0)); }
  .screens { aspect-ratio: 1.15; }
  .screen .app { grid-template-columns: 1fr; }
  .step { min-height: 60vh; }
  .story-progress { display: none; }
  .s3-toasts, .s4-toast { right: 8px; }
  .kanban { grid-template-columns: repeat(4, minmax(90px, 1fr)); overflow: hidden; }
  .fgrid { grid-template-columns: 1fr; }
  .fgrid .fld:nth-child(n+3) { display: none; }
}

/* ==========================================================================
   PROFESSIONNELS (horizontal scroll)
   ========================================================================== */
.hscroll { position: relative; }
.hs-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 40px; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hs-head .display { max-width: 780px; }
.hs-count { font-family: var(--font-mono); font-size: 13px; color: var(--fog); }
.hs-count b { color: var(--ink); font-weight: 500; }
.hs-track { display: flex; gap: 20px; padding-left: max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); padding-right: 24px; width: max-content; will-change: transform; }
.pcard { width: min(420px, 82vw); flex: none; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: var(--r-lg); }
.pcard .vis { height: 250px; border-radius: var(--r-card); background: var(--paper-2); border: 1px solid var(--ash); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pcard h3 { margin: 0; font-size: 19px; }
.pcard .tagline { display: flex; align-items: center; gap: 8px; }
.pcard .n { font-family: var(--font-mono); font-size: 12px; color: var(--silver); margin-left: auto; }
@media (max-width: 900px) {
  .hs-pin { height: auto; padding: 100px 0; }
  .hs-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hs-viewport::-webkit-scrollbar { display: none; }
  .hs-track { padding-left: 16px; padding-right: 16px; }
  .pcard { scroll-snap-align: center; }
}

/* pro visuals */
.mini { background: #fff; border: 1px solid var(--ash); border-radius: 10px; padding: 12px; font-size: 12px; width: 100%; }
.mini h6 { margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.drop { border: 1.5px dashed var(--blue-light); background: #f5f9ff; border-radius: 8px; padding: 10px; text-align: center; color: var(--blue); font-weight: 500; font-size: 11.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.drop svg { width: 14px; height: 14px; }
.tick { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 11.5px; color: var(--slate); border-bottom: 1px solid var(--paper); }
.tick:last-child { border-bottom: 0; }
.tick .box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--smoke); display: grid; place-items: center; transition: background .3s, border-color .3s; flex: none; }
.tick .box svg { width: 10px; height: 10px; color: #fff; opacity: 0; transition: opacity .2s; }
.tick.on .box { background: var(--green); border-color: var(--green); }
.tick.on .box svg { opacity: 1; }
.tick .badge { margin-left: auto; }
.avail { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 4px; font-size: 9.5px; color: var(--fog); }
.avail .hd { text-align: center; }
.avail .cell { aspect-ratio: 1.3; border-radius: 5px; background: var(--paper); border: 1px solid var(--ash); cursor: pointer; transition: background .2s, transform .2s var(--ease), border-color .2s; display: grid; place-items: center; }
.avail .cell:hover { transform: scale(1.08); border-color: var(--blue-light); }
.avail .cell.on { background: var(--blue); border-color: var(--blue); }
.avail .cell.on::after { content: ""; width: 8px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; rotate: -45deg; translate: 0 -1px; }
.radar { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #f8fafc; background-image: linear-gradient(var(--ash) 1px, transparent 1px), linear-gradient(90deg, var(--ash) 1px, transparent 1px); background-size: 22px 22px; }
.radar .zone { position: absolute; left: 50%; top: 50%; width: var(--rz, 120px); height: var(--rz, 120px); translate: -50% -50%; border-radius: 50%; background: rgba(37, 99, 235, .1); border: 1.5px solid var(--blue); transition: width .35s var(--ease), height .35s var(--ease); }
.radar .me { position: absolute; left: 50%; top: 50%; translate: -50% -100%; color: var(--red); }
.radar .me svg { width: 20px; height: 20px; }
.radar .poi { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--ash); display: grid; place-items: center; box-shadow: var(--sh-subtle); transition: opacity .3s, transform .3s var(--ease); }
.radar .poi svg { width: 10px; height: 10px; color: var(--steel); }
.radar .poi.out { opacity: .3; transform: scale(.8); }
.radius-ctl { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--steel); margin-top: 10px; }
.radius-ctl input { flex: 1; accent-color: var(--blue); }
.radius-ctl b { font-family: var(--font-mono); font-weight: 500; color: var(--blue); min-width: 44px; text-align: right; }
.phone { width: 190px; height: 232px; border-radius: 26px 26px 0 0; border: 6px solid var(--ink); border-bottom: 0; background: #fff; padding: 22px 12px 0; position: absolute; bottom: 0; left: 50%; translate: -50% 0; font-size: 11px; box-shadow: var(--sh-lg); }
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 54px; height: 12px; border-radius: 10px; background: var(--ink); }
.phone .offer b { display: block; font-size: 12.5px; margin: 6px 0 6px; }
.phone .meta { display: flex; flex-direction: column; gap: 4px; color: var(--steel); font-size: 10.5px; }
.phone .meta span { display: flex; gap: 6px; align-items: center; }
.phone .meta svg { width: 11px; height: 11px; color: var(--fog); }
.phone .acts { display: flex; gap: 6px; margin-top: 10px; }
.phone .acts button { flex: 1; height: 28px; font-size: 11px; border-radius: 6px; border: 1px solid var(--ash); background: #fff; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.phone .acts button:hover { transform: translateY(-1px); }
.phone .acts .yes { background: var(--blue); color: #fff; border-color: var(--blue); }
.phone .done { display: none; margin-top: 10px; padding: 8px; border-radius: 8px; text-align: center; font-weight: 500; font-size: 11px; }
.phone.accepted .acts { display: none; } .phone.accepted .done.ok { display: block; background: var(--mint); color: #166534; }
.phone.declined .acts { display: none; } .phone.declined .done.no { display: block; background: var(--paper); color: var(--steel); }
.side-chip { position: absolute; font-size: 10.5px; padding: 4px 9px; }
.offers { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.offer-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ash); border-radius: 8px; background: #fff; font-size: 11px; transition: border-color .2s, transform .3s var(--ease); }
.offer-row:hover { border-color: var(--blue-light); transform: translateX(3px); }
.offer-row b { display: block; font-size: 11.5px; }
.offer-row small { color: var(--fog); font-size: 10px; }
.offer-row .btn { margin-left: auto; height: 24px; padding: 0 9px; font-size: 10.5px; border-radius: 6px; }
.offer-row .btn.sent { background: var(--green); }
.chat { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.bubble { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.4; }
.bubble.them { background: #fff; border: 1px solid var(--ash); border-bottom-left-radius: 4px; }
.bubble.me { background: var(--blue); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.typing { display: inline-flex; gap: 3px; padding: 10px 12px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--silver); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ==========================================================================
   BENTO
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .card { padding: 22px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.b-a { grid-column: span 4; } .b-b { grid-column: span 2; } .b-c { grid-column: span 2; } .b-d { grid-column: span 2; } .b-e { grid-column: span 2; } .b-f { grid-column: span 3; } .b-g { grid-column: span 3; }
.bento .card .vis { margin-top: auto; padding-top: 18px; }
.bento h3 { margin: 10px 0 2px; font-size: 18px; }
@media (max-width: 980px) { .b-a, .b-f, .b-g { grid-column: span 6; } .b-b, .b-c, .b-d, .b-e { grid-column: span 3; } }
@media (max-width: 640px) { .bento > * { grid-column: span 6 !important; } }
.talents { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 10px; }
.filters { border: 1px solid var(--ash); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: var(--fog); }
.filters .f { height: 24px; border: 1px solid var(--ash); border-radius: 6px; display: flex; align-items: center; padding: 0 8px; color: var(--charcoal); }
.filters input[type=range] { accent-color: var(--blue); width: 100%; }
.tcard { border: 1px solid var(--ash); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; position: relative; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.tcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.tcard .top { display: flex; gap: 8px; align-items: center; }
.tcard b { display: block; font-size: 12px; }
.tcard small { color: var(--fog); }
.heart { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--silver); background: none; border: 0; cursor: pointer; transition: color .2s, transform .3s var(--ease); }
.heart svg { width: 14px; height: 14px; }
.heart:hover { transform: scale(1.15); color: var(--red); }
.heart.on { color: var(--red); } .heart.on svg { fill: currentColor; }
@media (max-width: 640px) { .talents { grid-template-columns: 1fr 1fr; } .filters { display: none; } }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border: 1px solid var(--ash); border-radius: 10px; padding: 10px; }
.stat b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.stat small { font-size: 10.5px; color: var(--fog); line-height: 1.3; display: block; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 10px; }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--blue-soft); height: var(--h); transform-origin: bottom; transition: background .2s; }
.bars i:hover { background: var(--blue); }
.bars i:nth-last-child(-n+2) { background: var(--blue); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal span { aspect-ratio: 1; border-radius: 5px; background: var(--paper); font-size: 9px; color: var(--silver); display: grid; place-items: center; }
.cal span.r { background: var(--blue); color: #fff; }
.contract { border: 1px solid var(--ash); border-radius: 10px; padding: 12px; font-size: 11px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.contract .l { height: 6px; border-radius: 3px; background: var(--paper); }
.contract .gen { margin-top: 6px; }
.tree { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tree .root { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--ash); border-radius: var(--r-tag); font-size: 12px; font-weight: 600; background: #fff; }
.tree .leaves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.tree .leaf { border: 1px solid var(--ash); border-radius: 8px; padding: 8px; font-size: 10.5px; background: #fff; transition: border-color .2s, transform .3s var(--ease); }
.tree .leaf:hover { border-color: var(--blue-light); transform: translateY(-2px); }
.tree .leaf b { display: block; font-size: 11px; }
.tree svg.lines { position: absolute; top: 28px; left: 0; width: 100%; height: 26px; overflow: visible; }
.tree svg.lines path { stroke: var(--blue-light); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.privacy { display: flex; align-items: center; gap: 16px; }
.shield { width: 64px; height: 64px; border-radius: 18px; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 6px var(--blue-soft); }
.shield svg { width: 28px; height: 28px; }
.toggles { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--slate); }
.switch { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--smoke); border: 0; cursor: pointer; transition: background .25s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--sh-subtle); transition: transform .25s var(--ease); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(12px); }
.masked { font-family: var(--font-mono); letter-spacing: .1em; color: var(--silver); }

/* ==========================================================================
   GRAND EST — orbit
   ========================================================================== */
.terrain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .terrain-grid { grid-template-columns: 1fr; } }
.orbit-wrap { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--smoke); }
.ring.r2 { inset: 18%; border-style: solid; border-color: var(--ash); }
.ring.r3 { inset: 36%; border: 0; background: radial-gradient(circle, rgba(37, 99, 235, .10), transparent 70%); }
.orbit { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.orbit.inner { inset: 18%; animation-duration: 45s; animation-direction: reverse; }
.orbit-wrap:hover .orbit { animation-play-state: paused; }
.orbit .pill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; animation: spin 60s linear infinite reverse; box-shadow: var(--sh-subtle); transition: border-color .2s, box-shadow .3s; }
.orbit.inner .pill { animation-duration: 45s; animation-direction: normal; }
.orbit-wrap:hover .orbit .pill { animation-play-state: paused; }
.orbit .pill:hover { border-color: var(--blue-light); box-shadow: var(--sh-md); }
@keyframes spin { to { rotate: 360deg; } }
.core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 1px solid var(--ash); display: grid; place-items: center; box-shadow: var(--sh-ring), var(--sh-lg); }
.core svg { width: 52px; height: 40px; }
.core::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--blue-light); animation: ping 2.6s var(--ease) infinite; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.kpi { border: 1px solid var(--ash); border-radius: var(--r-card); padding: 16px; background: #fff; }
.kpi b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 40px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.kpi small { display: block; margin-top: 8px; color: var(--fog); font-size: 13px; line-height: 1.35; }
.depts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.depts .badge { font-size: 12px; padding: 4px 10px; background: #fff; border: 1px solid var(--ash); color: var(--steel); font-family: var(--font-mono); transition: border-color .2s, color .2s, background .2s; cursor: default; }
.depts .badge:hover { border-color: var(--blue); color: var(--blue); background: #f5f9ff; }

/* ==========================================================================
   BETA SIGNUP
   ========================================================================== */
.beta { overflow: hidden; }
.beta-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .beta-grid { grid-template-columns: 1fr; gap: 40px; } }
.beta-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.perks { display: flex; flex-direction: column; gap: 12px; }
.perk { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--ash); border-radius: var(--r-card); background: #fff; transition: border-color .2s, transform .35s var(--ease); }
.perk:hover { border-color: var(--smoke); transform: translateX(4px); }
.perk b { display: block; font-size: 14px; font-weight: 600; }
.perk span { font-size: 13px; color: var(--steel); }
.free-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--mint); color: #14532d; font-size: 14px; }
.free-banner b { font-weight: 600; }
.free-banner .big { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.counter-live { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--steel); }
.counter-live .stack { display: flex; }
.counter-live .stack .avatar { width: 26px; height: 26px; font-size: 9px; border: 2px solid #fff; margin-left: -8px; }
.counter-live .stack .avatar:first-child { margin-left: 0; }

.form-card { padding: 0; border-radius: var(--r-lg); box-shadow: var(--sh-ring), var(--sh-lg); overflow: hidden; }
.form-card:hover { box-shadow: var(--sh-ring), var(--sh-lg); }
.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 6px; gap: 6px; background: var(--paper-2); border-bottom: 1px solid var(--ash); }
.tab { position: relative; z-index: 1; height: 48px; border-radius: 10px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--fog); transition: color .25s; }
.tab svg { width: 16px; height: 16px; }
.tab.on { color: var(--ink); }
.tab-ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 9px); border-radius: 10px; background: #fff; border: 1px solid var(--ash); box-shadow: var(--sh-subtle); transition: transform .45s var(--ease); }
.tabs[data-active="pro"] .tab-ind { transform: translateX(calc(100% + 6px)); }
.form-body { padding: 24px; }
.form-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.form-intro h3 { margin: 0; font-size: 18px; font-weight: 600; }
form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { form .grid { grid-template-columns: 1fr; } }
.field label, .field .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--graphite); margin-bottom: 6px; }
.field label .opt { color: var(--silver); font-weight: 400; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-input); border: 1px solid var(--pebble); background: #fff; font-size: 14px; color: #111827; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.field textarea { height: 84px; padding: 10px 12px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23737373' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fog); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #000; box-shadow: rgba(0, 0, 0, .08) 0 0 0 3px; }
.field.err input, .field.err select { border-color: var(--red); box-shadow: rgba(220, 38, 38, .12) 0 0 0 3px; }
.field .hint { font-size: 12px; color: var(--red); margin-top: 4px; display: none; }
.field.err .hint { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-tag); border: 1px solid var(--ash); font-size: 13px; color: var(--slate); cursor: pointer; transition: all .2s var(--ease); user-select: none; background: #fff; }
.chip span:hover { border-color: var(--smoke); background: var(--paper-2); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { box-shadow: rgb(255, 255, 255) 0 0 0 2px, var(--blue) 0 0 0 4px; }
.chip.err span { border-color: var(--red); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--steel); line-height: 1.5; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--ink); width: 15px; height: 15px; flex: none; }
.consent.err { color: var(--red); }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.submit-row small { font-size: 12px; color: var(--fog); display: flex; gap: 6px; align-items: center; }
.submit-row small svg { width: 13px; height: 13px; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; display: none; }
.btn.loading .spin { display: block; } .btn.loading .lbl, .btn.loading svg.arrow { display: none; }
.panel { display: none; }
.panel.on { display: block; animation: panelIn .5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success { display: none; padding: 48px 24px; text-align: center; flex-direction: column; align-items: center; gap: 14px; }
.success.on { display: flex; animation: panelIn .6s var(--ease); }
.success .check { width: 64px; height: 64px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.success .check svg { width: 30px; height: 30px; }
.success .check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -.02em; }
.success p { margin: 0; color: var(--steel); max-width: 380px; }
.confetti { position: fixed; pointer-events: none; z-index: 200; width: 8px; height: 8px; border-radius: 2px; }

/* ==========================================================================
   FAQ / CTA / FOOTER
   ========================================================================== */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--ash); }
.qa { border-bottom: 1px solid var(--ash); }
.qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 16px; font-weight: 500; color: var(--charcoal); transition: color .2s; }
.qa button:hover { color: var(--blue); }
.qa .pm { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ash); display: grid; place-items: center; flex: none; transition: transform .4s var(--ease), background .2s, border-color .2s; }
.qa .pm svg { width: 14px; height: 14px; }
.qa.open .pm { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans > div { overflow: hidden; }
.qa .ans p { margin: 0; padding: 0 48px 22px 4px; color: var(--steel); font-size: 15px; }

.final { text-align: center; padding: 140px 0; overflow: hidden; }
.final .display { font-size: clamp(36px, 5.5vw, 64px); }
.final .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final-logo svg { width: 72px; height: 55px; }

.footer { border-top: 1px solid var(--ash); padding: 32px 0; font-size: 13px; color: var(--fog); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer a:hover { color: var(--ink); }
.footer nav { display: flex; gap: 20px; }

/* Mobile sticky CTA */
.mobile-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: none; transform: translateY(140%); transition: transform .5s var(--ease); }
.mobile-cta.show { transform: none; }
.mobile-cta .btn { width: 100%; height: 50px; box-shadow: var(--sh-lg); }
@media (max-width: 900px) { .mobile-cta { display: block; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .problem { height: auto; }
  .problem-pin { position: relative; height: auto; padding: 100px 0; }
  .problem-lines h2 { opacity: 1 !important; }
}

/* ==========================================================================
   PARCOURS PAR PROFIL (établissement / professionnel)
   ========================================================================== */
html[data-aud="etab"] [data-for="pro"],
html[data-aud="pro"] [data-for="etab"] { display: none !important; }

/* ---------- Écran de choix ---------- */
.gate { position: fixed; inset: 0; z-index: 300; background: #fff; display: none; overflow-y: auto; padding: 40px 16px; }
html.gate-open .gate { display: flex; }
html.gate-open body { overflow: hidden; }
.gate-inner { position: relative; margin: auto; width: 100%; max-width: 940px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.gate-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.gate-logo svg { width: 44px; height: 34px; }
.gate-badge { padding: 4px 14px; }
.gate-title { font-size: clamp(36px, 5.4vw, 60px); }
.gate-sub { max-width: 520px; }
.gate-cards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.gate-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; padding: 28px; cursor: pointer; font: inherit; color: inherit; background: #fff; overflow: hidden; min-height: 300px; }
.gate-card:hover { transform: translateY(-6px); border-color: var(--smoke); }
.gc-top { display: flex; align-items: center; gap: 10px; }
.gc-title { font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin-top: 6px; }
.gc-text { color: var(--steel); font-size: 15px; line-height: 1.5; }
.gc-list { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--slate); }
.gc-list span { display: flex; gap: 8px; align-items: center; }
.gc-list svg { width: 15px; height: 15px; color: var(--green); flex: none; }
.gc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-btn); background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; transition: background .2s; }
.gc-go svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.gate-card:hover .gc-go svg { transform: translateX(4px); }
.gate-card:hover .gc-go { background: #222; }
.gc-toast { position: absolute; right: 18px; top: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ash); border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-md); font-size: 12.5px; font-weight: 500; opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.gc-toast .ti { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.gc-toast .ti svg { width: 12px; height: 12px; }
.gate-card:hover .gc-toast { opacity: 1; transform: none; }
.gate-foot { margin: 6px 0 0; font-size: 13px; color: var(--fog); }
@media (max-width: 720px) {
  .gate-cards { grid-template-columns: 1fr; }
  .gate-card { min-height: 0; padding: 22px; }
  .gc-title { font-size: 26px; }
  .gc-toast { display: none; }
}

/* ---------- Sélecteur de profil (nav) ---------- */
.aud-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--r-tag); background: var(--paper); border: 1px solid var(--ash); }
.aud-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; background: none; border-radius: var(--r-tag); font-size: 13px; font-weight: 500; color: var(--fog); cursor: pointer; transition: color .25s; }
.aud-switch button svg { width: 14px; height: 14px; }
.aud-switch button:hover { color: var(--ink); }
.aud-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-tag); background: #fff; border: 1px solid var(--ash); box-shadow: var(--sh-subtle); transition: transform .45s var(--ease); }
html[data-aud="pro"] .aud-ind { transform: translateX(100%); }
html[data-aud="etab"] .aud-switch [data-aud="etab"], html[data-aud="pro"] .aud-switch [data-aud="pro"] { color: var(--ink); }
@media (max-width: 900px) { .nav-join { display: none !important; } }
@media (max-width: 480px) { .aud-switch button { padding: 0 10px; font-size: 12px; } .aud-switch button svg { display: none; } }

/* Lignes d'offres (maquette pro) */
.row.offer-r { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.row.offer-r .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .row.offer-r { grid-template-columns: 32px minmax(0, 1fr) auto; } }

/* ---------- Scène problème (pro) ---------- */
.pro-scene .searchbar { position: absolute; left: 50%; top: 30%; translate: -50% 0; width: min(380px, 92%); height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: var(--r-tag); border: 1px solid var(--ash); background: #fff; box-shadow: var(--sh-ring), var(--sh-lg); font-size: 14px; z-index: 2; }
.pro-scene .searchbar svg { width: 16px; height: 16px; color: var(--fog); flex: none; }
.pro-scene .noresult { position: absolute; left: 50%; top: calc(30% + 64px); translate: -50% 0; width: min(380px, 92%); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--ash); background: #fff; box-shadow: var(--sh-md); z-index: 2; }
.pro-scene .noresult .x { width: 32px; height: 32px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: none; }
.pro-scene .noresult .x svg { width: 15px; height: 15px; }
.pro-scene .noresult b { display: block; color: var(--red); font-size: 14.5px; }
.pro-scene .noresult small { color: var(--fog); font-size: 12px; }
.pro-scene .fl { position: absolute; font-size: 12px; padding: 5px 12px; color: var(--steel); box-shadow: var(--sh-subtle); animation: floatA 6s ease-in-out infinite; }
.pro-scene .fl:nth-child(2n) { animation-name: floatB; animation-duration: 7s; }
.pro-scene .ad { position: absolute; width: 210px; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--ash); background: #fff; display: flex; flex-direction: column; gap: 4px; font-size: 12px; box-shadow: var(--sh-subtle); }
.pro-scene .ad b { font-size: 13px; }
.pro-scene .ad small { color: var(--fog); }
.pro-scene .ad .badge { align-self: flex-start; margin-top: 4px; }
.pro-scene .ad-1 { left: 0; top: 14%; rotate: -4deg; }
.pro-scene .ad-2 { right: 0; top: 70%; rotate: 3deg; }
@media (max-width: 900px) { .pro-scene .ad { display: none; } .pro-scene .fl:nth-of-type(n+5) { display: none; } }

/* Correctifs mobile : écran de choix + nav */
.gate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-go { white-space: normal; }
@media (max-width: 720px) { .gate-cards { grid-template-columns: minmax(0, 1fr); } .gate-title { font-size: 34px; } }
@media (max-width: 640px) {
  .nav-inner { gap: 8px; }
  .nav .logo { font-size: 0; gap: 0; }
  .nav .logo svg { width: 30px; height: 23px; }
  .aud-switch button { height: 30px; }
}

/* Empêche tout débordement horizontal (mobile) sans casser le position: sticky */
html, body { overflow-x: clip; }
#terrain, .bento .card, .needs { overflow-x: clip; }
@media (max-width: 640px) {
  .orbit-wrap { max-width: 300px; }
  .orbit .pill { font-size: 11px; padding: 4px 9px; gap: 5px; }
  .orbit .pill .ico { width: 15px; height: 15px; }
  .talents { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app, .screen .app { grid-template-columns: minmax(0, 1fr); }
  .row .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) {
  .stat b { font-size: 20px; white-space: nowrap; }
  .stat { padding: 8px; }
}
.tab .t-short { display: none; }
@media (max-width: 560px) { .tab .t-long { display: none; } .tab .t-short { display: inline; } }

/* ==========================================================================
   RYTHME DES SECTIONS — alternance blanc / bleu clair translucide
   ========================================================================== */
:root {
  --tint-sky: rgba(219, 234, 255, .55);    /* bleu ciel translucide */
  --tint-indigo: rgba(224, 231, 255, .55); /* bleu-lavande translucide */
  --tint-line: rgba(37, 99, 235, .10);
}
/* Les anciens fonds gris deviennent neutres : c'est l'alternance qui structure */
.section-alt { background: transparent; border-color: transparent; }

.tint-sky, .tint-indigo { position: relative; isolation: isolate; }
.tint-sky::after, .tint-indigo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* fondu doux en haut et en bas : pas de coupure nette entre les sections */
  background: linear-gradient(180deg, transparent 0, var(--tint) 140px, var(--tint) calc(100% - 140px), transparent 100%);
}
.tint-sky { --tint: var(--tint-sky); }
.tint-indigo { --tint: var(--tint-indigo); }
/* Fine texture de points bleutés dans les zones teintées */
.tint-sky .dots, .tint-indigo .dots { background-image: radial-gradient(rgba(37, 99, 235, .16) 1px, transparent 1px); }
/* Les petits éléments posés sur le bleu restent bien détachés */
.tint-sky .eyebrow, .tint-indigo .eyebrow, .tint-sky .kpi, .tint-indigo .kpi,
.tint-sky .depts .badge, .tint-indigo .depts .badge { border-color: var(--tint-line); }

/* Parcours établissement : blanc · bleu · blanc · bleu… */
html[data-aud="etab"] #problem,
html[data-aud="etab"] #terrain { --tint: var(--tint-sky); }
html[data-aud="etab"] #etablissements,
html[data-aud="etab"] #faq { --tint: var(--tint-indigo); }
/* Parcours professionnel */
html[data-aud="pro"] #problemPro,
html[data-aud="pro"] #beta { --tint: var(--tint-sky); }
html[data-aud="pro"] #professionnels,
html[data-aud="pro"] .final { --tint: var(--tint-indigo); }

html[data-aud="etab"] #problem::after, html[data-aud="etab"] #terrain::after,
html[data-aud="etab"] #etablissements::after, html[data-aud="etab"] #faq::after,
html[data-aud="pro"] #problemPro::after, html[data-aud="pro"] #beta::after,
html[data-aud="pro"] #professionnels::after, html[data-aud="pro"] .final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, var(--tint) 140px, var(--tint) calc(100% - 140px), transparent 100%);
}
#problem, #problemPro, #etablissements, #professionnels, #terrain, #faq, #beta, .final { isolation: isolate; }
#professionnels { background: transparent; }

/* Établissement : le formulaire bêta sur blanc reçoit un halo bleu */
html[data-aud="etab"] #beta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; right: -160px; top: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 197, 253, .28), transparent 65%);
}

/* Bandeau "0 €" : chiffre plus petit, € sur la même ligne */
.free-banner .big { font-size: 22px; white-space: nowrap; flex: none; }

/* ==========================================================================
   HERO v2 — épuré : titre animé, une phrase, un bouton, chrono, notifs live
   ========================================================================== */
.hero { padding: 124px 0 40px; }
.hero-inner { gap: 22px; }
.h-hero { font-size: clamp(40px, 7.2vw, 92px); line-height: 1.02; letter-spacing: -.035em; }
.hero-title { max-width: none; }

/* Badge discret */
.hero-badge { padding: 5px 12px; font-size: 12.5px; gap: 8px; box-shadow: none; background: rgba(255, 255, 255, .7); color: var(--steel); }
.hero-badge .chev { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.hero-badge:hover { color: var(--ink); }
.hero-badge:hover .chev { transform: translateX(3px); }

/* Mot qui tourne */
.rot { position: relative; display: inline-block; vertical-align: top; height: 1.04em; white-space: nowrap; transition: width .7s var(--ease); }
.rot.ready .rot-item { position: absolute; left: 50%; top: 0; translate: -50% 0; white-space: nowrap; opacity: 0; will-change: transform, opacity, filter; }
.rot:not(.ready) .rot-item:not(:first-child) { display: none; }
.rot.underline svg { bottom: -.1em; }

.hero-sub { font-size: clamp(17px, 1.8vw, 20px); color: var(--steel); max-width: 560px; }

/* Bouton + lien */
.hero-ctas { align-items: center; gap: 22px; }
.hero-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--steel); transition: color .2s; }
.hero-link svg { width: 15px; height: 15px; rotate: 90deg; transition: transform .35s var(--ease); }
.hero-link:hover { color: var(--ink); }
.hero-link:hover svg { transform: translateX(3px); }

/* Chrono */
.chrono { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: var(--r-tag); border: 1px solid var(--ash); background: #fff; font-size: 13px; color: var(--steel); transition: background .4s, border-color .4s, color .4s; }
.chrono .ch-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .4s, color .4s; }
.chrono .ch-ico svg { width: 13px; height: 13px; }
.chrono .ch-time { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chrono.done { background: var(--mint); border-color: #bbf7d0; color: #166534; }
.chrono.done .ch-ico { background: var(--green); color: #fff; }

/* Maquette plus haute dans l'écran */
.stage { margin-top: 44px; }

/* Notifications en direct */
.live-stack { position: absolute; right: -36px; top: 64px; width: 310px; display: flex; flex-direction: column; gap: 8px; z-index: 6; pointer-events: none; }
.live-notif { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-card); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--ash); box-shadow: var(--sh-md); font-size: 13px; font-weight: 500; color: var(--charcoal); }
.live-notif .ti { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.live-notif .ti svg { width: 13px; height: 13px; }
.live-notif small { display: block; font-weight: 400; color: var(--fog); font-size: 11.5px; }
.live-notif time { margin-left: auto; font-size: 10.5px; color: var(--silver); font-family: var(--font-mono); align-self: flex-start; }
@media (max-width: 900px) {
  .live-stack { right: 50%; translate: 50% 0; top: auto; bottom: 12px; width: min(300px, 88%); }
  .hero-ctas { flex-direction: column; gap: 14px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 104px; }
  .h-hero { font-size: 10.4vw; }
}
.hero-sub { max-width: 660px; }
.live-stack { width: 340px; }
.live-notif > div { min-width: 0; }

/* Notifications live : format compact */
.live-stack { width: 236px; right: -18px; top: 72px; gap: 6px; }
.live-notif { padding: 7px 10px; gap: 8px; font-size: 11.5px; border-radius: 10px; }
.live-notif .ti { width: 20px; height: 20px; }
.live-notif .ti svg { width: 11px; height: 11px; }
.live-notif small { font-size: 10.5px; }
.live-notif > div, .live-notif small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-notif time { display: none; }
@media (max-width: 900px) {
  .live-stack { right: 50%; translate: 50% 0; top: auto; bottom: 12px; width: min(260px, 86%); }
}

/* ==========================================================================
   ÉCRAN DE CHOIX v2 — couleur, profondeur, mini-scènes
   ========================================================================== */
.gate { overflow-x: hidden; }
.gate-inner { z-index: 1; }

/* Taches de lumière qui dérivent */
.gate-blob { position: fixed; width: 620px; height: 620px; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .75; }
.gate-blob.b1 { left: -180px; top: -200px; background: radial-gradient(circle, rgba(147, 197, 253, .7), rgba(147, 197, 253, 0) 70%); animation: drift1 16s ease-in-out infinite alternate; }
.gate-blob.b2 { right: -200px; bottom: -220px; background: radial-gradient(circle, rgba(196, 181, 253, .65), rgba(196, 181, 253, 0) 70%); animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-120px, -80px) scale(1.1); } }

/* Pastilles métiers qui flottent (grands écrans) */
.gate-floats { position: fixed; inset: 0; pointer-events: none; display: none; }
.gate-floats .gf { position: absolute; font-size: 12.5px; box-shadow: var(--sh-md); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: floatA 6s ease-in-out infinite; }
.gate-floats .gf:nth-child(2n) { animation-name: floatB; animation-duration: 7.5s; }
.gate-floats .gf:nth-child(3n) { animation-duration: 8.5s; }
@media (min-width: 1360px) { .gate-floats { display: block; } }

/* Titre en dégradé bleu → violet */
.grad { background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradMove 6s linear infinite; padding-right: .04em; }
@keyframes gradMove { to { background-position: -200% 0; } }

/* Une couleur par carte */
.gc-etab { --accent: #2563eb; --accent-rgb: 37, 99, 235; --accent-soft: rgba(219, 234, 255, .9); }
.gc-pro  { --accent: #7c3aed; --accent-rgb: 124, 58, 237; --accent-soft: rgba(237, 233, 254, .9); }
.gate-card { background: linear-gradient(180deg, var(--accent-soft) 0, #fff 150px); min-height: 0; transition: border-color .3s, box-shadow .4s var(--ease), transform .5s var(--ease), opacity .35s, filter .35s; }
.gate-card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .10), transparent 55%); }
.gate-card::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .7), transparent 60%); }
.gate-card:hover { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08), var(--sh-lg); }
.gate-card:hover .gc-go { background: var(--accent); }
.gate-cards:hover .gate-card:not(:hover) { opacity: .7; filter: saturate(.5); }
.gate-card .gc-go { transition: background .3s, transform .3s var(--ease); }

/* Mini-scènes */
.gc-scene { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 4px 0 6px; padding: 12px; border-radius: var(--r-card); background: rgba(255, 255, 255, .75); border: 1px solid var(--ash); min-height: 150px; overflow: hidden; }
.sc-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fog); margin-bottom: 2px; }
.sc-head svg { width: 12px; height: 12px; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--ash); font-size: 12px; opacity: 0; animation: scRow 5.4s var(--ease) infinite; }
.sc-row:nth-child(3) { animation-delay: .45s; }
.sc-row:nth-child(4) { animation-delay: .9s; }
.sc-name { font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.sc-name small { display: block; font-weight: 400; color: var(--fog); font-size: 10.5px; }
.sc-row .badge { margin-left: auto; }
@keyframes scRow { 0% { opacity: 0; transform: translateX(-12px); } 8%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(8px); } }

.sc-pro { align-items: center; justify-content: center; }
.sc-mission { width: min(260px, 100%); display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--ash); box-shadow: var(--sh-md); font-size: 12px; animation: scMission 5.4s var(--ease) infinite; }
.sc-mission b { font-size: 13px; color: var(--charcoal); }
.sc-mission small { color: var(--fog); font-size: 10.5px; }
.sc-mtop { display: flex; align-items: center; justify-content: space-between; }
.sc-dist { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--green); font-weight: 500; }
.sc-dist svg { width: 11px; height: 11px; }
.sc-btns { display: flex; gap: 6px; margin-top: 4px; }
.sc-btns span { flex: 1; text-align: center; padding: 5px 0; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid var(--ash); color: var(--steel); }
.sc-btns .sc-yes { background: #7c3aed; border-color: #7c3aed; color: #fff; animation: scPress 5.4s var(--ease) infinite; }
.sc-done { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-tag); background: var(--mint); color: #166534; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; animation: scDone 5.4s var(--ease) infinite; }
.sc-done svg { width: 12px; height: 12px; }
@keyframes scMission { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 10%, 50% { opacity: 1; transform: none; } 60%, 84% { opacity: 1; transform: translateY(-14px) scale(.97); } 95%, 100% { opacity: 0; transform: translateY(-22px) scale(.95); } }
@keyframes scPress { 0%, 38% { transform: none; box-shadow: none; } 42% { transform: scale(.92); box-shadow: 0 0 0 4px rgba(124, 58, 237, .25); } 48%, 100% { transform: none; box-shadow: none; } }
@keyframes scDone { 0%, 52% { opacity: 0; transform: translateY(8px); } 60%, 84% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

@media (max-width: 720px) {
  .gc-scene { min-height: 130px; }
  .gate-blob { width: 380px; height: 380px; }
}
.gate.intro .gate-card { transition: none; }
.sc-pro { padding-bottom: 40px; }
@keyframes scMission { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 10%, 50% { opacity: 1; transform: none; } 60%, 84% { opacity: 1; transform: translateY(-8px) scale(.97); } 95%, 100% { opacity: 0; transform: translateY(-16px) scale(.95); } }

/* Fils animés entre les métiers, les cartes et la souris */
.gate-threads { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
@media (min-width: 1360px) { .gate-threads { display: block; } }
.gate-threads path { fill: none; stroke-linecap: round; }
.gate-threads .th-chain { stroke: rgba(37, 99, 235, .22); stroke-width: 1.2; stroke-dasharray: 3 6; }
.gate-threads .th-card { stroke: url(#threadGrad); stroke-opacity: .28; stroke-width: 1.2; }
.gate-threads .th-mouse { stroke: url(#threadGrad); stroke-width: 1.6; stroke-opacity: 0; transition: stroke-opacity .3s; }
.gate-threads .th-mouse.on { stroke-opacity: .75; }
.gate-threads .th-dot { fill: #2563eb; }
.gate-threads .th-halo { fill: url(#dotGlow); }
.gate-threads .th-cursor { fill: #7c3aed; opacity: 0; transition: opacity .3s; }
.gate-threads .th-cursor.on { opacity: 1; }
.gate-floats .gf { animation: none !important; transition: box-shadow .3s, border-color .3s, scale .35s var(--ease); will-change: transform; }
.gate-floats .gf.near { border-color: rgba(124, 58, 237, .45); box-shadow: 0 0 0 4px rgba(124, 58, 237, .10), var(--sh-md); scale: 1.08; }
.gate-threads .th-card { stroke-opacity: .42; stroke-width: 1.4; }
.gate-threads .th-chain { stroke: rgba(37, 99, 235, .32); }

/* Survol d'une carte : sa couleur s'intensifie en arrière-plan */
.gate-blob { transition: opacity .7s var(--ease), scale 1s var(--ease), filter .7s; }
.gate.h-etab .gate-blob.b1, .gate.h-pro .gate-blob.b2 { opacity: 1; scale: 1.35; filter: blur(60px) saturate(1.4); }
.gate.h-etab .gate-blob.b2, .gate.h-pro .gate-blob.b1 { opacity: .3; }
.gate::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease), background .7s; }
.gate.h-etab::before { opacity: 1; background: radial-gradient(ellipse 70% 60% at 30% 55%, rgba(147, 197, 253, .28), transparent 70%); }
.gate.h-pro::before { opacity: 1; background: radial-gradient(ellipse 70% 60% at 70% 55%, rgba(196, 181, 253, .30), transparent 70%); }
.gate-card { box-shadow: inset 0 0 0 0 transparent; }
.gate-card:hover { box-shadow: inset 0 160px 140px -90px rgba(var(--accent-rgb), .16), 0 0 0 4px rgba(var(--accent-rgb), .08), var(--sh-lg); }

/* ==========================================================================
   VIDÉO DE PRÉSENTATION
   ========================================================================== */
.vsec { overflow-x: clip; }
html[data-aud="etab"] #video, html[data-aud="pro"] #video { isolation: isolate; }
.vplayer { perspective: 1600px; }
.vframe { position: relative; max-width: 1040px; margin: 0 auto; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--ash); box-shadow: var(--sh-ring), 0 30px 60px -20px rgba(37, 99, 235, .25), var(--sh-lg); overflow: hidden; transform-origin: 50% 0; }
.vwrap { position: relative; aspect-ratio: 16 / 9; background: #0b1b4a; overflow: hidden; }
.vwrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vwrap:fullscreen { aspect-ratio: auto; }
.vwrap:fullscreen video { object-fit: contain; background: #000; }

/* Grand bouton lecture */
.vplay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; cursor: pointer; background: linear-gradient(180deg, rgba(10, 20, 60, .05), rgba(10, 20, 60, .35)); color: #fff; transition: opacity .4s var(--ease), background .3s; }
.vplay:hover { background: linear-gradient(180deg, rgba(10, 20, 60, .1), rgba(10, 20, 60, .45)); }
.vplay-btn { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .45s var(--ease); }
.vplay-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.vplay-btn::before, .vplay-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: ping 2.2s var(--ease) infinite; }
.vplay-btn::after { animation-delay: 1.1s; }
.vplay:hover .vplay-btn { transform: scale(1.08); }
.vplay-label { padding: 6px 14px; border-radius: var(--r-tag); background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 500; }
.vplayer.engaged .vplay { opacity: 0; pointer-events: none; }

/* Barre de contrôle */
.vctrl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(10, 15, 35, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); }
.vplayer.engaged .vwrap:hover .vctrl, .vplayer.engaged.paused .vctrl, .vplayer.engaged .vctrl:focus-within { opacity: 1; transform: none; }
.vctrl button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s; }
.vctrl button:hover { background: rgba(255, 255, 255, .15); }
.vctrl svg { width: 16px; height: 16px; }
.vc-toggle .ic-pause, .vplayer.playing .vc-toggle .ic-play { display: none; }
.vplayer.playing .vc-toggle .ic-pause { display: block; }
.vc-mute .ic-mute, .vplayer.muted .vc-mute .ic-vol { display: none; }
.vplayer.muted .vc-mute .ic-mute { display: block; }
.vc-bar { position: relative; flex: 1; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: height .2s; }
.vc-bar:hover { height: 8px; }
.vc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #a78bfa); }
.vc-marks i { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.vc-time { font-size: 12px; white-space: nowrap; opacity: .9; }

/* Chapitres */
.vchapters { max-width: 1040px; margin: 18px auto 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vchapters::-webkit-scrollbar { display: none; }
.vchapters button { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: var(--r-card); border: 1px solid var(--ash); background: #fff; cursor: pointer; text-align: left; font: inherit; overflow: hidden; transition: border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.vchapters button:hover { border-color: var(--blue-light); transform: translateY(-2px); box-shadow: var(--sh-md); }
.vchapters b { font-size: 13px; font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.vchapters span { font-size: 11.5px; color: var(--fog); font-family: var(--font-mono); }
.vchapters button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--blue); transition: width .2s linear; }
.vchapters button.on { border-color: var(--blue); background: #f5f9ff; }
.vchapters button.on b { color: var(--sapphire); }

.vcta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; }

/* Bouton vidéo du hero */
.hero-video { gap: 10px; }
.hv-dot { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); transition: transform .35s var(--ease); }
.hv-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--blue-light); animation: ping 2.2s var(--ease) infinite; }
.hv-dot svg { width: 12px; height: 12px; margin-left: 2px; rotate: 0deg !important; }
.hero-video:hover .hv-dot { transform: scale(1.1); }
.hero-video:hover svg { transform: none; }
.hv-dur { font-family: var(--font-mono); font-size: 13px; color: var(--fog); }

/* Fenêtre plein écran */
.vmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; }
.vmodal[hidden] { display: none; }
.vm-back { position: absolute; inset: 0; background: rgba(8, 14, 40, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vm-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.vm-box video { width: 100%; height: 100%; display: block; }
.vm-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease); }
.vm-close:hover { transform: rotate(90deg); }
.vm-close svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .vplay-btn { width: 64px; height: 64px; }
  .vplay-btn svg { width: 24px; height: 24px; }
  .vplay-label { font-size: 12px; }
  .vc-time { display: none; }
  .vctrl { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; gap: 6px; }
  .vchapters button { flex: 0 0 auto; }
}

/* Teinte de la section vidéo */
html[data-aud="etab"] #video::after, html[data-aud="pro"] #video::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(147, 197, 253, .22), transparent 70%);
}
.vchapters { padding: 4px 2px 10px; }
.mockup-bar .url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }

/* Pastilles de fenêtre façon macOS (rouge / jaune / vert) */
.mockup-bar i { width: 11px; height: 11px; border: 1px solid rgba(0, 0, 0, .12); }
.mockup-bar i:nth-of-type(1) { background: #ff5f57; border-color: #e0443e; }
.mockup-bar i:nth-of-type(2) { background: #febc2e; border-color: #dea123; }
.mockup-bar i:nth-of-type(3) { background: #28c840; border-color: #1aab29; }