/* Visuels enrichis des tuiles « Partagez. Partout. » : vrai empilement Apple Wallet + écran d'accueil avec raccourcis de cartes.
   S'appuie sur les variables de app.css (--font-d, --font-m, --accent, --accent-2, --line…) ; chargé après refonte.css. */

/* ── Apple Wallet & Google Wallet ── */
.art-wallet { min-block-size: 330px; align-content: space-between; justify-items: center; gap: 16px; padding-block: 24px 20px; }
.wl-stack { position: relative; inline-size: min(100%, 262px); block-size: 236px; }
.wl-pass { position: absolute; inset-inline: 0; aspect-ratio: 1.586; border-radius: 15px; overflow: hidden; color: #fff;
  box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .12) inset; }
.wl-pass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .20), transparent 38%, transparent 70%, rgba(255, 255, 255, .06)); }
.wl-bank { top: 0; z-index: 1; background: linear-gradient(135deg, #5b6472, #2b313b 62%, #1b1f27); padding: 11px 15px; display: flex; justify-content: space-between; align-items: flex-start; }
.wl-chip { inline-size: 26px; block-size: 19px; border-radius: 5px; background: linear-gradient(135deg, #f1d38a, #b98a2e); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset; }
.wl-bank span { font: 500 .78rem/1 var(--font-m); letter-spacing: .12em; opacity: .9; }
.wl-loy { top: 36px; z-index: 2; background: linear-gradient(135deg, #e0701f, #b4440f 70%); padding: 11px 15px; display: flex; justify-content: space-between; align-items: flex-start; }
.wl-loy b { font: 800 .9rem/1.1 var(--font-d); letter-spacing: -.01em; }
.wl-loy span { font: 500 .72rem/1.1 var(--font-d); opacity: .92; }
.wl-me { top: 72px; z-index: 3; background: linear-gradient(160deg, #1a1c20, #0b0c0e 70%); border: 1px solid rgba(255, 255, 255, .16); padding: 13px 15px 14px;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, .6), 0 24px 40px -22px rgba(0, 0, 0, .55); }
.wl-hd { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; align-self: start; }
.wl-hd .logo { block-size: 13px; inline-size: calc(13px * 5.6775); }
.wl-hd span { font: 500 .6rem/1 var(--font-m); letter-spacing: .14em; opacity: .66; }
.wl-nm small { display: block; font: 500 .56rem/1 var(--font-m); letter-spacing: .16em; opacity: .55; margin-block-end: 5px; }
.wl-nm b { font: 500 1.02rem/1.15 var(--font-d); color: #fff; }
.wl-qr { inline-size: 64px; aspect-ratio: 1; padding: 5px; border-radius: 8px; background: #fff; color: #0b0c0e; }
.wl-qr svg { inline-size: 100%; block-size: 100%; fill: currentColor; display: block; }
.wl-badges { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.wl-badges img { block-size: 32px; inline-size: auto; display: block; }

/* ── Écran d'accueil : capture des raccourcis de cartes (assets/img/nfc/home-shortcuts.webp) dans un cadre de téléphone ── */
.art-home { display: grid; grid-template-columns: none; min-block-size: 370px; padding: 22px 18px 0; align-items: end; justify-content: center; gap: 0; }
.hs-phone { position: relative; inline-size: min(100%, 232px); block-size: 340px; box-sizing: border-box; border: 6px solid #1c1e23; border-bottom: 0; border-radius: 36px 36px 0 0; overflow: hidden; background: #110e29;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 -2px 30px -8px rgba(0, 0, 0, .5); }
.hs-shot { display: block; inline-size: 100%; block-size: auto; }
.hs-island { position: absolute; inset-block-start: 8px; inset-inline-start: 50%; translate: -50% 0; inline-size: 58px; block-size: 17px; border-radius: 99px; background: #000; }

/* ── Suite .PM : logos officiels, cartouche « .PM » à la couleur de la charte de chaque produit ──
   Le logo sert de masque : lettres à la couleur d'encre du thème, cartouche à la couleur du produit (le « .PM » est ajouré). */
.pm-logo { display: block; block-size: 24px; aspect-ratio: var(--ar); inline-size: auto; max-inline-size: 100%;
  background: linear-gradient(90deg, var(--ink) 0 var(--sp), var(--bx) var(--sp) 100%);
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.pm { --bx: var(--brand); }
:root[data-theme='dark'] .pm { --bx: var(--brand-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .pm { --bx: var(--brand-d); } }
.suite a.pm { gap: 12px; padding-block: 20px 18px; box-shadow: inset 0 3px 0 var(--bx); }
.suite a.pm:hover { border-color: var(--bx); }
.suite a.pm > span:last-child { font-size: .9rem; color: var(--mute); }
.pm-card { --brand: #2563eb; --brand-d: #3b82f6; --logo: url('/assets/img/modules/card.png'); --ar: 5.867; --sp: 64.2%; }
.pm-sign { --brand: #6366f1; --brand-d: #818cf8; --logo: url('/assets/img/modules/sign.png'); --ar: 5.392; --sp: 61.1%; }
.pm-agenda { --brand: #9a7a3f; --brand-d: #d6b97b; --logo: url('/assets/img/modules/agenda.png'); --ar: 7.833; --sp: 73.2%; }
.pm-doc { --brand: #b54d1e; --brand-d: #e0713d; --logo: url('/assets/img/modules/doc.png'); --ar: 4.85; --sp: 56.6%; }
.pm-form { --brand: #0891b2; --brand-d: #22b8cf; --logo: url('/assets/img/modules/form.png'); --ar: 6.158; --sp: 65.8%; }
.pm-leads { --brand: #e11d48; --brand-d: #fb7185; --logo: url('/assets/img/modules/leads.png'); --ar: 6.767; --sp: 69.0%; }
.pm-page { --brand: #4a9500; --brand-d: #84e22e; --logo: url('/assets/img/modules/page.png'); --ar: 5.8; --sp: 63.8%; }
.pm-qrcode { --brand: #8900d5; --brand-d: #c084fc; --logo: url('/assets/img/modules/qrcode.png'); --ar: 7.833; --sp: 73.1%; }
.pm-consent { --brand: #059669; --brand-d: #34d399; --logo: url('/assets/img/modules/consent.png'); --ar: 8.842; --sp: 76.3%; }

/* ── Trois étages : simulation de l'interface d'administration (enseigne → gabarits → cartes) ──
   Sans JavaScript : trois boutons radio (cs-1…3) pilotent les écrans et la ligne active de la légende. */
.cs-r { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.cs-grid { align-items: start; }
.cs-hint { margin-block-start: 14px; font: 500 .78rem/1.4 var(--font-m); letter-spacing: .04em; color: var(--mute); }
.cs-floors { margin-block-start: 12px; }
.cs-floors li { position: relative; cursor: pointer; }
.cs-floors label { cursor: pointer; }
.cs-floors label::after { content: ""; position: absolute; inset: 0; }
.cs-r1:checked ~ pm-reveal .cs-floors li:nth-child(1), .cs-r2:checked ~ pm-reveal .cs-floors li:nth-child(2), .cs-r3:checked ~ pm-reveal .cs-floors li:nth-child(3) {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cs-r1:focus-visible ~ pm-reveal .cs-floors li:nth-child(1), .cs-r2:focus-visible ~ pm-reveal .cs-floors li:nth-child(2), .cs-r3:focus-visible ~ pm-reveal .cs-floors li:nth-child(3) { outline: 2px solid var(--accent); outline-offset: 2px; }

.cs-win { border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.cs-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-block-end: 1px solid var(--line); background: var(--surface-2); }
.cs-bar > i { inline-size: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--line-2); }
.cs-url { display: flex; align-items: center; gap: 6px; margin-inline-start: 8px; flex: 1; min-inline-size: 0; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 500 .72rem/1 var(--font-m); color: var(--mute); white-space: nowrap; overflow: hidden; }
.cs-url .i { inline-size: 12px; block-size: 12px; }
.cs-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 10px 12px; border-block-end: 1px solid var(--line); font: 500 .8rem/1 var(--font-d); color: var(--mute); }
.cs-crumb label { padding: 6px 10px; border-radius: 99px; cursor: pointer; transition: background-color .2s, color .2s; }
.cs-r1:checked ~ .cs-col .cs-c1, .cs-r2:checked ~ .cs-col .cs-c2, .cs-r3:checked ~ .cs-col .cs-c3 { background: var(--accent); color: #fff; }

.cs-p { display: none; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 14px; gap: 0; align-content: start; }
.cs-r1:checked ~ .cs-col .cs-p1, .cs-r2:checked ~ .cs-col .cs-p2, .cs-r3:checked ~ .cs-col .cs-p3 { display: grid; }
.cs-title { font: 500 1.05rem/1.2 var(--font-d); color: var(--ink); margin-block-end: 6px; }
.cs-title small { display: block; margin-block-start: 3px; font: 500 .72rem/1.2 var(--font-m); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cs-sub { margin-block: 14px 2px; font: 500 .72rem/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cs-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-block: 10px; border-block-start: 1px solid var(--line); font-size: .88rem; }
.cs-lab { font: 500 .74rem/1.2 var(--font-m); letter-spacing: .04em; color: var(--mute); }
.cs-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-inline-size: 0; color: var(--ink); }
.cs-mid small { flex-basis: 100%; font-size: .72rem; color: var(--mute); }
.cs-dom { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font: 500 .74rem/1.2 var(--font-m); }
.cs-row--dom { grid-template-columns: 82px minmax(0, 1fr); row-gap: 8px; }
.cs-row--dom .cs-chip { grid-column: 2; justify-self: start; }
.cs-logo { inline-size: 44px; block-size: 44px; border-radius: 11px; background: #17163f url('/assets/img/nfc/yourlogo.png') center / auto 86% no-repeat; box-shadow: 0 0 0 1px var(--line-2); }
.cs-sw { inline-size: 24px; aspect-ratio: 1; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2); }
.cs-navy { background: #17163f; } .cs-pink { background: #f2547a; } .cs-paper { background: #f4f1ea; }
.cs-aa { font: 800 1.5rem/1 var(--font-d); color: var(--ink); }
.cs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--line-2); font: 500 .7rem/1 var(--font-m); color: var(--mute); white-space: nowrap; }
.cs-chip .i { inline-size: 12px; block-size: 12px; }
.cs-lock { color: var(--ink-2); background: var(--surface-2); }
.cs-ok { color: var(--ok); border-color: transparent; background: color-mix(in srgb, var(--ok) 13%, transparent); }
.cs-edit, .cs-own { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cs-inh { color: var(--mute); }
.cs-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; margin-block-start: 6px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
.cs-foot .i { margin-block-start: 1px; color: var(--accent); }
.cs-foot b { color: var(--ink); font-weight: 500; }

.cs-tree, .cs-tree ul { list-style: none; margin: 0; padding: 0; }
.cs-tree ul { margin-inline-start: 14px; padding-inline-start: 12px; border-inline-start: 1px dashed var(--line-2); }
.cs-node { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 9px; margin-block: 2px; border-radius: 10px; font: 500 .86rem/1.2 var(--font-d); color: var(--ink); }
.cs-node .i { color: var(--mute); }
.cs-node small { flex-basis: 100%; margin-inline-start: 28px; font: 500 .68rem/1.2 var(--font-m); color: var(--mute); }
.cs-top { font-weight: 800; }
.cs-sel { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.cs-sel .i { color: var(--accent); }

.cs-split { display: grid; gap: 14px; justify-items: center; margin-block: 6px; }
.cs-phone { inline-size: 112px; aspect-ratio: 9 / 19; border: 4px solid #1c1e23; border-radius: 22px; overflow: hidden; background: #f2f2f7; box-shadow: var(--shadow-1); }
.cs-shot { display: block; inline-size: 100%; block-size: 100%; background: url('/assets/img/nfc/demo-card.webp') center top / 100% auto no-repeat; }
.cs-fields { inline-size: 100%; }
@media (min-width: 560px) {
  .cs-split { grid-template-columns: 116px minmax(0, 1fr); align-items: start; justify-items: stretch; }
  .cs-phone { margin-block-start: 6px; }
}

/* ── NFC : une carte s'approche du haut du téléphone ── */
.art-nfc { min-block-size: 232px; padding: 18px 18px 0; align-items: end; }
.nf-scene { position: relative; inline-size: 250px; block-size: 176px; max-inline-size: 100%; }
.nf-card { position: absolute; inset-inline-start: 22px; inset-block-start: 44px; inline-size: 110px; aspect-ratio: 1.586; border-radius: 10px; rotate: -8deg; z-index: 1;
  background: linear-gradient(150deg, #20232a, #0b0c0e 70%); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14) inset;
  display: grid; place-items: center; }
.nf-card .logo { inline-size: 70%; block-size: auto; aspect-ratio: 5.6775; color: #fff; }
.nf-chip { position: absolute; inset-block-start: 7px; inset-inline-end: 8px; inline-size: 13px; block-size: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.nf-phone { position: absolute; inset-inline-start: 112px; inset-block-start: 36px; inline-size: 122px; block-size: 300px; box-sizing: border-box; z-index: 2;
  border: 5px solid #1c1e23; border-radius: 28px 28px 0 0; background: radial-gradient(120% 60% at 20% 0%, #3d6bff66, transparent 60%), linear-gradient(165deg, #1c2f7a, #3a1d74 55%, #120f2b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 12px 26px -10px rgba(0, 0, 0, .5); }
.nf-island { position: absolute; inset-block-start: 7px; inset-inline-start: 50%; translate: -50% 0; inline-size: 38px; block-size: 11px; border-radius: 99px; background: #000; }
.nf-time { position: absolute; inset-block-start: 8px; inset-inline-start: 12px; font: 800 .52rem/1 var(--font-d); color: #fff; }
.nf-ban { position: absolute; inset-inline: 7px; inset-block-start: 32px; block-size: 26px; border-radius: 9px; background: rgba(255, 255, 255, .94); display: flex; align-items: center; gap: 6px; padding-inline: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .28); }
.nf-ban i { flex: none; inline-size: 15px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 45deg, #1fb6ff, #1a5cf0, #1fb6ff); }
.nf-ban u { flex: 1; block-size: 11px; background: linear-gradient(#9aa0aa, #9aa0aa) 0 12% / 76% 28% no-repeat, linear-gradient(#c3c7cf, #c3c7cf) 0 88% / 100% 28% no-repeat; text-decoration: none; }
.nf-wave { position: absolute; inset-inline-start: 112px; inset-block-start: 66px; inline-size: 34px; aspect-ratio: 1; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--accent); z-index: 3; opacity: 0; pointer-events: none; }
.nf-wave:nth-of-type(1) { opacity: .35; scale: 1.5; }
@media all {
  .nf-card { animation: nf-card 5.4s cubic-bezier(.2, .8, .2, 1) infinite; }
  .nf-ban { animation: nf-ban 5.4s cubic-bezier(.2, .8, .2, 1) infinite; }
  .nf-wave { animation: nf-wave 5.4s ease-out infinite; scale: .2; }
  .nf-wave:nth-of-type(2) { animation-delay: .3s; } .nf-wave:nth-of-type(3) { animation-delay: .6s; }
}
@keyframes nf-card { 0%, 6% { opacity: 0; translate: -58px 24px; rotate: -20deg; } 30% { opacity: 1; translate: 0 0; rotate: -8deg; } 34% { translate: 6px 0; } 37%, 88% { opacity: 1; translate: 0 0; rotate: -8deg; } 96%, 100% { opacity: 0; translate: -12px 6px; } }
@keyframes nf-ban { 0%, 44% { translate: 0 -36px; opacity: 0; } 52% { translate: 0 0; opacity: 1; } 88% { translate: 0 0; opacity: 1; } 96%, 100% { translate: 0 0; opacity: 0; } }
@keyframes nf-wave { 0%, 33% { scale: .2; opacity: 0; } 36% { opacity: .75; } 60%, 100% { scale: 2.1; opacity: 0; } }

/* ── 32 langues : une planète et ses drapeaux en orbite ── */
.art-lang { display: grid; place-items: center; min-block-size: 300px; padding: 14px; }
.pl { position: relative; inline-size: 280px; aspect-ratio: 1; max-inline-size: 100%; }
.art-lang .pl-globe { border: 0; padding: 0; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 92px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), transparent 32%), radial-gradient(ellipse 30% 22% at 38% 42%, #3fae77, transparent 72%), radial-gradient(ellipse 20% 30% at 66% 58%, #3fae77, transparent 72%), radial-gradient(ellipse 16% 11% at 56% 26%, #6fcf97, transparent 72%), radial-gradient(circle at 36% 30%, #4f8dff, #2563eb 52%, #0e2a78 100%);
  box-shadow: inset -11px -13px 24px rgba(5, 12, 50, .55), 0 0 46px color-mix(in srgb, var(--accent) 40%, transparent); }
.pl-orbit { position: absolute; inset: 0; }
.pl-orbit::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: calc(var(--r) * 2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed var(--line-2); }
.pl-o1 { --r: 66px; } .pl-o2 { --r: 96px; } .pl-o3 { --r: 126px; }
.pl-s { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 24px; block-size: 24px; margin: -12px 0 0 -12px; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); }
.pl-s img { display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; rotate: calc(var(--a) * -1); box-shadow: 0 0 0 1.5px var(--surface-2), 0 2px 5px rgba(11, 12, 14, .28); }
@media all {
  .pl-o1 { animation: pl-spin 48s linear infinite; } .pl-o2 { animation: pl-spin 72s linear infinite reverse; } .pl-o3 { animation: pl-spin 96s linear infinite; }
  .pl-o1 .pl-s img { animation: pl-unspin 48s linear infinite; } .pl-o2 .pl-s img { animation: pl-unspin 72s linear infinite reverse; } .pl-o3 .pl-s img { animation: pl-unspin 96s linear infinite; }
}
@keyframes pl-spin { to { rotate: 360deg; } }
@keyframes pl-unspin { from { rotate: calc(var(--a) * -1); } to { rotate: calc(var(--a) * -1 - 360deg); } }
.pl-o1 .pl-s:nth-child(1) { --a: 0.0deg; }
.pl-o1 .pl-s:nth-child(2) { --a: 45.0deg; }
.pl-o1 .pl-s:nth-child(3) { --a: 90.0deg; }
.pl-o1 .pl-s:nth-child(4) { --a: 135.0deg; }
.pl-o1 .pl-s:nth-child(5) { --a: 180.0deg; }
.pl-o1 .pl-s:nth-child(6) { --a: 225.0deg; }
.pl-o1 .pl-s:nth-child(7) { --a: 270.0deg; }
.pl-o1 .pl-s:nth-child(8) { --a: 315.0deg; }
.pl-o2 .pl-s:nth-child(1) { --a: 0.0deg; }
.pl-o2 .pl-s:nth-child(2) { --a: 32.73deg; }
.pl-o2 .pl-s:nth-child(3) { --a: 65.45deg; }
.pl-o2 .pl-s:nth-child(4) { --a: 98.18deg; }
.pl-o2 .pl-s:nth-child(5) { --a: 130.91deg; }
.pl-o2 .pl-s:nth-child(6) { --a: 163.64deg; }
.pl-o2 .pl-s:nth-child(7) { --a: 196.36deg; }
.pl-o2 .pl-s:nth-child(8) { --a: 229.09deg; }
.pl-o2 .pl-s:nth-child(9) { --a: 261.82deg; }
.pl-o2 .pl-s:nth-child(10) { --a: 294.55deg; }
.pl-o2 .pl-s:nth-child(11) { --a: 327.27deg; }
.pl-o3 .pl-s:nth-child(1) { --a: 0.0deg; }
.pl-o3 .pl-s:nth-child(2) { --a: 27.69deg; }
.pl-o3 .pl-s:nth-child(3) { --a: 55.38deg; }
.pl-o3 .pl-s:nth-child(4) { --a: 83.08deg; }
.pl-o3 .pl-s:nth-child(5) { --a: 110.77deg; }
.pl-o3 .pl-s:nth-child(6) { --a: 138.46deg; }
.pl-o3 .pl-s:nth-child(7) { --a: 166.15deg; }
.pl-o3 .pl-s:nth-child(8) { --a: 193.85deg; }
.pl-o3 .pl-s:nth-child(9) { --a: 221.54deg; }
.pl-o3 .pl-s:nth-child(10) { --a: 249.23deg; }
.pl-o3 .pl-s:nth-child(11) { --a: 276.92deg; }
.pl-o3 .pl-s:nth-child(12) { --a: 304.62deg; }
.pl-o3 .pl-s:nth-child(13) { --a: 332.31deg; }

/* zones tactiles du fil d'Ariane (≥ 36 px) et adresse tronquée proprement sur très petit écran */
.cs-crumb label { padding: 10px 11px; }
.cs-url { text-overflow: ellipsis; }



/* ═════════ HERO : écran d'accueil → la carte NFC arrive → la carte démo s'ouvre (boucle de 9 s) ═════════ */
.hx-home { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.hx-open { position: absolute; inset: 0; overflow: hidden; background: #14122b; }
.hx-home { animation: hx-home 9s cubic-bezier(.2, .8, .2, 1) infinite; }
.hx-open { opacity: 0; transform-origin: 50% 30%; animation: hx-open 9s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes hx-home { 0%, 42% { opacity: 1; transform: none; } 50%, 94% { opacity: 0; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes hx-open { 0%, 44% { opacity: 0; transform: scale(.9); } 52% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes hx-banner2 { 0%, 36% { opacity: 0; transform: translateY(-140%); } 40%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-60%); } }
.hx-banner { animation: hx-banner2 9s cubic-bezier(.2, .8, .2, 1) infinite !important; }
.hx-nfc, .hx-screen::after, .hx-waves span { animation-duration: 9s !important; }
.hx-nfc { background: linear-gradient(150deg, #20232a, #0b0c0e 70%); }

/* ═════════ Tuile Wallet : la carte démo dans un téléphone ═════════ */
.art-wallet { align-content: space-between; }
.wl-phone { position: relative; inline-size: 150px; block-size: 214px; box-sizing: border-box; border: 5px solid #1c1e23; border-bottom: 0; border-radius: 26px 26px 0 0; overflow: hidden; background: #f2f2f7; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 14px 30px -12px rgba(0, 0, 0, .5); }
.wl-shot { display: block; inline-size: 100%; block-size: auto; }
.wl-island { position: absolute; inset-block-start: 6px; inset-inline-start: 50%; translate: -50% 0; inline-size: 44px; block-size: 12px; border-radius: 99px; background: #000; z-index: 1; }

/* ═════════ Tuile NFC : carte noire sans logo ═════════ */
.nf-big { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: 38%; block-size: auto; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }

/* ═════════ SPOT ═════════ */
.nx-scope .nx-shop .nx-sp-pile { left: 38%; top: 80%; width: 34%; transform: translate(-50%, -50%) perspective(700px) rotateX(64deg) rotateZ(-4deg); }
.nx-scope .nx-sp-cross { position: absolute; left: 38%; top: 79%; width: 19%; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(90, 0, 0, .45)); pointer-events: none; z-index: 5; }
.nx-scope .nx-sp-cross path { fill: none; stroke: #e11d2e; stroke-width: 9; stroke-linecap: round; }
/* la carte SPOT est collée en bas à droite du pied de l'écran (à droite du support) */
.nx-scope .nx-shop .nx-sp-stuck { left: 57.5%; top: 62%; width: 14%; transform: translate(-50%, -50%); }
.nx-scope .nx-shop .nx-sp-phone { left: 40%; top: 46%; width: 13%; }
.nx-scope .nx-shop .nx-sp-tag { left: 56%; top: 72%; }
/* le téléphone démarre sur l'écran d'accueil (YOUR LOGO), la carte NFC le fait ouvrir la carte démo */
.nx-scope .nx-spp-lock { background: url('/assets/img/nfc/home-ios.webp') center top / cover no-repeat; }
.nx-scope .nx-spp-time { display: none; }

/* ═════════ FEED : chevalet de face, ombre posée sur le bureau ═════════ */
.nx-scope .nx-fd-shadow { left: 24%; top: 68.6%; width: 22%; height: 2.8%; filter: blur(3px); }

/* ═════════ Tuile « sans application » : une seule icône au milieu, avec un zoom dessus ═════════ */
.hs-phone { background: #17133a; }
.hs-shot { transform-origin: 50% 38%; animation: hs-zoom 6s cubic-bezier(.45, 0, .2, 1) infinite; will-change: transform; }
@keyframes hs-zoom { 0%, 14% { transform: scale(1); } 46%, 70% { transform: scale(2.2); } 94%, 100% { transform: scale(1); } }

/* ═════════ Logo CARD.PM à cartouche bleu (en-tête et pied de page), version selon le thème ═════════ */
.brand-img { display: block; block-size: 22px; inline-size: auto; aspect-ratio: 5408 / 970; }
.brand-img--sombre { display: none; }
:root[data-theme='dark'] .brand-img--clair { display: none; }
:root[data-theme='dark'] .brand-img--sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand-img--clair { display: none; }
  :root:not([data-theme='light']) .brand-img--sombre { display: block; }
}

/* ═════════ NFC : YOUR LOGO sur la carte noire (à la place de la grande antenne) ═════════ */
.nf-yl { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; block-size: 78%; inline-size: auto; display: block; }
.nf-big { display: none; }
.nf-card { background: linear-gradient(150deg, #1d1b4d, #17163f 70%); }

/* ═════════ Section démo : un seul téléphone avec la nouvelle carte, ses trois atouts et le QR code ═════════ */
.rf-demo--one { grid-template-columns: minmax(0, 270px) minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); }
.rf-demo--one .rf-shot .rf-phone { transform: none; }
.rf-demo--one .rf-shot:hover .rf-phone { transform: translateY(-8px) rotate(-1deg); }
.rf-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.rf-feats li { display: grid; gap: 4px; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent); }
.rf-feats b { font: 700 1.1rem/1.25 var(--font-d); color: var(--ink); }
.rf-feats span { font-size: .96rem; color: var(--ink-2); max-inline-size: 42ch; }
@media (max-width: 960px) {
  .rf-demo--one { grid-template-columns: 1fr; justify-items: center; }
  .rf-demo--one .rf-shot { inline-size: 100%; max-inline-size: 280px; }
  .rf-demo--one .rf-feats { inline-size: 100%; max-inline-size: 330px; }
}

/* ═════════ Cartes NFC qui tournent : même antenne que la tuile NFC, à la couleur principale du logo ═════════
   (sans règle, le symbole héritait du remplissage noir par défaut) */
.nx-scope .nx-bc .nx-nfc-i { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .95; }
.nx-scope .nx-m-pvc .nx-bc[data-ink="dark"] .nx-nfc-i { filter: none; opacity: 1; }
.nx-scope .nx-m-pvc .nx-bc.nx-b-era .nx-nfc-i { color: #c00828; }   /* ERA : le rouge de la maison */
.nx-scope .nx-b-pp .nx-mark { max-width: 76%; max-height: 62%; }    /* Propriétés Privées : logo plus grand, rose */

/* tas de cartes SPOT : tranche visible entre les cartes (l'épaisseur du papier) */
.nx-scope .nx-sp-pile .nx-pc { box-shadow: 0 0 0 .4px rgba(70, 55, 30, .45), 0 1px 0 rgba(255, 255, 255, .5), 0 3px 4px -1px rgba(60, 40, 10, .28); }
.nx-scope .nx-sp-pile .nx-pc:not(.nx-top)::after { background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%, rgba(0, 0, 0, .06)), rgba(60, 45, 20, var(--sh, 0)); }

/* ═════════ HERO : la vraie carte web card.pm/demo qui défile, avec ses deux boutons flottants ═════════ */
.hx-web { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; display: block; animation: hx-webscroll 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes hx-webscroll { 0%, 56% { object-position: 50% 0; } 72%, 76% { object-position: 50% 100%; } 90%, 100% { object-position: 50% 0; } }
.hx-fab { position: absolute; inset-block-end: 1.6%; inline-size: 20%; block-size: auto; display: block; filter: drop-shadow(0 0 6px rgba(242, 84, 122, .45)); }
.hx-fab--add { inset-inline-start: 0; } .hx-fab--more { inset-inline-end: 0; }

/* ═════════ Tas de cartes de visite : cartes photographiées mises à plat (en-dessous, des cartes unies) ═════════ */
.nx-scope .nx-sp-pile .nx-pc { width: 36%; border-radius: 3.2% / 5%; }
.nx-scope .nx-sp-pile .nx-plain { background: var(--b); }
.nx-scope .nx-sp-pile .nx-ci { background-color: #e8e4da; background-size: 100% 100%; background-repeat: no-repeat; }
.nx-scope .nx-ci-lumiere { background-image: url('/assets/img/nfc/cards/lumiere.webp'); }
.nx-scope .nx-ci-coeur { background-image: url('/assets/img/nfc/cards/coeur.webp'); }
.nx-scope .nx-ci-atrium { background-image: url('/assets/img/nfc/cards/atrium.webp'); }
.nx-scope .nx-ci-bellevue { background-image: url('/assets/img/nfc/cards/bellevue.webp'); }
.nx-scope .nx-ci-terrasses { background-image: url('/assets/img/nfc/cards/terrasses.webp'); }
.nx-scope .nx-ci-nova { background-image: url('/assets/img/nfc/cards/nova.webp'); }
.nx-scope .nx-ci-rivage { background-image: url('/assets/img/nfc/cards/rivage.webp'); }
.nx-scope .nx-ci-horizon { background-image: url('/assets/img/nfc/cards/horizon.webp'); }

/* ═════════ Section démo : la vraie carte card.pm/demo qui monte et descend ═════════ */
.rf-phone--web { background: #111; }
.rf-web { position: relative; aspect-ratio: 9 / 19.3; border-radius: 27px; overflow: hidden; background: #14122b; }
.rf-web-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
.rf-s0 { animation: rf-webscroll 16s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes rf-webscroll { 0%, 8% { object-position: 50% 0; } 46%, 54% { object-position: 50% 100%; } 92%, 100% { object-position: 50% 0; } }
.rf-demo--one .rf-shot .rf-phone { padding: 8px; }
.rf-phone .rf-web .hx-fab { inline-size: 21%; block-size: auto; aspect-ratio: 156 / 112; object-fit: contain; border-radius: 0; }
.rf-phone .rf-web .rf-web-img { aspect-ratio: auto; border-radius: 0; block-size: 100%; inline-size: 100%; }

/* ═════════ Tuile QR code : trois onglets (Carte / Consentement / vCard), QR blanc sur fond marine ═════════ */
.qt { display: grid; grid-template-rows: auto 1fr; align-content: start; justify-items: center; gap: 14px; padding: 14px; background: linear-gradient(180deg, #19183f, #14122b); border-color: rgba(255, 255, 255, .1); min-block-size: 330px; }
.qt-r { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.qt-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: #eeeee9; max-inline-size: 100%; }
.qt-tabs label { padding: 9px 14px; border-radius: 99px; font: 500 .82rem/1 var(--font-d); color: #5a5b55; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.qt-panes { display: grid; place-items: center; }
.qt-pane { grid-area: 1 / 1; display: none; justify-items: center; gap: 10px; }
.qt-pane small { font: 500 .74rem/1.2 var(--font-m); letter-spacing: .04em; color: rgba(255, 255, 255, .7); text-align: center; }
.qt-qr { inline-size: min(190px, 62vw); block-size: auto; fill: #fff; display: block; }
.qt:has(#qt-1:checked) .qt-p1, .qt:has(#qt-2:checked) .qt-p2, .qt:has(#qt-3:checked) .qt-p3 { display: grid; }
.qt:has(#qt-1:checked) label[for="qt-1"], .qt:has(#qt-2:checked) label[for="qt-2"], .qt:has(#qt-3:checked) label[for="qt-3"] { background: #fff; color: #151713; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.qt:has(.qt-r:focus-visible) .qt-tabs { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═════════ Tuile NFC : la scène rétrécit avec la tuile (plus de coupure sur petit écran) ═════════ */
.art-nfc { container-type: inline-size; justify-items: center; }
.nf-scene { transform-origin: 50% 100%; }
@container (max-width: 292px) { .nf-scene { scale: .86; } }
@container (max-width: 262px) { .nf-scene { scale: .72; } }
@container (max-width: 232px) { .nf-scene { scale: .62; } }
@keyframes nf-card { 0%, 6% { opacity: 0; translate: -30px 18px; rotate: -18deg; } 30% { opacity: 1; translate: 0 0; rotate: -8deg; } 34% { translate: 5px 0; } 37%, 88% { opacity: 1; translate: 0 0; rotate: -8deg; } 96%, 100% { opacity: 0; translate: -10px 5px; } }
.nf-card { inset-inline-start: 34px; }

/* ═════════ SPOT « avant » en trois temps : le tas apparaît, la croix rouge se dessine, puis la scène « après » défile ═════════ */
.nx-scope .nx-sp-cross path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.nx-scope .nx-sp-cross .nx-x1 { animation: nx-x1 13s ease-out infinite; }
.nx-scope .nx-sp-cross .nx-x2 { animation: nx-x2 13s ease-out infinite; }
@keyframes nx-x1 { 0%, 12% { stroke-dashoffset: 100; } 20%, 93% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }
@keyframes nx-x2 { 0%, 20% { stroke-dashoffset: 100; } 28%, 93% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }

/* ═════════ Carte interactive : trois états (carte qui défile / menu / vCard), pilotés par les deux boutons du bas ═════════ */
.rf-r { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.rf-card .rf-web-img { position: absolute; inset: 0; }
.rf-card .rf-s1, .rf-card .rf-s2 { display: none; }
.rf-card:has(#rfc-1:checked) .rf-s0, .rf-card:has(#rfc-2:checked) .rf-s0 { display: none; }
.rf-card:has(#rfc-1:checked) .rf-s1, .rf-card:has(#rfc-2:checked) .rf-s2 { display: block; }
.rf-card .rf-s1, .rf-card .rf-s2 { animation: rf-menuscroll 9s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes rf-menuscroll { 0%, 22% { object-position: 50% 0; } 55%, 78% { object-position: 50% 22%; } 100% { object-position: 50% 0; } }
.rf-card .rf-fab { position: absolute; inset-block-end: 1.6%; z-index: 3; display: block; cursor: pointer; filter: drop-shadow(0 0 6px rgba(242, 84, 122, .45)); transition: transform .15s; }
.rf-card .rf-fab:active { transform: scale(.94); }
.rf-card .rf-fab img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: auto; border-radius: 0; }
.rf-card .rf-fab-add { inset-inline-start: 0; inline-size: 21%; }
.rf-card .rf-fab-more { inset-inline-end: 0; inline-size: 21%; }
.rf-card .rf-fab-close { inset-inline-end: 0; inline-size: 36%; display: none; filter: drop-shadow(0 0 6px rgba(242, 84, 122, .45)); }
.rf-card:has(#rfc-1:checked) .rf-fab-more, .rf-card:has(#rfc-2:checked) .rf-fab-more { display: none !important; }
.rf-card:has(#rfc-1:checked) .rf-fab-close, .rf-card:has(#rfc-2:checked) .rf-fab-close { display: block; }
.rf-card:has(.rf-r:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ═════════ FEED : le chevalet pose sur le bureau (ombre de contact + tranche), logo « Votre logo » sur la plaque ═════════ */
.nx-scope .nx-fd-shadow { left: 24%; top: 68.9%; width: 23%; height: 2.4%; filter: blur(2px); background: radial-gradient(closest-side, rgba(25, 12, 2, .92), rgba(40, 22, 6, .4) 62%, transparent); z-index: 1; }
.nx-scope .nx-yl-plq { display: grid; justify-items: center; gap: 3cqw; margin-top: 11cqw; color: #fff; }
.nx-scope .nx-yl-plq svg { inline-size: 17cqw; block-size: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.nx-scope .nx-yl-plq b { font: 800 7.2cqw/1 var(--font-b); letter-spacing: .04em; }

/* ═════════ Haut de page : antenne NFC blanche (même tracé que sur les autres cartes) ═════════ */
.hx-nfc .hx-nfc-i, .hx-nfc > svg { fill: none; stroke: #fff; color: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .95; inline-size: 11%; block-size: auto; aspect-ratio: 1; }

/* ═════════ Plaque FEED aux couleurs de « YOUR LOGO » (marine, rose, blanc) ═════════ */
.nx-scope .nx-fd-in .nx-plq { background: linear-gradient(155deg, #1d1b4d, #17163f 62%, #110f33); color: #fff; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel { background: #fff; color: #f2547a; box-shadow: 0 1.4cqw 0 #0d0c26; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel span { color: #f2547a; }
.nx-scope .nx-plq .nx-yl-img { display: block; block-size: 28cqw; inline-size: auto; max-inline-size: none; margin: 4cqw auto 0; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-s, .nx-scope .nx-fd-in .nx-plq .nx-plq-t { color: #fff; }

/* ═════════ Frise des clients : logos sans lien, et frise qui défile aussi avec « Réduire les animations » ═════════ */
.marquee a:not([href]) { cursor: default; }
.marquee a:not([href]):hover { color: inherit; border-color: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { flex-wrap: nowrap; }
}

/* ═════════ Carte interactive : VISITE GUIDÉE automatique (boucle de 40 s) ═════════
   carte qui défile → appui sur le menu (panneau qui monte et descend) → appui sur « Actions ✕ » → appui sur +contact (vCard) → retour.
   Un appui réel sur un bouton passe en mode manuel ; « Actions ✕ » relance la visite. Pur CSS : fonctionne sur mobile. */
.rf-card:has(#rfc-a:checked) .rf-web-img { display: block; }
.rf-card:has(#rfc-a:checked) .rf-s0 { animation: rf-t0 26s linear infinite; }
.rf-card:has(#rfc-a:checked) .rf-fab-more { animation: rf-tmore 26s linear infinite; }
.rf-card:has(#rfc-a:checked) .rf-fab-close { display: block; animation: rf-tclose 26s linear infinite; opacity: 0; }
@keyframes rf-t0 {
  0%, 4% { opacity: 1; object-position: 50% 0; } 21% { object-position: 50% 100%; } 26% { object-position: 50% 100%; } 33% { opacity: 1; object-position: 50% 0; }
  36% { opacity: 1; } 36.6%, 63% { opacity: 0; object-position: 50% 0; }
  63.6%, 72% { opacity: 1; object-position: 50% 0; } 72.6%, 94.4% { opacity: 0; } 95%, 100% { opacity: 1; object-position: 50% 0; }
}
@keyframes rf-t1 { 0%, 36.5% { opacity: 0; } 37%, 62% { opacity: 1; } 62.6%, 100% { opacity: 0; } }
.rf-card:has(#rfc-a:checked) .rf-s1 { animation: rf-t1 26s linear infinite, rf-p1 26s linear infinite; }
.rf-card:has(#rfc-a:checked) .rf-s2 { animation: rf-t2 26s linear infinite, rf-p2 26s linear infinite; }
@keyframes rf-p1 { 0%, 41% { object-position: 50% 0; } 52% { object-position: 50% 22%; } 55% { object-position: 50% 22%; } 60%, 100% { object-position: 50% 0; } }
@keyframes rf-t2 { 0%, 72.5% { opacity: 0; } 73%, 94% { opacity: 1; } 94.6%, 100% { opacity: 0; } }
@keyframes rf-p2 { 0%, 77% { object-position: 50% 0; } 86% { object-position: 50% 62%; } 88% { object-position: 50% 62%; } 92%, 100% { object-position: 50% 0; } }
@keyframes rf-tmore { 0%, 36.5% { opacity: 1; } 37%, 62% { opacity: 0; } 62.6%, 72.5% { opacity: 1; } 73%, 94% { opacity: 0; } 94.6%, 100% { opacity: 1; } }
@keyframes rf-tclose { 0%, 36.5% { opacity: 0; } 37%, 62% { opacity: 1; } 62.6%, 72.5% { opacity: 0; } 73%, 94% { opacity: 1; } 94.6%, 100% { opacity: 0; } }
/* le « doigt » : un anneau qui se pose sur le bouton avant chaque changement d'écran */
.rf-tap { position: absolute; z-index: 4; inline-size: 18%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 4px rgba(242, 84, 122, .4); opacity: 0; scale: 1.7; pointer-events: none; inset-block-end: 3%; display: none; }
.rf-tap-l { inset-inline-start: 1%; } .rf-tap-r { inset-inline-end: 2%; }
.rf-card:has(#rfc-a:checked) .rf-tap { display: block; }
.rf-card:has(#rfc-a:checked) .rf-tap-r { animation: rf-tapr 26s linear infinite; }
.rf-card:has(#rfc-a:checked) .rf-tap-l { animation: rf-tapl 26s linear infinite; }
@keyframes rf-tapr { 0%, 32% { opacity: 0; scale: 1.7; } 34.5% { opacity: 1; scale: 1; } 36.4% { opacity: 1; scale: .88; } 37.5%, 59% { opacity: 0; scale: 1.7; } 60.5% { opacity: 1; scale: 1; } 62.4% { opacity: 1; scale: .88; } 63.5%, 91% { opacity: 0; scale: 1.7; } 92.5% { opacity: 1; scale: 1; } 94.3% { opacity: 1; scale: .88; } 95.5%, 100% { opacity: 0; } }
@keyframes rf-tapl { 0%, 67% { opacity: 0; scale: 1.7; } 69.5% { opacity: 1; scale: 1; } 72.2% { opacity: 1; scale: .88; } 73.5%, 100% { opacity: 0; scale: 1.7; } }
/* la vCard : le bouton contact reste visible, mais le tap du contact n'a de sens que depuis la carte */

/* ═════════ Boutons flottants de la carte, redessinés en vectoriel (même forme que sur card.pm/demo) ═════════ */
.rf-web, .hx-open { container-type: inline-size; }
.fabv { position: absolute; inset-block-end: 3cqw; display: flex; align-items: center; justify-content: center; block-size: 14.6cqw; box-sizing: border-box; background: #17163f; color: #fff;
  box-shadow: 0 0 0 .5cqw rgba(242, 84, 122, .55), 0 0 3.2cqw rgba(242, 84, 122, .75); filter: none; z-index: 3; }
.fabv .s { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fabv svg { display: block; }
.fabv-add { inset-inline-start: 0; inline-size: 20cqw; border-radius: 0 99px 99px 0; padding-inline-end: 1.5cqw; }
.fabv-add svg { inline-size: 9.8cqw; block-size: auto; }
.fabv-more { inset-inline-end: 0; inline-size: 20cqw; border-radius: 99px 0 0 99px; padding-inline-start: 1.5cqw; }
.fabv-more svg { inline-size: 7.6cqw; block-size: auto; }
.fabv-close { inset-inline-end: 0; inline-size: 38cqw; gap: 3.6cqw; border-radius: 99px 0 0 99px; padding-inline-start: 2cqw; }
.fabv-close span { font: 600 5.2cqw/1 var(--font-b); letter-spacing: .01em; }
.fabv-close svg { inline-size: 6.4cqw; block-size: auto; }
.rf-card .rf-fab.fabv { filter: none; display: flex; align-items: center; justify-content: center; }
.rf-card .rf-fab-add.fabv { inline-size: 20cqw; } .rf-card .rf-fab-more.fabv { inline-size: 20cqw; } .rf-card .rf-fab-close.fabv { inline-size: 38cqw; }
.rf-card .rf-fab.fabv:active { transform: scale(.95); }
.rf-card .rf-fab-close.fabv { display: none; }
.rf-card:has(#rfc-a:checked) .rf-fab-close.fabv, .rf-card:has(#rfc-1:checked) .rf-fab-close.fabv, .rf-card:has(#rfc-2:checked) .rf-fab-close.fabv { display: flex; }
.rf-card:has(#rfc-1:checked) .rf-fab-close.fabv, .rf-card:has(#rfc-2:checked) .rf-fab-close.fabv { display: flex; }
.rf-card:has(#rfc-a:checked) .rf-fab-close.fabv { display: flex; }
.hx-fab.fabv { inline-size: 20cqw; }
.hx-fab--more.fabv { inline-size: 20cqw; }
.rf-tap { inline-size: 16cqw; }

/* ═════════ Tuile NFC : la scène est remontée et le téléphone descend jusqu'en bas de la bulle (coupé par son bord) ═════════ */
.art-nfc { align-items: end; padding: 14px 18px 0; min-block-size: 220px; }
.nf-scene { block-size: 200px; }
.nf-card { inset-block-start: 34px; }
.nf-phone { inset-block-start: 22px; block-size: 400px; border-radius: 28px 28px 0 0; border-bottom: 0; -webkit-mask-image: none; mask-image: none; }
.nf-wave { inset-block-start: 52px; }

/* ═════════ En-tête : « Se connecter » reste visible sur mobile, en icône de profil ═════════ */
.login-ic { display: none; }
@media (max-width: 720px) {
  .top-actions .link.link--login { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); background: var(--surface); }
  .top-actions .link--login .login-ic { display: block; inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .top-actions .link--login .login-tx { display: none; }
  .top .brand { flex: 0 1 auto; min-inline-size: 88px; }
  .top .brand .brand-img { inline-size: 100%; block-size: auto; }
}
@media (max-width: 360px) {
  .top { gap: 6px; }
  .top-actions { gap: 4px; }
  .top-actions .btn { padding-inline: 14px; font-size: .88rem; }
  .top-actions .link--login { inline-size: 36px; block-size: 36px; }
}
@media (max-width: 340px) {
  .top { padding-inline: 12px; gap: 4px; }
  .top .brand { min-inline-size: 76px; }
  .top-actions .icon-btn { inline-size: 34px; block-size: 34px; }
  .top-actions .btn { padding-inline: 11px; font-size: .82rem; }
  .top-actions .link--login { inline-size: 34px; block-size: 34px; }
}

/* ═════════ Plaque FEED (écran) : composition centrée, point d'exclamation, pastille « avis Google » ═════════ */
.nx-scope .nx-fd-in .nx-plq { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0; gap: 0; }
.nx-scope .nx-plq .nx-yl-img { block-size: 31cqw; inline-size: auto; max-inline-size: none; margin: 0; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-stars { display: none; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel { margin-top: 4cqw; inline-size: 72%; block-size: 22cqw; flex: none; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-s { margin-top: 4cqw; font-size: 8.4cqw; line-height: 1; text-align: center; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-t { margin-top: 1.6cqw; inline-size: 100%; font-size: 3.5cqw; line-height: 1.15; letter-spacing: .03em; text-align: center; }
.nx-scope .nx-plq-g { margin-top: 3cqw; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.1cqw 3.2cqw; border-radius: 99px; background: #fff; box-shadow: 0 .7cqw 0 #0d0c26; }
.nx-scope .nx-plq-g .nx-g { inline-size: 5.2cqw; block-size: 5.2cqw; flex: none; }
.nx-scope .nx-plq-g .nx-gs { font-size: 4.4cqw; line-height: 1; letter-spacing: .15cqw; color: #f5a524; }

/* ═════════ Plaque FEED : proportions revues pour rester lisible une fois réduite sur l'écran ═════════ */
.nx-scope .nx-fd-in .nx-plq { padding: 0; }
.nx-scope .nx-plq .nx-yl-img { block-size: 30cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel { margin-top: 3cqw; inline-size: 78%; block-size: 23cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-s { margin-top: 3cqw; font-size: 12cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-t { margin-top: 1cqw; font-size: 5.6cqw; line-height: 1.12; letter-spacing: 0; text-transform: none; font-weight: 600; }
.nx-scope .nx-plq-g { margin-top: 3cqw; gap: 2cqw; padding: 1.4cqw 3.6cqw; }
.nx-scope .nx-plq-g .nx-g { inline-size: 7cqw; block-size: 7cqw; }
.nx-scope .nx-plq-g .nx-gs { font-size: 6.2cqw; }

/* ═════════ Plaque FEED, 2e passe : plaque plus grande + textes sur deux lignes bien plus gros ═════════ */
.nx-scope .nx-fd-in .nx-plq { padding: 0; }
.nx-scope .nx-plq .nx-yl-img { block-size: 25cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel { margin-top: 2.5cqw; inline-size: 82%; block-size: 22cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-s { margin-top: 2cqw; font-size: 14cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-t { margin-top: 1cqw; font-size: 7.6cqw; line-height: 1.1; font-weight: 700; }
.nx-scope .nx-plq-g { margin-top: 2.5cqw; padding: 1.6cqw 4cqw; gap: 2.2cqw; }
.nx-scope .nx-plq-g .nx-g { inline-size: 8.4cqw; block-size: 8.4cqw; }
.nx-scope .nx-plq-g .nx-gs { font-size: 7.4cqw; }

/* Plaque FEED, 3e passe : un peu plus petite, pastille Google décollée du bord du bas */
.nx-scope .nx-plq .nx-yl-img { block-size: 23cqw; margin-top: 2cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-g { margin-top: 2.5cqw; margin-bottom: 9cqw; }

/* FEED : plus d'ombre portée sous le chevalet (il flottait), il est posé un cran plus bas */
.nx-scope .nx-fd-shadow { display: none; }

/* Plaque FEED, 4e passe : marge au-dessus du logo, contenu centré verticalement */
.nx-scope .nx-plq .nx-yl-img { margin-top: 8cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-g { margin-bottom: 4cqw; }

/* ═════════ FEED : la plaque de l'écran grossit en place (loupe), la photo et le chevalet ne bougent pas ═════════ */
.nx-scope .nx-fd-plaque { z-index: 4; }
.nx-scope .nx-fd-plaque .nx-fd-in { transform-origin: 50% 50%; animation: nx-fdlens 12s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes nx-fdlens {
  0%, 24% { opacity: 0; transform: translate(-16%, -12%) scale(1.25); filter: none; }
  31% { opacity: 1; transform: scale(1.03); }
  34% { transform: scale(.985); }
  37%, 42% { opacity: 1; transform: none; filter: none; }
  52%, 78% { opacity: 1; transform: scale(2.3); filter: drop-shadow(0 .6cqw .9cqw rgba(0, 0, 0, .45)); }
  88% { opacity: 1; transform: none; filter: none; }
  94%, 100% { opacity: 0; transform: scale(1.04); filter: none; }
}

/* ═════════ Bouton « pause des animations » (WCAG 2.2.2), dans le bandeau à côté du bouton thème ═════════ */
.motion-toggle { display: grid; place-items: center; flex: none; inline-size: 42px; block-size: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.motion-toggle:hover { background: var(--surface-2); color: var(--ink); }
.motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.motion-toggle svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .mt-play { display: none; fill: currentColor; stroke-width: 1.6; }
html[data-motion='off'] .motion-toggle .mt-pause { display: none; }
html[data-motion='off'] .motion-toggle .mt-play { display: block; }
html[data-motion='off'] .motion-toggle { background: var(--ink); color: var(--bg); }
@media (max-width: 440px) { .top-actions .motion-toggle, .top-actions .icon-btn, .top-actions .link--login { inline-size: 35px; block-size: 35px; } .motion-toggle svg { inline-size: 18px; block-size: 18px; } .top-actions { gap: 4px; } .top-actions .btn { padding-inline: 13px; font-size: .84rem; white-space: nowrap; } .top { padding-inline: 14px; gap: 6px; } }
@media (max-width: 380px) { .top-actions .motion-toggle, .top-actions .icon-btn, .top-actions .link--login { inline-size: 33px; block-size: 33px; } .motion-toggle svg { inline-size: 17px; block-size: 17px; } .top-actions .btn { padding-inline: 11px; font-size: .8rem; } .top .brand { min-inline-size: 80px; } }
@media (max-width: 340px) { .top-actions .motion-toggle, .top-actions .icon-btn { inline-size: 30px; block-size: 30px; } .top .brand { min-inline-size: 66px; } .top-actions .btn { padding-inline: 8px; font-size: .74rem; } .top-actions .link--login { inline-size: 30px; block-size: 30px; } }
/* pause : toutes les animations CSS (y compris celles rétablies pour « Réduire les animations ») restent figées */
html[data-motion='off'] body *, html[data-motion='off'] body *::before, html[data-motion='off'] body *::after { animation-play-state: paused !important; }

/* Plaque FEED, 5e passe : mêmes marges en haut (logo) et en bas (pastille Google) */
.nx-scope .nx-plq .nx-yl-img { block-size: 20cqw; margin-top: 7cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-panel { block-size: 20cqw; margin-top: 2cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-s { font-size: 12.5cqw; margin-top: 1.5cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-t { font-size: 6.8cqw; margin-top: .6cqw; }
.nx-scope .nx-fd-in .nx-plq .nx-plq-g { margin-top: 2cqw; margin-bottom: 7cqw; padding: 1.2cqw 3.4cqw; }
.nx-scope .nx-plq-g .nx-g { inline-size: 7.2cqw; block-size: 7.2cqw; }
.nx-scope .nx-plq-g .nx-gs { font-size: 6.4cqw; }

/* ═════════ Section Tarifs : deux onglets (licence seule / licence + carte NFC PVC) ═════════ */
.tf { display: grid; justify-items: center; gap: 22px; margin-block-start: clamp(24px, 4vw, 40px); }
.tf-r { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.tf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.tf-tabs label small { display: block; margin-block-start: 3px; font: 500 .68rem/1.1 var(--font-m); opacity: .8; }
.tf-tabs label { padding: 11px 18px; border-radius: 99px; font: 500 .94rem/1.1 var(--font-d); color: var(--mute); cursor: pointer; text-align: center; transition: background-color .2s, color .2s; }
.tf-pane { display: none; inline-size: 100%; max-inline-size: 760px; }
.tf:has(#tf-1:checked) .tf-p1, .tf:has(#tf-2:checked) .tf-p2, .tf:has(#tf-3:checked) .tf-p3, .tf:has(#tf-4:checked) .tf-p4 { display: block; }
.tf:has(#tf-1:checked) label[for="tf-1"], .tf:has(#tf-2:checked) label[for="tf-2"], .tf:has(#tf-3:checked) label[for="tf-3"], .tf:has(#tf-4:checked) label[for="tf-4"] { background: var(--btn); color: var(--btn-ink); }
.tf:has(.tf-r:focus-visible) .tf-tabs { outline: 2px solid var(--accent); outline-offset: 3px; }
.tf-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; }
.tf-table caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tf-table th, .tf-table td { padding: 16px 12px; text-align: center; border-block-end: 1px solid var(--line); }
.tf-table tbody tr:last-child th, .tf-table tbody tr:last-child td { border-block-end: 0; }
.tf-table thead th { font: 500 .8rem/1.25 var(--font-m); letter-spacing: .04em; color: var(--mute); background: var(--surface-2); vertical-align: bottom; }
.tf-table thead th small { display: block; margin-block-start: 3px; font: 500 .72rem/1.2 var(--font-m); color: var(--accent); }
.tf-table tbody th { text-align: start; padding-inline-start: 18px; font: 500 .96rem/1.2 var(--font-d); color: var(--ink); }
.tf-table thead th:first-child { text-align: start; padding-inline-start: 18px; }
.tf-table td { font: 800 clamp(1.1rem, 2.6vw, 1.5rem)/1 var(--font-d); letter-spacing: -.02em; color: var(--ink); }
.tf-table td.tf-total { color: var(--accent); }
.tf-table td.tf-eco { font: 500 1rem/1 var(--font-m); letter-spacing: 0; color: var(--ok); }
.tf-note--in { margin: 14px auto 0; }
.tf-note { max-inline-size: 62ch; text-align: center; font-size: .9rem; line-height: 1.5; color: var(--mute); }
.tf-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 520px) {
  .tf-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; border-radius: 22px; } .tf-tabs label { display: grid; place-content: center; padding: 10px 6px; font-size: .8rem; line-height: 1.15; border-radius: 18px; min-block-size: 54px; } .tf-tabs label small { font-size: .64rem; }
  .tf-table th, .tf-table td { padding: 13px 6px; } .tf-table tbody th { padding-inline-start: 12px; font-size: .88rem; } .tf-table thead th:first-child { padding-inline-start: 12px; } .tf-table thead th { font-size: .7rem; }
}

/* ═════════ Estimateur de budget (sans connexion) ═════════ */
.es { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; inline-size: 100%; max-inline-size: 920px; margin: clamp(24px, 4vw, 40px) auto 0; }
.es-form, .es-sum { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.es-sum { background: var(--surface-2); display: grid; align-content: start; gap: 14px; }
.es-h { font: 800 1.2rem/1.2 var(--font-d); letter-spacing: -.01em; }
.es-sub { margin-block: 4px 18px; font-size: .92rem; color: var(--mute); }
.es-field { display: grid; gap: 8px; margin-block-end: 18px; border: 0; padding: 0; min-inline-size: 0; }
.es-field > label, .es-field > legend { font: 500 .92rem/1.2 var(--font-d); color: var(--ink); padding: 0; }
.es-field label small { color: var(--mute); font-weight: 400; }
.es-step { display: inline-flex; align-items: stretch; inline-size: fit-content; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.es-step button { inline-size: 48px; min-block-size: 48px; border: 0; background: transparent; color: var(--ink); font: 500 1.4rem/1 var(--font-d); cursor: pointer; }
.es-step button:hover { background: var(--surface-2); }
.es-step input { inline-size: 88px; min-block-size: 48px; border: 0; border-inline: 1px solid var(--line); background: transparent; color: var(--ink); text-align: center; font: 800 1.2rem/1 var(--font-d); -moz-appearance: textfield; appearance: textfield; }
.es-step input::-webkit-outer-spin-button, .es-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.es-step button:focus-visible, .es-step input:focus-visible, .es-years input:focus-visible + span, .es-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.es-link { inline-size: fit-content; padding: 8px 0; border: 0; background: none; color: var(--accent); font: 500 .88rem/1 var(--font-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.es-years { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.es-years legend { grid-column: 1 / -1; margin-block-end: 2px; }
.es-years label { position: relative; }
.es-years input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.es-years span { display: grid; place-content: center; min-block-size: 50px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; text-align: center; font: 500 .94rem/1.15 var(--font-d); color: var(--mute); cursor: pointer; transition: background-color .2s, color .2s; }
.es-years small { display: block; margin-block-start: 2px; font: 500 .7rem/1 var(--font-m); color: var(--accent); }
.es-years input:checked + span { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.es-years input:checked + span small { color: inherit; opacity: .8; }
.es-lines { display: grid; gap: 10px; }
.es-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block-end: 10px; border-block-end: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.es-line b { display: block; font: 500 .96rem/1.2 var(--font-d); color: var(--ink); }
.es-line small { display: block; margin-block-start: 3px; font: 500 .78rem/1.2 var(--font-m); color: var(--mute); }
.es-line > span { font: 800 1.05rem/1.2 var(--font-d); color: var(--ink); white-space: nowrap; }
.es-empty { margin: 0; font-size: .92rem; color: var(--mute); }
.es-total { display: flex; justify-content: space-between; align-items: baseline; padding-block: 4px; }
.es-total span { font: 500 .96rem/1 var(--font-d); color: var(--ink-2); }
.es-total b { font: 800 clamp(1.7rem, 4vw, 2.2rem)/1 var(--font-d); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.es-go { inline-size: 100%; justify-content: center; }
.es-go:disabled { opacity: .45; cursor: not-allowed; }
.es-msg { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--mute); }
@media (max-width: 760px) { .es { grid-template-columns: 1fr; } }

/* Tarifs : tableau à 5 colonnes (licence + 3 matières de carte) et choix de la matière dans l'estimateur */
.tf-table--5 th, .tf-table--5 td { padding-inline: 5px; }
.tf-table--5 thead th { font-size: .66rem; letter-spacing: .02em; }
.tf-table--5 td { font-size: clamp(.98rem, 3.6vw, 1.3rem); }
.es-mat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.es-mat legend { grid-column: 1 / -1; margin-block-end: 2px; }
.es-mat label { position: relative; }
.es-mat input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.es-mat span { display: grid; place-content: center; min-block-size: 46px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; text-align: center; font: 500 .94rem/1.15 var(--font-d); color: var(--mute); cursor: pointer; transition: background-color .2s, color .2s; }
.es-mat input:checked + span { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.es-mat input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═════════ Menu mobile (hamburger) ═════════ */
.menu-toggle { display: none; place-items: center; flex: none; inline-size: 42px; block-size: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle:hover { background: var(--surface-2); }
.menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-toggle svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle .mt-x { display: none; }
.menu-toggle[aria-expanded='true'] .mt-bars { display: none; }
.menu-toggle[aria-expanded='true'] .mt-x { display: block; }
.mm { display: none; }
@media (max-width: 720px) {
  .menu-toggle { display: grid; }
  .top-actions .link.link--login { display: none; }
  .mm:not([hidden]) { display: block; position: fixed; z-index: 49; inset-inline: 0; inset-block-end: 0; inset-block-start: var(--mm-top, 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-block-start: 1px solid var(--line); padding: 8px var(--gutter) max(28px, env(safe-area-inset-bottom)); }
  .mm-in { max-inline-size: 520px; margin-inline: auto; }
  .mm-t { margin: 20px 0 6px; font: 500 .72rem/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
  .mm ul { list-style: none; margin: 0; padding: 0; }
  .mm li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 52px; padding: 0 4px; border-block-end: 1px solid var(--line); font: 500 1.08rem/1.2 var(--font-d); color: var(--ink); }
  .mm li a:hover, .mm li a:focus-visible { color: var(--accent); }
  .mm li a svg { inline-size: 18px; block-size: 18px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mm-cta { display: grid; gap: 10px; margin-block-start: 24px; }
  .mm-cta .btn { justify-content: center; inline-size: 100%; }
  html[data-menu='open'] pm-dock { display: none; }
  html[data-menu='open'] { overflow: hidden; }
  .top-actions .menu-toggle, .top-actions .motion-toggle, .top-actions .icon-btn { inline-size: 36px; block-size: 36px; }
}
@media (max-width: 380px) { .top-actions .menu-toggle { inline-size: 33px; block-size: 33px; } }
@media (max-width: 340px) { .top-actions .menu-toggle { inline-size: 30px; block-size: 30px; } }

/* ═════════ Bouton du bandeau : texte sur ordinateur, icône de panier avec pastille sur mobile ═════════ */
.cta-cart { position: relative; }
.cta-cart .cta-ic { display: none; inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-badge { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 800 .68rem/18px var(--font-d); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.cta-badge[hidden] { display: none; }
@media (max-width: 720px) {
  .top-actions .btn.cta-cart { display: grid; place-items: center; inline-size: 40px; block-size: 40px; min-inline-size: 0; padding: 0; border-radius: 50%; }
  .top-actions .btn.cta-cart .cta-ic { display: block; }
  .top-actions .btn.cta-cart .cta-tx { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 340px) { .top-actions .btn.cta-cart { inline-size: 34px; block-size: 34px; } }

/* ═════════ Bandeau : raccourcis vers les zones de la page + liste « Offres » ═════════ */
.top-nav { align-items: center; gap: 2px; }
.top-nav > a, .tn-more > summary { display: inline-flex; align-items: center; gap: 4px; padding: 10px 11px; border-radius: 10px; color: var(--mute); cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s; list-style: none; }
.tn-more > summary::-webkit-details-marker { display: none; }
.top-nav > a:hover, .tn-more > summary:hover, .tn-more[open] > summary { color: var(--ink); background: var(--surface-2); }
.tn-more > summary:focus-visible, .top-nav > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-chev { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; }
.tn-more[open] .tn-chev { rotate: 180deg; }
.tn-more { position: relative; }
.tn-pop { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 70; display: grid; min-inline-size: 220px; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2); }
.tn-pop a { padding: 11px 12px; border-radius: 9px; color: var(--ink); white-space: nowrap; }
.tn-pop a:hover { background: var(--surface-2); color: var(--accent); }
@media (max-width: 1240px) { .top-nav > a.tn-faq { display: none; } }
@media (max-width: 1080px) { .top-nav > a, .tn-more > summary { padding-inline: 8px; font-size: .9rem; } }

/* Packs SPOT : tableau et choix du pack dans l'estimateur */
.tf-table--spot td.tf-total { color: var(--ink); font-size: clamp(.95rem, 3.4vw, 1.15rem); }
.es-spot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.es-spot legend { grid-column: 1 / -1; margin-block-end: 2px; }
.es-spot legend small { color: var(--mute); font-weight: 400; }
.es-spot label { position: relative; }
.es-spot input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.es-spot span { display: grid; place-content: center; min-block-size: 46px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; text-align: center; font: 500 .96rem/1.15 var(--font-d); color: var(--mute); cursor: pointer; transition: background-color .2s, color .2s; }
.es-spot input:checked + span { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.es-spot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.es-reset { position: absolute; inset-block-start: clamp(18px, 3vw, 28px); inset-inline-end: clamp(18px, 3vw, 28px); padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: 500 .8rem/1 var(--font-d); cursor: pointer; }
.es-reset:hover { color: var(--ink); border-color: var(--ink); }
.es-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.es-form { position: relative; }
@media (max-width: 480px) { .es-reset { position: static; justify-self: start; margin-block: -6px 14px; } .es-sub { margin-block-end: 10px; } }

.tf-promo { inline-size: fit-content; max-inline-size: 100%; margin: 18px auto 0; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ink); font-size: .94rem; line-height: 1.4; text-align: center; }
.tf-promo b { color: var(--ok); font: 800 1.05rem/1 var(--font-d); margin-inline-end: 4px; }
.es-disc b, .es-disc > span { color: var(--ok); }

/* ═════════ Paliers de remise visibles dans l'estimateur ═════════ */
.es-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.es-tiers li { display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); counter-increment: tier; opacity: .6; transition: opacity .2s, border-color .2s, background-color .2s; }
.es-tiers { counter-reset: tier; }
.es-tiers li::before { content: counter(tier); grid-row: 1 / 3; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--surface-2); color: var(--mute); font: 800 .8rem/1 var(--font-d); }
.es-tiers li b { font: 500 .92rem/1.2 var(--font-d); color: var(--ink); }
.es-tiers li span { font: 500 .76rem/1.2 var(--font-m); color: var(--mute); }
.es-tiers li.done { opacity: 1; }
.es-tiers li.done::before { content: "✓"; background: var(--ok); color: #fff; }
.es-tiers li.on { opacity: 1; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--ok) inset; }
.es-tiers li.on::before { background: var(--ok); color: #fff; }
.es-tiers li.on span { color: var(--ok); font-weight: 700; }

.es-det { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.es-det li { position: relative; padding-inline-start: 12px; font: 400 .78rem/1.35 var(--font-b); color: var(--mute); }
.es-det li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--line-2); }
.es-line > div { min-inline-size: 0; }

/* ═════════ Réglage iOS/Android « Réduire les animations » : on garde les boucles qui font la démonstration ═════════ */
@media (prefers-reduced-motion: reduce) {
  :root .hero-phone::after { animation: spin 60s linear infinite !important; }
  :root .live-url::before { animation: live-pulse 2.4s ease-out infinite !important; }
  :root .live-dot { animation: live-pulse 2.4s ease-out infinite !important; }
  :root .chip { animation: bob 7s ease-in-out infinite !important; }
  :root .pc-langs > span { animation: lang 12.5s infinite !important; }
  :root .sc-path > span { animation: tri 9s infinite !important; }
  :root .sc-card { animation: tri-card 9s infinite !important; }
  :root .vip-rows .i { animation: vip-lock 8s infinite !important; }
  :root .vip-blur { animation: vip-blur 8s infinite !important; }
  :root .vip-gate { animation: vip-gate 8s infinite !important; }
  :root .vip-type { animation: vip-type 8s steps(22, end) infinite !important; }
  :root .vip-ok { animation: vip-ok 8s infinite !important; }
  :root .ld-box::after { animation: ld-tick 8s infinite !important; }
  :root .ld-send { animation: ld-press 8s infinite !important; }
  :root .ld-ok { animation: ld-ok 8s infinite !important; }
  :root pm-marquee[running] .marquee-track { animation: marquee 48s linear infinite !important; }
  :root .art-nfc .ring { animation: ring 2.8s ease-out infinite !important; }
  :root .nx-scope .nx-toast { animation: nx-toast 8s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-sp-front { animation: nx-spfloat 7s ease-in-out infinite !important; }
  :root .nx-scope .nx-sp-front::after { animation: nx-sheen 6s ease-in-out infinite !important; }
  :root .nx-scope .nx-sp-tile .nx-ring { animation: nx-spring 3.2s ease-out infinite !important; }
  :root .nx-scope .nx-sp-before { animation: nx-spbefore 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-sp-after { animation: nx-spafter 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-vlabel.nx-va { animation: nx-labafter 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-vlabel.nx-vb { animation: nx-labbefore 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-chev-face { animation: nx-chev 8s ease-in-out infinite !important; }
  :root .nx-scope .nx-wh-stars i { animation: nx-pop 4s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-sp-phone { animation: nx-sptap 4s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-chev-3d { animation: nx-chevturn 10s ease-in-out infinite !important; }
  :root .nx-scope .nx-shop .nx-sp-phone { animation: nx-sppmove 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-spp-card { animation: nx-sppcard 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-spp-lock { animation: nx-spplock 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-spp-ban { animation: nx-sppban 13s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-fd-grp { animation: nx-fdgrp 12s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-fd-shadow { animation: nx-fdsh 12s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .nx-scope .nx-fd-plaque .nx-fd-in { animation: nx-fdstick 12s cubic-bezier(.2,.8,.2,1) infinite !important; }
  :root .hx-screen::after { animation: hx-flash 6s ease-out infinite !important; }
  :root .hx-poster { animation: hx-scroll 18s ease-in-out infinite !important; }
  :root .hx-banner { animation: hx-banner 6s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .hx-nfc { animation: hx-tap 6s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .hx-waves span { animation: hx-wave 6s ease-out infinite !important; }
  :root .rf-stamp { animation: rf-stamp 5s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .nf-card { animation: nf-card 5.4s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .nf-ban { animation: nf-ban 5.4s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .nf-wave { animation: nf-wave 5.4s ease-out infinite !important; }
  :root .pl-o1 { animation: pl-spin 48s linear infinite !important; }
  :root .pl-o2 { animation: pl-spin 72s linear infinite reverse !important; }
  :root .pl-o3 { animation: pl-spin 96s linear infinite !important; }
  :root .pl-o1 .pl-s img { animation: pl-unspin 48s linear infinite !important; }
  :root .pl-o2 .pl-s img { animation: pl-unspin 72s linear infinite reverse !important; }
  :root .pl-o3 .pl-s img { animation: pl-unspin 96s linear infinite !important; }
  :root .hx-home { animation: hx-home 9s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .hx-open { animation: hx-open 9s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .hx-banner { animation: hx-banner2 9s cubic-bezier(.2, .8, .2, 1) infinite !important; }
  :root .hs-shot { animation: hs-zoom 6s cubic-bezier(.45, 0, .2, 1) infinite !important; }
  :root .hx-web { animation: hx-webscroll 9s cubic-bezier(.4, 0, .2, 1) infinite !important; }
  :root .rf-s0 { animation: rf-webscroll 16s cubic-bezier(.45, 0, .25, 1) infinite !important; }
  :root .nx-scope .nx-sp-cross .nx-x1 { animation: nx-x1 13s ease-out infinite !important; }
  :root .nx-scope .nx-sp-cross .nx-x2 { animation: nx-x2 13s ease-out infinite !important; }
  :root .rf-card .rf-s1,:root .rf-card .rf-s2 { animation: rf-menuscroll 9s cubic-bezier(.45, 0, .25, 1) infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-s0 { animation: rf-t0 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-fab-more { animation: rf-tmore 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-fab-close { animation: rf-tclose 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-s1 { animation: rf-t1 26s linear infinite, rf-p1 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-s2 { animation: rf-t2 26s linear infinite, rf-p2 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-tap-r { animation: rf-tapr 26s linear infinite !important; }
  :root .rf-card:has(#rfc-a:checked) .rf-tap-l { animation: rf-tapl 26s linear infinite !important; }
  :root .nx-scope .nx-fd-plaque .nx-fd-in { animation: nx-fdlens 12s cubic-bezier(.4, 0, .2, 1) infinite !important; }
}