/*
 * Lemon Marketing — design system "Brutalist citrus"
 * Direction : Anton massif + Space Mono (labo) + Figtree (corps).
 * Encre quasi-noire, blanc cassé, jaune citron accent choc, vert citron vert, zeste orange.
 * Motion CSS-first, compositor-safe, prefers-reduced-motion respecté, zéro CLS.
 */

/* ============================ TOKENS ============================ */
:root{
  --ink:#0E0E0C;            /* encre chaude */
  --ink-2:#1A1A16;
  --paper:#FBFBF1;          /* blanc citronné */
  --paper-2:#F2F1E2;
  --lemon:#FFE34D;          /* accent choc */
  --lemon-deep:#F5C400;
  --lime:#C6F000;           /* vert citron vert */
  --zest:#FF6A1A;           /* zeste orange (alerte / amertume) */
  --leaf:#0C3B26;           /* feuille profonde */
  --line:rgba(14,14,12,.14);
  --line-strong:#0E0E0C;

  --font-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  --maxw:78rem;
  --gut:clamp(1rem,4vw,2.5rem);
  --radius:0px;             /* brutalist : angles francs */
  --radius-soft:14px;
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-hard:6px 6px 0 var(--ink);
  --shadow-hard-lemon:6px 6px 0 var(--lemon-deep);
}

/* ============================ RESET / BASE ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:clamp(1rem,.55vw + .9rem,1.125rem);
  line-height:1.6;font-weight:420;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:.94;letter-spacing:.01em;text-wrap:balance;text-transform:uppercase;margin:0 0 .4em}
p{text-wrap:pretty;max-width:64ch}
::selection{background:var(--lemon);color:var(--ink)}
:focus-visible{outline:3px solid var(--zest);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,9vw,7rem);position:relative}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.22em;font-weight:700;color:var(--ink);opacity:.7;margin:0 0 1rem}
.lead{font-size:clamp(1.1rem,1.4vw,1.4rem);line-height:1.5;font-weight:480}

/* Display scale */
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.86;letter-spacing:.005em}
.d-xxl{font-size:clamp(3.2rem,14vw,11rem)}
.d-xl{font-size:clamp(2.6rem,9vw,6.5rem)}
.d-lg{font-size:clamp(2rem,6vw,4rem)}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;text-decoration:none;cursor:pointer;
  padding:.95rem 1.4rem;border:2px solid var(--ink);background:var(--lemon);color:var(--ink);
  box-shadow:var(--shadow-hard);transition:transform .18s var(--ease-spring),box-shadow .18s var(--ease-spring);}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn--ghost{background:transparent}
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--lemon-deep)}
.btn--lime{background:var(--lime)}
.btn--lg{padding:1.15rem 1.8rem;font-size:1rem}

/* ============================ TAGS / PILLS ============================ */
.tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.3rem .6rem;border:1.5px solid var(--ink);background:var(--paper)}

/* ============================ MARQUEE ============================ */
.marquee{overflow:hidden;border-block:2px solid var(--ink);background:var(--lemon);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee__track{display:flex;gap:2.5rem;width:max-content;padding-block:.7rem;
  font-family:var(--font-display);text-transform:uppercase;font-size:1.6rem;letter-spacing:.04em;
  animation:marq 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:1.2rem}
.marquee__track span::after{content:"🍋";font-size:1.1rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================ CARD GRID ============================ */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{border:2px solid var(--ink);background:var(--paper);padding:1.6rem;position:relative;
  transition:transform .25s var(--ease-out-quint),box-shadow .25s var(--ease-out-quint)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hard)}
.card__num{font-family:var(--font-mono);font-size:.8rem;font-weight:700;opacity:.55}
.card h3{font-size:1.6rem;margin:.5rem 0 .5rem}
.card__icon{font-size:2rem;line-height:1;margin-bottom:.6rem}

/* ============================ STATS ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:2px solid var(--ink)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--paper);padding:1.6rem 1.2rem;text-align:center}
.stat__n{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.stat__l{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-top:.4rem;opacity:.7}

/* ============================ GRAIN + TEXTURE ============================ */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================ MOTION ============================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:reveal-in linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes reveal-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  }
}
.stagger>*{animation-delay:calc(var(--i,0) * 80ms)}

@media (prefers-reduced-motion:no-preference){
  .hero__in>*{opacity:0;animation:rise .9s var(--ease-out-quint) forwards}
  .hero__in>:nth-child(1){animation-delay:.05s}
  .hero__in>:nth-child(2){animation-delay:.16s}
  .hero__in>:nth-child(3){animation-delay:.27s}
  .hero__in>:nth-child(4){animation-delay:.38s}
  .hero__in>:nth-child(5){animation-delay:.49s}
  @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero__in>*{opacity:1}
}

.magnetic{transition:transform .25s var(--ease-spring)}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.magnetic{transition:none}}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,5rem) 2rem;margin-top:4rem}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:var(--lemon)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lemon);margin-bottom:1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.footer-bottom{border-top:1px solid rgba(251,251,241,.18);margin-top:2.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--font-mono);font-size:.75rem;opacity:.7}

/* ============================ POST / PROSE ============================ */
.prose{max-width:46rem;margin-inline:auto}
.prose h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:2.2em}
.prose h3{font-size:1.5rem;margin-top:1.6em}
.prose p,.prose li{font-size:1.08rem}
.prose a{text-decoration-color:var(--lemon-deep)}
.prose blockquote{border-left:5px solid var(--lemon);margin:1.6em 0;padding:.4em 1.2em;font-style:italic;background:var(--paper-2)}
.prose img{border:2px solid var(--ink);margin-block:1.5em}

/* Page header (interior) */
.page-hero{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden}
.page-hero .eyebrow{color:var(--lemon);opacity:1}
.page-hero h1{color:var(--paper)}
.page-hero .citron-bg{position:absolute;right:-4%;top:50%;transform:translateY(-50%);font-size:24rem;line-height:1;opacity:.08;pointer-events:none}

/* utilities */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-lemon{background:var(--lemon)}
.bg-lime{background:var(--lime)}
.divider{height:2px;background:var(--ink);border:0;margin:0}