/* =========================================================
   PAGE AJAX — inspirée du site officiel Ajax (sombre, immersif)
   ========================================================= */
:root{ --ajax-green:#4ade80; --ajax-green-deep:#22c55e; }

.ajax-page{ background:#050506; }

/* hero */
.ajax-hero{
  position:relative; text-align:center;
  padding-block:clamp(64px,10vw,130px);
  background:radial-gradient(90% 80% at 50% 0%, rgba(74,222,128,.08), transparent 60%), #050506;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ajax-hero .eyebrow{ color:var(--ajax-green); justify-content:center; }
.ajax-hero .eyebrow::before{ background:var(--ajax-green); }
.ajax-hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem); font-weight:600; letter-spacing:.08em;
  margin:1.2rem auto 0; max-width:16ch; text-transform:uppercase;
}
.ajax-hero p{ color:var(--ink-soft); max-width:60ch; margin:1.6rem auto 0; font-size:1.05rem; }
.ajax-hero .actions{ margin-top:2.2rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.btn.ajax{ background:var(--ajax-green); color:#052e16; }
.btn.ajax:hover{ background:#5eeb90; }

/* offre bandeau */
.ajax-offer{
  margin:clamp(40px,6vw,72px) auto 0; max-width:var(--maxw);
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  text-align:center;
}
.ajax-offer .pct{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4vw,3rem); color:var(--ajax-green); }
.ajax-offer .txt{ color:var(--ink-soft); font-size:1.05rem; }

/* grille de tuiles façon Ajax */
.ajax-tiles{ padding-block:clamp(48px,7vw,88px); }
.ajax-tiles-grid{
  display:grid; gap:16px;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "big cam control"
    "big auto control";
}
.ajax-tile{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,#141416,#0a0a0c);
  min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.8rem; transition:border-color .3s, transform .3s;
}
.ajax-tile:hover{ border-color:rgba(74,222,128,.4); transform:translateY(-3px); }
.ajax-tile.big{ grid-area:big; min-height:480px; justify-content:center; align-items:flex-start; }
.ajax-tile.cam{ grid-area:cam; }
.ajax-tile.auto{ grid-area:auto; }
.ajax-tile.control{ grid-area:control; }
.ajax-tile .glow{
  position:absolute; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,.18), transparent 65%); filter:blur(30px);
  width:70%; aspect-ratio:1; top:-10%; right:-10%;
}
.ajax-tile .ic{ position:relative; z-index:2; width:52px; height:52px; color:var(--ajax-green); margin-bottom:1rem; }
.ajax-tile h3{ position:relative; z-index:2; font-size:1.4rem; }
.ajax-tile.big h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); max-width:12ch; }
.ajax-tile p{ position:relative; z-index:2; color:var(--ink-mute); font-size:.9rem; margin-top:.6rem; max-width:34ch; }
.ajax-tile .chev{
  position:absolute; bottom:1.6rem; right:1.6rem; z-index:2;
  width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s;
}
.ajax-tile:hover .chev{ background:var(--ajax-green); border-color:var(--ajax-green); color:#052e16; }
.ajax-tile .chev svg{ width:18px; height:18px; }

/* étapes / méthode */
.ajax-steps{ padding-block:clamp(48px,7vw,88px); border-top:1px solid rgba(255,255,255,.06); }
.ajax-steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:2.4rem; }
.ajax-step{ text-align:center; padding:1.6rem; }
.ajax-step .n{ font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--ajax-green); }
.ajax-step h4{ font-family:var(--display); font-size:1.05rem; margin:.8rem 0 .5rem; }
.ajax-step p{ color:var(--ink-mute); font-size:.86rem; }

/* CTA final */
.ajax-cta{ padding-block:clamp(56px,8vw,100px); text-align:center; border-top:1px solid rgba(255,255,255,.06); }
.ajax-cta h2{ font-size:clamp(1.8rem,4vw,2.8rem); }
.ajax-cta p{ color:var(--ink-soft); max-width:52ch; margin:1.2rem auto 2rem; }

@media (max-width:900px){
  .ajax-tiles-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"big big" "cam control" "auto auto"; }
  .ajax-tile.big{ min-height:340px; }
  .ajax-steps-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .ajax-tiles-grid{ grid-template-columns:1fr; grid-template-areas:"big" "cam" "auto" "control"; }
  .ajax-steps-grid{ grid-template-columns:1fr; }
}

/* visuel hero produit */
.ajax-hero-visual{
  margin:clamp(40px,6vw,64px) auto 0; max-width:900px;
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.ajax-hero-visual img{ width:100%; display:block; }

/* section pack */
.ajax-pack{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.ajax-pack-media{
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,#101012,#050506); padding:1.5rem;
}
.ajax-pack-media img{ width:100%; display:block; }
.ajax-pack-copy h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:.9rem 0 1rem; }
.ajax-pack-copy p{ color:var(--ink-soft); }
.ajax-pack-list{ list-style:none; margin:1.4rem 0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.ajax-pack-list li{ position:relative; padding-left:1.6rem; color:var(--ink-soft); font-size:.92rem; }
.ajax-pack-list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--ajax-green); }
@media (max-width:900px){ .ajax-pack{ grid-template-columns:1fr; } }