/* =====================================================
   BERONYX — Styles de pages : réalisations, à propos, services
===================================================== */

/* ---------- Visuel orbital (variante du Hero) ---------- */
.orbit-wrap{ position:relative; }
.orbit-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.orbit{ position:relative; width:100%; height:100%; display:block; overflow:visible; }
.orbit .ring{ transform-origin:200px 200px; }
.orbit .r1{ animation:bxSpin 40s linear infinite reverse; }
.orbit .r3{ animation:bxSpin 90s linear infinite; }
.orbit .spin{ transform-origin:200px 200px; }
.orbit .s1{ animation:bxSpin 18s linear infinite; } .orbit .s2{ animation:bxSpin 32s linear infinite reverse; } .orbit .s3{ animation:bxSpin 55s linear infinite; }
.orbit .pulse{ transform-origin:200px 200px; animation:bxPulse 2.6s ease-in-out infinite; }
.orbit .core{ transition:transform .6s ease; transform-origin:200px 200px; }
.orbit-wrap:hover .core{ transform:scale(1.12); }
.orb-tag{ position:absolute; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-green);
  border:1px solid rgba(0,229,163,.4); border-radius:999px; padding:6px 14px; background:rgba(0,0,0,.6); animation:bxFloat 6s ease-in-out infinite; }
.orb-tag.t1{ top:12%; left:2%; } .orb-tag.t2{ top:46%; right:-2%; color:#5b8dff; border-color:rgba(0,85,255,.55); animation-delay:-2s; } .orb-tag.t3{ bottom:10%; left:8%; animation-delay:-4s; }
@keyframes bxSpin{ to{ transform:rotate(360deg); } }
@keyframes bxPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.7); opacity:.45; } }
@keyframes bxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---------- Formes organiques en fond ---------- */
.bx-blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bx-blobs i{ position:absolute; width:46vw; height:46vw; max-width:640px; max-height:640px; filter:blur(90px); opacity:.16;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:bxMorph 22s ease-in-out infinite, bxDrift 34s ease-in-out infinite; }
.bx-blobs i:nth-child(1){ background:#0055FF; top:-12%; left:-10%; }
.bx-blobs i:nth-child(2){ background:#00E5A3; bottom:-18%; right:-12%; opacity:.11; animation-delay:-8s; }
.bx-blobs i:nth-child(3){ background:#0055FF; top:45%; left:55%; width:30vw; height:30vw; opacity:.09; animation-delay:-14s; }
@keyframes bxMorph{ 0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; } 50%{ border-radius:63% 37% 41% 59% / 58% 62% 38% 42%; } }
@keyframes bxDrift{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(6vw,4vh) rotate(25deg); } }
main, .about-hero, section, footer{ position:relative; z-index:1; }

/* ---------- Réalisations ---------- */
.rx-hero{ padding:170px 0 40px; overflow:hidden; }
.rx-hero h1{ font-size:clamp(56px,10vw,150px); line-height:.95; margin-bottom:28px; }
.rx-hero h1 em{ font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--bx-blue); }
.rx-lead{ max-width:560px; color:var(--bx-muted2); }
.rx-stats{ display:flex; gap:70px; flex-wrap:wrap; margin-top:56px; }
.rx-stats b{ display:block; font-size:clamp(44px,6vw,76px); font-weight:400; letter-spacing:-0.04em; line-height:1; }
.rx-stats div:nth-child(2) b{ color:var(--bx-green); } .rx-stats div:nth-child(3) b{ color:var(--bx-blue); }
.rx-stats span{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bx-muted); }
.rx-marquee{ margin-top:90px; overflow:hidden; }
.rx-track{ display:flex; align-items:center; gap:44px; width:max-content; animation:rxMarq 60s linear infinite; }
.rx-marquee:hover .rx-track{ animation-play-state:paused; }
.rx-track span{ font-size:clamp(44px,7vw,100px); letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22); white-space:nowrap; transition:color .4s, -webkit-text-stroke-color .4s; }
.rx-track span:hover{ color:#fff; -webkit-text-stroke-color:#fff; }
.rx-track i{ width:12px; height:12px; border-radius:50%; background:var(--bx-green); flex:none; }
@keyframes rxMarq{ to{ transform:translateX(-50%); } }
.rx-project{ padding:100px 0; }
.rx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; }
.rx-project.rev .rx-text{ order:2; }
.rx-num{ display:block; font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--bx-green); margin-bottom:18px; }
.rx-text h2{ font-size:clamp(40px,5.5vw,84px); margin-bottom:14px; }
.rx-sub{ font-size:17px; color:var(--bx-muted2); margin-bottom:22px; }
.rx-desc{ font-size:16px; color:var(--bx-muted); margin-bottom:36px; }
.rx-feat{ display:grid; grid-template-columns:1fr 1fr; gap:26px 44px; margin-bottom:34px; }
.rx-feat dt{ font-size:16px; font-weight:400; color:#fff; margin-bottom:4px; }
.rx-feat dd{ font-size:14px; font-weight:200; color:var(--bx-muted); line-height:1.55; }
.rx-visual{ position:sticky; top:130px; }
.rx-visual::before{ content:""; position:absolute; inset:-10% -8%; background:radial-gradient(closest-side,rgba(0,85,255,.28),transparent 72%); filter:blur(30px); opacity:.6; transition:opacity .5s; z-index:-1; }
.rx-project.rev .rx-visual::before{ background:radial-gradient(closest-side,rgba(0,229,163,.22),transparent 72%); }
.rx-visual:hover::before{ opacity:1; }
.rx-tilt{ transform-style:preserve-3d; transition:transform .25s ease-out; will-change:transform; }
.rx-svg{ width:100%; height:auto; display:block; }
.rx-svg .sk{ opacity:.14; animation:rxSk 3.4s ease-in-out infinite; animation-delay:calc(var(--i) * .17s); }
.rx-svg .bar{ transform-box:fill-box; transform-origin:bottom; animation:rxBar 3s ease-in-out infinite; animation-delay:calc(var(--i) * .16s); }
.rx-svg .draw{ stroke-dasharray:620; stroke-dashoffset:620; animation:rxDraw 4.2s ease-in-out infinite; }
.rx-svg .scan{ animation:rxScan 4s ease-in-out infinite; }
@keyframes rxSk{ 0%,100%{ opacity:.1; } 50%{ opacity:.42; } }
@keyframes rxBar{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
@keyframes rxDraw{ 0%{ stroke-dashoffset:620; } 60%,100%{ stroke-dashoffset:0; } }
@keyframes rxScan{ 0%,100%{ transform:translateY(-110px); opacity:0; } 50%{ transform:translateY(80px); opacity:1; } }

/* ---------- À propos : valeurs immersives ---------- */
.values-section{ background:transparent !important; padding:120px 0 !important; }
.values-container{ max-width:1240px; margin:0 auto; padding:0 32px; }
.values-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important; margin-top:70px; }
.value-card{ padding:46px 34px 40px !important; border-radius:24px !important; overflow:hidden; text-align:left !important; }
.value-card:hover{ transform:translateY(-8px); background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(0,85,255,.2),rgba(0,229,163,.05) 55%,transparent 75%) !important; }
.value-card .v-num{ position:absolute; top:22px; right:26px; font-size:64px; font-weight:400; letter-spacing:-0.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); line-height:1; transition:-webkit-text-stroke-color .4s; }
.value-card:hover .v-num{ -webkit-text-stroke-color:var(--bx-green); }
.value-card h3{ font-size:28px !important; margin:26px 0 12px !important; color:#fff !important; }
.value-card p{ font-size:16px !important; color:var(--bx-muted) !important; }
.v-glyph{ width:84px; height:84px; overflow:visible; }
.v-glyph *{ stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-width:1.4; }
.v-glyph .b{ stroke:#0055FF; } .v-glyph .g{ stroke:#00E5A3; } .v-glyph .w{ stroke:rgba(255,255,255,.55); }
.v-glyph .fb{ fill:#0055FF; stroke:none; } .v-glyph .fg{ fill:#00E5A3; stroke:none; }
.v-glyph .a{ animation:vFloat 5s ease-in-out infinite; }
.value-card:hover .v-glyph .h1{ transform:translateX(9px); } .value-card:hover .v-glyph .h2{ transform:translateX(-9px); }
.v-glyph .h1,.v-glyph .h2{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.v-glyph .dash{ stroke-dasharray:140; stroke-dashoffset:140; animation:rxDraw 4s ease-in-out infinite; }
.v-glyph .rot{ transform-box:fill-box; transform-origin:center; animation:bxSpin 14s linear infinite; }
.v-glyph .beat{ transform-box:fill-box; transform-origin:center; animation:bxPulse 2.4s ease-in-out infinite; }
@keyframes vFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* ---------- À propos : héros + étapes ---------- */
.about-hero{ background:transparent !important; padding-top:160px !important; }
.about-hero-content{ display:grid !important; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; max-width:1240px; margin:0 auto; padding:0 32px; }
.about-image{ background:transparent !important; }
.about-image .bx-visual{ max-width:480px; margin:0 auto; aspect-ratio:1/1; }
.stat-box{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.stat-number{ color:var(--bx-blue) !important; font-weight:400 !important; letter-spacing:-0.04em; }
.approach-section .step{ background:transparent !important; box-shadow:none !important; border:0 !important; }
.approach-section .step-number{ background:transparent !important; border:1px solid var(--bx-blue); color:var(--bx-blue) !important; box-shadow:none !important; transition:all .35s; }
.approach-section .step:hover .step-number{ background:var(--bx-blue) !important; color:#fff !important; box-shadow:0 0 30px rgba(0,85,255,.6) !important; }
.cta-about{ background:transparent !important; }
.cta-btn-white{ background:var(--bx-blue) !important; color:#fff !important; border-radius:999px !important; }
.cta-btn-outline{ border:1px solid rgba(255,255,255,.3) !important; border-radius:999px !important; color:#fff !important; background:transparent !important; }

/* ---------- Services : vie graphique ---------- */
.services-image-right{ background:transparent !important; border:0 !important; overflow:visible !important; }
.services-image-right .bx-visual{ width:100%; max-width:420px; margin:0 auto; aspect-ratio:1/1; position:sticky; top:130px; }
.icon-wrap{ position:relative; width:64px; height:64px; display:flex !important; align-items:center; justify-content:center; margin-bottom:22px; font-size:1.5rem; }
.icon-wrap::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(0,85,255,.6); animation:bxSpin 16s linear infinite; }
.icon-wrap::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(0,229,163,.25); animation:bxPulse 3.2s ease-in-out infinite; }
.service-block:hover .icon-wrap::before{ border-color:var(--bx-green); animation-duration:5s; }
.service-block{ border-radius:24px !important; padding:36px !important; }
.pricing-card .price{ font-size:44px !important; font-weight:400 !important; letter-spacing:-0.03em; }

@media (max-width:900px){
  .rx-grid,.about-hero-content{ grid-template-columns:1fr; gap:44px; }
  .rx-project.rev .rx-text{ order:0; }
  .rx-visual,.services-image-right .bx-visual{ position:relative; top:0; }
  .rx-feat{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr !important; }
  .rx-stats{ gap:36px; }
}
@media (prefers-reduced-motion:reduce){ .bx-blobs i,.orbit *,.rx-track,.rx-svg *,.v-glyph *,.icon-wrap::before,.icon-wrap::after,.orb-tag{ animation:none !important; } }

/* ---------- Accueil : bloc applications sur mesure ---------- */
.bx-app{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.bx-app-text p{ font-size:18px; margin-bottom:22px; }
@media (max-width:900px){ .bx-app{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Pages légales : thème Dark Void ---------- */
.legal-container{ background:transparent !important; padding:170px 32px 90px !important; min-height:0 !important; }
.legal-content{ background:transparent !important; border:0 !important; box-shadow:none !important; max-width:820px !important; padding:0 !important; }
.legal-content h1{ color:#fff !important; font-size:clamp(40px,6vw,78px) !important; line-height:1 !important; letter-spacing:-0.04em !important; margin-bottom:20px !important; }
.legal-content h2{ color:#fff !important; font-size:clamp(24px,3vw,34px) !important; letter-spacing:-0.03em !important; margin-top:64px !important; margin-bottom:16px !important; }
.legal-content h3{ color:#fff !important; font-size:19px !important; margin-top:26px !important; margin-bottom:8px !important; }
.legal-content section{ margin-top:8px !important; }
.legal-content p, .legal-content li{ color:var(--bx-muted2) !important; font-size:17px !important; line-height:1.7 !important; margin-bottom:14px !important; }
.legal-content ul{ padding-left:22px !important; margin-bottom:16px !important; }
.legal-content strong{ color:#fff; font-weight:600; }
.legal-content a{ color:var(--bx-blue) !important; }
.last-update{ color:var(--bx-muted) !important; border-bottom:0 !important; font-size:14px !important; letter-spacing:.06em; text-transform:uppercase; margin-bottom:30px !important; }
.legal-content table, .legal-content td, .legal-content th{ border-color:rgba(255,255,255,.15) !important; color:var(--bx-muted2) !important; background:transparent !important; }