/* =====================================================================
   PIXEART — factory.css (couche « usine de technologie », v1)
   S'ajoute à motion.css. Même règles : or / ivoire / nuit, aucun dégradé de couleur,
   on n'anime que opacity / translate / scale / rotate, tout est coupé si l'appareil
   demande « réduire les animations » (classe html.mo absente) et sans JavaScript rien n'est caché.
   ===================================================================== */
@keyframes fa-fade{from{opacity:0}to{opacity:1}}
@keyframes fa-scan{0%{translate:0 -100%;opacity:0}6%{opacity:1}74%{opacity:1}80%,100%{translate:0 0;opacity:0}}
@keyframes fa-blink{0%,100%{opacity:0;scale:.6}45%,55%{opacity:.7;scale:1}}
@keyframes fa-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes fa-rip{from{scale:.1;opacity:.55}to{scale:1;opacity:0}}
@keyframes fa-sweep{0%{translate:0 0;opacity:.95}100%{translate:0 var(--fh,420px);opacity:0}}

/* ---------- 1. HERO : quadrillage de plan + balayage + repères ---------- */
.hero{isolation:isolate}
.fa-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23F1EDE2' stroke-opacity='.075'/%3E%3C/svg%3E");
  background-size:56px 56px;
  -webkit-mask:radial-gradient(ellipse 78% 72% at 50% 46%,#000 28%,transparent 100%);
  mask:radial-gradient(ellipse 78% 72% at 50% 46%,#000 28%,transparent 100%);
  translate:0 var(--py,0px);animation:fa-fade 2s var(--mo-ease) .3s backwards}
.fa-grid.fa-full{inset:-140px auto -140px 50%;width:100vw;translate:-50% var(--py,0px)}
.fa-scan{position:absolute;inset:0;translate:0 -100%;animation:fa-scan 9s linear 2.6s infinite}
.fa-scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mo-gold);opacity:.45}
.fa-x{position:absolute;left:var(--x);top:var(--y);width:13px;height:13px;margin:-6px 0 0 -6px;opacity:0;animation:fa-blink 6s ease-in-out var(--d,0s) infinite}
.fa-x::before,.fa-x::after{content:"";position:absolute;background:var(--mo-gold)}
.fa-x::before{left:0;right:0;top:6px;height:1px}
.fa-x::after{top:0;bottom:0;left:6px;width:1px}
.fa-grid.fa-off,.fa-grid.fa-off *{animation-play-state:paused}

/* ---------- 2. HERO : barre de production (accueil) ---------- */
.fa-pipe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:28px;padding:12px 16px;max-width:max-content;
  border:1px solid rgba(241,237,226,.16);border-radius:12px;background:rgba(13,18,32,.6);
  font:600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(241,237,226,.62)}
html.mo .fa-pipe{animation:mo-rise .95s var(--mo-ease) 1.25s backwards}
.fa-pst{display:inline-flex;align-items:center;gap:8px;color:var(--mo-gold);min-width:15ch}
.fa-pst::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;animation:fa-pulse 1.4s ease-in-out infinite}
.fa-pipe ol{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0}
.fa-pipe li{position:relative;padding-bottom:7px;opacity:.5;transition:opacity .4s,color .4s}
.fa-pipe li b{color:var(--mo-gold);font-weight:700;margin-right:6px}
.fa-pipe li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mo-gold);scale:0 1;transform-origin:0 50%}
.fa-pipe li.on,.fa-pipe li.done{opacity:1;color:var(--mo-ivory)}
.fa-pipe li.on::after{scale:1 1;transition:scale 1.4s linear}
.fa-pipe li.done::after{scale:1 1}
.fa-pipe.fa-off .fa-pst::before{animation-play-state:paused}
@media(max-width:520px){.fa-pipe{display:grid;grid-template-columns:1fr;max-width:none}.fa-pipe ol{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}}

/* ---------- 3. REPÈRES DE CADRAGE sur les cartes ---------- */
.fa-host{position:relative}
.fa-br{position:absolute;inset:7px;pointer-events:none;z-index:3}
.fa-br i{position:absolute;width:0;height:0;border:0 solid var(--mo-gold);opacity:.85;
  transition:width .8s var(--mo-ease),height .8s var(--mo-ease),opacity .4s;transition-delay:var(--fd,0s)}
.fa-br i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.fa-br i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.fa-br i:nth-child(3){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.fa-br i:nth-child(4){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.fa-on>.fa-br i{width:12px;height:12px}
@media(hover:hover){.fa-on:hover>.fa-br i{width:20px;height:20px;transition-delay:0s;transition-duration:.35s}}

/* ---------- 4. CHAÎNE DE FABRICATION (« La méthode ») ---------- */
.fa-rail{position:relative;height:16px;margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:center}
.fa-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(241,237,226,.16)}
.fa-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--mo-gold);transform-origin:0 50%;scale:0 1}
.fa-rail b{position:relative;z-index:1;width:14px;height:14px;border-radius:4px;border:2px solid rgba(241,237,226,.32);background:var(--mo-night,#0D1220);
  transition:background .4s,border-color .4s,scale .5s var(--mo-ease);transition-delay:calc(var(--k,0)*.8s)}
.fa-go .fa-fill{scale:1 1;transition:scale 2.4s linear}
.fa-go b{background:var(--mo-gold);border-color:var(--mo-gold);scale:1.15}
.fa-rail+.steps{margin-top:14px}
@media(max-width:900px){.fa-rail{display:none}.fa-rail+.steps{margin-top:46px}}

/* ---------- 5. DÉCODAGE des petits titres ---------- */
.fa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fa-sc{display:inline-block}

/* ---------- 6. BOUTONS : onde au toucher + attraction (souris) ---------- */
.fa-rip-host{position:relative;overflow:hidden}
.fa-rip{position:absolute;pointer-events:none;border:1.5px solid currentColor;border-radius:50%;opacity:0;animation:fa-rip .65s var(--mo-ease) forwards}
@media(hover:hover) and (pointer:fine){
  html.mo .btn-primary,html.mo .nav-cta{translate:var(--mx,0px) var(--my,0px);transition:translate .35s var(--mo-ease)}
}

/* ---------- 7. APERÇU DE SITE : balayage à chaque fabrication ---------- */
.fa-sl{position:absolute;left:0;right:0;top:0;height:2px;background:var(--mo-gold);opacity:0;pointer-events:none;z-index:6}
.fa-sl.run{animation:fa-sweep .95s var(--mo-ease-io) forwards}

/* ---------- prix : chiffres de même largeur pendant le comptage ---------- */
.pprice,.price .amount{font-variant-numeric:tabular-nums}

@media print{.fa-grid,.fa-pipe,.fa-rail,.fa-br,.fa-sl{display:none!important}}
@media(prefers-reduced-motion:reduce){.fa-grid,.fa-pipe,.fa-rail,.fa-br,.fa-sl{display:none!important}}