/* =========================================================
   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); }
@media (max-width:720px){ .nav__link{ display:none; } }   /* Portfolio passe dans le hamburger ; Get started reste visible */

/* ----- 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:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ----- 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; }

/* ===================== 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{ position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle, var(--line) 1.2px, transparent 1.2px);
  background-size:34px 34px;
  -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:#c77ddb;
  background:linear-gradient(95deg,#a78bfa,#e879c9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.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:var(--bg-alt); }
.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:#c77ddb;
  background:linear-gradient(95deg,#a78bfa,#e879c9); -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(--ac); color:#fff; border-color:var(--ac); }

/* ----- la "scène" node-editor (calquée sur l'app Granular) ----- */
.wfcanvas{ position:relative; --vac:#7c5cff; 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(--ac); border-color:var(--ac); color:#fff; box-shadow:0 6px 16px rgba(35,72,255,.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(--ac); } .wedge--txt{ stroke:#c4c5cb; }
@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 #eaeaed; border-radius:13px;
  box-shadow:0 9px 24px rgba(22,24,44,.08); opacity:0; transition:opacity .5s var(--ease); }
.wnode.is-sm{ max-width:150px; }
.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:12px; color:#1b1b1f; }
.wnode__head > svg{ width:14px; height:14px; color:#9a9aa0; flex:0 0 auto; }
.wnode__tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.wnode__tools .sld{ width:14px; height:14px; color:#b4b4ba; }
.wnode__go{ width:22px; height:22px; border-radius:7px; background:var(--ac); display:grid; place-items:center; }
.wnode__go svg{ width:12px; height:12px; color:#fff; }

/* ports */
.wport{ position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid #c7c8ce; z-index:5; }
.wport--out{ right:-6px; top:50%; transform:translateY(-50%); }
.wport--img{ border-color:var(--ac); }
.wport--txt{ border-color:#c4c5cb; }
.wnode__ins{ position:absolute; left:-6px; top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:center; gap:16px; }
.wnode__ins .wport{ position:relative; left:0; }

/* ----- noeud TEXTE ----- */
.wnode--text .wnode__body{ padding:0 11px 9px; }
.wnode__txt{ font-size:10.5px; line-height:1.5; color:#5c5c62; }
.wnode__count{ text-align:right; font-size:9px; color:#b4b4ba; margin-top:7px; }

/* ----- 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__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:0 10px 10px; display:flex; flex-direction:column; gap:5px; }
.wf-row{ display:flex; align-items:center; gap:8px; height:27px; padding:0 10px; border-radius:8px;
  background:#f4f4f6; font-size:11px; color:#4a4a50; font-family:var(--f-disp); }
.wf-row .lbl{ font-weight:600; } .wf-row .val{ margin-left:auto; color:#1b1b1f; font-weight:600; display:flex; align-items:center; gap:4px; }
.wf-row .val svg{ width:11px; height:11px; color:#9a9aa0; }
.wf-mini{ font-size:10px; color:#9a9aa0; font-family:var(--f-disp); font-weight:600; letter-spacing:.02em; }
.wf-seg{ display:flex; background:#f1f1f4; border-radius:9px; padding:3px; gap:2px; }
.wf-seg span{ flex:1; text-align:center; padding:4px 4px; border-radius:7px; font-size:10.5px; font-weight:600;
  color:#7a7a80; font-family:var(--f-disp); }
.wf-seg span.on{ background:var(--ac); color:#fff; box-shadow:0 2px 8px rgba(35,72,255,.3); }
/* 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 #e6e6ea;
  border-radius:7px; padding:5px 8px; font-size:10px; font-weight:600; color:#1b1b1f; white-space:nowrap; }
.wf-drop svg{ width:11px; height:11px; color:#9a9aa0; }
.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:#d6d6dc; 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(--ac); }
.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:#e6e6ea; }
.wf-slider__fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--ac); }
.wf-slider__knob{ position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px;
  border-radius:50%; background:#fff; border:2px solid var(--ac); 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 #f0f0f2; font-family:var(--f-disp); font-size:10.5px; color:#8a8a90; }
.wf-meta div:first-child{ border-top:0; }
.wf-meta b{ color:#1b1b1f; 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__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:#9a9aa0; 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:#6a6a70; font-family:var(--f-disp); font-weight:600;
  background:#f4f4f6; border-radius:7px; 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 14px 18px; }
  .wf__grid,.wf__edges,.wf__toolbar,.wf__more{ display:none; }
  .wf__stage{ position:static; flex-direction:column; align-items:stretch; padding:0; gap:14px; }
  .wf-col{ flex-direction:row; flex-wrap:wrap; gap:12px; }
  .wnode{ opacity:1 !important; flex:1 1 200px; }
  .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(460px,54vh,580px); margin-top:clamp(34px,5vh,60px); }
.tools-cf .tcard{ position:absolute; top:50%; left:50%; width:clamp(310px,40vw,520px); 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:80vw; } }

/* ===================== 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; }
}
@media (prefers-reduced-motion:reduce){
  .gallery-window{ height:auto; overflow:visible; -webkit-mask:none; mask:none; }
  .gcol{ transform:none !important; }
}

/* ===================== PRICING (offre entreprise) ===================== */
.pricing-sec{ padding:clamp(84px,13vh,160px) var(--gut); background:var(--bg-alt); }
.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(30px,4.4vw,56px);
  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:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px);
  max-width:940px; margin:0 auto; align-items:stretch; }
.pricing-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:24px; padding:clamp(26px,3vw,40px);
  box-shadow:0 20px 50px rgba(22,24,44,.07); text-align:left; }
.pricing-card--ent{ border:1.6px solid var(--ac); box-shadow:0 30px 70px rgba(35,72,255,.14); }
@media (max-width:760px){ .pricing-grid{ grid-template-columns:1fr; max-width:460px; } }
.pricing-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--ac); color:#fff; font-family:var(--f-disp); font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(35,72,255,.3); }
.pricing-card h3{ font-family:var(--f-disp); font-weight:700; font-size:26px; margin:6px 0 8px; }
.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 4px; }
.pricing-price b{ font-family:var(--f-disp); font-weight:700; font-size:clamp(40px,5vw,58px); letter-spacing:-.02em; }
.pricing-price span{ color:var(--muted); font-size:14px; }
.pricing-note{ color:var(--ink-soft); font-size:13.5px; margin:0 0 26px; }
.pricing-card .btn{ width:100%; margin-bottom:28px; }
.pricing-feats{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.pricing-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--ink); }
.pricing-feats svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ac); margin-top:1px; }
.pricing-feats li.no{ color:var(--muted); }
.pricing-feats li.no svg{ color:#c8c9cf; }
.pricing-card .btn{ width:100%; margin:4px 0 24px; }
.pricing-card h3{ margin-top:0; }

/* ===================== 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); }