/* =========================================================
   Granular — HOMEPAGE. Réutilise les tokens de styles.css.
   Style ~ krea, section nodale calquée sur l'interface Granular.
   ========================================================= */

/* ----- Header partagé ----- */
.nav--home{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.nav__link{
  display:flex; align-items:center; height:42px; padding:0 16px; border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  font-family:var(--f-disp); font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.nav__link:hover{ box-shadow:0 8px 30px rgba(0,0,0,.1); color:var(--ac); }
/* CTA principal du header */
.nav__cta{
  display:flex; align-items:center; height:42px; padding:0 18px; border-radius:999px;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.24); }
.nav__link,.nav__cta{ white-space:nowrap; }
@media (max-width:720px){ .nav__link{ display:none; } }   /* Portfolio passe dans le hamburger ; Get started reste visible */
@media (max-width:480px){
  .nav__cta{ height:38px; padding:0 14px; font-size:11.5px; }
}

/* ----- Boutons ----- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 26px;
  border-radius:999px; font-family:var(--f-disp); font-weight:600; font-size:15px;
  letter-spacing:.01em; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s; }
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:transparent; box-shadow:0 2px 6px rgba(22,24,44,.06), 0 10px 26px rgba(22,24,44,.09); }
.btn--ghost:hover{ border-color:transparent; transform:translateY(-2px); box-shadow:0 4px 10px rgba(22,24,44,.08), 0 16px 34px rgba(22,24,44,.13); }

/* ----- Reveal léger ----- */
.fx{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.fx.in{ opacity:1; transform:none; }

.eyebrow{ font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 20px; }
.grad{ background:linear-gradient(95deg,#8E2DE2,#4A00E0); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#6a1fd6; }
/* flash de titre (réf. fourmula) : chaque mot apparaît en violet puis vire au noir */
.tflash .vio{ background:linear-gradient(120deg,#8E2DE2,#4A00E0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#7c1fd6; }
.tflash .tflash__w{ color:#7c1fd6; }
.tflash.is-in .tflash__w{ animation:tflashWord .52s var(--ease) forwards; animation-delay:calc(var(--i,0) * .045s); }
@keyframes tflashWord{ 0%,24%{ color:#7c1fd6; } 100%{ color:var(--tflash-to, var(--ink)); } }
@media (prefers-reduced-motion:reduce){ .tflash .tflash__w{ color:var(--tflash-to, var(--ink)); animation:none; } }

/* ===================== HERO ===================== */
.home-hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(130px,20vh,210px) var(--gut) clamp(60px,9vh,110px); overflow:hidden; }
.home-hero__grid{ display:none; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask:radial-gradient(120% 78% at 50% 28%, #000 26%, transparent 72%);
          mask:radial-gradient(120% 78% at 50% 28%, #000 26%, transparent 72%); opacity:.8; }
.home-hero > *{ position:relative; z-index:1; }
.home-hero h1{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(42px,7.4vw,96px); line-height:1.0; margin:0 0 24px; max-width:15ch; }
.home-hero h1 .accent{ color:#6a1fd6;
  background:linear-gradient(95deg,#8E2DE2,#4A00E0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ===== INTRO de chargement (réf. marvellco) : voile sombre -> blanc + titre qui morph ===== */
.intro-veil{ display:none; }
html.intro .intro-veil{ display:block; position:fixed; inset:0; z-index:90; background:#0b0b0e;
  background-image:radial-gradient(circle, rgba(255,255,255,.17) 1px, transparent 1px); background-size:24px 24px;
  opacity:1; transition:opacity .9s var(--ease); pointer-events:none; }
html.intro.intro-fade .intro-veil{ opacity:0; }
html.intro .home-hero{ z-index:95; }
html.intro .home-hero .hero-morph{ color:#fff; }
html.intro.intro-fade .home-hero .hero-morph{ color:var(--ink); }
.nav{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.intro .nav{ opacity:0 !important; pointer-events:none !important; transform:translateX(-50%) translateY(-14px) !important; }
.home-hero__cta{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.intro .home-hero__cta, html.pre-cta .home-hero__cta{ opacity:0; transform:translateY(16px); }
/* titre qui morph : Generative/Pipeline -> Granular(c)/AI Workflow ; typo resserrée, plus fine, plus grande */
.home-hero .hero-morph{ font-weight:500; letter-spacing:-.045em; line-height:.98; max-width:none;
  font-size:clamp(52px,10.5vw,150px); margin:0 0 clamp(30px,4.5vh,52px); color:var(--ink); transition:color .9s var(--ease); }
.hero-morph .hm-line{ position:relative; display:block; height:1em; }
.hero-morph .hm{ position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; }
.hero-morph .ch{ display:inline-block; will-change:transform, opacity; }
.hero-morph sup{ font-family:'Helvetica Neue', Arial, sans-serif; font-weight:700; font-size:.46em; letter-spacing:0;
  background:linear-gradient(120deg,#8E2DE2,#4A00E0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* © hors flux (absolu) -> "Granular" reste centré, le © ne décale pas le mot */
.hero-morph .ch-cee{ position:absolute; left:100%; top:.05em; margin-left:.07em; transition:opacity .55s var(--ease), transform .55s var(--ease); }
html.no-cee .hero-morph .ch-cee{ opacity:0; transform:scale(.4); }
.hero-morph .hm-a .ch{ opacity:0; }
.hero-morph .hm-b .ch{ opacity:1; }
/* intro : ligne du haut arrive par le bas (monte), ligne du bas arrive par le haut (descend) ; le haut avant le bas */
html.intro .hero-morph .hm-b .ch{ opacity:0; }
html.intro .hm-line:first-child .hm-a .ch{ animation:chInUp .6s var(--ease) both; animation-delay:calc(var(--ci) * .04s); }
html.intro .hm-line:first-child .hm-b .ch{ transform:translateY(.72em); }
html.intro .hm-line:last-child .hm-a .ch{ animation:chInDown .6s var(--ease) both; animation-delay:calc(var(--ci) * .04s + .5s); }
html.intro .hm-line:last-child .hm-b .ch{ transform:translateY(-.72em); }
html.intro .hm-line:first-child.swapped .hm-a .ch{ animation:chOutUp .5s var(--ease) both; animation-delay:calc(var(--ci) * .03s); }
html.intro .hm-line:first-child.swapped .hm-b .ch{ animation:chInUp .6s var(--ease) both; animation-delay:calc(var(--ci) * .04s); }
html.intro .hm-line:last-child.swapped .hm-a .ch{ animation:chOutDown .5s var(--ease) both; animation-delay:calc(var(--ci) * .03s); }
html.intro .hm-line:last-child.swapped .hm-b .ch{ animation:chInDown .72s var(--ease) both; animation-delay:calc(var(--ci) * .055s); }
@keyframes chInUp{ from{ opacity:0; transform:translateY(.72em); } to{ opacity:1; transform:translateY(0); } }
@keyframes chOutUp{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-.72em); } }
@keyframes chInDown{ from{ opacity:0; transform:translateY(-.72em); } to{ opacity:1; transform:translateY(0); } }
@keyframes chOutDown{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(.72em); } }
.home-hero__sub{ font-size:clamp(16px,1.5vw,21px); line-height:1.6; color:var(--ink-soft);
  max-width:58ch; margin:0 auto 38px; }
.home-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.home-hero__note{ margin:16px 0 0; font-family:var(--f-disp); font-size:13.5px; color:var(--muted); }
.home-hero__note b{ color:var(--ink); font-weight:600; }
.home-stats{ display:flex; gap:clamp(26px,5vw,76px); flex-wrap:wrap; justify-content:center;
  margin-top:clamp(54px,9vh,104px); }
.home-stats div{ text-align:center; }
.home-stats b{ display:block; font-family:var(--f-disp); font-weight:700;
  font-size:clamp(28px,3.4vw,44px); line-height:1; letter-spacing:-.01em; }
.home-stats span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ===================== SECTION CANVAS (nodale) ===================== */
.canvas-sec{ padding:clamp(84px,13vh,160px) var(--gut); background:#f6f7f9; }
.canvas-sec__head{ max-width:820px; margin:0 auto; text-align:center; }
.canvas-sec h2{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(30px,4.8vw,62px); line-height:1.04; margin:14px 0 20px; }
.canvas-sec h2 em{ font-style:normal; color:#6a1fd6;
  background:linear-gradient(95deg,#8E2DE2,#4A00E0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.canvas-sec__sub{ font-size:clamp(15px,1.4vw,19px); color:var(--ink-soft); line-height:1.62;
  margin:0 auto; max-width:64ch; }

/* chips = sélecteur de workflow */
.canvas-chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:30px 0 0; }
.canvas-chips__b{ font-family:var(--f-disp); font-size:13px; font-weight:600; letter-spacing:.01em;
  padding:10px 17px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  cursor:pointer; transition:color .25s, border-color .25s, transform .25s, background .25s; }
.canvas-chips__b:hover{ transform:translateY(-2px); border-color:var(--ink); color:var(--ink); }
.canvas-chips__b.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ----- la "scène" node-editor (calquée sur l'app Granular) ----- */
.wfcanvas{ position:relative; --wac:#3b82f6; --vac:#8b5cf6; max-width:1160px; margin:clamp(40px,6vh,72px) auto 0;
  height:clamp(600px,70vh,680px); border-radius:18px; border:1px solid #e9e9ec; background:#fcfcfd;
  box-shadow:0 36px 92px rgba(22,24,44,.12); overflow:hidden; }
.wf__grid{ position:absolute; inset:0;
  background-image:radial-gradient(circle, #dcdde2 1px, transparent 1px); background-size:23px 23px; opacity:.7; }
.wf__topbar{ position:absolute; top:0; left:0; right:0; height:0; z-index:7; }
.wf__wf{ position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px 0 11px; border-radius:9px; background:#fff; border:1px solid #ececef;
  box-shadow:0 4px 14px rgba(22,24,44,.08); font-family:var(--f-disp); font-weight:600; font-size:12.5px; color:var(--ink); }
.wf__wf svg{ width:14px; height:14px; color:#8a8a90; }
.wf__more{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9px; background:#fff;
  border:1px solid #ececef; box-shadow:0 4px 14px rgba(22,24,44,.08); display:grid; place-items:center;
  color:#8a8a90; font-weight:700; letter-spacing:1px; font-size:15px; }
.wf__toolbar{ position:absolute; top:50%; right:16px; transform:translateY(-50%); z-index:7;
  display:flex; flex-direction:column; gap:7px; align-items:center; }
.wf__toolbar button{ width:34px; height:34px; border-radius:9px; border:1px solid #ececef; background:#fff;
  display:grid; place-items:center; color:#8a8a90; box-shadow:0 4px 12px rgba(22,24,44,.07); cursor:default; }
.wf__toolbar button svg{ width:16px; height:16px; }
.wf__toolbar .is-primary{ background:var(--wac); border-color:var(--wac); color:#fff; box-shadow:0 6px 16px rgba(59,130,246,.34); }
.wf__toolbar .sep{ width:20px; height:1px; background:#e9e9ec; margin:3px 0; }

.wf__edges{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.wedge{ fill:none; stroke-width:1.8; stroke-dasharray:5 6; opacity:0; transition:opacity .5s var(--ease) .35s; }
.wfcanvas.in .wedge{ opacity:1; animation:flow 1.15s linear infinite; }
.wedge--img{ stroke:var(--wac); } .wedge--txt{ stroke:#c9cdd6; }
@keyframes flow{ to{ stroke-dashoffset:-22; } }
.welabel{ font-family:var(--f-disp); font-size:8.5px; font-weight:600; letter-spacing:.13em; fill:#a6a7ad; }

.wf__stage{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:50px clamp(58px,5.5vw,82px) 22px 24px; }
.wf__flow{ display:flex; align-items:center; justify-content:space-between; width:100%;
  gap:clamp(12px,1.5vw,34px); transform-origin:center center; }
.wf-col{ display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(10px,1.7vh,18px); flex:1 1 0; min-width:0; }

/* ----- noeud générique ----- */
.wnode{ position:relative; width:100%; max-width:164px; margin-inline:auto;
  background:#fff; border:1px solid #e6e8ec; border-radius:14px;
  box-shadow:0 4px 2px rgba(13,18,31,.04), 0 10px 14px rgba(13,18,31,.09); opacity:0; transition:opacity .5s var(--ease); }
.wnode.is-sm{ max-width:150px; }
.wnode--generator,.wnode--videogen,.wnode--gen3d,.wnode--bgremover{ max-width:196px; background:#f7f8fa; border-radius:16px; }
.wfcanvas.in .wnode{ opacity:1; transition-delay:calc(var(--i,0) * .08s); }
.wnode__head{ display:flex; align-items:center; gap:7px; padding:8px 11px 7px;
  font-family:var(--f-disp); font-weight:600; font-size:12.5px; color:#1a1d21; white-space:nowrap; }
.wnode__head > svg{ width:14px; height:14px; color:#99a3b0; flex:0 0 auto; }
/* en-tête bandeau des générateurs (réf. maquette V2) */
.wnode--generator > .wnode__head,.wnode--videogen > .wnode__head,.wnode--gen3d > .wnode__head,.wnode--bgremover > .wnode__head{
  background:#f4f5f7; border-bottom:1px solid #e6e8ec; border-radius:15px 15px 0 0; padding:9px 12px 8px; }
.wnode__tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.wnode__tools .sld{ width:14px; height:14px; color:#99a3b0; }
.wnode__go{ width:22px; height:22px; border-radius:6px; background:var(--wac); display:grid; place-items:center; }
.wnode__go svg{ width:12px; height:12px; color:#fff; }

/* ports : pastilles "+" bleues, comme l'app */
.wport{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--wac);
  border:2px solid #fff; box-shadow:0 1px 5px rgba(13,18,31,.22); z-index:5; }
.wport::after{ content:"+"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font:700 10px/1 var(--f-disp); padding-bottom:.5px; }
.wport--out{ right:-8px; top:50%; transform:translateY(-50%); }
.wnode__ins{ position:absolute; left:-8px; top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:center; gap:14px; }
.wnode__ins .wport{ position:relative; left:0; }

/* ----- noeud TEXTE (label en onglet flottant, réf. maquette) ----- */
.wnode--text,.wnode--image{ margin-top:24px; }
.wnode--text > .wnode__head,.wnode--image > .wnode__head{ position:absolute; bottom:100%; left:8px;
  padding:5px 11px 4px 9px; background:#fff; border:1px solid #e6e8ec; border-bottom:0;
  border-radius:9px 9px 0 0; font-size:11.5px; gap:6px; }
.wnode--text .wnode__body{ padding:9px 9px 8px; }
.wnode__txt{ font-size:10.5px; line-height:1.5; color:#40454f; background:#f4f5f7; border-radius:8px; padding:8px 9px; }
.wnode__count{ text-align:right; font-size:9px; color:#99a3b0; margin-top:7px; padding-right:2px; }

/* ----- noeud IMAGE (entrée) ----- */
.wnode__media{ margin:0 9px 9px; border-radius:8px; overflow:hidden; aspect-ratio:1/1; background:var(--ph);
  position:relative; }
.wnode--image .wnode__media{ margin-top:9px; }
.wnode__media img{ width:100%; height:100%; object-fit:cover; }
.wnode__badge{ position:absolute; top:7px; left:7px; font-family:var(--f-disp); font-size:8.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(15,15,20,.6); padding:3px 7px; border-radius:5px; }

/* ----- noeud GENERATOR ----- */
.wnode--gen{ width:100%; }
.wnode__body--gen{ padding:10px 11px 11px; display:flex; flex-direction:column; gap:7px; }
.wf-row{ display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:9px;
  background:#e6e8ec; font-size:11px; color:#40454f; font-family:var(--f-disp); }
.wf-row .lbl{ font-weight:600; } .wf-row .val{ margin-left:auto; color:#1a1d21; font-weight:600; display:flex; align-items:center; gap:4px; }
.wf-row .val svg{ width:11px; height:11px; color:#99a3b0; }
.wf-mini{ font-size:10px; color:#99a3b0; font-family:var(--f-disp); font-weight:600; letter-spacing:.02em; }
.wf-seg{ display:flex; background:#e6e8ec; border-radius:9px; padding:3px; gap:3px; }
.wf-seg span{ flex:1; text-align:center; padding:4px 4px; border-radius:7px; font-size:10.5px; font-weight:600;
  color:#40454f; font-family:var(--f-disp); }
.wf-seg span.on{ background:var(--wac); color:#fff; }
.wnode--videogen .wf-seg span.on{ background:var(--vac); }
/* dropdowns / toggle / slider / meta / download / viewport 3D */
.wf-field{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--f-disp); font-size:11px; color:#5c5c62; }
.wf-field .lbl{ font-weight:600; }
.wf-drop{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e2e5ea;
  border-radius:7px; padding:5px 8px; font-size:10px; font-weight:600; color:#1a1d21; white-space:nowrap; }
.wf-drop svg{ width:11px; height:11px; color:#99a3b0; }
.wf-toggle{ display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-disp); font-size:11px; font-weight:600; color:#5c5c62; }
.wf-switch{ position:relative; width:30px; height:17px; border-radius:999px; background:#dde0e6; flex:0 0 auto; }
.wf-switch::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.wf-switch.is-on{ background:var(--wac); }
.wf-switch.is-on::after{ left:auto; right:2px; }
.wf-mini--row{ display:flex; align-items:center; justify-content:space-between; }
.wf-mini--row b{ color:#1b1b1f; font-weight:600; }
.wf-slider{ position:relative; height:5px; border-radius:999px; background:#e6e8ec; }
.wf-slider__fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--wac); }
.wf-slider__knob{ position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px;
  border-radius:50%; background:#fff; border:2px solid var(--wac); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.wf-meta{ margin:0 11px 11px; }
.wf-meta div{ display:flex; align-items:center; justify-content:space-between; padding:6px 0;
  border-top:1px solid #eef0f3; font-family:var(--f-disp); font-size:10.5px; color:#99a3b0; }
.wf-meta div:first-child{ border-top:0; }
.wf-meta b{ color:#1a1d21; font-weight:600; }
.wf-download{ margin:2px 11px 12px; display:flex; align-items:center; justify-content:center; gap:7px;
  height:34px; border-radius:9px; border:0; background:var(--vac); color:#fff; font-family:var(--f-disp);
  font-weight:600; font-size:11.5px; cursor:default; }
.wf-download svg{ width:14px; height:14px; }
.wnode__3d{ margin:0 11px 11px; aspect-ratio:4/3; border-radius:8px; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 22%, #f4f5f9, #e6e7ee); border:1px solid #ececf2; color:#9aa0c4; }
.wnode__3d svg{ width:52px; height:52px; opacity:.75; }
.wnode__3d--live{ background:#fff; border-color:#ececf2; }
.wnode__mv{ width:100%; height:100%; display:block; border-radius:8px; background:#fff; --poster-color:#fff; --progress-bar-color:transparent; --progress-mask:transparent; }
.wnode__mv-poster{ position:absolute; inset:0; display:grid; place-items:center; background:#fff; border-radius:8px; }
.wnode__mv-poster svg{ width:44px; height:44px; color:#c2c5d0; }
.wnode__go--v{ background:var(--vac) !important; }
.wnode--videogen .wf-switch.is-on, .wnode--videogen .wf-slider__fill{ background:var(--vac); }
.wnode--videogen .wf-slider__knob{ border-color:var(--vac); }
.wf-more{ font-size:10.5px; color:#99a3b0; font-family:var(--f-disp); font-weight:600; display:flex; align-items:center; gap:4px; }
.wf-more svg{ width:10px; height:10px; }
/* generator compact (workflows multi-nodes) */
.wnode--gen.is-compact .wnode__body--gen{ padding:0 11px 11px; }
.wnode--gen.is-compact .wf-tag{ font-size:10px; color:#40454f; font-family:var(--f-disp); font-weight:600;
  background:#e6e8ec; border-radius:8px; padding:7px 10px; }

/* ----- noeud OUTPUT ----- */
.wnode__grid{ margin:0 9px 9px; display:grid; gap:5px; }
.wnode__grid.g1{ grid-template-columns:1fr; }
.wnode__grid.g4{ grid-template-columns:1fr 1fr; }
.wout{ aspect-ratio:1/1; border-radius:7px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#2c2470 0%,#6a52ff 42%,#ff9ec9 72%,#8fe7da 100%); }
.wout img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wout::after{ content:""; position:absolute; left:30%; top:24%; width:42%; height:54%; border-radius:8px;
  background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.06)); transform:rotate(-13deg); }
.wout:has(img)::after{ display:none; }
/* variation subtile uniquement sur les tuiles SANS image (placeholders dégradés) */
.wnode__grid .wout:nth-child(2):not(:has(img)){ filter:hue-rotate(-26deg); }
.wnode__grid .wout:nth-child(3):not(:has(img)){ filter:hue-rotate(30deg); }
.wnode__grid .wout:nth-child(4):not(:has(img)){ filter:hue-rotate(14deg); }

/* ----- noeud VIDEO ----- */
.wnode__video{ margin:0 9px 9px; aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1a1830,#3a2f6b 55%,#6a52ff 100%); display:grid; place-items:center; }
.wnode__play{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; }
.wnode__play::after{ content:""; width:0; height:0; border-left:11px solid #2c2470; border-top:7px solid transparent;
  border-bottom:7px solid transparent; margin-left:3px; }
/* vidéo réelle dans le nœud Video Output (garde son ratio, pas de crop) */
.wnode__video--real{ aspect-ratio:auto; background:#000; display:block; }
.wnode__video--real video{ position:static; width:100%; height:auto; display:block; }

@media (max-width:820px){
  .wfcanvas{ aspect-ratio:auto; height:auto; padding:58px 16px 20px; }
  .wf__grid,.wf__edges,.wf__toolbar,.wf__more{ display:none; }
  .wf__stage{ position:static; flex-direction:column; align-items:stretch; padding:0; gap:14px; }
  /* mobile : les nœuds s'empilent à la verticale, pleine largeur lisible */
  .wf__flow{ flex-direction:column; align-items:center; gap:14px; }
  .wf-col{ flex-direction:column; width:100%; align-items:center; gap:14px; flex:none; }
  .wnode{ opacity:1 !important; flex:none; width:100%; max-width:330px; }
  .wnode.is-sm,.wnode--generator,.wnode--videogen,.wnode--gen3d,.wnode--bgremover{ max-width:330px; }
  .wport{ display:none; }
}

/* ===================== SECTION OUTILS ===================== */
.section--home{ padding:clamp(84px,13vh,160px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.tools-head{ text-align:center; max-width:720px; margin:0 auto clamp(44px,6vh,74px); }
.tools-head h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4vw,54px);
  letter-spacing:-.025em; line-height:1.08; margin:12px 0 14px; }
.tools-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); margin:0; }
/* coverflow d'outils : carte centrale en grand, voisines fade ; switch auto 5s ; icône + couleur par section */
.tools-cf{ position:relative; height:clamp(520px,62vh,680px); margin-top:clamp(34px,5vh,60px);
  margin-inline:calc(50% - 50vw + 12px); overflow-x:clip; }   /* pleine largeur (-12px pour la scrollbar) + clip local : le fan saigne jusqu'au bord sans scrollbar (et sans toucher au sticky) */
.tools-cta{ text-align:center; margin-top:clamp(36px,5.5vh,64px); }
/* bande de logos providers, entre showcase et models (aérée) */
.logos-strip{ margin:0 auto; padding-top:clamp(8px,1.5vh,22px); padding-bottom:clamp(34px,5.5vh,78px); }
.tools-cf .tcard{ position:absolute; top:50%; left:50%; width:clamp(320px,46vw,640px); margin:0;
  border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden;
  box-shadow:0 18px 44px rgba(22,24,44,.10); opacity:0; z-index:0; cursor:pointer;
  transform:translate(-50%,-50%) scale(.84);
  transition:transform .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease); }
/* bande de couleur épaisse EN BAS (bord supérieur plat, ne suit pas la courbe) */
.tools-cf .tcard::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c,#2348ff); }
.tools-cf .tcard.is-active{ box-shadow:0 38px 86px rgba(22,24,44,.22); }
.tcard__img{ position:relative; aspect-ratio:7/4; background:#eef0f6; }
.tcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tcard__body{ padding:clamp(18px,1.8vw,28px); }
.tcard__ico{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px;
  background:rgba(35,72,255,.12); background:color-mix(in srgb, var(--c,#2348ff) 15%, transparent); margin-bottom:14px; }
.tcard__ico svg{ width:20px; height:20px; color:var(--c,#2348ff); }
.tcard__body h3{ font-family:var(--f-disp); font-weight:600; font-size:21px; margin:0 0 8px; letter-spacing:-.01em; }
.tcard__body p{ color:var(--ink-soft); font-size:14.5px; line-height:1.5; margin:0; }
@media (max-width:600px){ .tools-cf .tcard{ width:66vw; } .tools-cf{ height:clamp(440px,56vh,560px); } }   /* carte centrale réduite : les voisines dépassent et restent cliquables */

/* ===================== SHOWCASE / CTA PORTFOLIO ===================== */
.showcase-sec{ padding:clamp(84px,13vh,160px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.showcase-head{ text-align:center; max-width:720px; margin:0 auto clamp(40px,6vh,66px); }
.showcase-head h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4vw,54px);
  letter-spacing:-.025em; line-height:1.06; margin:12px 0 14px; }
.showcase-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); margin:0; }
/* panel : mur d'assets défilant (parallax clippé, façon In hand) + overlay prompt au survol */
.gallery-window{ position:relative; overflow:hidden; height:clamp(480px,74vh,700px); margin-top:clamp(30px,5vh,56px);
  -webkit-mask:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,18px); align-items:start; }
.gcol{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,18px); will-change:transform; }
.gtile{ position:relative; margin:0; border-radius:13px; overflow:hidden; background:var(--ph);
  box-shadow:0 10px 26px rgba(22,24,44,.08); }
.gtile img{ width:100%; height:auto; display:block; }
.gtile__p{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px 14px 15px;
  background:linear-gradient(to top, rgba(10,10,16,.88), rgba(10,10,16,.25) 56%, transparent);
  color:#fff; font-size:12px; line-height:1.42; font-family:var(--f-body);
  opacity:0; transition:opacity .35s var(--ease); }
.gtile:hover .gtile__p{ opacity:1; }
.gtile__p::before{ content:"Prompt"; position:absolute; top:12px; left:14px; font-family:var(--f-disp);
  font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.showcase-cta{ text-align:center; margin-top:clamp(34px,5vh,54px); }
@media (max-width:900px){ .gallery{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:600px){
  .gallery-window{ height:auto; overflow:visible; -webkit-mask:none; mask:none; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gcol{ transform:none !important; }
  .gallery .gcol:nth-child(n+3){ display:none; }   /* mobile : 8 visuels au lieu de 16 (le défilement parallaxe est désactivé) */
}
@media (prefers-reduced-motion:reduce){
  .gallery-window{ height:auto; overflow:visible; -webkit-mask:none; mask:none; }
  .gcol{ transform:none !important; }
}

/* ===================== PRICING (offre entreprise) ===================== */
/* ===== WHAT YOU CAN BUILD — blocs empilés pleine largeur + connecteur dashed (réf. fourmula) ===== */
/* section sombre : points blancs, titres en blanc, cartes blanches qui flottent */
.build-sec{ --tflash-to:#fff; padding:clamp(84px,13vh,160px) clamp(16px,2.6vw,46px) clamp(94px,14vh,170px);
  background-color:#0e0e12;
  background-image:radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1px); background-size:24px 24px; }
.build-sec .eyebrow{ color:rgba(255,255,255,.46); }
.build-sec .tflash .vio{ background-image:linear-gradient(120deg,#a259f7,#6f3ff2); }   /* violet plus lumineux sur sombre */
.build-sec .psblock__in{ border-color:rgba(255,255,255,.12); box-shadow:0 46px 120px -28px rgba(0,0,0,.7); }
.build-head{ text-align:center; max-width:820px; margin:0 auto clamp(30px,4.6vh,60px); }
.build-head h2{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; line-height:1.03;
  font-size:clamp(30px,5vw,58px); margin:10px 0 0; }
.pstack{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.psblock{ position:sticky; top:calc(84px + var(--n,0) * 16px); }
.psblock + .psblock{ margin-top:clamp(22px,3vh,40px); }
.psblock__in{ position:relative; min-height:min(80vh,700px); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.26fr); grid-template-rows:1fr;
  background:#fff; border:1px solid var(--line); border-radius:clamp(22px,2vw,34px);
  box-shadow:0 40px 110px -34px rgba(22,24,44,.36); transform-origin:50% 0; will-change:transform, opacity; }
.psblock__left{ z-index:3; grid-column:1; display:flex; flex-direction:column; padding:clamp(34px,3.4vw,64px); }
.psblock__head{ max-width:560px; }
.psblock__title{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; line-height:1.03;
  font-size:clamp(27px,3.2vw,46px); margin:14px 0 0; color:var(--ink); }
.psblock__lead{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); line-height:1.6; margin:18px 0 0; max-width:42ch; }
.psblock__sk{ align-self:center; margin:auto 0; display:flex; align-items:center; gap:14px; padding:clamp(26px,3vh,46px) 0; }
.psk{ height:auto; border-radius:16px; border:1px solid var(--line); background:var(--ph); display:block;
  box-shadow:0 18px 40px -12px rgba(22,24,44,.28); }
.psk--solo{ width:clamp(150px,15vw,210px); }
.psblock__sk--two .psk{ width:clamp(112px,11vw,156px); aspect-ratio:1/1; object-fit:cover; }
.psblock__sk--two .psk--1{ transform:rotate(-5deg); }
.psblock__sk--two .psk--2{ transform:rotate(4deg); margin-left:-18px; }
.psk-arrow{ flex:0 0 auto; width:26px; height:26px; color:var(--muted); }
.psk-arrow svg{ width:100%; height:100%; }
.psblock__img{ position:relative; z-index:1; grid-column:2; }
.psblock__main{ position:absolute; top:clamp(30px,3.2vw,58px); left:0; width:100%; height:calc(100% - clamp(30px,3.2vw,58px)); object-fit:cover; object-position:left center; display:block; border-radius:16px 16px 0 0; }
.psblock__wire{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.psblock__wire path{ fill:none; stroke:#c4c8d2; stroke-width:1.6; stroke-dasharray:5 6; }
.psblock__wire .psw-dot{ fill:#fff; stroke:#b4b8c4; stroke-width:1.5; }
@media (max-width:900px){
  .psblock{ position:static; }
  .psblock + .psblock{ margin-top:clamp(20px,4vh,36px); }
  .psblock__in{ grid-template-columns:1fr; min-height:0; }
  .psblock__left{ padding:clamp(26px,5vw,40px); }
  .psblock__sk{ margin:clamp(22px,4vh,32px) 0 0; align-self:flex-start; padding:0; }
  .psblock__img{ grid-column:1; aspect-ratio:16/10; }   /* reste en colonne unique (sinon colonne fantôme = scroll horizontal) */
  .psblock__main{ top:0; height:100%; border-radius:0; object-position:center; }
  .psblock__wire{ display:none; }
}
/* téléphone : l'empilement sticky n'existe plus -> carrousel à glisser (scroll-snap) */
@media (max-width:760px){
  .pstack{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(clamp(16px,2.6vw,46px) * -1); padding-inline:clamp(16px,2.6vw,46px);
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pstack::-webkit-scrollbar{ display:none; }
  .pstack .psblock{ flex:0 0 86%; scroll-snap-align:center; }
  .psblock + .psblock{ margin-top:0; }
  .psblock__in{ transform:none !important; opacity:1 !important; height:100%; }
}
@media (prefers-reduced-motion:reduce){ .psblock{ position:static; } }

/* ===================== MODELS ===================== */
.models-sec{ padding:clamp(112px,17vh,210px) var(--gut) clamp(28px,4.5vh,64px); }
.models-head{ text-align:center; max-width:720px; margin:0 auto clamp(40px,6vh,66px); }
.models-head h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4vw,54px); letter-spacing:-.025em; line-height:1.06; margin:12px 0 14px; }
.models-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); margin:0; }
.models-list{ max-width:880px; margin:0 auto; border:1px solid var(--line); border-radius:16px; background:#fff;
  overflow:hidden; box-shadow:0 16px 40px rgba(22,24,44,.06); }
.models-list__head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px 8px 12px; border-bottom:1px solid var(--line); }
.models-list__count{ flex:0 0 auto; font-family:var(--f-disp); font-size:12px; font-weight:500; color:var(--muted); padding-right:6px; white-space:nowrap; }
.models-list__count b{ color:var(--ink); font-weight:700; }
/* onglets par modalité */
.models-tabs{ display:flex; gap:3px; flex-wrap:wrap; }
.mtab{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-disp); font-weight:600; font-size:13px;
  color:var(--ink-soft); background:none; border:0; border-radius:9px; padding:7px 11px; cursor:pointer;
  transition:background .15s, color .15s; }
.mtab:hover{ color:var(--ink); background:#f2f2f4; }
.mtab.is-on{ color:var(--tc); background:color-mix(in srgb, var(--tc) 12%, transparent); }
.mtab__n{ font-size:11px; font-weight:600; color:var(--muted); background:#eeeef0; border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.mtab.is-on .mtab__n{ color:var(--tc); background:color-mix(in srgb, var(--tc) 18%, transparent); }
.models-list__scroll{ height:430px; overflow-y:auto; }
.models-list__scroll::-webkit-scrollbar{ width:8px; }
.models-list__scroll::-webkit-scrollbar-thumb{ background:#d8d8dd; border-radius:8px; }
.mrow{ display:flex; align-items:center; gap:14px; padding:11px 20px; border-bottom:1px solid #f1f1f3;
  text-decoration:none; color:inherit; cursor:pointer; transition:background .18s var(--ease); }
.mrow:hover{ background:#f6f7f9; }
.mrow__ext{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px;
  color:var(--muted); opacity:0; transform:translateX(-4px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.mrow__ext svg{ width:16px; height:16px; }
.mrow:hover .mrow__ext{ opacity:1; transform:none; }
.mrow:last-child{ border-bottom:0; }
.mrow__l{ flex:1; min-width:0; }
.mrow__name{ display:block; font-family:var(--f-disp); font-weight:600; font-size:14px; color:var(--ink); }
.mrow__desc{ display:block; font-size:12px; line-height:1.4; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.mrow__cr{ flex:0 0 auto; min-width:52px; text-align:right; font-family:var(--f-disp); font-size:12px; font-weight:600; color:var(--muted); }
/* carrousel de logos providers (SVG monochromes grisés, animation CSS) */
.models-marquee{ max-width:var(--maxw); margin:clamp(28px,4vh,46px) auto 0; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.models-marquee__track{ display:flex; align-items:center; gap:clamp(40px,4.6vw,74px); width:max-content; animation:logoscroll 50s linear infinite; }
.models-marquee:hover .models-marquee__track{ animation-play-state:paused; }
.mlogo{ display:flex; align-items:center; justify-content:center; gap:11px; flex:0 0 auto; height:32px; }
.mlogo img{ height:100%; width:auto; max-width:62px; object-fit:contain;
  filter:brightness(0) invert(.72); opacity:.82; transition:filter .2s, opacity .2s; }
.mlogo__t{ font-family:var(--f-disp); font-weight:600; font-size:clamp(17px,1.8vw,22px); letter-spacing:-.01em;
  color:#b4b5bb; white-space:nowrap; transition:color .2s; }
.models-marquee:hover .mlogo img{ filter:brightness(0) invert(.5); opacity:1; }
.models-marquee:hover .mlogo__t{ color:#85858c; }
@keyframes logoscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .models-marquee__track{ animation:none; } }
@media (max-width:560px){ .mrow__desc{ display:none; } }

/* ===================== SECURITY & CONTROL ===================== */
.security-sec{ padding:clamp(84px,13vh,160px) var(--gut); }
.security-head{ text-align:center; max-width:720px; margin:0 auto clamp(40px,6vh,66px); }
.security-head h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4vw,54px); letter-spacing:-.025em; line-height:1.06; margin:12px 0 14px; }
.security-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); margin:0; }
.security-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.security-card{ border:1px solid var(--line); border-radius:16px; padding:clamp(22px,2vw,30px); background:#fff;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.security-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(22,24,44,.08); }
.security-card__ico{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  background:color-mix(in srgb, var(--ac) 12%, transparent); color:var(--ac); margin-bottom:16px; }
.security-card__ico svg{ width:22px; height:22px; }
.security-card h3{ font-family:var(--f-disp); font-weight:600; font-size:17px; margin:0 0 8px; letter-spacing:-.01em; }
.security-card p{ color:var(--ink-soft); font-size:14px; line-height:1.5; margin:0; }
@media (max-width:860px){ .security-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .security-grid{ grid-template-columns:1fr; } }

.pricing-sec{ padding:clamp(84px,13vh,160px) var(--gut); background:#f6f7f9; }
.pricing-head{ text-align:center; max-width:680px; margin:0 auto clamp(40px,6vh,64px); }
.pricing-head h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4vw,54px);
  letter-spacing:-.025em; line-height:1.06; margin:12px 0 14px; }
.pricing-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,19px); margin:0; }
.pricing-grid{ display:flex; justify-content:center; max-width:var(--maxw); margin:0 auto; }
.pricing-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:20px; padding:clamp(28px,2.5vw,40px);
  box-shadow:0 16px 40px rgba(22,24,44,.06); text-align:left; width:min(440px,100%); }
@media (max-width:760px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; } }
.pricing-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--ac); color:#fff; font-family:var(--f-disp); font-weight:600; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px; box-shadow:0 6px 16px rgba(35,72,255,.28); }
.pricing-card h3{ font-family:var(--f-disp); font-weight:700; font-size:clamp(24px,2.8vw,34px); letter-spacing:-.025em; margin:0 0 9px; }
.pricing-card .desc{ color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0 0 22px; }
.pricing-price{ display:flex; align-items:baseline; gap:10px; margin:0 0 8px; }
.pricing-price b{ font-family:var(--f-disp); font-weight:700; font-size:clamp(38px,4.4vw,54px); letter-spacing:-.025em; }
.pricing-price span{ color:var(--muted); font-size:14px; }
.pricing-note{ color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }
.pricing-card .btn{ width:100%; height:52px; font-size:15px; margin:4px 0 24px; }
.pricing-feats{ list-style:none; margin:0; padding:24px 0 0; border-top:1px solid var(--line); display:grid; gap:15px; }
.pricing-feats li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.5; color:var(--ink); }
.pricing-feats svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ac); margin-top:1.5px; }
.pricing-feats li.no{ color:var(--muted); }
.pricing-feats li.no svg{ color:#c8c9cf; }

/* ---------- pricing : composition nodale (cartes reliées à l'offre, façon canvas app) ---------- */
.pnode{ position:relative; max-width:var(--maxw); margin:0 auto; }
/* connecteurs : SVG pleine largeur d'écran, dashed (style app), fondu aux deux bords */
.pnode__edges{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%;
  z-index:1; pointer-events:none; overflow:visible;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.pnode__edges path{ fill:none; stroke:#c7cbd6; stroke-width:1.5; stroke-dasharray:5 6; }
/* rangée centrée symétrique : colonnes latérales de largeur fixe + card au milieu */
.pnode__row{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:clamp(44px,6vw,120px); }
.pnode__side{ flex:0 0 clamp(214px,21vw,288px); display:flex; flex-direction:column; gap:clamp(22px,3.4vh,48px); }
.fcard{ position:relative; z-index:2; width:100%; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:clamp(18px,1.5vw,24px); box-shadow:0 12px 32px rgba(22,24,44,.07);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.fcard:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(22,24,44,.11); }
.fcard__ico{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px;
  background:color-mix(in srgb, var(--ac) 11%, transparent); color:var(--ac); margin-bottom:12px; }
.fcard__ico svg{ width:20px; height:20px; }
.fcard h3{ font-family:var(--f-disp); font-weight:600; font-size:15.5px; letter-spacing:-.01em; margin:0 0 6px; }
.fcard p{ color:var(--ink-soft); font-size:13px; line-height:1.5; margin:0; }
.pnode .pricing-card{ z-index:2; margin:0; flex:0 0 auto; }
@media (max-width:980px){
  .pnode__edges{ display:none; }
  .pnode__row{ flex-direction:column; gap:clamp(26px,4.5vh,42px); }
  .pnode .pricing-card{ order:-1; }
  .pnode__side{ flex:1 1 auto; width:100%; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:18px; }
  .fcard{ max-width:330px; }
}

/* ===================== FOOTER ===================== */
.cta-sec{ text-align:center; padding:clamp(94px,15vh,180px) var(--gut); }
.cta-sec h2{ font-family:var(--f-disp); font-weight:700; font-size:clamp(32px,5vw,66px);
  letter-spacing:-.025em; margin:12px 0 16px; }
.cta-sec p{ color:var(--ink-soft); font-size:clamp(16px,1.5vw,20px); max-width:54ch; margin:0 auto 32px; }
.home-foot{ display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between;
  padding:34px var(--gut); border-top:1px solid var(--line);
  font-family:var(--f-disp); font-size:13px; color:var(--ink-soft); }
.home-foot__brand{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:.06em; }
.home-foot__brand svg{ width:18px; height:18px; }
.home-foot nav{ display:flex; gap:22px; }
.home-foot a:hover{ color:var(--ac); }