/* =========================================================
   BILLIONNAIRE ONLINE -- fiches moteur (site/engines/*.html)
   Charge APRES style.css : ne redefinit que ce qui est propre
   a ces pages. ASCII only, zero police externe.
   ========================================================= */

/* --- hero de fiche --- */
.engine-hero{position:relative;overflow:hidden;padding:74px 0 78px}
.engine-hero .wrap{position:relative;z-index:1}
/* le lien de retour doit occuper sa propre ligne, sinon l'eyebrow se colle a lui */
.engine-hero .back-link{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:20px}
.engine-hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);margin:.35rem 0 1.1rem;max-width:20ch}
.engine-hero p.lead{font-size:1.12rem;color:var(--ink-soft);max-width:62ch;margin-bottom:1.6rem}
.engine-hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.engine-hero .engine-meta{border-top:0;padding-top:0;margin-top:0}
.engine-hero .engine-meta.big .tag{font-size:12px;padding:5px 12px}
.engine-hero .stat-bar{grid-template-columns:repeat(3,1fr);margin-top:44px}
/* style.css etale la derniere stat sur toute la largeur sous 900 px (grille a 2 colonnes) :
   avec 3 stats ca laissait un trou puis une stat seule. On annule. */
.engine-hero .stat-bar .stat:last-child{grid-column:auto}

/* --- ce que vous recevez --- */
.deliver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.deliver{
  background:var(--grad-surface);border:1px solid var(--border);
  border-radius:var(--r);padding:26px 24px;transition:.25s var(--ease);
}
.deliver:hover{border-color:var(--violet);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.deliver h3{font-size:1.02rem;margin-bottom:.55rem;line-height:1.35}
.deliver p{font-size:.93rem;color:var(--ink-soft);line-height:1.65}

/* --- etapes : 4 ou 5 etapes, pas 3 --- */
.how-grid{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.how-step h3{font-size:1rem;margin-bottom:.5rem}
.how-step p{font-size:.92rem;color:var(--ink-soft);line-height:1.65}

/* --- preuve --- */
.proof-box,.access-box{
  max-width:820px;margin:0 auto;padding:30px 30px 28px;
  background:var(--grad-surface);border:1px solid var(--border);border-radius:var(--r);
}
.proof-box.none,.access-box{border-style:dashed;border-color:var(--border-soft)}
.proof-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--border);border-radius:999px;
  padding:4px 11px;margin-bottom:16px;
}
.proof-tag.live{color:var(--mint);border-color:rgba(94,234,212,.35)}
.proof-tag.live i{
  width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(94,234,212,.55);animation:pulseDot 2.2s infinite;
}
@keyframes pulseDot{
  70%{box-shadow:0 0 0 8px rgba(94,234,212,0)}
  100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}
}
.proof-link{
  display:block;font-size:1.22rem;font-weight:700;line-height:1.35;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:.6rem;
}
.proof-link:hover{opacity:.85}
.proof-box p,.access-box p{color:var(--ink-soft);font-size:.95rem;line-height:1.7;max-width:64ch}
.access-box .btn{margin-top:18px}

/* --- les autres moteurs --- */
.engine-nav{margin-top:56px;border-top:1px solid var(--border-soft);padding-top:30px}
.engine-nav h4{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:16px;
}
.engine-nav-links{display:flex;flex-wrap:wrap;gap:10px}
.engine-nav-links a{
  font-size:.88rem;color:var(--ink-soft);border:1px solid var(--border);
  border-radius:999px;padding:7px 15px;transition:.2s var(--ease);
}
.engine-nav-links a:hover{color:var(--ink);border-color:var(--violet);transform:translateY(-2px)}

@media(max-width:860px){
  .engine-hero{padding:56px 0 60px}
  .proof-box,.access-box{padding:24px 20px}
}
@media(max-width:560px){
  .engine-hero .stat-bar{grid-template-columns:1fr}
}

/* --- accessibilite --- */
@media (forced-colors:active){
  /* le degrade en color:transparent disparait en contraste force Windows */
  .proof-link{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .proof-tag.live i{animation:none}
  .deliver,.engine-nav-links a{transition:none}
}
.engine-nav-links a:focus-visible,.proof-link:focus-visible,.copy-btn:focus-visible{
  outline:2px solid var(--mint);outline-offset:3px;border-radius:6px;
}