/* ══════════════════════════════════════════════════════════════════
   StationFlex — page apex (stationflex.host)
   Page de preuve : qui je suis, ce qui tourne, comment me joindre.
   Reprend l'ADN de la landing : oyster froid + oxblood, Fraunces en titrage.
   Aucun JS : la page n'a rien à faire d'autre que se laisser lire.
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/fraunces-latin-italic.woff2") format("woff2");
}

:root{
  --paper:#E6E7E2;
  --paper-2:#EDEEE9;
  --paper-3:#DEDFD8;
  --ink:#191B17;
  --ink-2:#33352E;
  --ink-deep:#131511;
  --muted:#6B6D64;
  --ox:#7C1D2B;
  --ox-d:#5F141F;
  --ox-wash:rgba(124,29,43,.10);
  --rose:#E4A0AB;
  --line:#CFD0C8;
  --serif:"Fraunces",Georgia,"Iowan Old Style",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mx:clamp(20px,5vw,64px);
  --maxw:1060px;
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── barre ───────────────────────────────────────────────────── */
.bar{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:22px var(--mx);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:.01em;
}
.loc{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

main{max-width:var(--maxw);margin:0 auto;padding:0 var(--mx);}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px);}
.eyebrow{
  margin:0 0 20px;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ox);
  font-weight:600;
}
h1{
  margin:0 0 24px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.05rem,5.4vw,3.5rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
h1 em{font-style:italic;color:var(--ox);}
.lede{
  max-width:60ch;
  margin:0 0 34px;
  font-size:1.15rem;
  color:var(--ink-2);
}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0;}
.cta-note{font-size:.86rem;color:var(--muted);}

.btn{
  display:inline-block;
  padding:13px 26px;
  background:var(--ox);
  color:var(--paper-2);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  border-radius:2px;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ox-d);transform:translateY(-1px);}
.btn.big{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.4vw,1.4rem);
  padding:17px 34px;
}
a:focus-visible{outline:2px solid var(--ox);outline-offset:3px;}

/* ── preuves ─────────────────────────────────────────────────── */
section{border-top:1px solid var(--line);padding:clamp(48px,7vw,76px) 0;}
.hero{border-top:0;}

h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.05rem);
  line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
.sub{margin:0 0 36px;color:var(--muted);font-size:.98rem;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;
}
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--ox);
  padding:26px 26px 22px;
}
.card h3{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.16rem;
  color:var(--ink);
}
.card p{margin:0 0 12px;font-size:.97rem;}
.card p:last-child{margin-bottom:0;}
.card strong{color:var(--ink);font-weight:600;}
.note{
  font-size:.88rem !important;
  color:var(--muted);
  padding-top:12px;
  border-top:1px solid var(--line);
}
.note em{color:var(--ox);font-style:italic;}

/* ── résultats mesurés ───────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:0 0 26px;}
table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
caption{
  caption-side:top;
  text-align:left;
  padding-bottom:12px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}
th,td{
  padding:14px 16px;
  text-align:right;
  border-bottom:1px solid var(--line);
}
th:first-child,td:first-child{text-align:left;}
thead th{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  font-weight:600;
  border-bottom:1px solid var(--ink-2);
}
tbody td strong{color:var(--ink);font-weight:700;}
tr.win{background:var(--ox-wash,rgba(124,29,43,.07));}
tr.win td strong{color:var(--ox);}
.tag{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  font-style:italic;
}
.reading{max-width:66ch;margin:0 0 26px;font-size:1rem;}
.reading strong{color:var(--ink);}
.reading em{color:var(--ox);}
.caveat{
  max-width:66ch;
  margin:0;
  padding:20px 24px;
  background:var(--paper-2);
  border-left:3px solid var(--ox);
  font-size:.95rem;
}
.caveat strong{color:var(--ink);}
.caveat em{font-style:italic;}

/* ── offre ───────────────────────────────────────────────────── */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
  margin:28px 0 32px;
}
.step h3{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.08rem;
  color:var(--ox);
}
.step p{margin:0;font-size:.97rem;}
.honest{
  max-width:66ch;
  margin:0;
  padding:18px 22px;
  background:var(--paper-3);
  border-left:3px solid var(--line);
  font-size:.95rem;
  color:var(--ink-2);
}

/* ── contact ─────────────────────────────────────────────────── */
.contact{text-align:center;}
.contact h2{margin-bottom:26px;}
.contact p{margin:0 0 14px;}
.soon{font-size:.88rem;color:var(--muted);}

/* ── pied ────────────────────────────────────────────────────── */
footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:26px var(--mx) 46px;
  border-top:1px solid var(--line);
  font-size:.84rem;
  color:var(--muted);
}
footer a{color:var(--ox);text-decoration:none;}
footer a:hover{text-decoration:underline;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* Lien vers la page détaillée de la prestation. */
.more{margin:22px 0 0;}
.more a{
  color:var(--ox);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--ox-wash);
  padding-bottom:2px;
}
.more a:hover,.more a:focus-visible{border-bottom-color:var(--ox);}

/* Lien discret vers la page de performances mesurées. */
.note a{color:var(--ox);font-weight:600;text-decoration:none;}
.note a:hover,.note a:focus-visible{text-decoration:underline;}

/* ── portfolio généré ────────────────────────────────────────── */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin:0 0 26px;
}
.portfolio-grid figure{
  margin:0;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.portfolio-grid img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}
.portfolio-grid figcaption{
  padding:12px 16px;
  font-size:.85rem;
  color:var(--muted);
}
.portfolio-note{
  max-width:66ch;
  margin:0;
  padding:18px 22px;
  background:var(--paper-3);
  border-left:3px solid var(--line);
  font-size:.95rem;
  color:var(--ink-2);
}