/* Landing card.pm : ce qui vient de la refonte de Loïc (/datamix/design/loic/cardpm-refonte), sur nos jetons
   et nos polices (app.css). Rien que du CSS : transformations et opacité, composées par la carte graphique ;
   le mouvement s'arrête avec « Réduire les animations ». */

/* ── Héros : le geste NFC ── */
.hx .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hx-eyebrow, .rf-eyebrow { display: flex; align-items: center; gap: 9px; margin-block-end: 18px; font: 500 .74rem/1 var(--font-m); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hx-eyebrow::before, .rf-eyebrow::before { content: ''; inline-size: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.hx-proof { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-block-start: 30px; }
.hx-proof > * { display: grid; gap: 2px; color: var(--mute); font-size: .9rem; }
.hx-proof b { font: 800 1.5rem/1.1 var(--font-d); letter-spacing: -.02em; color: var(--ink); }
.hx-proof a:hover b { color: var(--accent); }
.hx-stars { font-size: .95rem; letter-spacing: 1px; color: #f5a524; vertical-align: .15em; }

.hx-stage { position: relative; display: block; inline-size: 100%; max-inline-size: 500px; aspect-ratio: 1 / 1.3; margin-inline: auto; perspective: 1400px; }
.hx-phone { position: absolute; z-index: 1; inset-inline-end: 6%; inset-block-start: 2%; inline-size: 58%; aspect-ratio: 9 / 19.3; padding: 11px; border-radius: 46px; background: #111;
  box-shadow: 0 0 0 2px #2b2d33 inset, 0 50px 90px -30px rgba(10, 12, 30, .55), 0 20px 40px -20px rgba(0, 0, 0, .4);
  transform: rotateY(calc(-14deg + var(--ry, 0deg))) rotateX(calc(6deg + var(--rx, 0deg))) rotateZ(2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hx-phone::before { content: ''; position: absolute; z-index: 4; inset-block-start: 20px; inset-inline-start: 50%; translate: -50% 0; inline-size: 32%; block-size: 22px; border-radius: 20px; background: #000; }
.hx-screen { position: relative; inline-size: 100%; block-size: 100%; border-radius: 36px; overflow: hidden; background: #1b1a3a; container-type: size; }
.hx-screen::after { content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; animation: hx-flash 6s ease-out infinite; }
.hx-poster { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; animation: hx-scroll 18s ease-in-out infinite; }
.hx-stage:hover .hx-poster { animation-play-state: paused; }

/* La notification « Tag NFC » d'iOS, au moment où la carte touche le téléphone. */
.hx-banner { position: absolute; z-index: 3; inset-block-start: 5.5cqh; inset-inline: 3.5cqw; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.6cqw; border-radius: 6.5cqw;
  background: rgba(246, 246, 246, .86); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  color: #111; font: 400 4cqw/1.25 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', var(--font-b); opacity: 0; transform: translateY(-140%); animation: hx-banner 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.hx-banner-ic { flex: none; inline-size: 11cqw; block-size: 11cqw; border-radius: 2.6cqw; overflow: hidden; box-shadow: 0 0 0 .3cqw rgba(0, 0, 0, .06); }
.hx-banner-ic svg { display: block; inline-size: 100%; block-size: 100%; }
.hx-banner-tx { display: grid; flex: 1; gap: .6cqw; min-inline-size: 0; }
.hx-banner-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.hx-banner-top b { font-size: 4.3cqw; font-weight: 600; color: #000; letter-spacing: -.01em; }
.hx-banner-top em { font-style: normal; font-size: 3.6cqw; color: #7c7c80; }
.hx-banner-body { color: #1c1c1e; }

/* La carte NFC noire et ses ondes. */
.hx-nfc { position: absolute; z-index: 0; inset-inline-start: 0; inset-block-start: 5%; inline-size: 52%; aspect-ratio: 85.6 / 54; border-radius: 16px;
  background: radial-gradient(120% 140% at 0% 0%, #2a2b31, #0b0b0d 60%); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transform: translate(-14%, 0) rotate(-8deg); animation: hx-tap 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.hx-nfc-logo { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 68%; block-size: auto; transform: translate(-50%, -50%); }
.hx-nfc-i { position: absolute; inset-inline-end: 3.5%; inset-block-start: 5.5%; inline-size: 11%; aspect-ratio: 1; block-size: auto; color: #fff; opacity: .9; }
.hx-waves { position: absolute; z-index: 3; inset-inline-start: 41%; inset-block-start: 11%; inline-size: 1px; block-size: 1px; pointer-events: none; }
.hx-waves span { position: absolute; inset-inline-start: -45px; inset-block-start: -45px; inline-size: 90px; block-size: 90px; border-radius: 50%; border: 2.5px solid var(--accent);
  box-shadow: 0 0 18px rgba(37, 99, 235, .45), inset 0 0 12px rgba(37, 99, 235, .25); opacity: 0; animation: hx-wave 6s ease-out infinite; }
.hx-waves span:nth-child(2) { animation-delay: .18s; }
.hx-waves span:nth-child(3) { animation-delay: .36s; }

/* Les vraies cartes passent sans commandes : la barre reste dans la page (ses pastilles portent le minuteur),
   hors de la vue. */
.hx .live-bar[bare] { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hx-screen .live-frames { z-index: 2; }
.hx-stage[offscreen] :is(.hx-nfc, .hx-waves span, .hx-banner, .hx-screen::after, .hx-poster) { animation-play-state: paused; }

@keyframes hx-tap { 0%, 10% { transform: translate(-30%, 46%) rotate(-16deg); } 30% { transform: translate(-14%, 0) rotate(-8deg); } 34% { transform: translate(-13%, -1%) rotate(-8deg) scale(.985); }
  38%, 60% { transform: translate(-14%, 0) rotate(-8deg); } 82%, 100% { transform: translate(-30%, 46%) rotate(-16deg); } }
@keyframes hx-wave { 0%, 32% { transform: scale(.15); opacity: 0; } 35% { opacity: .95; } 58%, 100% { transform: scale(2.3); opacity: 0; } }
@keyframes hx-banner { 0%, 36% { opacity: 0; transform: translateY(-140%); } 42%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-140%); } }
@keyframes hx-flash { 0%, 33% { background: radial-gradient(110% 60% at 18% 12%, rgba(125, 147, 255, 0), transparent 60%); } 37% { background: radial-gradient(110% 60% at 18% 12%, rgba(125, 147, 255, .55), transparent 60%); }
  60%, 100% { background: radial-gradient(110% 60% at 18% 12%, rgba(125, 147, 255, 0), transparent 60%); } }
@keyframes hx-scroll { 0%, 8% { object-position: 50% 0; } 46%, 54% { object-position: 50% 100%; } 92%, 100% { object-position: 50% 0; } }

@media (max-width: 980px) {
  .hx .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-stage { order: 2; inline-size: 86%; max-inline-size: 440px; margin-inline-start: auto; margin-inline-end: 0; }
  .hx-proof { order: 1; }
  .hx-eyebrow { margin-block-end: 0; }
}
@media (max-width: 480px) {
  .hx-phone { padding: 8px; border-radius: 34px; }
  .hx-phone::before { block-size: 16px; inset-block-start: 15px; }
  .hx-screen { border-radius: 27px; }
}
/* Le geste NFC est le propos du héros : il continue avec « Réduire les animations » (comme dans la refonte),
   contre la règle générale d'app.css ; seuls le défilement de l'affiche et l'inclinaison s'arrêtent. */
@media (prefers-reduced-motion: reduce) {
  .hx-nfc, .hx-banner, .hx-screen::after { animation-duration: 6s !important; animation-iteration-count: infinite !important; }
  .hx-waves span { animation-duration: 6s !important; animation-iteration-count: infinite !important; }
  .hx-poster { animation: none; }
  .hx-phone { transition: none; }
}

/* ── Sections de la refonte (classes rf-) ── */
.rf .head { margin-block-end: clamp(40px, 6vw, 64px); }
.rf-eyebrow { margin-block-end: 16px; }

/* La carte, en vrai : trois écrans et le QR de la démo. */
.rf-demo { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: clamp(16px, 2.5vw, 32px); align-items: end; }
.rf-shot { display: grid; gap: 14px; margin: 0; }
.rf-phone { padding: 8px; border-radius: 34px; background: #111; box-shadow: 0 0 0 2px #2b2d33 inset, 0 40px 70px -34px rgba(10, 12, 30, .6); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.rf-phone img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 960 / 2080; object-fit: cover; border-radius: 27px; }
.rf-shot:nth-child(2) .rf-phone { transform: translateY(-36px); }
.rf-shot:hover .rf-phone { transform: translateY(-10px) rotate(-1deg); }
.rf-shot:nth-child(2):hover .rf-phone { transform: translateY(-46px) rotate(1deg); }
.rf-shot figcaption { font-size: .9rem; color: var(--mute); }
.rf-shot figcaption b { display: block; color: var(--ink); font-weight: 700; }
.rf-try { display: grid; gap: 14px; justify-items: start; max-inline-size: 220px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.rf-qr { inline-size: 150px; block-size: 150px; padding: 10px; border-radius: 12px; background: #fff; }
.rf-try p { font-size: .85rem; color: var(--mute); }
.rf-try a { font: 500 .9rem/1 var(--font-m); color: var(--accent); }

/* Exclusivités. */
.rf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rf-panel { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-m); }
.rf-lockline { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 14px; background: var(--surface-2); font-size: .92rem; }
.rf-lockline .i { flex: none; inline-size: 22px; block-size: 22px; color: var(--accent); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-chips span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 .78rem/1 var(--font-m); color: var(--ink-2); }
.rf-chips span.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Le halo qui suit la souris sur les panneaux (--mx, --my posés par pm-refonte.js). */
.rf-fx { position: relative; isolation: isolate; }
.rf-fx::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%); }
.rf-fx:hover::before { opacity: 1; }

/* consent.pm : l'accord scellé. */
.rf-consent { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--line); border-radius: clamp(24px, 4vw, 40px); background: linear-gradient(180deg, var(--bg), var(--surface-2)); }
.rf-copy { display: grid; gap: 20px; min-inline-size: 0; }
.rf-copy .rf-eyebrow { margin: 0; }
.rf-copy .rf-eyebrow::before { background: #22c55e; }
.rf-copy .cta-row { margin: 0; }
.rf-consent-logo { block-size: clamp(26px, 3.4vw, 34px); inline-size: auto; }
.rf-on-dark { display: none; }
:root[data-theme='dark'] .rf-on-light { display: none; }
:root[data-theme='dark'] .rf-on-dark { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .rf-on-light { display: none; } :root:not([data-theme='light']) .rf-on-dark { display: inline-block; } }
.rf-btn-consent { background: #22c55e; border-color: #22c55e; color: #151713; }
.rf-seal { position: relative; display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35); font-size: .9rem; }
.rf-rowx { display: flex; justify-content: space-between; gap: 12px; min-inline-size: 0; padding-block-end: 12px; border-block-end: 1px dashed var(--line-2); }
.rf-rowx:last-of-type { padding-block-end: 0; border-block-end: 0; }
.rf-rowx .k { color: var(--mute); }
.rf-rowx .v { font: 500 .82rem/1.4 var(--font-m); text-align: end; overflow-wrap: anywhere; color: var(--ink); }
.rf-rowx .ok { color: var(--ok); }
.rf-stamp { position: absolute; inset-inline-end: -14px; inset-block-start: -18px; display: grid; place-items: center; inline-size: 86px; block-size: 86px; border: 2px solid var(--ok); border-radius: 50%;
  background: var(--bg); color: var(--ok); text-align: center; font: 800 .7rem/1.1 var(--font-d); letter-spacing: .06em; text-transform: uppercase; transform: rotate(12deg); animation: rf-stamp 5s cubic-bezier(.2, .8, .2, 1) infinite; }

/* Pourquoi CARD.PM. */
.rf-why { display: grid; grid-template-columns: repeat(4, 1fr); border-block-start: 1px solid var(--line); }
.rf-why div { display: grid; gap: 8px; align-content: start; padding: 28px 24px 8px 0; }
.rf-why b { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--font-d); letter-spacing: -.04em; color: var(--ink); }
.rf-why p { font-size: .95rem; color: var(--mute); }

/* FAQ : le « + » de la refonte. */
.rf-faq { margin-inline: 0; max-inline-size: 880px; }
.rf-faq summary::after { content: '+'; inline-size: auto; block-size: auto; border: 0; rotate: none; translate: none; font: 500 1.5rem/1 var(--font-m); color: var(--accent); transition: rotate .3s; }
.rf-faq details[open] summary::after { rotate: 45deg; translate: none; }
.rf-faq details[open] { border-color: var(--ink-2); box-shadow: none; }

@keyframes rf-stamp { 0%, 10% { transform: rotate(12deg) scale(1.6); opacity: 0; } 18%, 90% { transform: rotate(12deg) scale(1); opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 960px) {
  .rf-demo { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .rf-demo .rf-shot:not(:first-child) { display: none; }
  .rf-demo .rf-shot { inline-size: 100%; max-inline-size: 300px; }
  .rf-shot:hover .rf-phone { transform: none; }
  .rf-try { inline-size: 100%; max-inline-size: 300px; justify-items: center; text-align: center; }
}
@media (max-width: 860px) {
  .rf-duo, .rf-consent { grid-template-columns: 1fr; }
  .rf-stamp { inset-inline-end: 8px; }
  .rf-why { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-stamp { animation: none; }
  .rf-phone { transition: none; }
}