/* =============================================================================
   FIDELGO — Landing v3 ("carte chaude")
   Signature : iPhone récent (Dynamic Island) avec la carte Fidelgo à l'écran.
   Photos réelles de commerçants + ambiance boulangerie. Palette chaude,
   typo grotesque, accent coral/miel.
============================================================================= */

:root {
  --paper:#FCFAF5; --paper-2:#F6EEE1; --ink:#221913; --ink-2:#6E6055;
  --line:#EBE0CF; --flame:#ED5A35; --flame-deep:#C7421C; --honey:#F3B53F;
  --berry:#C8456B; --crust:#1B1009;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --maxw:1160px; --radius:20px;
  --shadow:0 24px 60px -24px rgba(27,16,9,.5);
  --shadow-sm:0 10px 28px -14px rgba(27,16,9,.3);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0; }
p { margin:0; } a { color:inherit; text-decoration:none; }
img,svg { display:block; } blockquote { margin:0; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
a:focus-visible,.btn:focus-visible { outline:3px solid var(--honey); outline-offset:3px; border-radius:6px; }

/* Boutons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--body); font-weight:600; font-size:1rem; padding:14px 24px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-sm { padding:9px 18px; font-size:.95rem; }
.btn-lg { padding:16px 30px; font-size:1.05rem; }
.btn-block { display:flex; width:100%; }
.btn-primary { background:var(--flame); color:#fff; box-shadow:0 12px 26px -12px rgba(237,90,53,.85); }
.btn-primary:hover { background:var(--flame-deep); }
.btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn-light { background:var(--honey); color:var(--crust); }
.btn-light:hover { background:#ffc861; }
.link-quiet { font-weight:600; font-size:.95rem; color:rgba(255,255,255,.7); }
.link-quiet:hover { color:#fff; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--crust) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); }
.header-inner { display:flex; align-items:center; gap:28px; height:70px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; letter-spacing:-.03em; color:#fff; }
.brand-name { font-size:1.3rem; }
.main-nav { display:flex; gap:26px; margin-left:8px; }
.main-nav a { font-weight:500; font-size:.96rem; color:rgba(255,255,255,.72); }
.main-nav a:hover { color:#fff; }
.header-cta { margin-left:auto; display:flex; align-items:center; gap:18px; }

/* Hero */
.hero { position:relative; overflow:hidden; color:#fff; padding:84px 0 0; background-color:var(--crust); background-image:linear-gradient(rgba(26,16,9,.88),rgba(26,16,9,.93)),url('images/hero.jpg'); background-size:cover; background-position:center; }
.hero-glow { position:absolute; inset:-30% -10% auto auto; width:760px; height:760px; background:radial-gradient(circle at 70% 30%,rgba(243,181,63,.5),transparent 55%),radial-gradient(circle at 40% 60%,rgba(237,90,53,.45),transparent 55%); filter:blur(10px); pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-bottom:64px; }
.eyebrow { display:inline-block; font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--honey); margin-bottom:20px; }
.hero h1 { color:#fff; font-size:clamp(2.5rem,5.4vw,4rem); font-weight:800; margin-bottom:22px; }
.hero h1 .hl { color:var(--honey); }
.lede { font-size:1.18rem; color:rgba(255,255,255,.78); max-width:31em; margin-bottom:30px; }
.lede strong { color:#fff; font-weight:700; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.trust-row { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.92rem; color:rgba(255,255,255,.75); }
.trust-row li { position:relative; padding-left:20px; }
.trust-row li::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; transform:translateY(-50%); background:var(--honey); border-radius:50%; }
.hero-visual { display:flex; justify-content:center; }
.float { animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

/* ---------- iPhone mockup ---------- */
.iphone { width:286px; max-width:74vw; aspect-ratio:9/19.3; background:#0a0a0c; border-radius:50px; padding:11px; position:relative; box-shadow:var(--shadow), inset 0 0 0 2px #2c2c30; }
.island { position:absolute; top:22px; left:50%; transform:translateX(-50%); width:84px; height:26px; background:#000; border-radius:14px; z-index:5; }
.iphone-screen { width:100%; height:100%; border-radius:40px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.statusbar { display:flex; justify-content:space-between; align-items:center; padding:15px 26px 0; font-size:.74rem; font-weight:700; color:var(--crust); }
.statusbar.light { color:#fff; }
.sb-right { width:22px; height:11px; border:1.5px solid currentColor; border-radius:3px; position:relative; }
.sb-right::after { content:""; position:absolute; right:-4px; top:3px; width:2px; height:5px; background:currentColor; border-radius:1px; }
.sb-right::before { content:""; position:absolute; top:1.5px; bottom:1.5px; left:1.5px; right:6px; background:currentColor; border-radius:1px; }

.screen-wallet { background:linear-gradient(180deg,#fbf4e9,#f1e4cf); }
.screen-label { font-family:var(--display); font-weight:800; font-size:1.45rem; color:var(--crust); padding:10px 22px 14px; }
.phone-card { margin:0 16px; padding:16px 16px 14px; border-radius:20px; background:radial-gradient(120% 90% at 85% 0%,#3a2417,#18100a 60%); color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.55); }
.pc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.pc-head span:first-child { font-weight:600; font-size:.8rem; }
.pc-tag { font-family:var(--display); font-weight:800; font-size:.58rem; letter-spacing:.1em; color:var(--crust); background:var(--honey); padding:3px 7px; border-radius:5px; }
.pc-points { display:flex; align-items:baseline; gap:6px; }
.pc-num { font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1; color:var(--honey); letter-spacing:-.03em; }
.pc-unit { font-size:.8rem; color:rgba(255,255,255,.65); }
.pc-goal { font-size:.72rem; color:rgba(255,255,255,.72); margin:6px 0 12px; }
.pc-stamps { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.pc-stamps i { aspect-ratio:1; border-radius:50%; border:1.4px solid rgba(255,255,255,.3); }
.pc-stamps i.on { background:var(--flame); border-color:var(--flame); }
.pc-qr { display:flex; justify-content:center; margin-top:14px; }

.screen-lock { background:linear-gradient(160deg,#3a2417,#120b06); color:#fff; }
.lock-clock { text-align:center; margin-top:24px; }
.lock-date { display:block; font-size:.78rem; font-weight:600; opacity:.85; }
.lock-time { display:block; font-family:var(--display); font-weight:700; font-size:3.8rem; line-height:1; letter-spacing:-.02em; }
.notif { margin:auto 12px 16px; background:rgba(255,255,255,.17); backdrop-filter:blur(8px); border-radius:18px; padding:11px; display:flex; gap:10px; align-items:flex-start; }
.notif-icon { width:34px; height:34px; border-radius:9px; background:#fff; display:grid; place-items:center; flex-shrink:0; }
.notif-body { flex:1; min-width:0; }
.notif-top { display:flex; justify-content:space-between; font-size:.6rem; opacity:.82; text-transform:uppercase; letter-spacing:.05em; }
.notif-title { font-weight:700; font-size:.85rem; margin-top:3px; }
.notif-text { font-size:.74rem; opacity:.9; margin-top:1px; }

/* Marquee */
.marquee { border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); overflow:hidden; }
.marquee-track { display:flex; gap:14px; width:max-content; padding:16px 0; animation:marquee 34s linear infinite; }
.marquee span { font-weight:600; font-size:1rem; color:rgba(255,255,255,.82); white-space:nowrap; padding:8px 18px; border:1px solid rgba(255,255,255,.16); border-radius:999px; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* Titres */
.section-eyebrow { font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--flame); margin-bottom:14px; }
.section-eyebrow.center { text-align:center; }
.section-title { font-size:clamp(1.8rem,3.6vw,2.6rem); max-width:18em; }
.section-title.center { text-align:center; max-width:none; }
.section-title.light { color:#fff; }

/* Showcase iPhones */
.showcase { padding:90px 0; background:var(--paper-2); }
.showcase-sub { text-align:center; max-width:44em; margin:16px auto 0; color:var(--ink-2); font-size:1.12rem; }
.phones { display:flex; justify-content:center; align-items:flex-start; gap:60px; margin-top:56px; flex-wrap:wrap; }
.phone-col { display:flex; flex-direction:column; align-items:center; gap:20px; }
.phone-col:first-child { transform:rotate(-4deg); }
.phone-col:last-child { transform:rotate(4deg); }
.phone-cap { font-weight:600; color:var(--ink-2); text-align:center; }

/* Commerçants (photos réelles) */
.merchants { padding:84px 0; }
.merchant-grid { margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.merchant { margin:0; }
.m-photo { aspect-ratio:4/5; border-radius:var(--radius); background-size:cover; background-position:center 22%; box-shadow:var(--shadow-sm); margin-bottom:18px; }
.merchant blockquote { font-size:1.02rem; font-weight:500; line-height:1.45; margin-bottom:14px; }
.merchant figcaption { display:flex; flex-direction:column; gap:1px; font-size:.92rem; }
.merchant figcaption b { font-family:var(--display); font-size:1.02rem; }
.merchant figcaption span { color:var(--ink-2); }
.stars { color:var(--honey); letter-spacing:2px; }
.stars.big { font-size:1.3rem; display:block; margin-bottom:16px; }
.merchants-note { margin-top:26px; font-size:.86rem; color:var(--ink-2); font-style:italic; }

/* Contraste */
.contrast { padding:40px 0 84px; }
.contrast-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.body-lg { font-size:1.1rem; color:var(--ink-2); margin:18px 0 26px; max-width:32em; }
.check-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:32px; font-weight:500; }
.check-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; display:grid; place-items:center; font-size:.8rem; color:#fff; background:var(--flame); border-radius:50%; }
.contrast-visual { display:flex; justify-content:center; }
.paper-card { position:relative; width:300px; max-width:78vw; background:repeating-linear-gradient(45deg,#fff,#fff 14px,#fbf6ec 14px,#fbf6ec 28px); border:1px dashed #d8c9b0; border-radius:10px; padding:24px 22px 28px; transform:rotate(4deg); box-shadow:var(--shadow-sm); color:#8a7a66; }
.paper-card > span:first-child { font-family:var(--display); font-weight:700; font-size:1.1rem; color:#6f5f4c; display:block; margin-bottom:18px; }
.paper-stamps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.paper-stamps i { aspect-ratio:1; border:1.5px solid #d8c9b0; border-radius:50%; }
.paper-stamps i.stamped { background:#cdbb9d; border-color:#cdbb9d; }
.paper-card small { font-size:.8rem; }
.paper-tear { position:absolute; right:-14px; bottom:-14px; transform:rotate(-8deg); background:var(--ink); color:#fff; font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px; }

/* Étapes */
.steps { padding:84px 0; background:var(--crust); color:#fff; }
.steps .section-eyebrow { color:var(--honey); }
.step-grid { list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:30px 26px 28px; }
.step-num { font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--crust); background:var(--honey); width:44px; height:44px; display:grid; place-items:center; border-radius:12px; margin-bottom:22px; }
.step-card h3 { font-size:1.28rem; margin-bottom:10px; }
.step-card p { color:rgba(255,255,255,.72); font-size:1rem; }

/* Fonctions */
.features { padding:84px 0; }
.feature-grid { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.feature:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.feature-ic { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:color-mix(in srgb, var(--flame) 12%, #fff); color:var(--flame); margin-bottom:18px; }
.feature h3 { font-size:1.22rem; margin-bottom:8px; }
.feature p { color:var(--ink-2); font-size:1rem; }

/* Témoignage vedette */
.feature-quote { padding:0 0 84px; }
.fq-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:50px; align-items:center; background:var(--paper-2); border-radius:28px; padding:40px; }
.fq-photo { aspect-ratio:5/4; border-radius:var(--radius); background-size:cover; background-position:center 22%; box-shadow:var(--shadow); }
.feature-quote blockquote { font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.25; letter-spacing:-.02em; margin-bottom:20px; text-wrap:balance; }
.feature-quote figcaption { font-weight:500; }
.feature-quote figcaption b { font-family:var(--display); }
.feature-quote figcaption small { color:var(--ink-2); font-weight:400; }

/* Tarif */
.pricing { padding:84px 0; background:var(--paper-2); }
.price-card { margin-top:40px; max-width:460px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px 32px; box-shadow:var(--shadow); }
.plan-name { font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--flame); }
.price { display:flex; align-items:baseline; gap:8px; margin:8px 0 4px; }
.amount { font-family:var(--display); font-weight:800; font-size:3.4rem; letter-spacing:-.03em; }
.per { color:var(--ink-2); font-weight:600; }
.price-note { color:var(--ink-2); font-size:.95rem; margin-bottom:24px; }
.price-list { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:13px; }
.price-list li { position:relative; padding-left:30px; }
.price-list li::before { content:"✓"; position:absolute; left:0; top:0; width:21px; height:21px; display:grid; place-items:center; font-size:.76rem; color:var(--flame); background:color-mix(in srgb, var(--flame) 12%, #fff); border-radius:50%; }

/* CTA final */
.final-cta { padding:84px 0 90px; }
.final-inner { border-radius:28px; padding:72px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; background-color:var(--crust); background-size:cover; background-position:center; }
.final-content { position:relative; }
.final-inner h2 { font-size:clamp(1.8rem,3.8vw,2.7rem); max-width:16em; margin:0 auto 26px; }
.final-sub { margin-top:16px; color:rgba(255,255,255,.78); font-size:.95rem; }

/* Footer */
.site-footer { background:var(--paper); border-top:1px solid var(--line); padding:56px 0 30px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand { color:var(--ink); }
.footer-brand p { color:var(--ink-2); font-size:.95rem; margin-top:14px; max-width:24em; }
.footer-col h4 { font-family:var(--body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:.96rem; color:var(--ink); }
.footer-col a:hover { color:var(--flame); }
.footer-bottom { display:flex; justify-content:space-between; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-2); }

/* Révélation */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* Responsive */
@media (max-width:980px){ .merchant-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .hero-grid,.contrast-grid,.fq-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ order:-1; }
  .fq-grid{ padding:28px; }
  .step-grid,.feature-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .phones{ gap:36px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .main-nav{ display:none; }
  .hero{ padding-top:56px; }
  .merchant-grid,.step-grid,.feature-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; gap:8px; }
  .final-inner{ padding:52px 26px; }
  .phone-col:first-child,.phone-col:last-child{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .phone-col:first-child,.phone-col:last-child{ transform:none; }
}