/* ============================================================================
   fidelite.css — page de vente « carte de fidélité digitale »
   Monde visuel Quaantum : nuit navy, ambre, Gliker pour les titres, Inter pour
   le texte. Les jetons et la carte (.wallet-card, .stamp-band) viennent de
   merchant.css : l'aperçu de la page est celui que le commerçant retrouve à
   l'inscription, à la taille réelle d'un pass.
   ========================================================================== */

@font-face {
    font-family: 'Gliker';
    src: url('/fonts/Gliker-RegularExpanded.woff2') format('woff2'),
         url('/fonts/Gliker-RegularExpanded.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

:root {
    --page-bg: #06071d;
    --magenta: #ff41c7;
    --measure: 62ch;
    --wrap: 1120px;
    --pad: clamp(18px, 4vw, 40px);
    --display: 'Gliker', 'Inter', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    background: var(--page-bg);
    color: var(--text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--line-strong) var(--page-bg); }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.12; }
h3 { font-size: 1.12rem; font-family: 'Inter', sans-serif; font-weight: 650; }
p { margin: 0; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: var(--measure); }
.lead strong, .copy strong { color: var(--text); font-weight: 600; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
section { padding-block: clamp(56px, 9vw, 112px); }
.section-head { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- Boutons */
.cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 24px; border-radius: 12px;
    font-weight: 650; font-size: 1rem; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cta-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .75); }
.cta-primary:hover { background: var(--accent-dim); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .8); }
.cta-ghost { color: var(--text); border-color: var(--line-strong); background: transparent; }
.cta-ghost:hover { border-color: var(--accent); }
.cta svg { width: 20px; height: 20px; flex: none; }
.cta-note { margin-top: 12px; font-size: .9rem; color: var(--muted); }

/* --------------------------------------------------------------- Header */
.lp-header { position: sticky; top: 0; z-index: var(--z-sidebar); background: rgba(6, 7, 29, .86); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.lp-header .logo img { height: 56px; display: block; }
.lp-header .mobile-logo { display: none; }
.lp-nav { display: flex; align-items: center; gap: 26px; }
.lp-nav a { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--text); opacity: .85; transition: opacity .2s; }
.lp-nav a:hover { opacity: 1; }
.lp-nav .nav-cta {
    opacity: 1; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 10px;
    background: linear-gradient(var(--page-bg), var(--page-bg)) padding-box, linear-gradient(45deg, var(--magenta), var(--accent)) border-box;
    transition: color .2s ease, background .2s ease;
}
.lp-nav .nav-cta:hover { background: linear-gradient(45deg, var(--magenta), var(--accent)) border-box; color: #000; }

/* ----------------------------------------------------------------- Hero */
.hero {
    padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px);
    background:
        radial-gradient(900px 520px at 78% 0%, rgba(255, 197, 42, .13), transparent 68%),
        radial-gradient(700px 400px at 12% 100%, rgba(255, 65, 199, .07), transparent 70%);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-visual .wallet-card { cursor: pointer; transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s ease; }
.hero-visual .wallet-card:hover { transform: translateY(-4px); }
.hero-visual .wallet-card:active { transform: translateY(0) scale(.995); }
.wallet-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wallet-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 19, 28, .7); font-size: .88rem; color: var(--text); }
.wallet-pill svg { width: 18px; height: 18px; color: var(--accent); }
.card-hint { font-size: .85rem; color: var(--muted); text-align: center; max-width: 40ch; }
.card-hint b { color: var(--text); font-weight: 600; }
/* Étiquettes du pass à 11 px minimum sur la page de vente (9,9 px sur l'aperçu de l'espace commerçant, fidèle au pass). */
.hero-visual .wc-shop, .hero-visual .wc-flabel { font-size: .7rem; }

/* La coche se pose : un tampon entre avec un peu d'élan, puis se calme. */
.stamp.filled { animation: stamp-in .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes stamp-in { from { transform: scale(.55); opacity: .2; } to { transform: none; opacity: 1; } }
.wallet-card.is-reward .wc-fvalue { color: var(--accent); font-weight: 650; }
.wallet-card.is-reward .stamp-band { animation: band-glow 1.1s ease-out 1; }
@keyframes band-glow { 0% { background: rgba(255, 197, 42, .0); } 30% { background: rgba(255, 197, 42, .14); } 100% { background: rgba(255, 197, 42, 0); } }

/* ---------------------------------------------------------- Trois gestes */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.steps li { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.steps li::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -17px; left: 0;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--display); font-size: 1rem;
}
.steps h3 { margin-top: 14px; }
.steps p { margin-top: 10px; color: var(--muted); }
.steps .detail { display: block; margin-top: 12px; font-size: .9rem; color: var(--text); padding-left: 12px; border-left: 1px solid var(--accent); }

/* ------------------------------------------------------- Automatisations */
.auto { background: var(--bg); border-block: 1px solid rgba(255, 255, 255, .05); }
.auto-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 72px); }
.auto-list li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.auto-list svg { width: 26px; height: 26px; color: var(--accent); margin-top: 2px; }
.auto-list h3 { font-size: 1.05rem; }
.auto-list p { margin-top: 6px; color: var(--muted); font-size: .98rem; }

/* ------------------------------------------------------- Tampons / points */
.modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.mode { padding: 26px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.mode h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.mode p { margin-top: 10px; color: var(--muted); }
.mode .example { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); font-variant-numeric: tabular-nums; color: var(--text); font-size: .98rem; }
.mode .example b { color: var(--accent); font-weight: 650; }
.modes-note { margin-top: 22px; color: var(--muted); max-width: var(--measure); }

/* --------------------------------------------------------------- Tarifs */
.pricing { background: radial-gradient(800px 380px at 50% 0%, rgba(255, 197, 42, .08), transparent 70%); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 820px; }
.plan { padding: 30px 30px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.plan.is-featured { border-color: rgba(255, 197, 42, .55); background: linear-gradient(180deg, rgba(255, 197, 42, .08), rgba(255, 197, 42, 0) 60%), var(--surface); }
.plan h3 { font-size: 1.05rem; color: var(--muted); font-weight: 500; }
.price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.price small { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--muted); }
.per-month { margin-top: 8px; color: var(--text); font-weight: 600; }
.plan-note { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.plan .cta { width: 100%; margin-top: 22px; }
.included { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 24px; max-width: 820px; color: var(--muted); font-size: .97rem; }
.included li { display: flex; gap: 10px; align-items: flex-start; }
.included svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 4px; }

/* ----------------------------------------------------------- Comparatif */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .96rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.compare th[scope="row"] { font-weight: 600; color: var(--text); width: 30%; }
.compare td { color: var(--muted); }
.compare .us { background: rgba(255, 197, 42, .06); color: var(--text); }
.compare thead .us { color: var(--accent); }
.compare-src { margin-top: 12px; font-size: .84rem; color: var(--muted); }
.compare-src a { color: var(--muted); }

/* ------------------------------------------------------------------- FAQ */
.faq-list { max-width: 760px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; margin: 0; }
.faq-list summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .25s ease; margin-right: 4px; }
.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list .answer { padding: 0 0 22px; color: var(--muted); max-width: var(--measure); }
.faq-list .answer a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------- Final CTA */
.final { text-align: center; background: linear-gradient(180deg, rgba(255, 197, 42, 0), rgba(255, 197, 42, .07)); }
.final h2 { max-width: 20ch; margin-inline: auto; }
.final p { margin: 16px auto 0; color: var(--muted); max-width: 48ch; }
.final .hero-actions { justify-content: center; }
.updated { margin-top: 34px; font-size: .85rem; color: var(--muted); }

/* --------------------------------------------------------------- Footer */
.lp-footer { border-top: 1px solid rgba(255, 255, 255, .06); padding: 40px 0 28px; color: var(--muted); font-size: .9rem; }
.lp-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }
.lp-footer img { height: 44px; display: block; }
.lp-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--text); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .hero h1 { max-width: none; }
    .steps { grid-template-columns: 1fr; gap: 34px; }
    .auto-list { grid-template-columns: 1fr; }
    .modes { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; }
    .lp-nav a:not(.nav-cta) { display: none; }
    .lp-header .desktop-logo { display: none; }
    .lp-header .mobile-logo { display: block; }
    .lp-header .mobile-logo img { height: 40px; }
}
@media (max-width: 420px) {
    .cta { width: 100%; }
    .hero-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stamp.filled, .wallet-card.is-reward .stamp-band { animation: none; }
    .hero-visual .wallet-card, .cta, .lp-nav a { transition: none; }
}

/* ----------------------------------------------------- Intro de la hero
   Variantes A + C validées le 2026-09-28 (artefact « Éclair de la hero »).
   La hero part du noir, un éclair la traverse de gauche à droite et découvre
   le titre derrière sa tête, puis sa ligne se dédouble et s'ouvre en
   s'éteignant, et le reste apparaît. Jouée une fois par visite, jamais en
   mouvement réduit, titre lisible avant 1 s (LCP). Tout l'état caché dépend
   de html.fx-intro, posé par le script du <head> : sans JS, rien n'est caché. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero { position: relative; overflow: hidden; }
.hero-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
html.fx-intro .hero-fx { display: block; }
html.fx-intro .hero { background: none; }
html.fx-intro .hero h1 { clip-path: inset(-12% calc(100% - (var(--p) * var(--hw, 1440px) - var(--hl, 0px))) -12% 0); }
html.fx-intro .hero .lead, html.fx-intro .hero-actions, html.fx-intro .hero-facts, html.fx-intro .hero-visual { opacity: 0; }
html.fx-play .hero { animation: fx-sweep .62s cubic-bezier(.55, 0, .9, .5) .2s both; }
@keyframes fx-sweep { from { --p: 0; } to { --p: 1; } }
/* Le ciel de la hero revient après le passage de l'éclair. */
.hero-fx::before { content: ''; position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(900px 520px at 78% 0%, rgba(255, 197, 42, .13), transparent 68%), radial-gradient(700px 400px at 12% 100%, rgba(255, 65, 199, .07), transparent 70%); }
html.fx-play .hero-fx::before { animation: fx-sky .9s ease-out .7s both; }
@keyframes fx-sky { to { opacity: 1; } }
/* A · la tête de l'éclair et son halo */
.hero-fx .bolt { position: absolute; left: 0; right: 0; top: var(--bolt-y, 40%); height: 2px; opacity: 0; }
.hero-fx .bolt::before { content: ''; position: absolute; top: 0; right: calc(100% - var(--p) * 100%); width: 55%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 197, 42, 0), rgba(255, 197, 42, .8) 70%, #fff); }
.hero-fx .bolt::after { content: ''; position: absolute; top: -60px; left: calc(var(--p) * 100% - 90px); width: 180px; height: 122px;
    background: radial-gradient(closest-side, rgba(255, 240, 200, .5), rgba(255, 197, 42, .12) 50%, transparent); }
html.fx-play .hero-fx .bolt { animation: fx-on .62s linear .2s both, fx-off .12s linear .82s forwards; }
@keyframes fx-on { 0% { opacity: 0; } 4%, 100% { opacity: 1; } }
@keyframes fx-off { to { opacity: 0; } }
/* C · la ligne laissée par l'éclair se dédouble et s'ouvre en s'éteignant */
.hero-fx .seam { position: absolute; left: 0; right: 0; top: var(--bolt-y, 40%); }
.hero-fx .seam i { position: absolute; left: 0; right: 0; height: 1.5px; opacity: 0;
    background: linear-gradient(90deg, rgba(255, 197, 42, .1), var(--accent) 18%, #fff 50%, var(--accent) 82%, rgba(255, 197, 42, .1)); }
html.fx-play .hero-fx .seam i { animation: fx-part-up .8s cubic-bezier(.16, 1, .3, 1) .8s both; }
html.fx-play .hero-fx .seam i + i { animation-name: fx-part-down; }
@keyframes fx-part-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--open, 180px) * -1)); } }
@keyframes fx-part-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--open, 180px)); } }
/* Le reste arrive pendant que la ligne s'ouvre */
@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.fx-play .hero .lead { animation: fx-rise .6s cubic-bezier(.16, 1, .3, 1) .9s both; }
html.fx-play .hero-actions { animation: fx-rise .6s cubic-bezier(.16, 1, .3, 1) 1s both; }
html.fx-play .hero-facts { animation: fx-rise .6s cubic-bezier(.16, 1, .3, 1) 1.08s both; }
html.fx-play .hero-visual { animation: fx-rise .8s cubic-bezier(.16, 1, .3, 1) 1.1s both; }
@media (prefers-reduced-motion: reduce) { .hero-fx { display: none !important; } }