/* ============================================================
   BYS-IT — Landing v2 « ultra-moderne »
   Dépend uniquement des tokens de colors_and_type.css
   ============================================================ */

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--fg);
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
}

.v2-container {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 28px;
}

/* ---------- accessibilité ---------- */
.v2-skip {
   position: absolute;
   left: -9999px;
   top: 0;
   background: var(--primary);
   color: #fff;
   padding: 10px 16px;
   border-radius: 0 0 10px 0;
   z-index: 300;
   font-weight: 700;
   text-decoration: none;
}

.v2-skip:focus {
   left: 0;
}

:focus-visible {
   outline: none;
   box-shadow: var(--ring);
   border-radius: 6px;
}

/* ============================================================
   BARRE DE PROGRESSION DE SCROLL
   ============================================================ */
.v2-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0;
   background: linear-gradient(90deg, var(--cobalt-500), var(--accent));
   z-index: 250;
   transition: width .1s linear;
}

/* ============================================================
   NAV — verre, condensée au scroll
   ============================================================ */
.v2-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
   transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
   border-bottom: 1px solid transparent;
}

.v2-nav.is-scrolled {
   background: color-mix(in oklab, var(--surface) 78%, transparent);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom-color: var(--border);
   box-shadow: var(--shadow-sm);
}

.v2-nav-inner {
   display: flex;
   align-items: center;
   gap: 22px;
   padding: 16px 0;
   transition: padding var(--dur) var(--ease-out);
}

.v2-nav.is-scrolled .v2-nav-inner {
   padding: 10px 0;
}

.v2-logo {
   height: 34px;
   width: auto;
   display: block;
}

.v2-logo-dark {
   display: none;
}

/* sur le hero sombre (nav non scrollée), logo blanc */
.v2-nav:not(.is-scrolled) .v2-logo-light {
   display: none;
}

.v2-nav:not(.is-scrolled) .v2-logo-dark {
   display: block;
}

[data-theme="dark"] .v2-logo-light {
   display: none;
}

[data-theme="dark"] .v2-logo-dark {
   display: block !important;
}

.v2-nav-links {
   display: flex;
   gap: 4px;
   margin-left: 10px;
}

.v2-nav-links a {
   position: relative;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--fg-2);
   text-decoration: none;
   padding: 8px 13px;
   border-radius: var(--radius-sm);
   transition: color var(--dur-fast) var(--ease-out);
}

.v2-nav:not(.is-scrolled) .v2-nav-links a {
   color: rgba(255, 255, 255, .78);
}

.v2-nav-links a::after {
   content: '';
   position: absolute;
   left: 13px;
   right: 13px;
   bottom: 4px;
   height: 2px;
   background: var(--accent);
   border-radius: 2px;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--dur) var(--ease-out);
}

.v2-nav-links a:hover {
   color: var(--accent);
}

.v2-nav-links a:hover::after {
   transform: scaleX(1);
}

.v2-nav-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
}

.v2-theme-btn {
   width: 38px;
   height: 38px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--border);
   background: var(--surface);
   color: var(--fg-2);
   display: grid;
   place-items: center;
   cursor: pointer;
   transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}

.v2-nav:not(.is-scrolled) .v2-theme-btn {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .18);
   color: rgba(255, 255, 255, .85);
}

.v2-theme-btn:hover {
   transform: rotate(15deg);
   border-color: var(--accent);
}

.v2-burger {
   display: none;
   width: 42px;
   height: 42px;
   border: 1px solid var(--border);
   background: var(--surface);
   border-radius: var(--radius-sm);
   color: var(--fg);
   cursor: pointer;
   place-items: center;
}

.v2-nav:not(.is-scrolled) .v2-burger {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .18);
   color: #fff;
}

.v2-mobile-menu {
   display: none;
   flex-direction: column;
   gap: 4px;
   padding: 14px 24px 20px;
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   box-shadow: var(--shadow-md);
}

.v2-mobile-menu a {
   padding: 12px 10px;
   font-weight: 600;
   color: var(--fg);
   text-decoration: none;
   border-radius: var(--radius-sm);
}

.v2-mobile-menu a:hover {
   background: var(--surface-2);
}

.v2-mobile-menu[data-open] {
   display: flex;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.v2-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--font-sans);
   font-weight: 700;
   font-size: 15px;
   text-decoration: none;
   border-radius: var(--radius-md);
   padding: 14px 24px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
   will-change: transform;
}

.v2-btn svg {
   transition: transform var(--dur) var(--ease-out);
}

.v2-btn:hover svg {
   transform: translateX(3px);
}

.v2-btn-primary {
   background: linear-gradient(135deg, var(--cobalt-500), var(--cobalt-700));
   color: #fff;
   box-shadow: var(--shadow-brand);
}

.v2-btn-primary:hover {
   box-shadow: var(--shadow-lg);
}

.v2-btn-primary:active {
   transform: scale(.98);
}

.v2-btn-ghost {
   background: transparent;
   border-color: var(--border-strong);
   color: var(--fg);
}

.v2-btn-ghost:hover {
   border-color: var(--accent);
   color: var(--accent-hover);
}

.v2-hero .v2-btn-ghost {
   border-color: rgba(255, 255, 255, .25);
   color: #fff;
}

.v2-hero .v2-btn-ghost:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.v2-btn-accent {
   background: var(--accent);
   color: var(--cyan-950);
   box-shadow: var(--shadow-accent);
}

.v2-btn-lg {
   padding: 16px 28px;
   font-size: 16px;
}

/* ============================================================
   HERO — salle de contrôle (toujours sombre, scopé)
   ============================================================ */
.v2-hero {
   position: relative;
   overflow: hidden;
   background: var(--bg);
   color: var(--fg);
   padding: 150px 0 96px;
}

.v2-hero-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.v2-hero-bg .grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(var(--grid-dot) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dot) 1px, transparent 1px);
   background-size: 44px 44px;
   -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 10%, #000 30%, transparent 75%);
   mask-image: radial-gradient(ellipse 100% 80% at 50% 10%, #000 30%, transparent 75%);
}

.v2-hero-bg .glow {
   position: absolute;
   width: 720px;
   height: 720px;
   border-radius: 50%;
   background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
   left: var(--mx, 50%);
   top: var(--my, 18%);
   transform: translate(-50%, -50%);
   transition: left .6s var(--ease-out), top .6s var(--ease-out);
   opacity: .8;
}

.v2-hero-bg .halo {
   position: absolute;
   left: 50%;
   top: -340px;
   transform: translateX(-50%);
   width: 900px;
   height: 620px;
   border-radius: 50%;
   background: radial-gradient(closest-side, color-mix(in oklab, var(--cobalt-500) 22%, transparent), transparent);
}

.v2-hero-inner {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.v2-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: var(--tracking-mono);
   text-transform: uppercase;
   color: var(--accent);
}

.v2-eyebrow::before,
.v2-eyebrow::after {
   content: '';
   width: 28px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--accent));
}

.v2-eyebrow::after {
   background: linear-gradient(90deg, var(--accent), transparent);
}

.v2-hero-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(42px, 6vw, 82px);
   line-height: 1.04;
   letter-spacing: var(--tracking-tight);
   margin: 22px 0 0;
   align-self: stretch;
}

.v2-hero-title em {
   font-style: italic;
   color: var(--accent);
   position: relative;
   white-space: nowrap;
}

.v2-hero-title em::after {
   content: '';
   position: absolute;
   left: 2%;
   right: 2%;
   bottom: .03em;
   height: 3px;
   border-radius: 2px;
   background: var(--accent);
   opacity: .5;
   transform: scaleX(0);
   transform-origin: left;
}

html.js-anim .v2-hero.in .v2-hero-title em::after {
   animation: v2Underline .7s var(--ease-out) 1.1s forwards;
}

@keyframes v2Underline {
   to {
      transform: scaleX(1);
   }
}

/* entrée du titre : un seul élément, fondu + léger flou — robuste partout */
html.js-anim .v2-hero-title {
   opacity: 0;
   transform: translateY(26px);
   filter: blur(10px);
}

html.js-anim .v2-hero.in .v2-hero-title {
   animation: v2TitleIn 1s var(--ease-out) .1s forwards;
}

@keyframes v2TitleIn {
   to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
   }
}

/* après l'entrée : état final figé, plus aucune propriété d'animation */
html.js-anim .v2-hero.settled .v2-hero-title {
   animation: none;
   opacity: 1;
   transform: none;
   filter: none;
}

html.js-anim .v2-hero.settled .v2-hero-title em::after {
   animation: none;
   transform: scaleX(1);
}

.v2-hero-lead {
   font-size: 19px;
   line-height: var(--leading-relaxed);
   color: var(--fg-2);
   max-width: 42em;
   margin: 26px 0 0;
}

.v2-hero-actions {
   display: flex;
   gap: 16px;
   margin-top: 36px;
   flex-wrap: wrap;
   justify-content: center;
}

.v2-hero-reassure {
   display: flex;
   gap: 26px;
   flex-wrap: wrap;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 30px 0 0;
}

.v2-hero-reassure li {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--fg-2);
}

.v2-hero-reassure svg {
   color: var(--accent);
   flex: none;
}

/* entrées différées du hero */
html.js-anim .v2-hero [data-hero-fade] {
   opacity: 0;
   transform: translateY(14px);
}

html.js-anim .v2-hero.in [data-hero-fade] {
   animation: v2FadeUp .8s var(--ease-out) forwards;
   animation-delay: var(--hd, .3s);
}

@keyframes v2FadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ---------- diagramme workflow SVG ---------- */
.v2-flux-wrap {
   position: relative;
   width: 100%;
   max-width: 880px;
   margin: 56px auto 0;
}

.v2-flux-svg {
   width: 100%;
   height: auto;
   display: block;
   overflow: visible;
}

.v2-flux-svg .wire {
   fill: none;
   stroke: var(--node-line);
   stroke-width: 2;
}

.v2-flux-svg .wire-glow {
   fill: none;
   stroke: var(--accent);
   stroke-width: 2;
   opacity: .85;
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
}

html.js-anim .v2-hero.in .wire-glow {
   animation: v2Draw 1.4s var(--ease-out) forwards;
   animation-delay: var(--wd, .8s);
}

@keyframes v2Draw {
   to {
      stroke-dashoffset: 0;
   }
}

.v2-flux-svg .node-box {
   fill: var(--surface);
   stroke: var(--border-strong);
   stroke-width: 1.4;
   rx: 14;
}

.v2-flux-svg .node-hub {
   fill: var(--cobalt-700);
   stroke: var(--cobalt-400);
   stroke-width: 1.4;
}

.v2-flux-svg .node-out {
   stroke: var(--cyan-700);
}

.v2-flux-svg .node-title {
   font-family: var(--font-sans);
   font-weight: 700;
   font-size: 16px;
   fill: var(--fg);
}

.v2-flux-svg .node-sub {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .08em;
   fill: var(--fg-3);
   text-transform: uppercase;
}

.v2-flux-svg .hub-title {
   fill: #fff;
}

.v2-flux-svg .hub-sub {
   fill: var(--cyan-300);
}

.v2-flux-svg .node-ic {
   stroke: var(--accent);
   stroke-width: 1.8;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.v2-flux-svg .hub-ic {
   stroke: #fff;
}

.v2-flux-svg .pulse {
   fill: var(--accent);
}

.v2-flux-svg .big-num {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 30px;
   fill: var(--accent);
}

html.js-anim .v2-flux-wrap {
   opacity: 0;
   transform: translateY(20px) scale(.985);
}

html.js-anim .v2-hero.in .v2-flux-wrap {
   animation: v2FluxIn 1s var(--ease-out) .55s forwards;
}

@keyframes v2FluxIn {
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

.v2-flux-caption {
   position: absolute;
   top: -14px;
   left: 50%;
   transform: translateX(-50%);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: 10.5px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--success-500);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   padding: 6px 14px;
   box-shadow: var(--shadow-sm);
}

.v2-flux-caption .dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--success-500);
   animation: v2Pulse 2.4s var(--ease-out) infinite;
}

@keyframes v2Pulse {
   0% {
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--success-500) 50%, transparent);
   }

   70% {
      box-shadow: 0 0 0 8px transparent;
   }

   100% {
      box-shadow: 0 0 0 0 transparent;
   }
}

/* ============================================================
   TICKER — outils connectés
   ============================================================ */
.v2-ticker {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   background: var(--bg-sunken);
   overflow: hidden;
   padding: 18px 0;
   position: relative;
}

.v2-ticker::before,
.v2-ticker::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 120px;
   z-index: 2;
   pointer-events: none;
}

.v2-ticker::before {
   left: 0;
   background: linear-gradient(90deg, var(--bg-sunken), transparent);
}

.v2-ticker::after {
   right: 0;
   background: linear-gradient(-90deg, var(--bg-sunken), transparent);
}

.v2-ticker-label {
   position: absolute;
   top: 50%;
   left: 28px;
   transform: translateY(-50%);
   z-index: 3;
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--fg-3);
   background: var(--bg-sunken);
   padding: 4px 10px 4px 0;
}

.v2-ticker-track {
   display: flex;
   gap: 0;
   width: max-content;
   animation: v2Marquee 44s linear infinite;
}

.v2-ticker:hover .v2-ticker-track {
   animation-play-state: paused;
}

.v2-ticker-item {
   display: inline-flex;
   align-items: center;
   gap: 26px;
   padding: 0 13px;
   font-family: var(--font-mono);
   font-size: 13px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--fg-2);
   white-space: nowrap;
}

.v2-ticker-item::after {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   opacity: .55;
}

@keyframes v2Marquee {
   to {
      transform: translateX(-50%);
   }
}

@media (prefers-reduced-motion: reduce) {
   .v2-ticker-track {
      animation: none;
   }
}

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.v2-section {
   padding: var(--space-24) 0;
}

.v2-section.sunken {
   background: var(--bg-sunken);
}

.v2-head {
   max-width: 720px;
   margin: 0 auto var(--space-12);
   text-align: center;
}

.v2-head.left {
   margin: 0 0 var(--space-10);
   text-align: left;
}

.v2-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(32px, 4vw, 52px);
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   margin: 16px 0 0;
   color: var(--fg);
   text-wrap: pretty;
}

.v2-lead {
   font-size: 17px;
   line-height: var(--leading-relaxed);
   color: var(--fg-2);
   margin: 16px auto 0;
   max-width: 44em;
   text-wrap: pretty;
}

.v2-head.left .v2-lead {
   margin-left: 0;
}

/* révélations au scroll */
html.js-anim .v2-r {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
   transition-delay: var(--d, 0s);
}

html.js-anim .v2-r.is-in {
   opacity: 1;
   transform: none;
}

html.js-anim .v2-r-clip {
   clip-path: inset(0 0 100% 0);
   transition: clip-path .8s var(--ease-out);
   transition-delay: var(--d, 0s);
}

html.js-anim .v2-r-clip.is-in {
   clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {

   html.js-anim .v2-r,
   html.js-anim .v2-r-clip {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
      transition: none !important;
   }
}

/* ---- anim-skip : filet ultime si les timelines CSS sont gelées (env. throttlé)
   Force l'état FINAL de toutes les entrées animées, sans animation. ---- */
html.anim-skip .v2-r,
html.anim-skip .v2-r-clip,
html.anim-skip .v2-hero-title,
html.anim-skip [data-hero-fade],
html.anim-skip .v2-flux-wrap {
   opacity: 1 !important;
   transform: none !important;
   filter: none !important;
   clip-path: none !important;
   animation: none !important;
   transition: none !important;
}

html.anim-skip .wire-glow {
   stroke-dashoffset: 0 !important;
   animation: none !important;
}

html.anim-skip .v2-hero-title em::after {
   transform: scaleX(1) !important;
   animation: none !important;
}

html.anim-skip .v2-steps::after {
   transform: scaleX(1) !important;
   transition: none !important;
}

/* ============================================================
   STATS — chiffres XXL
   ============================================================ */
.v2-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius-2xl);
   overflow: hidden;
   background: var(--surface);
   box-shadow: var(--shadow-sm);
}

.v2-stat {
   padding: 40px 30px;
   text-align: center;
   position: relative;
}

.v2-stat+.v2-stat {
   border-left: 1px solid var(--divider);
}

.v2-stat-num {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(44px, 4.6vw, 68px);
   line-height: 1;
   color: var(--primary);
   font-variant-numeric: tabular-nums;
}

.v2-stat-num .v2-count {
   display: inline-block;
   min-width: 2ch;
}

.v2-stat-cap {
   font-size: 14.5px;
   line-height: 1.5;
   color: var(--fg-2);
   margin-top: 14px;
}

.v2-stat-cap::before {
   content: '';
   display: block;
   width: 28px;
   height: 3px;
   border-radius: 2px;
   background: var(--accent);
   margin: 0 auto 12px;
}

/* ============================================================
   PROBLÈME — cartes spotlight
   ============================================================ */
.v2-pains {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

.v2-card {
   position: relative;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 28px 24px;
   box-shadow: var(--shadow-xs);
   overflow: hidden;
   transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.v2-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), var(--accent-soft), transparent 65%);
   opacity: 0;
   transition: opacity var(--dur) var(--ease-out);
   pointer-events: none;
}

.v2-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
   border-color: var(--border-strong);
}

.v2-card:hover::before {
   opacity: 1;
}

.v2-card-ic {
   width: 48px;
   height: 48px;
   border-radius: 13px;
   background: var(--primary-soft);
   color: var(--primary);
   display: grid;
   place-items: center;
   margin-bottom: 18px;
   position: relative;
}

.v2-card h3 {
   font-size: 18px;
   font-weight: 700;
   margin: 0 0 8px;
   color: var(--fg);
   position: relative;
}

.v2-card p {
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--fg-2);
   margin: 0;
   position: relative;
}

/* ============================================================
   SERVICES — lignes alternées + carte nœuds
   ============================================================ */
.v2-svc {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.v2-svc+.v2-svc {
   margin-top: var(--space-20);
}

.v2-svc.rev .v2-svc-text {
   order: 2;
}

.v2-svc.rev .v2-svc-visual {
   order: 1;
}

.v2-svc-num {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: var(--tracking-mono);
   text-transform: uppercase;
   color: var(--accent-hover);
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.v2-svc-num::before {
   content: '';
   width: 30px;
   height: 1px;
   background: var(--accent);
}

.v2-svc-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(26px, 3vw, 38px);
   line-height: 1.12;
   letter-spacing: var(--tracking-tight);
   margin: 14px 0 0;
   color: var(--fg);
}

.v2-svc-text p {
   font-size: 16px;
   line-height: var(--leading-relaxed);
   color: var(--fg-2);
   margin: 16px 0 0;
}

.v2-svc-feats {
   list-style: none;
   padding: 0;
   margin: 20px 0 0;
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.v2-svc-feats li {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   font-size: 15px;
   color: var(--fg);
   line-height: 1.5;
}

.v2-svc-feats svg {
   color: var(--accent);
   flex: none;
   margin-top: 2px;
}

.v2-svc-case {
   margin-top: 24px;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   padding: 10px 18px 10px 12px;
}

.v2-svc-case .tag {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--cyan-950);
   background: var(--accent);
   border-radius: var(--radius-pill);
   padding: 4px 10px;
   flex: none;
}

.v2-svc-case .txt {
   font-size: 14px;
   font-weight: 600;
   color: var(--fg);
}

.v2-svc-card {
   width: 100%;
   max-width: 460px;
   margin: 0 auto;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
   padding: 30px;
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.v2-svc-card:hover {
   transform: translateY(-4px) rotate(-.3deg);
   box-shadow: var(--shadow-xl);
}

.v2-svc-card .glow {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 85% -10%, var(--accent-soft), transparent 55%);
   pointer-events: none;
}

.v2-vnode {
   position: relative;
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--node-bg);
   border: 1px solid var(--border-strong);
   border-radius: 14px;
   padding: 15px 17px;
   box-shadow: var(--shadow-xs);
   transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.v2-svc-card:hover .v2-vnode {
   border-color: var(--accent);
}

.v2-vnode .ic {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: var(--primary-soft);
   color: var(--primary);
   display: grid;
   place-items: center;
   flex: none;
}

.v2-vnode.accent .ic {
   background: var(--accent);
   color: var(--cyan-950);
}

.v2-vnode .nt {
   font-weight: 700;
   font-size: 15px;
   color: var(--fg);
}

.v2-vnode .ns {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--fg-3);
   margin-top: 3px;
}

.v2-vconn {
   display: flex;
   padding-left: 37px;
}

.v2-vconn span {
   width: 2px;
   height: 26px;
   background: repeating-linear-gradient(0deg, var(--accent) 0 6px, transparent 6px 12px);
   background-size: 100% 12px;
   animation: v2MarchV .6s linear infinite;
}

@keyframes v2MarchV {
   to {
      background-position: 0 12px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .v2-vconn span {
      animation: none;
   }
}

/* ============================================================
   POURQUOI — liste + carte fondateur
   ============================================================ */
.v2-why {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 64px;
   align-items: center;
}

.v2-why-list {
   list-style: none;
   padding: 0;
   margin: 28px 0 0;
   display: flex;
   flex-direction: column;
}

.v2-why-list li {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   padding: 18px 0;
   border-bottom: 1px solid var(--divider);
}

.v2-why-list li:last-child {
   border-bottom: 0;
}

.v2-why-list .ic {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: var(--primary-soft);
   color: var(--primary);
   display: grid;
   place-items: center;
   flex: none;
   transition: background var(--dur), color var(--dur);
}

.v2-why-list li:hover .ic {
   background: var(--accent);
   color: var(--cyan-950);
}

.v2-why-list b {
   display: block;
   font-size: 16.5px;
   font-weight: 700;
   color: var(--fg);
   margin-bottom: 4px;
}

.v2-why-list span.t {
   font-size: 14.5px;
   line-height: 1.55;
   color: var(--fg-2);
}

.v2-founder {
   position: relative;
   background: linear-gradient(160deg, var(--cobalt-800), var(--cobalt-950));
   border: 1px solid var(--cobalt-700);
   border-radius: var(--radius-2xl);
   padding: 40px 36px;
   text-align: center;
   overflow: hidden;
   box-shadow: var(--shadow-brand);
}

.v2-founder::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.2px);
   background-size: 22px 22px;
}

.v2-founder-av {
   position: relative;
   width: 116px;
   height: 116px;
   border-radius: 50%;
   margin: 0 auto 20px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .25);
   box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), var(--shadow-accent);
   color: var(--cyan-300);
   display: grid;
   place-items: center;
   overflow: hidden;
}

.v2-founder-av img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 30%;
}

.v2-founder-q {
   position: relative;
   font-family: var(--font-display);
   font-style: italic;
   font-weight: 500;
   font-size: 22px;
   line-height: 1.45;
   color: #fff;
   margin: 0 0 18px;
   text-wrap: pretty;
}

.v2-founder-name {
   position: relative;
   font-weight: 700;
   font-size: 16px;
   color: #fff;
}

.v2-founder-role {
   position: relative;
   font-family: var(--font-mono);
   font-size: 10.5px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--cyan-300);
   margin-top: 6px;
}

/* ============================================================
   CAS D'USAGE
   ============================================================ */
.v2-cases {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px;
}

.v2-case {
   display: flex;
   gap: 20px;
   align-items: flex-start;
}

.v2-case .tag {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--accent-hover);
   position: relative;
}

.v2-case h3 {
   font-size: 19px;
   font-weight: 700;
   margin: 6px 0 8px;
   color: var(--fg);
   position: relative;
}

.v2-case p {
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--fg-2);
   margin: 0;
   position: relative;
}

.v2-case-ic {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--primary-soft);
   color: var(--primary);
   display: grid;
   place-items: center;
   flex: none;
   position: relative;
}

/* ============================================================
   MÉTHODE — timeline qui se dessine
   ============================================================ */
.v2-steps {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
}

.v2-steps::before {
   content: '';
   position: absolute;
   top: 24px;
   left: 6%;
   right: 6%;
   height: 2px;
   background: var(--divider);
}

.v2-steps::after {
   content: '';
   position: absolute;
   top: 24px;
   left: 6%;
   right: 6%;
   height: 2px;
   background: linear-gradient(90deg, var(--cobalt-500), var(--accent));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.6s var(--ease-out) .2s;
}

.v2-steps.is-in::after {
   transform: scaleX(1);
}

html:not(.js-anim) .v2-steps::after {
   transform: scaleX(1);
}

.v2-step {
   position: relative;
   text-align: center;
   padding-top: 0;
}

.v2-step-dot {
   position: relative;
   z-index: 1;
   width: 50px;
   height: 50px;
   margin: 0 auto;
   border-radius: 50%;
   background: var(--surface);
   border: 2px solid var(--border-strong);
   color: var(--primary);
   display: grid;
   place-items: center;
   transition: border-color var(--dur), box-shadow var(--dur), color var(--dur);
}

.v2-step:hover .v2-step-dot {
   border-color: var(--accent);
   box-shadow: var(--shadow-accent);
   color: var(--accent-hover);
}

.v2-step-n {
   font-family: var(--font-mono);
   font-size: 10.5px;
   letter-spacing: .1em;
   color: var(--fg-3);
   text-transform: uppercase;
   display: block;
   margin-top: 16px;
}

.v2-step h3 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 24px;
   margin: 6px 0 8px;
   color: var(--fg);
}

.v2-step p {
   font-size: 14px;
   line-height: 1.6;
   color: var(--fg-2);
   margin: 0 auto;
   max-width: 26ch;
}

/* ============================================================
   CTA FINALE — sombre, formulaire
   ============================================================ */
.v2-rdv {
   position: relative;
   overflow: hidden;
   background: linear-gradient(150deg, var(--cobalt-800), var(--cobalt-950) 70%);
   padding: var(--space-24) 0;
}

.v2-rdv::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
   background-size: 44px 44px;
   -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 30%, transparent 80%);
   mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 30%, transparent 80%);
}

.v2-rdv-inner {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
}

.v2-rdv .v2-eyebrow {
   color: var(--cyan-300);
}

.v2-rdv-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(32px, 4vw, 52px);
   line-height: 1.08;
   letter-spacing: var(--tracking-tight);
   color: #fff;
   margin: 16px 0 0;
}

.v2-rdv-lead {
   font-size: 17px;
   line-height: var(--leading-relaxed);
   color: rgba(255, 255, 255, .82);
   margin: 18px 0 26px;
   max-width: 34em;
}

.v2-rdv-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 13px;
}

.v2-rdv-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   font-weight: 500;
   color: rgba(255, 255, 255, .92);
}

.v2-rdv-list svg {
   color: var(--cyan-300);
   flex: none;
}

.v2-form-card {
   position: relative;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-2xl);
   padding: 34px;
   box-shadow: var(--shadow-xl);
}

.v2-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.v2-field {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.v2-field label {
   font-size: 13px;
   font-weight: 700;
   color: var(--fg-2);
}

.v2-field input,
.v2-field textarea {
   font-family: var(--font-sans);
   font-size: 15px;
   color: var(--fg);
   background: var(--bg-elevated);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   padding: 13px 15px;
   transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.v2-field input::placeholder,
.v2-field textarea::placeholder {
   color: var(--fg-3);
}

.v2-field input:focus,
.v2-field textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: var(--ring);
}

.v2-field textarea {
   resize: vertical;
   min-height: 88px;
}

.v2-form-note {
   font-size: 13px;
   color: var(--fg-3);
   text-align: center;
   margin: 0;
}

.v2-form-note a {
   color: var(--link);
   font-weight: 600;
}

.v2-sent {
   text-align: center;
   padding: 20px 0;
}

.v2-sent-ic {
   color: var(--success-500);
   margin-bottom: 14px;
   display: flex;
   justify-content: center;
}

.v2-sent h3 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 26px;
   margin: 0 0 8px;
   color: var(--fg);
}

.v2-sent p {
   font-size: 15px;
   color: var(--fg-2);
   margin: 0 0 20px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.v2-footer {
   background: var(--slate-950);
   color: var(--slate-300);
   padding: var(--space-16) 0 var(--space-8);
}

.v2-footer-top {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 44px;
   padding-bottom: var(--space-12);
   border-bottom: 1px solid var(--slate-800);
}

.v2-footer-brand img {
   height: 36px;
   width: auto;
}

.v2-footer-brand p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--slate-400);
   margin: 18px 0 0;
   max-width: 34ch;
}

.v2-footer h4 {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--cyan-400);
   margin: 0 0 16px;
   font-weight: 600;
}

.v2-footer-col {
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.v2-footer-col a {
   font-size: 14px;
   color: var(--slate-300);
   text-decoration: none;
   transition: color var(--dur-fast);
   width: fit-content;
}

.v2-footer-col a:hover {
   color: var(--cyan-400);
}

.v2-footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   padding-top: var(--space-8);
   font-size: 13px;
   color: var(--slate-500);
}

.v2-footer-legal {
   display: flex;
   gap: 22px;
}

.v2-footer-legal a {
   color: var(--slate-500);
   text-decoration: none;
}

.v2-footer-legal a:hover {
   color: var(--cyan-400);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
   .v2-nav-links {
      display: none;
   }

   .v2-burger {
      display: grid;
   }

   .v2-pains {
      grid-template-columns: 1fr 1fr;
   }

   .v2-stats {
      grid-template-columns: 1fr;
   }

   .v2-stat+.v2-stat {
      border-left: 0;
      border-top: 1px solid var(--divider);
   }

   .v2-svc,
   .v2-why,
   .v2-rdv-inner,
   .v2-cases {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .v2-svc.rev .v2-svc-text {
      order: 1;
   }

   .v2-svc.rev .v2-svc-visual {
      order: 2;
   }

   .v2-steps {
      grid-template-columns: 1fr 1fr;
      gap: 38px 26px;
   }

   .v2-steps::before,
   .v2-steps::after {
      display: none;
   }

   .v2-footer-top {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 600px) {
   .v2-container {
      padding: 0 20px;
   }

   .v2-hero {
      padding: 120px 0 70px;
   }

   .v2-pains,
   .v2-stats,
   .v2-steps {
      grid-template-columns: 1fr;
   }

   .v2-stat+.v2-stat {
      border-left: 0;
      border-top: 1px solid var(--divider);
   }

   .v2-hero-actions .v2-btn {
      width: 100%;
   }

   .v2-ticker-label {
      display: none;
   }
}