/* ============================================================
   INEYA — systeme de design signature (genere par design-kit.mjs)
   Regle : design unique, recherche, non-IA. Le reveal est CSS pur :
   l'etat FINAL est toujours visible -> jamais de contenu cache.
   ============================================================ */

/* Polices self-hosted (vendorées, zéro CDN Google) */
@import url("/fonts/fonts.css");

:root{
  /* palette etudiee, propre au projet */
  --ink:#2A0A1B;
  --paper:#F7F1E6;
  --cream:#F7F1E6;
  --accent:#B07A1E;
  --accent-d:#8A5E12;
  --line:#E7DAC4;
  --ok:#3E7A52;
  --dark:#4E0F33;

  /* typo : police d'affichage + texte (≠ Inter partout) */
  --display:"Jost", system-ui, sans-serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;

  /* echelle fluide (clamp) — pas de tailles figees */
  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.13rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.2rem,1.7rem + 2.5vw,4rem);
  --step-4:clamp(3rem,2rem + 5vw,6.5rem);

  --maxw:1180px;
  --r:18px;            /* rayon par defaut */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;margin:0;font-weight:600}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

/* ---- GRAIN : texture papier, casse l'aplat "SaaS IA" ---- */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- DEGRADE KINETIQUE : signature visuelle (bandes hero/sombres) ---- */
.kinetic{
  background:linear-gradient(125deg,#240614 0%,#4E0F33 25%,#6E1838 50%,#9C3F2B 75%,#C8922A 100%);
  background-size:260% 260%;animation:flow 24s ease-in-out infinite;
}
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- REVEAL : animation CSS pure, etat final VISIBLE (bulletproof) ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}

/* ---- PRIMITIVES PREMIUM ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;
  font-size:var(--step-0);padding:.85em 1.5em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--accent-d)}
.btn-cream{background:var(--paper);color:var(--ink)}
.btn-outline{background:transparent;border-color:currentColor;color:inherit}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-d)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);
  box-shadow:0 1px 0 rgba(0,0,0,.02),0 18px 40px -28px rgba(0,0,0,.25)}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:clamp(20px,3vw,32px);backdrop-filter:blur(8px)}

.eyebrow{font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  font-weight:600;display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}

.section{padding-block:clamp(64px,9vw,140px)}
.dark{background:var(--dark);color:var(--cream)}
.muted{opacity:.66}

/* ---- ACCESSIBILITE MOUVEMENT ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none}
  .kinetic{animation:none}
}