/* Thème « néon cosmique » des fiches services (21/10/2026), inspiré de la bannière Génération App :
   nuit d'espace, verre lumineux aux bords cyan → violet, icônes en traits néon, sol en grille. */
@property --nx-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

html.nx .nx-racine{
  --nx-cyan:#22d3ee; --nx-bleu:#3b82f6; --nx-indigo:#818cf8; --nx-violet:#a855f7; --nx-lilas:#c084fc;
  --bg:#030617; --accent:#6d5cff; --accent-2:#22d3ee; --gold:#c084fc; --line:rgba(140,160,255,.14);
  position:relative; isolation:isolate; clip-path:inset(0);
  background:
    radial-gradient(900px 620px at 6% 8%,rgba(34,211,238,.16),transparent 65%),
    radial-gradient(900px 700px at 96% 22%,rgba(168,85,247,.2),transparent 65%),
    radial-gradient(800px 600px at 50% 70%,rgba(59,130,246,.1),transparent 70%),
    linear-gradient(180deg,#030617,#050a24 45%,#030617);
}
html.nx .nx-racine > :not(.nx-ciel){ position:relative; z-index:1; }
.nx-ciel{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }

/* titres */
html.nx .nx-racine .grad{ background:linear-gradient(100deg,#67e8f9,#60a5fa 40%,#a78bfa 70%,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(129,140,248,.35)); }
html.nx .nx-racine .eyebrow{ color:#7dd3fc; text-shadow:0 0 12px rgba(34,211,238,.6); }
html.nx .nx-racine .eyebrow::before{ background:var(--nx-cyan); box-shadow:0 0 10px var(--nx-cyan),0 0 22px var(--nx-violet); }

/* ---------- haut de page : sol en grille + vignette de verre ---------- */
html.nx .presta .hero{ position:relative; overflow:hidden; padding-bottom:110px; }
html.nx .presta .hero > .wrap{ position:relative; z-index:2; }
html.nx .presta .hero::before{ content:""; position:absolute; left:-10%; right:-10%; bottom:0; height:220px; z-index:0;
  background:
    linear-gradient(rgba(96,165,250,.55) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(129,140,248,.45) 1px,transparent 1px) 50% 0/64px 100%;
  transform:perspective(420px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask:linear-gradient(transparent,#000 70%); mask:linear-gradient(transparent,#000 70%);
  animation:nx-sol 6s linear infinite; }
html.nx .presta .hero::after{ content:""; position:absolute; left:0; right:0; bottom:150px; height:120px; z-index:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(96,165,250,.35),transparent 70%); }
@keyframes nx-sol{ to{ background-position:0 34px,50% 0; } }

.nx-tuile{ position:relative; width:118px; height:118px; margin:0 auto 26px; border-radius:26px; display:grid; place-items:center;
  color:#a5f3fc; perspective:600px;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(34,211,238,.35),transparent 55%),
    radial-gradient(110% 90% at 90% 100%,rgba(168,85,247,.45),transparent 60%),
    linear-gradient(150deg,rgba(15,30,80,.85),rgba(20,10,60,.85));
  border:1.5px solid rgba(165,243,252,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 28px rgba(34,211,238,.45),0 0 60px rgba(168,85,247,.35),0 30px 50px -20px rgba(0,0,0,.8);
  transform:rotateY(-14deg) rotateX(6deg); animation:nx-flotte 6s ease-in-out infinite;
  -webkit-box-reflect:below 14px linear-gradient(transparent 55%,rgba(255,255,255,.22)); }
.nx-tuile svg{ width:58px; height:58px; filter:drop-shadow(0 0 6px #22d3ee) drop-shadow(0 0 14px rgba(168,85,247,.8)); }
.nx-tuile .nx-points{ top:12px; left:14px; }
@keyframes nx-flotte{ 50%{ transform:rotateY(10deg) rotateX(-4deg) translateY(-8px); } }

.nx-points{ position:absolute; display:flex; gap:4px; top:16px; left:18px; z-index:2; }
.nx-points b{ width:5px; height:5px; border-radius:50%; background:rgba(186,230,253,.75); box-shadow:0 0 6px rgba(125,211,252,.9); }

/* puces de confiance */
html.nx .presta .trust span{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(15,23,60,.55); border:1px solid rgba(125,211,252,.22); backdrop-filter:blur(6px); }
html.nx .presta .trust b{ color:#e0f2fe; }
.nx-mini{ width:18px; height:18px; flex:none; color:#67e8f9; filter:drop-shadow(0 0 4px #22d3ee); }
html.nx .presta .guarantee{ display:inline-flex; align-items:center; gap:8px; }
html.nx .presta .guarantee .nx-mini{ color:#a78bfa; filter:drop-shadow(0 0 4px #a855f7); }

/* ---------- panneaux de verre (vignettes, livrables, tarif, appel final) ---------- */
html.nx body .nx-verre{
  --c1:var(--nx-cyan); --c2:var(--nx-violet);
  position:relative; overflow:hidden; border:0; border-radius:24px;
  background:
    radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(125,211,252,.08),transparent 60%),
    radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--c1) 16%,transparent),transparent 60%),
    radial-gradient(120% 80% at 100% 100%,color-mix(in srgb,var(--c2) 18%,transparent),transparent 60%),
    linear-gradient(160deg,rgba(12,20,58,.78),rgba(8,8,34,.82));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 60px -30px rgba(0,0,0,.9),0 0 40px -18px color-mix(in srgb,var(--c2) 60%,transparent);
}
/* bord dégradé lumineux */
html.nx body .nx-verre::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:linear-gradient(145deg,var(--c1),rgba(255,255,255,.08) 38%,rgba(255,255,255,.04) 62%,var(--c2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.75; transition:opacity .3s ease;
}
/* reflet qui suit la souris */
html.nx body .nx-verre::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(165,243,252,.16),transparent 65%);
}
html.nx body .nx-survol::before{ opacity:1; }
html.nx body .nx-survol::after{ opacity:1; }
html.nx body .nx-verre > *{ position:relative; z-index:2; }
html.nx body .nx-verre > .nx-points{ position:absolute; }

/* vignettes « pourquoi » : couleur qui glisse du cyan au violet d'une carte à l'autre */
html.nx body .nx-carte{ padding:54px 24px 26px; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease, box-shadow .3s ease; transform-style:preserve-3d; }
html.nx body .nx-carte:nth-child(4n+1){ --c1:#22d3ee; --c2:#3b82f6; }
html.nx body .nx-carte:nth-child(4n+2){ --c1:#38bdf8; --c2:#818cf8; }
html.nx body .nx-carte:nth-child(4n+3){ --c1:#60a5fa; --c2:#a855f7; }
html.nx body .nx-carte:nth-child(4n+4){ --c1:#818cf8; --c2:#d946ef; }
html.nx body .nx-carte.nx-survol{ box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 40px 70px -30px rgba(0,0,0,.9),0 0 50px -10px color-mix(in srgb,var(--c2) 70%,transparent); }
html.nx body .nx-verre:hover{ border-color:transparent; }
.nx-num{ position:absolute !important; top:12px; right:18px; font:800 2.6rem/1 system-ui,sans-serif; letter-spacing:-.04em;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.nx body .nx-ic{ width:62px; height:62px; border-radius:18px; color:var(--c1); font-size:0;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 70%),rgba(6,10,35,.7);
  border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--c1) 70%,transparent),0 0 0 4px color-mix(in srgb,var(--c1) 8%,transparent); }
html.nx body .nx-ic svg{ width:32px; height:32px; filter:drop-shadow(0 0 5px currentColor); }
html.nx body .nx-carte h3{ font-size:1.15rem; color:#f1f5ff; }
html.nx body .nx-carte p{ color:#aab4d6; }

/* ---------- étapes : ligne de lumière qui relie les numéros ---------- */
html.nx .presta .step{ align-items:stretch; }
html.nx .presta .step .num{ display:flex; flex-direction:column; align-items:center; }
html.nx .presta .step .num .tile{ width:48px; height:48px; border-radius:50%; font-size:1.15rem; color:#fff; border:0;
  background:radial-gradient(circle at 50% 35%,rgba(129,140,248,.45),rgba(6,10,35,.95) 70%);
  box-shadow:0 0 0 1.5px rgba(125,211,252,.7) inset,0 0 18px rgba(34,211,238,.5),0 0 34px -6px rgba(168,85,247,.7);
  text-shadow:0 0 10px #67e8f9; }
html.nx .presta .step:not(:last-child) .num::after{ content:""; flex:1; width:2px; margin:8px 0 -30px; border-radius:2px;
  background:linear-gradient(180deg,rgba(34,211,238,.8),rgba(168,85,247,.5) 70%,transparent);
  box-shadow:0 0 10px rgba(34,211,238,.6); }
html.nx .presta .step h3{ color:#f1f5ff; }

/* ---------- livrables ---------- */
html.nx .presta #livrables .card{ padding:36px 32px; }
html.nx .presta .check li::before{ color:#67e8f9 !important; text-shadow:0 0 8px #22d3ee; position:absolute; left:0; top:0; }
/* le gras et la suite restent sur la même ligne (le flex d'origine les mettait en deux colonnes) */
html.nx .presta .check li{ display:block; position:relative; padding-left:24px; }

/* ---------- tarif : bord qui tourne ---------- */
html.nx .presta .price-card{ padding-top:34px; }
html.nx body .nx-tourne{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease; }
html.nx body .nx-tourne::before{ padding:2px; opacity:1;
  background:conic-gradient(from var(--nx-a),#22d3ee,#3b82f6 25%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.05) 60%,#a855f7 75%,#22d3ee);
  animation:nx-tourne 6s linear infinite; }
@keyframes nx-tourne{ to{ --nx-a:360deg; } }
html.nx .presta .price-card .amount{ background:linear-gradient(100deg,#a5f3fc,#fff 45%,#d8b4fe); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(129,140,248,.55)); }
html.nx .presta .price-card .badge{ color:#e0f2fe; background:linear-gradient(90deg,rgba(34,211,238,.3),rgba(168,85,247,.35));
  border:1px solid rgba(165,243,252,.45); box-shadow:0 0 16px rgba(34,211,238,.35); }
html.nx .presta .price-card li::before{ color:#67e8f9 !important; text-shadow:0 0 8px #22d3ee; }

/* ---------- questions ---------- */
html.nx .presta .acc details{ background:linear-gradient(160deg,rgba(12,20,58,.7),rgba(8,8,34,.75)) !important;
  border:1px solid rgba(125,211,252,.16) !important; border-radius:18px !important; backdrop-filter:blur(8px); transition:border-color .3s ease, box-shadow .3s ease; }
html.nx .presta .acc details[open]{ border-color:rgba(167,139,250,.55) !important; box-shadow:0 0 30px -10px rgba(168,85,247,.6); }
html.nx .presta .acc .plus{ color:#67e8f9; text-shadow:0 0 8px #22d3ee; }

/* ---------- appel final ---------- */
html.nx body .nx-final{ --c1:#22d3ee; --c2:#d946ef;
  background:
    radial-gradient(60% 90% at 0% 50%,rgba(34,211,238,.22),transparent 60%),
    radial-gradient(60% 90% at 100% 50%,rgba(168,85,247,.28),transparent 60%),
    linear-gradient(160deg,rgba(10,16,50,.85),rgba(12,6,40,.88)); }

@media (max-width:700px){
  .nx-tuile{ width:96px; height:96px; border-radius:22px; }
  .nx-tuile svg{ width:46px; height:46px; }
  html.nx .presta .hero{ padding-bottom:80px; }
  html.nx .presta .hero::before{ height:150px; }
  html.nx body .nx-carte{ padding:50px 20px 22px; }
  .nx-num{ font-size:2.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .nx-tuile,html.nx .presta .hero::before,html.nx body .nx-tourne::before{ animation:none !important; }
}

/* ---------- fiche « Création de sites » (gabarit v5) ---------- */
html.nx-site .nx-tete{ position:relative; padding-right:190px; }
html.nx-site .nx-tete .nx-tuile{ position:absolute; right:20px; top:6px; margin:0; }
html.nx-site .nx-racine .head-title{ text-shadow:0 0 40px rgba(96,165,250,.25); }
html.nx-site .prix-bandeau,html.nx-site .tarif{ border-radius:24px; }
html.nx-site .nx-racine .actuel{ background:linear-gradient(100deg,#a5f3fc,#fff 45%,#d8b4fe); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(129,140,248,.55)); }
html.nx-site .nx-racine .actuel small{ -webkit-text-fill-color:#a5b4fc; }
html.nx-site .nx-racine .badge{ color:#e0f2fe; background:linear-gradient(90deg,rgba(34,211,238,.3),rgba(168,85,247,.35));
  border:1px solid rgba(165,243,252,.45); box-shadow:0 0 16px rgba(34,211,238,.35); }
html.nx-site .demo:nth-child(2n){ --c1:#818cf8; --c2:#d946ef; }
html.nx-site .demo .browser-bar{ background:rgba(6,10,35,.85); border-bottom:1px solid rgba(125,211,252,.18); }
html.nx-site .inclus .bloc.nx-carte{ padding-top:58px; }
html.nx-site .inclus .bloc .nx-ic{ display:grid; place-items:center; margin-bottom:16px; }
html.nx-site .etapes > li.nx-carte{ padding:26px 22px; }
.nx-etape{ display:block; margin:0 0 12px; font:800 2rem/1 system-ui,sans-serif; letter-spacing:-.03em;
  background:linear-gradient(100deg,#67e8f9,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.6)); }
html.nx-site .nx-racine .cta.nx-final{ border-radius:24px; }
@media (max-width:819px){
  html.nx-site .nx-tete{ padding-right:0; }
  html.nx-site .nx-tete .nx-tuile{ position:relative; right:auto; top:auto; width:84px; height:84px; border-radius:20px; margin:0 0 22px 10px; }
  html.nx-site .nx-tete .nx-tuile svg{ width:40px; height:40px; }
}

/* ---------- fiches applications (gabarit .app-hero) ---------- */
html.nx-appli .nx-racine{ overflow-x:clip; }
html.nx-appli .nx-racine .app-hero{ position:relative; padding-bottom:70px; }
html.nx-appli .nx-racine .app-hero > *{ position:relative; z-index:2; }
html.nx-appli .nx-racine .app-hero::before{ content:""; position:absolute; left:-12%; right:-12%; bottom:0; height:170px; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(96,165,250,.5) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(129,140,248,.4) 1px,transparent 1px) 50% 0/64px 100%;
  transform:perspective(420px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask:linear-gradient(transparent,#000 70%); mask:linear-gradient(transparent,#000 70%);
  animation:nx-sol 6s linear infinite; }
html.nx-appli .nx-racine h1{ background:linear-gradient(100deg,#e0f2fe,#a5f3fc 35%,#c4b5fd 75%,#f0abfc); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(129,140,248,.35)); }
html.nx-appli .nx-racine .tag{ color:#7dd3fc; text-shadow:0 0 12px rgba(34,211,238,.6); }
html.nx-appli .nx-racine .chip{ background:rgba(15,23,60,.55); border:1px solid rgba(125,211,252,.25); color:#e0f2fe; backdrop-filter:blur(6px); }
.nx-cadre{ position:relative; flex:none; display:grid; place-items:center; width:78px; height:78px; border-radius:22px;
  background:radial-gradient(120% 90% at 20% 10%,rgba(34,211,238,.32),transparent 55%),radial-gradient(110% 90% at 90% 100%,rgba(168,85,247,.42),transparent 60%),rgba(10,16,50,.85);
  border:1.5px solid rgba(165,243,252,.55);
  box-shadow:0 0 24px rgba(34,211,238,.4),0 0 50px rgba(168,85,247,.3); animation:nx-flotte 6s ease-in-out infinite; }
.nx-cadre .ic{ margin:0 !important; border-radius:14px; }

/* encart prix */
html.nx-appli .nx-racine .buy-card.nx-verre{ padding:30px 26px; }
html.nx-appli .nx-racine .price-big{ background:linear-gradient(100deg,#a5f3fc,#fff 45%,#d8b4fe); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(129,140,248,.55)); }

/* avantages */
html.nx-appli .nx-racine .benefits{ gap:16px; }
html.nx body .nx-carte.nx-benef{ padding:20px 22px; display:flex; gap:14px; align-items:flex-start; }
html.nx-appli .nx-benef .ck{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--c1);
  background:rgba(6,10,35,.7); border:1px solid color-mix(in srgb,var(--c1) 60%,transparent); box-shadow:0 0 16px -2px color-mix(in srgb,var(--c1) 70%,transparent); }
html.nx-appli .nx-benef .ck svg{ filter:drop-shadow(0 0 4px currentColor); }
html.nx-appli .nx-benef > span:last-child{ color:#dbe4ff; }

/* vidéo et texte */
html.nx-appli .nx-racine figure.demo.nx-verre{ padding:10px; }
html.nx-appli .nx-racine figure.demo video{ border-radius:16px; }
html.nx-appli .nx-racine .app-body h2{ background:linear-gradient(100deg,#67e8f9,#60a5fa 40%,#a78bfa 75%,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.nx-appli .nx-racine .app-body strong{ color:#e0f2fe; }
html.nx-appli .nx-racine .app-body li::marker{ color:#67e8f9; }
.nx-table{ margin:22px 0; padding:6px; overflow-x:auto; }
.nx-table table{ width:100%; margin:0 !important; border:0 !important; background:transparent !important; }
.nx-table th,.nx-table td{ border-color:rgba(125,211,252,.14) !important; background:transparent !important; }
.nx-table th{ color:#a5f3fc; }
@media (max-width:700px){
  html.nx-appli .nx-racine .app-hero{ padding-bottom:50px; }
  html.nx-appli .nx-racine .app-hero::before{ height:120px; }
  .nx-cadre{ width:66px; height:66px; border-radius:18px; }
  .nx-table th,.nx-table td{ padding:8px 6px !important; font-size:.84rem; }
}
@media (prefers-reduced-motion:reduce){
  html.nx-appli .nx-racine .app-hero::before,.nx-cadre{ animation:none !important; }
}