/* ==========================================================================
   market/features.css — page /features (tibida.com)
   --------------------------------------------------------------------------
   Noir / blanc / gris uniquement. Mobile-first. Les frames d'appareils
   .pshow-* sont réutilisées depuis style.css.
   ========================================================================== */

/* ---------- hero ---------- */
.fhero{padding-bottom:0}
.fhero .sec-head{max-width:46rem}
.fcta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;justify-content:center}

/* Bouton secondaire (contour) — déclinaison claire + sombre */
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{filter:none;background:var(--ink);color:var(--bg)}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid #fff}
.btn-ghost-light:hover{background:#fff;color:#0d0d0d;filter:none}

/* ---------- mise en page des sections ---------- */
.feat .feat-grid{display:grid;gap:2.2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:960px){
  .feat .feat-grid{grid-template-columns:1.05fr 1fr;gap:4rem}
  .feat:nth-of-type(even) .feat-grid > .feat-visual{order:2}
}
.feat-visual{margin:0}
.feat-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow)}
.feat-copy p{color:var(--muted);font-size:var(--fs-body);line-height:1.65;max-width:30rem;margin:0 0 1.6rem}
.feat-copy .eyebrow{margin-bottom:.8rem}
.feat-copy .h2{margin:0 0 1rem}

/* ---------- flux web -> caisse ---------- */
.feat-flow .pshow-flow{justify-content:center;flex-wrap:wrap}

/* ---------- cartes fidélité ---------- */
.feat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;align-items:center}
.feat-cards img{border-radius:12px;box-shadow:var(--shadow-sm);aspect-ratio:1.586/1;object-fit:cover}
.feat-cards img:nth-child(2){transform:translateY(-10px)}

/* ---------- PWA ---------- */
.feat-pwa{display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  background:var(--soft);border-radius:var(--r);padding:2.4rem 1.6rem}
.feat-pwa-ic{display:flex;align-items:center;justify-content:center;width:88px;height:88px;
  border-radius:50%;background:#0d0d0d;color:#fff}
.feat-pwa-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:22rem}
.feat-pwa-steps li{display:flex;align-items:center;gap:.9rem;font-weight:700;min-height:44px}
.feat-pwa-steps li i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:14px;background:#fff;color:#0d0d0d;box-shadow:var(--shadow-sm)}

/* ---------- villes ---------- */
.feat-citylist{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  background:var(--soft);border-radius:var(--r);padding:2.4rem 1.6rem;min-height:180px;align-content:center}
.feat-city{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.7rem 1.2rem;font-weight:700;font-size:var(--fs-body);min-height:44px}
.feat-city .dot{width:9px;height:9px;border-radius:50%;background:#0d0d0d}
.feat-city.is-live .dot{background:#0d0d0d;box-shadow:0 0 0 4px rgba(13,13,13,.12)}
.feat-pill{font-size:var(--fs-micro);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:.28rem .7rem;background:#0d0d0d;color:#fff}
.feat-pill.soon{background:transparent;color:var(--muted);border:1px solid var(--line)}
@media (prefers-color-scheme:dark){
  .feat-city{background:#161618}
  .feat-pwa-steps li i{background:#161618;color:#fff}
}

/* ============ showcase vidéo réelle ============ */
.fvideo-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:720px){.fvideo-grid{grid-template-columns:1fr 1fr;gap:2rem}}
.fvideo-card{margin:0;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow-sm)}
.fvideo-frame{position:relative;overflow:hidden;border-radius:12px;background:#0d0d0d;
  border:8px solid #0d0d0d}
.fvideo-frame video{display:block;width:100%;height:auto;object-fit:cover}
.fvideo-landscape video{aspect-ratio:16/9}
.fvideo-portrait{max-width:280px;margin:0 auto}
.fvideo-portrait video{aspect-ratio:9/16}
.fvideo-card figcaption{padding:1rem .2rem 0}
.fvideo-card figcaption strong{display:block;font-size:var(--fs-card);font-weight:700;margin-bottom:.25rem}
.fvideo-card figcaption span{font-size:var(--fs-meta);color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .fvideo-frame video{animation:none}
}

/* ---------- CTA final ---------- */
.fend-card{background:#0d0d0d;color:#fff;border-radius:clamp(24px,3.4vw,36px);
  padding:clamp(2.4rem,5vw,4.5rem) clamp(1.6rem,4vw,3rem);text-align:center;box-shadow:var(--shadow)}
.fend-card .lead{color:#d7d7da;margin:0 auto 2rem}
.fend-card .fcta{margin-top:0}

/* ---------- bannière homepage (photo lifestyle) ---------- */
.fbanner{margin:0}
.fbanner-card{position:relative;overflow:hidden;border-radius:clamp(24px,3.4vw,36px);
  min-height:340px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.fbanner-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fbanner-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.82) 0%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.05) 100%)}
.fbanner-body{position:relative;z-index:1;padding:clamp(1.8rem,4vw,3rem);color:#fff;max-width:34rem}
.fbanner-body h2{margin:0 0 .6rem;font-size:var(--fs-title);letter-spacing:-.02em}
.fbanner-body p{margin:0 0 1.4rem;color:#e8e8ea;line-height:1.6}

/* lien "voir toutes les fonctionnalités" en fin de showcase */
.pshow-more{display:flex;justify-content:center;margin-top:2.6rem}
.pshow-more a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--fs-body);
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;min-height:44px}
.pshow-more a:hover{opacity:.65}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .fdemo-ticket,.fdemo-sent,.fdemo-badge,.fdemo-step{transition:none}
  .fdemo-ticket{transform:none}
  .fdemo-kds:not(.is-served) .fdemo-ticket{opacity:0}
  .feat-cards img:nth-child(2){transform:none}
}