/* =========================================================
   DÉVELOPPEMENT SUR-MESURE HTML / PHP NATIF — "ZÉRO SUPERFLU"
   Terminal PHP vivant · purge de la pile CMS · benchmark de
   vitesse · docblock témoignage. Double thème clair/sombre.
   ========================================================= */
#px{
  --bg:#F7F5F1; --bg2:#FFFFFF; --ink:#0B0B0A; --soft:rgba(11,11,10,.75); --dim:#6E6E73;
  --line:rgba(11,11,10,.12);   --acc:#FF8A3D; --acc2:#F57323; --ok:#2FA36B; --bad:#C94436;
  --ed:#101010; --edink:#E8E4DC; --tok1:#FF8A3D; --tok2:#7EC8A3; --tok3:#8FB8E8; --tok4:#6E6A63;
  --serif:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  position:relative; background:var(--bg); color:var(--ink); font-family:var(--serif);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
#intro,#cur-dot,#cur-ring{display:none!important}
body.locked{overflow:auto!important;height:auto!important}
[data-theme="dark"] #px{
  --bg:#0B0A09; --bg2:#141312; --ink:#F4F1EB; --soft:rgba(244,241,235,.82); --dim:#98938A;
  --line:rgba(244,241,235,.14); --ok:#3BE07E; --ed:#0D0D0C;
}
#px *{ box-sizing:border-box; }
#px a{ color:inherit; text-decoration:none; }
#px ::selection{ background:var(--acc); color:#0B0B0A; }
.px-wrap{ width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.px-mono{ font-family:var(--mono); }

/* fond blueprint pointé */
#px:before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--line) 1px, transparent 1.2px); background-size:26px 26px; }
#px > *{ position:relative; z-index:1; }

#pxProg{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:95; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acc),var(--acc2)); }

#px.is-ready [data-r]{ opacity:0; transform:translateY(26px); }
#px.is-ready [data-r].in{ opacity:1; transform:none; transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1); transition-delay:var(--d,0s); }

.px-eyebrow{ font-family:var(--mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.px-eyebrow b{ color:var(--acc); }
.px-hl{ background:linear-gradient(rgba(255,138,61,.3),rgba(255,138,61,.3)) no-repeat; background-size:0% 100%; background-position:0 62%; padding:0 .05em; }
#px .px-hl.lit{ background-size:100% 100%; transition:background-size .9s cubic-bezier(.5,0,.1,1) var(--hd,0s); }

.px-btn{ display:inline-flex; align-items:center; gap:.7rem; height:50px; padding:0 1.4rem; border-radius:8px;
  font-family:var(--mono); font-size:.75rem; font-weight:600; border:1.5px solid var(--ink); transition:.4s cubic-bezier(.19,1,.22,1); will-change:transform; }
.px-btn.fill{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }
.px-btn:hover{ background:var(--ink); color:var(--bg); }
.px-btn.fill:hover{ background:var(--acc2); border-color:var(--acc2); color:#0B0B0A; }

/* ================= HERO : TERMINAL + PURGE ================= */
.px-hero{ padding:calc(var(--header-h,80px) + 1.6rem) 0 2rem; }
.px-hero-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.4rem,3.5vw,3rem); align-items:center; }
@media(max-width:920px){ .px-hero-grid{ grid-template-columns:1fr; } }
.px-hero h1{ font-weight:900; letter-spacing:-.045em; line-height:.98; font-size:clamp(1.9rem,4.6vw,3.3rem); max-width:15ch; }
.px-hero h1 span{ color:var(--acc); }
.px-lede{ margin-top:.9rem; font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.6; max-width:52ch; color:var(--soft); }
.px-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem; }

/* Terminal */
.px-term{ background:var(--ed); border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 46px 90px -60px rgba(0,0,0,.7); }
.px-tbar{ display:flex; align-items:center; gap:.5rem; padding:.65rem .9rem; border-bottom:1px solid rgba(255,255,255,.08); }
.px-tbar i{ width:10px; height:10px; border-radius:50%; }
.px-tbar i:nth-child(1){ background:#FF5F57; } .px-tbar i:nth-child(2){ background:#FEBC2E; } .px-tbar i:nth-child(3){ background:#28C840; }
.px-tbar .fn{ margin-left:.6rem; font-family:var(--mono); font-size:.64rem; color:rgba(232,228,220,.55); letter-spacing:.06em; }
.px-tbar .php{ margin-left:auto; font-family:var(--mono); font-size:.6rem; font-weight:700; color:#0B0B0A;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); border-radius:5px; padding:.2rem .5rem; }
.px-tbody{ padding:1rem 1.1rem 1.1rem; font-family:var(--mono); font-size:.76rem; line-height:1.9; color:var(--edink);
  min-height:250px; white-space:pre-wrap; }
.px-tbody .ln{ display:block; min-height:1.9em; }
.px-tbody .p{ color:var(--tok2); }
.px-tbody .t1{ color:var(--tok1); }
.px-tbody .t3{ color:var(--tok3); }
.px-tbody .t4{ color:var(--tok4); font-style:italic; }
.px-tbody .ok{ color:var(--tok2); font-weight:700; }
.px-caret{ display:inline-block; width:7px; height:1.05em; background:var(--acc); vertical-align:-.15em; animation:pxBlink 1s steps(1) infinite; }
@keyframes pxBlink{ 50%{ opacity:0; } }

/* Purge de la pile : CMS rayés → natif */
.px-purge{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.px-purge .old{ font-family:var(--mono); font-size:.62rem; font-weight:600; border:1px solid var(--line);
  border-radius:99px; padding:.4rem .7rem; background:var(--bg2); color:var(--dim); position:relative; transition:.5s; }
.px-purge .old:after{ content:""; position:absolute; left:.5rem; right:.5rem; top:50%; height:1.5px; background:var(--bad);
  transform:scaleX(0); transform-origin:0 50%; }
.px-purge.go .old{ opacity:.38; }
.px-purge.go .old:after{ transform:scaleX(1); transition:transform .5s cubic-bezier(.5,0,.1,1) var(--pd,0s); }
.px-purge .arrow{ font-family:var(--mono); color:var(--acc); font-weight:700; }
.px-purge .new{ font-family:var(--mono); font-size:.62rem; font-weight:700; border-radius:99px; padding:.42rem .75rem;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#0B0B0A; transform:scale(0); }
.px-purge.go .new{ transform:scale(1); transition:transform .5s cubic-bezier(.34,1.8,.64,1) var(--pd,1.4s); }

/* Marquee */
.px-marquee{ overflow:hidden; padding:.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:2rem; }
.px-track{ display:flex; width:max-content; animation:pxMarq 26s linear infinite; }
.px-track:hover{ animation-play-state:paused; }
.px-track span{ font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; padding:0 1.1rem; color:var(--dim); white-space:nowrap; }
.px-track .sep{ color:var(--acc); }
@keyframes pxMarq{ to{ transform:translateX(-50%); } }

/* ================= BENCHMARK (sombre) ================= */
.px-bench{ background:var(--ink); color:var(--bg); padding:clamp(3rem,7vw,5rem) 0; }
[data-theme="dark"] .px-bench{ background:#050505; color:#F4F1EB; }
.px-bench .px-eyebrow{ color:var(--acc2); }
.px-bench h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.3rem); margin-top:.6rem; max-width:22ch; }
.px-race{ margin-top:2rem; display:grid; gap:1.1rem; }
.px-lane{ display:grid; grid-template-columns:150px 1fr 70px; gap:1rem; align-items:center; }
.px-lane .who{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; }
.px-lane .who b{ display:block; font-size:.8rem; color:var(--acc2); letter-spacing:0; }
.px-lane .bar{ height:12px; border-radius:99px; background:rgba(244,241,235,.12); overflow:hidden; position:relative; }
.px-lane .bar i{ position:absolute; inset:0; width:0; border-radius:99px; }
.px-lane.nat .bar i{ background:linear-gradient(90deg,var(--acc),var(--acc2)); }
.px-lane.cms .bar i{ background:rgba(244,241,235,.35); }
.px-race.go .px-lane.nat .bar i{ width:15%; transition:width .8s cubic-bezier(.5,0,.1,1) .3s; }
.px-race.go .px-lane.cms .bar i{ width:96%; transition:width 2.6s cubic-bezier(.4,0,.6,1) .3s; }
.px-lane .tm{ font-family:var(--mono); font-size:.78rem; font-weight:700; text-align:right; }
.px-lane.nat .tm{ color:var(--acc2); }
.px-bench .note{ margin-top:1rem; font-family:var(--mono); font-size:.6rem; color:rgba(244,241,235,.45); }
.px-bstats{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2rem; }
.px-bstat b{ display:block; font-weight:900; letter-spacing:-.04em; font-size:clamp(1.6rem,3.4vw,2.4rem); }
.px-bstat span{ font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(244,241,235,.55); }
@media(max-width:640px){ .px-lane{ grid-template-columns:110px 1fr 58px; } }

/* ================= POURQUOI (4 cartes) ================= */
.px-why{ padding:clamp(3rem,7vw,5rem) 0; }
.px-why-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.px-why-head h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.4rem); max-width:22ch; }
.px-wgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.px-wcard{ border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:1.15rem; position:relative; overflow:hidden;
  transition:.4s cubic-bezier(.19,1,.22,1); }
.px-wcard:hover{ transform:translateY(-5px); border-color:rgba(255,107,26,.5); box-shadow:0 28px 55px -40px rgba(0,0,0,.5); }
.px-wcard:after{ content:""; position:absolute; left:1.15rem; top:0; width:34px; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:0 50%; }
.px-wcard.in:after{ transform:scaleX(1); transition:transform .8s cubic-bezier(.19,1,.22,1) calc(var(--d,0s) + .35s); }
.px-wcard .k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--acc); }
.px-wcard b{ display:block; margin-top:.5rem; font-size:.95rem; letter-spacing:-.015em; line-height:1.2; }
.px-wcard p{ margin-top:.45rem; font-size:.78rem; line-height:1.5; color:var(--dim); }
@media(max-width:980px){ .px-wgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .px-wgrid{ grid-template-columns:1fr; } }

/* ================= AUDIENCE ================= */
.px-aud{ padding:0 0 clamp(3rem,7vw,5rem); }
.px-agrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center; }
.px-arows{ margin-top:1.2rem; }
.px-arow{ display:grid; grid-template-columns:56px 1fr 36px; gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line); transition:.35s; }
.px-arow:first-child{ border-top:1px solid var(--line); }
.px-arow .n{ font-family:var(--mono); font-size:.64rem; color:var(--dim); }
.px-arow h3{ font-weight:800; letter-spacing:-.015em; font-size:.98rem; }
.px-arow .go{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:.7rem; transition:.4s; }
.px-arow:hover{ padding-left:.6rem; }
.px-arow:hover h3{ color:var(--acc); }
.px-arow:hover .go{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; transform:rotate(45deg); }
.px-aimg{ overflow:hidden; border-radius:12px; border:1px solid var(--line); height:clamp(240px,38vh,360px); }
.px-aimg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter .9s,transform 1.1s; }
.px-aimg:hover img{ filter:none; transform:scale(1.05); }
@media(max-width:840px){ .px-agrid{ grid-template-columns:1fr; } }

/* ================= EXPERTISES (5 modules) ================= */
.px-exp{ padding:0 0 clamp(3rem,7vw,5rem); }
.px-egrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.px-ecard{ border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:1.15rem; position:relative; overflow:hidden;
  transition:.4s cubic-bezier(.19,1,.22,1); }
.px-ecard:hover{ transform:translateY(-5px); border-color:rgba(255,107,26,.5); box-shadow:0 28px 55px -40px rgba(0,0,0,.5); }
.px-ecard .path{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--dim); display:flex; align-items:center; gap:.45rem; }
.px-ecard .path:before{ content:"\3C ?php"; font-size:.55rem; color:var(--acc); font-weight:700; }
.px-ecard b{ display:block; margin-top:.5rem; font-size:.98rem; letter-spacing:-.015em; line-height:1.2; }
.px-ecard ul{ margin:.6rem 0 0; padding:0; list-style:none; }
.px-ecard li{ font-size:.78rem; line-height:1.5; color:var(--dim); padding:.22rem 0 .22rem 1.05rem; position:relative; }
.px-ecard li:before{ content:"—"; position:absolute; left:0; color:var(--acc); }
.px-ecard.wide{ grid-column:span 2; }
@media(max-width:980px){ .px-egrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .px-egrid{ grid-template-columns:1fr; } .px-ecard.wide{ grid-column:auto; } }

/* ================= DOCBLOCK TÉMOIGNAGE + AVANTAGES ================= */
.px-proof{ background:var(--ink); color:var(--bg); padding:clamp(3rem,7vw,5rem) 0; }
[data-theme="dark"] .px-proof{ background:#050505; color:#F4F1EB; }
.px-proof .px-eyebrow{ color:var(--acc2); }
.px-pgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.px-doc{ background:var(--ed); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1.2rem 1.3rem;
  font-family:var(--mono); font-size:.78rem; line-height:1.85; color:var(--edink); white-space:pre-wrap;
  box-shadow:0 40px 80px -55px rgba(0,0,0,.8); transform:rotate(-.6deg); transition:transform .5s cubic-bezier(.19,1,.22,1); }
.px-doc:hover{ transform:rotate(0); }
.px-doc .c{ color:var(--tok4); }
.px-doc .s{ color:var(--tok3); }
.px-doc .a{ color:var(--tok1); }
.px-adv h2{ font-weight:900; letter-spacing:-.035em; line-height:1.05; font-size:clamp(1.4rem,3vw,2.1rem); margin-top:.6rem; max-width:20ch; }
.px-advgrid{ display:grid; gap:.7rem; margin-top:1.3rem; }
.px-advgrid > div{ border:1px dashed rgba(255,138,61,.55); border-radius:12px; padding:.9rem 1rem; background:rgba(255,138,61,.06); transition:.35s; }
.px-advgrid > div:hover{ transform:translateX(6px); }
.px-advgrid b{ font-size:.86rem; }
.px-advgrid span{ display:block; margin-top:.25rem; font-size:.76rem; line-height:1.5; color:rgba(244,241,235,.62); }
@media(max-width:840px){ .px-pgrid{ grid-template-columns:1fr; } }

/* ================= PROCESSUS (rail 5 étapes) ================= */
.px-proc{ padding:clamp(3rem,7vw,5rem) 0 0; }
.px-steps{ position:relative; margin-top:1.6rem; max-width:820px; }
.px-rail{ position:absolute; left:24px; top:0; bottom:0; width:1.5px; background:var(--line); }
.px-rail i{ position:absolute; inset:0; background:var(--acc); transform:scaleY(0); transform-origin:0 0; display:block; }
.px-steps.lit .px-rail i{ transform:scaleY(1); transition:transform 1.6s cubic-bezier(.5,0,.1,1); }
.px-step{ display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:.9rem 0; align-items:baseline; }
.px-step .no{ font-family:var(--mono); font-weight:700; font-size:.95rem; color:var(--acc); position:relative; }
.px-step .no i{ position:absolute; left:19px; top:.2em; width:11px; height:11px; border-radius:50%; background:var(--bg);
  border:2px solid var(--acc); }
.px-step h3{ font-weight:800; letter-spacing:-.015em; font-size:1.02rem; }
.px-step p{ margin-top:.3rem; font-size:.82rem; line-height:1.55; color:var(--dim); max-width:60ch; }

/* ================= CTA ================= */
.px-final{ padding:clamp(2.6rem,6vw,4rem) 0 clamp(3.5rem,8vw,6rem); text-align:center; }
.px-final h2{ font-weight:900; letter-spacing:-.04em; line-height:.96; font-size:clamp(1.9rem,4.8vw,3.4rem); }
.px-final h2 em{ font-style:normal; color:var(--acc); }
.px-final p{ margin:1.1rem auto 1.8rem; color:var(--dim); max-width:52ch; line-height:1.6; }

@media(prefers-reduced-motion:reduce){
  #px *{ animation:none !important; }
  #px.is-ready [data-r]{ opacity:1 !important; transform:none !important; }
  .px-hl{ background-size:100% 100% !important; }
  .px-purge .old{ opacity:.38 !important; } .px-purge .old:after{ transform:scaleX(1) !important; }
  .px-purge .new{ transform:scale(1) !important; }
  .px-race .px-lane.nat .bar i{ width:15% !important; } .px-race .px-lane.cms .bar i{ width:96% !important; }
  .px-steps .px-rail i{ transform:scaleY(1) !important; }
  .px-wcard:after{ transform:scaleX(1) !important; }
  .px-doc{ transform:none !important; }
}