/* ============================================================
   RevoPro — pages marketing de app.revopro.fr (landing + tarifs)
   DA identique à revopro.fr (landing.css du site vitrine) :
   paper #F1EEE7 · ink #131311 · mut #8A867E · rule #D9D5CA
   night #111110 · strip #DFDBD0 — Archivo partout.
   Statique, zéro framework, zéro image lourde (mockups en CSS).
   ============================================================ */

:root{
  --paper:#F1EEE7;
  --ink:#131311;
  --mut:#8A867E;
  --rule:#D9D5CA;
  --night:#111110;
  --strip:#DFDBD0;
  --lightrule:rgba(241,238,231,.28);
  --gutter:clamp(20px, 3.7vw, 48px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo','Helvetica Neue',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.4em}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- primitives typographiques (identiques au site) ---------- */
.mono{
  font-family:'Archivo','Helvetica Neue',sans-serif;
  font-size:clamp(11px, .84vw, 12.5px);
  line-height:1.5;
  letter-spacing:normal;
}
.dim{color:var(--mut)}
.light{color:var(--paper)}
.u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.num{letter-spacing:.02em}

/* ---------- révélations au scroll ---------- */
.rv,.rv-blur{opacity:0}
.rv{transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv-blur{transform:translateY(30px);filter:blur(14px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.in .rv,.rv.in{opacity:1;transform:none}
.in .rv-blur,.rv-blur.in{opacity:1;transform:none;filter:blur(0)}
.no-js .rv,.no-js .rv-blur{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-blur{opacity:1;transform:none;filter:none;transition:none}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--paper);
  border-radius:999px;
  padding:15px 28px;
  font-weight:500;font-size:clamp(14px,1.1vw,15.5px);letter-spacing:.01em;
  transition:transform .35s var(--ease),opacity .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);opacity:.92}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.btn-ghost:hover{opacity:1;background:var(--strip)}
.btn-paper{background:var(--paper);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.cta-note{color:var(--mut);font-size:clamp(11px,.84vw,12.5px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(18px,2.6vw,34px) var(--gutter) 0;
  max-width:1310px;margin:0 auto;
}
.brand{display:flex;align-items:flex-start;gap:10px;flex:none}
.brand-mark{height:clamp(28px,3.1vw,42px);width:auto}
.brand-word{height:clamp(27px,3vw,40px);width:auto}
.brand-reg{font-size:13px;line-height:1;margin-top:-2px}
.brand-app{
  align-self:center;margin-left:2px;margin-top:4px;
  font-size:clamp(10px,.8vw,12px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);
}
.nav-links{display:flex;align-items:center;gap:clamp(18px,3.5vw,48px)}
.nav-links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav-cta{
  background:var(--ink);color:var(--paper);border-radius:999px;
  padding:9px 18px;font-weight:500;
  transition:transform .3s var(--ease),opacity .2s;
}
.nav-cta:hover{text-decoration:none;transform:translateY(-1px);opacity:.9}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  max-width:1310px;margin:0 auto;
  padding:clamp(40px,6vw,90px) var(--gutter) 0;
}
.hero .num{
  display:block;font-size:clamp(13px,1.4vw,18px);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.display{
  font-weight:500;
  font-size:clamp(42px,8.6vw,112px);
  line-height:.98;
  letter-spacing:-.035em;
}
.display span{display:block}
.display .l2{color:#B3AEA4}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  gap:clamp(28px,5vw,90px);align-items:end;
  margin-top:clamp(28px,3.4vw,52px);
}
.hero-pitch{max-width:52ch;padding-bottom:clamp(10px,2vw,30px)}
.hero-pitch .mono{font-size:clamp(13px,1.05vw,15.5px);line-height:1.65}
.hero-pitch .cta-row{margin-top:clamp(24px,2.6vw,38px)}
.hero-points{
  list-style:none;margin-top:clamp(26px,3vw,42px);
  border-top:1px solid var(--rule);
}
.hero-points li{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--rule);
  font-size:clamp(12.5px,1vw,14.5px);
}
.hero-points .dim{white-space:nowrap}

/* ---------- mockup iPhone : vraies captures de la webapp ----------
   assets/app/webapp-*.png = cadre iPhone + capture réelle composés en un
   PNG transparent ; drop-shadow (et non box-shadow) pour suivre les coins
   arrondis du cadre. */
.iphone{
  display:block;
  width:min(320px,84vw);height:auto;margin:0 auto;
  transform:rotate(1.6deg);
  filter:drop-shadow(0 30px 60px rgba(19,19,17,.30));
}

/* ============================================================
   BANDE NUIT (citation de vente)
   ============================================================ */
.night{
  background:var(--night);color:var(--paper);
  margin-top:clamp(60px,8vw,120px);
  padding:clamp(64px,9vw,140px) var(--gutter);
}
.night-in{max-width:1100px;margin:0 auto}
.night .num{display:block;margin-bottom:clamp(18px,2.4vw,32px);font-size:clamp(13px,1.4vw,18px)}
.night h2{
  font-weight:500;
  font-size:clamp(28px,4.6vw,60px);
  line-height:1.08;letter-spacing:-.03em;
  max-width:20ch;
}
.night .src{margin-top:clamp(20px,2.6vw,36px);color:var(--lightrule);color:rgba(241,238,231,.55)}
.night-stats{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
  margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--lightrule);
  padding-top:clamp(22px,2.6vw,36px);
}
.night-stats b{display:block;font-weight:500;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.03em}
.night-stats span{display:block;margin-top:8px;color:rgba(241,238,231,.62);font-size:clamp(11.5px,.95vw,14px);line-height:1.5;max-width:26ch}

/* ============================================================
   SECTIONS ÉDITORIALES
   ============================================================ */
.sec{
  max-width:1310px;margin:0 auto;
  padding:clamp(70px,9vw,140px) var(--gutter) 0;
}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-kick{display:block;font-size:clamp(13px,1.4vw,18px);margin-bottom:clamp(12px,1.4vw,20px)}
.sec h2{
  font-weight:500;
  font-size:clamp(32px,5.2vw,68px);
  line-height:1.02;letter-spacing:-.033em;
  max-width:18ch;
}
.sec-intro{margin-top:clamp(16px,2vw,26px);max-width:58ch;color:var(--mut);font-size:clamp(13px,1.05vw,15.5px);line-height:1.65}

/* ---------- livrables : liste éditoriale numérotée ---------- */
.dlist{margin-top:clamp(34px,4vw,60px);border-top:1px solid var(--rule);list-style:none}
.ditem{
  display:grid;
  grid-template-columns:clamp(40px,5vw,72px) minmax(0,1.05fr) minmax(0,1.6fr);
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.6vw,36px) 0;
  border-bottom:1px solid var(--rule);
}
.ditem .dnum{font-size:clamp(12px,1vw,14px);color:var(--mut);padding-top:.35em}
.ditem h3{font-weight:500;font-size:clamp(18px,2vw,27px);letter-spacing:-.025em;line-height:1.12}
.ditem h3 small{display:block;font-size:clamp(10.5px,.8vw,12px);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.ditem p{color:var(--mut);font-size:clamp(13px,1.02vw,15px);line-height:1.65;max-width:56ch}
.ditem p b{color:var(--ink);font-weight:500}

/* ---------- fonctionnalités app : grille ---------- */
.appwrap{
  display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);
  gap:clamp(30px,5vw,90px);
  margin-top:clamp(34px,4vw,60px);
  align-items:start;
}
.appwrap .iphone{transform:rotate(-1.4deg);position:sticky;top:40px}
.flist{list-style:none;border-top:1px solid var(--rule)}
.flist li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--rule);
}
.flist h3{font-weight:500;font-size:clamp(15.5px,1.5vw,20px);letter-spacing:-.02em}
.flist p{grid-column:1/-1;color:var(--mut);font-size:clamp(12.5px,1vw,14.5px);line-height:1.6;max-width:60ch}
.flist .tag{
  align-self:start;white-space:nowrap;
  font-size:clamp(9.5px,.75vw,11px);letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--rule);border-radius:999px;padding:5px 10px;
}

/* ---------- parcours : étapes ---------- */
.steps{
  list-style:none;counter-reset:step;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,32px);
  margin-top:clamp(34px,4vw,60px);
}
.steps li{
  counter-increment:step;
  border-top:1px solid var(--ink);
  padding-top:clamp(14px,1.6vw,22px);
}
.steps li::before{
  content:"0" counter(step);
  display:block;font-size:clamp(12px,1vw,14px);color:var(--mut);letter-spacing:.02em;
  margin-bottom:clamp(10px,1.2vw,16px);
}
.steps h3{font-weight:500;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em}
.steps p{margin-top:8px;color:var(--mut);font-size:clamp(12.5px,.98vw,14px);line-height:1.6}
.steps .dur{display:block;margin-top:12px;font-size:clamp(10px,.78vw,11.5px);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin-top:clamp(30px,3.6vw,52px);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:clamp(16px,2vw,24px) 0;
  font-weight:500;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.015em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.faq summary .x{
  flex:none;font-weight:400;font-size:1.2em;line-height:1;color:var(--mut);
  transition:transform .4s var(--ease);
}
.faq details[open] summary .x{transform:rotate(45deg)}
.faq .a{padding:0 0 clamp(18px,2.2vw,26px);color:var(--mut);font-size:clamp(13px,1.02vw,15px);line-height:1.7;max-width:64ch}
.faq .a b{color:var(--ink);font-weight:500}

/* ============================================================
   TARIFS
   ============================================================ */
.price-hero{padding-bottom:0}
.price-card{
  max-width:1100px;
  margin:clamp(36px,4.4vw,64px) auto 0;
  background:var(--night);color:var(--paper);
  border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(30px,4vw,60px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,70px);
}
.price-name{font-size:clamp(10.5px,.85vw,12.5px);letter-spacing:.16em;text-transform:uppercase;color:rgba(241,238,231,.6)}
.price-amount{
  margin-top:clamp(14px,1.8vw,26px);
  font-weight:500;font-size:clamp(58px,8vw,104px);letter-spacing:-.04em;line-height:.95;
}
.price-amount small{font-size:.3em;font-weight:400;letter-spacing:0;color:rgba(241,238,231,.65)}
.price-sub{margin-top:clamp(12px,1.4vw,20px);color:rgba(241,238,231,.65);font-size:clamp(12.5px,1vw,14.5px);line-height:1.6;max-width:38ch}
.price-cta{margin-top:clamp(26px,3vw,44px)}
.price-cta .btn{width:100%;max-width:360px;padding:18px 28px;font-size:clamp(15px,1.2vw,17px)}
.price-secure{display:flex;align-items:center;gap:8px;margin-top:14px;color:rgba(241,238,231,.55);font-size:clamp(10.5px,.82vw,12px)}
.price-secure svg{flex:none}
.price-inc{border-top:1px solid var(--lightrule);padding-top:clamp(18px,2vw,28px)}
.price-inc-title{font-size:clamp(10.5px,.85vw,12.5px);letter-spacing:.16em;text-transform:uppercase;color:rgba(241,238,231,.6);margin-bottom:clamp(12px,1.4vw,18px)}
.price-inc ul{list-style:none}
.price-inc li{
  display:flex;gap:12px;align-items:baseline;
  padding:8px 0;
  font-size:clamp(13px,1.02vw,15px);line-height:1.5;
}
.price-inc li::before{content:"—";color:rgba(241,238,231,.45);flex:none}
.price-inc li b{font-weight:500}
.price-inc li span{color:rgba(241,238,231,.6)}

.roi{
  max-width:1100px;margin:clamp(40px,5vw,70px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px);
}
.roi div{border-top:1px solid var(--ink);padding-top:clamp(14px,1.6vw,22px)}
.roi b{display:block;font-weight:500;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.03em}
.roi span{display:block;margin-top:8px;color:var(--mut);font-size:clamp(12px,.95vw,14px);line-height:1.6}

/* ============================================================
   CTA FINAL (nuit)
   ============================================================ */
.closing{
  background:var(--night);color:var(--paper);
  margin-top:clamp(70px,9vw,140px);
  padding:clamp(80px,11vw,170px) var(--gutter);
  text-align:center;
}
.closing h2{
  font-weight:500;
  font-size:clamp(34px,6.4vw,84px);
  letter-spacing:-.035em;line-height:1.02;
  margin:0 auto;max-width:16ch;
}
.closing .mono{margin-top:clamp(18px,2.2vw,30px);color:rgba(241,238,231,.6)}
.closing .cta-row{justify-content:center;margin-top:clamp(30px,3.6vw,52px)}
.closing .btn-ghost{box-shadow:inset 0 0 0 1px rgba(241,238,231,.5);color:var(--paper)}
.closing .btn-ghost:hover{background:rgba(241,238,231,.1)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  max-width:1310px;margin:0 auto;
  padding:clamp(40px,5vw,70px) var(--gutter) clamp(28px,3.4vw,46px);
}
.footer-rows{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule);
  padding-top:clamp(22px,2.6vw,36px);
}
.footer-col{display:grid;gap:10px;align-content:start}
.footer-col .t{font-size:clamp(10px,.8vw,11.5px);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-brand{display:flex;align-items:flex-start;gap:10px}
.footer-brand img{height:26px;width:auto}
.footer-note{margin-top:clamp(26px,3vw,42px);color:var(--mut)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .iphone{margin-top:8px}
  .appwrap{grid-template-columns:1fr}
  .appwrap .iphone{position:static;order:2}
  .price-card{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .night-stats{grid-template-columns:1fr;gap:22px}
  .night-stats span{max-width:40ch}
  .roi{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ditem{grid-template-columns:clamp(30px,8vw,40px) 1fr;grid-template-rows:auto auto}
  .ditem p{grid-column:2}
  .steps{grid-template-columns:1fr}
  .nav-links{gap:16px}
  .nav-links .nav-plain{display:none}
  .brand-word{height:24px}
  .brand-mark{height:25px}
  .hero{padding-top:34px}
  .flist li{grid-template-columns:1fr}
  .flist .tag{justify-self:start;order:2;margin-top:2px}
  .cta-row .btn{width:100%}
}