/* ═══════════════════════════════════════════════════════════
   nosfonctionnalites — surcouche design v2 (au-dessus de css/index-v2.css)
   Réutilise la palette + les composants de index-v2.css (--ink, --grad-logo,
   .nav, .b-head, .tag, .b-card, .final, footer…) et ajoute les blocs propres
   à la page : hero d'intro, panneaux sombres d'animation, étapes, captures,
   grille des fonctions.
   ═══════════════════════════════════════════════════════════ */

/* — HERO d'intro (bande orange, colonne unique centrée) — */
.ff-hero{padding-bottom:58px}
.ff-hero .hero-top{grid-template-columns:1fr;text-align:center}
.ff-hero .hero-txt{max-width:760px;margin:0 auto}
.ff-hero h1{margin-left:auto;margin-right:auto}
.ff-hero .hero-sub{margin-left:auto;margin-right:auto}
.ff-hero .hero-tags{justify-content:center}
.ff-crumb{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;opacity:.95}
.ff-crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ff-crumb span[aria-hidden]{opacity:.6}

/* — Panneau sombre : schéma réseau (comme un device v2) — */
.ff-panel{margin:36px 0 6px;background:linear-gradient(135deg,#FF9421 0%,#FF8202 55%,#FF7608 100%);
  border:var(--bd);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.ff-mesh{width:100%;height:210px}
.ff-mesh svg{width:100%;height:100%;display:block}

/* — Étapes 01 / 02 / 03 — */
.ff-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.ff-step{display:flex;flex-direction:column;background:var(--white);border:var(--bd);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
.ff-step:hover{transform:translate(-3px,-3px)}
.ff-viz{height:150px;background:linear-gradient(135deg,#FF9421 0%,#FF8202 55%,#FF7608 100%);border-bottom:var(--bd)}
.ff-viz svg{width:100%;height:100%;display:block}
.ff-num{align-self:flex-start;font-family:var(--disp);font-size:14px;color:#fff;
  background:var(--grad-logo);border:2px solid var(--ink);border-radius:999px;padding:4px 13px;margin:16px 20px 8px}
.ff-step h3{margin:0 20px 8px;text-transform:none;font-size:19px}
.ff-step p{margin:0 20px 22px;font-size:14px;color:#40355C;line-height:1.55}

/* — Section « L'app en vrai » : fond dégradé (comme la section Téléchargement) — */
#apercu{background:linear-gradient(135deg,#FF8202 0%,#FF3D9A 52%,#B36BFF 100%)}
#apercu .b-head h2{color:#fff}
#apercu .b-head .sub{color:rgba(255,255,255,.94)}

/* — Captures d'app (téléphones sombres v2) — */
.ff-shots{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ff-shot{width:min(210px,72vw)}
.ff-shot .ff-frame{background:var(--ink);border-radius:34px;padding:9px;border:var(--bd);box-shadow:var(--shadow)}
.ff-shot .ff-ph{border-radius:26px;overflow:hidden;background:#120A26;aspect-ratio:180/390}
.ff-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ff-shot .ff-screen{width:100%;height:100%;display:block}
.ff-shot .ff-cap{text-align:center;font-family:var(--disp);font-size:13px;text-transform:uppercase;
  color:var(--ink);padding:12px 0 2px}

/* — Grille des fonctions (6 cartes) — */
.ff-func-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.ff-func{display:flex;flex-direction:column;background:var(--white);border:var(--bd);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
.ff-func:hover{transform:translate(-3px,-3px)}
.ff-fviz{height:118px;background:#0E0720;border-bottom:var(--bd)}
.ff-fviz svg{width:100%;height:100%;display:block}
.ff-func h3{margin:16px 20px 6px;text-transform:none;font-size:18px}
.ff-func p{margin:0 20px 20px;font-size:14px;color:#40355C;line-height:1.55}

/* — Lien « aller plus loin » — */
.ff-more{text-align:center;margin-top:36px}
.ff-more a{font-family:var(--disp);text-transform:uppercase;font-size:14px;color:var(--ink);
  text-decoration:none;border-bottom:3px solid var(--crimson);padding-bottom:3px}
.ff-more .ff-sep{color:var(--grey);margin:0 12px}

/* — Responsive — */
@media(max-width:980px) and (min-width:821px){
  .ff-func-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .ff-steps{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .ff-func-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
}