/* Accueil immersif. Sans html.motion, tout reste lisible et statique. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.home { background: var(--ink); }
body.home main > section:not(.on-ink), body.home .burn { background-color: var(--paper); }
body.home main > .alt { background-color: var(--paper-2); }
body.home main > .cta { background-color: var(--copper); }

/* En-tête transparent sur le héros */
.home .site-header { position: fixed; inset: 0 0 auto; background: transparent; backdrop-filter: none; transition: background-color .3s, transform .35s; }
.home .site-header:not(.stuck) .logo, .home .site-header:not(.stuck) .logo span span { color: var(--paper); }
.home .site-header:not(.stuck) .menu-btn { color: var(--paper); border-color: var(--on-ink-2); }
@media (min-width: 961px) {
  .home .site-header:not(.stuck) .nav a:not(.btn) { color: var(--paper); }
  .home .site-header:not(.stuck) .nav .btn { background: var(--copper); color: var(--ink); }
}
.home .site-header.stuck { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); }
.home .site-header.stuck .logo { color: var(--ink); }

/* Héros */
.x-hero-stick { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.iris { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-hero-in { position: relative; z-index: 2; padding-block: 104px 96px; }
.x-title { font-size: clamp(2.7rem, 7.4vw, 7rem); line-height: .96; text-wrap: initial; }
.x-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; white-space: nowrap; }
.x-line > span { display: inline-block; }
.x-hero .stars { color: var(--copper); }
.x-hero .lead { color: var(--on-ink); margin-top: 28px; max-width: 34em; }
.x-hero .btn-row { margin-top: 30px; }
.rotator { display: inline-block; color: var(--copper); font-weight: 600; transition: opacity .25s, transform .25s; }
.rotator.out { opacity: 0; transform: translateY(.35em); }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .875rem; text-decoration: none; color: var(--on-ink-2); white-space: nowrap; }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--copper), transparent); }
@media (max-width: 719px) { .scroll-cue { display: none; } }

.motion .x-hero { height: 165svh; }
.motion .x-hero-stick { position: sticky; top: 0; height: 100svh; }
.motion .x-hero-in { opacity: calc(1 - var(--p, 0) * 2.1); transform: translateY(calc(var(--p, 0) * -90px)); }
.motion .x-line > span { transform: translateY(110%); animation: rise 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.motion .x-line:nth-child(2) > span { animation-delay: .1s; }
.motion .x-line:nth-child(3) > span { animation-delay: .2s; }
.motion .x-line:nth-child(4) > span { animation-delay: .3s; }
.motion .x-up { opacity: 0; animation: fadeup .8s .55s ease forwards; }
.motion .x-d2 { animation-delay: .7s; }
.motion .x-d3 { animation-delay: .85s; }
@keyframes rise { to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Texte qui s'allume */
.burn { position: relative; z-index: 3; padding-block: clamp(96px, 16vw, 220px); }
.burn-text { font: 700 clamp(2rem, 5.4vw, 4.75rem)/1.08 var(--display); letter-spacing: -.035em; max-width: 19em; }
.burn-text span { transition: color .18s; }
.motion .burn-text span { color: #cfc6b4; }
.motion .burn-text span.on { color: var(--ink); }

/* Parcours client */
.story { position: relative; z-index: 3; }
.story-grid { display: grid; gap: 48px; padding-block: 88px; }
.act { padding-block: 18px; }
.act-n { display: none; }
.act h3 { font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 1; letter-spacing: -.04em; }
.act p { margin-top: 14px; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); color: var(--on-ink-2); max-width: 28em; }
.story-bar { display: none; }
.phone-wrap { display: none; }
.motion .story { height: 380svh; }
.motion .story-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.motion .story-grid { width: 100%; align-items: center; padding-block: 72px 16px; }
.motion .story-copy { position: relative; }
.motion .acts { position: relative; min-height: 11.5em; }
.motion .act { position: absolute; inset: 0 0 auto; padding: 0; opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.motion .act.on { opacity: 1; transform: none; }
.motion .story-bar { display: block; height: 3px; background: var(--line-ink); border-radius: 2px; max-width: 320px; margin-top: 8px; overflow: hidden; }
.story-bar i { display: block; height: 100%; background: var(--copper); width: calc(var(--p, 0) * 100%); }
.motion .phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone { --h: min(66svh, 640px); position: relative; height: var(--h); aspect-ratio: 9 / 18.5; padding: 9px; background: #000; border: 1.5px solid #4a4134; border-radius: 42px; box-shadow: 0 40px 120px -30px rgba(201, 149, 74, .45); overflow: hidden; }
.screen { position: absolute; inset: 9px; border-radius: 33px; overflow: hidden; background: var(--paper); color: var(--ink); opacity: 0; transition: opacity .45s; }
.screen.on { opacity: 1; }
.phone-note { font-size: .8125rem; color: var(--on-ink-2); }
.s-search { padding: 44px 14px 14px; }
.s-pill { display: flex; align-items: center; min-height: 42px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .9375rem; }
.caret { width: 2px; height: 1.1em; margin-left: 2px; background: var(--copper-deep); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.s-rank { position: relative; margin-top: 14px; height: calc(5 * 66px); }
.s-row { position: absolute; left: 0; right: 0; top: 0; height: 58px; background: var(--paper-2); border-radius: 12px; will-change: transform; }
.s-row::after { content: ""; position: absolute; left: 14px; top: 24px; height: 9px; width: 58%; background: var(--line); border-radius: 5px; }
.s-row.me { display: flex; flex-direction: column; justify-content: center; padding-inline: 14px; background: var(--ink); color: var(--paper); z-index: 2; font-size: .9375rem; box-shadow: 0 14px 30px -12px rgba(23, 19, 14, .6); }
.s-row.me::after { display: none; }
.s-row.me small { color: var(--copper); font-size: .75rem; }
.s-site img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transform-origin: left top; will-change: transform; }
.s-call { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 13px; text-align: center; font-weight: 700; font-size: .9375rem; background: var(--copper); color: var(--ink); border-radius: 999px; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 149, 74, .7); } 100% { box-shadow: 0 0 0 18px rgba(201, 149, 74, 0); } }
.s-notif { background: radial-gradient(circle at 50% 10%, #574022, var(--ink) 70%); color: var(--paper); padding: 30px 12px; }
.s-clock { font: 700 3.25rem/1 var(--display); text-align: center; margin-bottom: 24px; letter-spacing: -.03em; }
.n { padding: 11px 13px; margin-top: 8px; background: rgba(244, 239, 230, .96); color: var(--ink); border-radius: 15px; font-size: .8125rem; line-height: 1.35; opacity: 0; transform: translateY(-18px) scale(.95); transition: opacity .35s, transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.n b { display: block; font-size: .875rem; }
.n.on { opacity: 1; transform: none; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.15fr .85fr; } }
@media (max-width: 899px) {
  .motion .story-grid { gap: 10px; align-content: center; padding-top: 72px; }
  .motion .acts { min-height: 8.6em; }
  .motion .act h3 { font-size: 2.25rem; }
  .motion .act p { font-size: 1rem; margin-top: 8px; }
  .motion .story-copy .eyebrow { margin-bottom: 8px; }
  .phone { --h: min(50svh, 470px); border-radius: 32px; }
  .screen { border-radius: 24px; }
  .s-search { padding-top: 22px; }
  .s-rank { transform-origin: top; }
}

/* Bandeau */
.marquee { position: relative; z-index: 3; overflow: hidden; background: var(--copper); color: var(--ink); padding-block: clamp(14px, 2vw, 26px); }
.marquee > div { display: inline-block; white-space: nowrap; font: 800 clamp(1.75rem, 4.4vw, 3.75rem)/1 var(--display); letter-spacing: -.03em; will-change: transform; }

/* Cibles */
.targets { position: relative; z-index: 3; }
.targets h2 { font-size: clamp(2.75rem, 7vw, 6rem); letter-spacing: -.04em; }
.targets .section-head { margin-bottom: 24px; }
.t-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 14px; margin-inline: -2px; }
.t-tabs button { flex: none; min-height: 50px; padding: 10px 22px; background: none; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; font: 600 1.0313rem var(--body); cursor: pointer; transition: background-color .2s, color .2s; }
.t-tabs button:hover { background: var(--paper-2); }
.t-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.t-panel { display: grid; gap: clamp(28px, 4vw, 64px); margin-top: 24px; }
.t-panel[hidden] { display: none; }
.motion .t-panel:not([hidden]) .t-copy > *, .motion .t-panel:not([hidden]) .t-example { animation: fadeup .55s cubic-bezier(.2, .8, .2, 1) both; }
.motion .t-panel .t-copy > :nth-child(2) { animation-delay: .06s; }
.motion .t-panel .t-copy > :nth-child(3) { animation-delay: .12s; }
.motion .t-panel .t-copy > :nth-child(4) { animation-delay: .18s; }
@media (min-width: 960px) { .t-panel { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.t-copy h3 { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.03em; }
.t-brake { margin-top: 20px; color: var(--text-2); max-width: 58ch; }
.t-copy b { color: var(--ink); }
.t-actions { display: grid; gap: 2px; margin-top: 18px; }
.t-actions li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--line); font-weight: 500; }
.t-actions li::before { content: "✦"; position: absolute; left: 0; color: var(--copper-deep); }
.t-change { margin-top: 18px; padding: 16px 18px; background: var(--ink); color: var(--paper); border-radius: 12px; }
.t-change b { color: var(--copper); }
.t-example { display: block; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 9 / 7; background: var(--ink-2); text-decoration: none; color: var(--paper); }
.t-example img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.t-example:hover img { transform: scale(1.04); }
.t-example > span { position: absolute; inset: auto 0 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(23, 19, 14, .94)); font-size: .9375rem; }
.t-example > span b { display: block; font-size: 1.0625rem; }
.t-noimg { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 32px; }
.t-noimg p { font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--display); letter-spacing: -.02em; }

/* Calculateur */
.calc { position: relative; z-index: 3; }
.calc-grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.calc-fields { display: grid; gap: 26px; margin-top: 36px; }
.calc-fields label { display: block; color: var(--on-ink-2); }
.calc-fields output { float: right; font: 700 1.25rem var(--display); color: var(--on-ink); }
.calc input[type=range] { display: block; width: 100%; height: 44px; margin-top: 6px; background: none; appearance: none; cursor: grab; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--line-ink); border-radius: 3px; }
.calc input[type=range]::-moz-range-track { height: 6px; background: var(--line-ink); border-radius: 3px; }
.calc input[type=range]::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; margin-top: -12px; background: var(--copper); border: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(201, 149, 74, .22); }
.calc input[type=range]::-moz-range-thumb { width: 30px; height: 30px; background: var(--copper); border: 0; border-radius: 50%; }
.calc-out { padding: clamp(24px, 4vw, 44px); background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: 22px; }
.calc-big { font: 800 clamp(3.25rem, 9vw, 7rem)/1 var(--display); letter-spacing: -.05em; color: var(--copper); margin-block: 8px 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-note { color: var(--on-ink-2); font-size: .9375rem; margin-bottom: 24px; }

/* Galerie */
.gallery { position: relative; z-index: 3; padding-block: var(--section); }
.gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: clamp(24px, 3vw, 40px); }
.gallery-head p { color: var(--on-ink-2); max-width: 32ch; }
.gallery-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-bottom: 12px; scrollbar-width: none; }
.g-panel { flex: none; width: min(84vw, 860px); scroll-snap-align: center; display: grid; gap: 18px; }
.g-shot { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-ink); background: var(--ink-2); text-decoration: none; }
.g-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: .8125rem; color: var(--on-ink-2); }
.g-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-ink); }
.g-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-img { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; background: #2c251b; }
.g-img span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-ink-2); }
.g-img img { position: relative; width: 100%; height: 120%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.g-shot:hover .g-img img { transform: translateY(-9%); }
.g-meta { display: grid; gap: 4px 28px; }
@media (min-width: 720px) { .g-meta { grid-template-columns: 1fr 1fr; } .g-meta > p:not(.g-type) { grid-column: 2; grid-row: 1 / span 3; } }
.g-n { font-size: .8125rem; color: var(--copper); }
.g-type { color: var(--copper); font-size: .9375rem; }
.g-meta > p:not(.g-type) { color: var(--on-ink-2); }
.g-result b { display: block; font: 800 2.25rem/1.1 var(--display); color: var(--copper); }
@media (min-width: 960px) {
  .motion .gallery { padding-block: 0; height: 340svh; }
  .motion .gallery-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; }
  .motion .gallery-track { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
  .motion .g-panel { width: min(60vw, calc((100svh - 330px) * 1.5)); }
}

/* Cartes empilées */
.stack { display: grid; gap: 14px; }
.stack-card { padding: clamp(26px, 5vw, 64px); border-radius: 24px; min-height: min(56svh, 460px); display: flex; flex-direction: column; justify-content: flex-end; }
.stack-card span { font-size: .9375rem; font-weight: 600; margin-bottom: auto; padding-bottom: 32px; }
.stack-card h3 { font-size: clamp(2.25rem, 6vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.stack-card p { margin-top: 16px; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); max-width: 38em; }
.c1 { background: var(--ink); color: var(--paper); }
.c1 span { color: var(--copper); }
.c1 p { color: var(--on-ink-2); }
.c2 { background: var(--copper); color: var(--ink); }
.c3 { background: var(--paper-2); color: var(--ink); }
.c4 { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.motion .stack-card { position: sticky; top: calc(84px + var(--i, 0) * 14px); transform-origin: top center; }
.c1 { --i: 0; } .c2 { --i: 1; } .c3 { --i: 2; } .c4 { --i: 3; }

/* Grille à halo */
.spot-grid { display: grid; gap: 1px; background: var(--line-ink); border: 1px solid var(--line-ink); border-radius: 18px; overflow: hidden; }
@media (min-width: 720px) { .spot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .spot-grid { grid-template-columns: repeat(3, 1fr); } }
.spot-grid li { padding: clamp(24px, 3vw, 40px); background: radial-gradient(320px circle at var(--x, -400px) var(--y, -400px), rgba(201, 149, 74, .2), transparent 70%), var(--ink); }
.spot-grid p { margin-top: 10px; color: var(--on-ink-2); }

/* CTA et curseur */
.home .cta h2 { font-size: clamp(2.75rem, 7vw, 6.25rem); letter-spacing: -.045em; line-height: .98; }
.cursor-tag { position: fixed; z-index: 90; left: 0; top: 0; padding: 8px 14px; border-radius: 999px; background: var(--copper); color: var(--ink); font-weight: 600; font-size: .875rem; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; white-space: nowrap; }
.cursor-tag.on { opacity: 1; }
[data-magnetic] { will-change: transform; }
.motion .home-reveal { opacity: 0; }

/* Avis, fidélité, motion design */
.tools { position: relative; z-index: 3; }
.tool-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
.tool { padding: 18px 18px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
@media (hover: hover) { .tool:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(23, 19, 14, .5); } }
.tool h3 { margin: 22px 8px 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.tool p { margin-inline: 8px; color: var(--text-2); }
.tool-visual { position: relative; height: clamp(230px, 26vw, 300px); border-radius: 14px; overflow: hidden; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.tool-visual p { margin: 0; color: inherit; }

.nfc-card { position: absolute; left: 12%; bottom: 16%; width: 190px; height: 118px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, var(--copper), #8f6429); color: var(--ink); border-radius: 12px; box-shadow: 0 18px 30px -12px #000; transform: rotate(-9deg); }
.nfc-card i { width: 22px; height: 22px; border: 2px solid var(--ink); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; position: absolute; right: 14px; top: 14px; }
.nfc-card small { font-size: .6875rem; font-weight: 600; }
.nfc-phone { position: absolute; right: 14%; top: 12%; width: 118px; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--paper); color: var(--ink); border: 5px solid #000; border-radius: 22px; box-shadow: 0 20px 40px -14px #000; }
.nfc-stars { color: var(--copper-deep); font-size: 1rem; letter-spacing: .04em; }
.nfc-phone small { font-size: .625rem; font-weight: 600; }
.motion .tool-grid.play .nfc-phone { animation: tap 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
.motion .tool-grid.play .nfc-stars { animation: starpop 3.6s infinite; }
@keyframes tap { 0%, 100% { transform: translate(24px, -6px) rotate(9deg); } 35%, 62% { transform: translate(-26px, 18px) rotate(2deg); } }
@keyframes starpop { 0%, 34% { opacity: 0; transform: scale(.5); } 44%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.qr { position: relative; width: 150px; height: 150px; padding: 10px; background: var(--paper); border-radius: 14px; }
.qr span { position: absolute; inset: 10px; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 22px 22px; }
.qr i { position: absolute; z-index: 1; width: 42px; height: 42px; border: 8px solid var(--ink); background: var(--paper); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 20px var(--ink); }
.qr i:nth-child(1) { left: 10px; top: 10px; } .qr i:nth-child(2) { right: 10px; top: 10px; } .qr i:nth-child(3) { left: 10px; bottom: 10px; }
.qr-scan { position: absolute; left: calc(50% - 95px); width: 190px; height: 3px; top: 50%; background: var(--copper); box-shadow: 0 0 22px 5px rgba(201, 149, 74, .75); opacity: 0; }
.motion .tool-grid.play .qr-scan { opacity: 1; animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-88px); } to { transform: translateY(88px); } }

.loyal { width: min(84%, 320px); padding: 18px; background: var(--paper); color: var(--ink); border-radius: 16px; box-shadow: 0 18px 40px -14px #000; }
.loyal b { font: 700 1.0625rem var(--display); }
.stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-block: 12px; }
.stamps i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #a79d8a; position: relative; }
.stamps i:nth-child(-n+7)::after { content: "★"; position: absolute; inset: -1.5px; display: grid; place-items: center; background: var(--copper); border-radius: 50%; color: var(--ink); font-size: 1rem; }
.motion .tool-grid .stamps i::after { transform: scale(0); }
.motion .tool-grid.play .stamps i::after { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.stamps i:nth-child(2)::after { animation-delay: .15s !important; } .stamps i:nth-child(3)::after { animation-delay: .3s !important; } .stamps i:nth-child(4)::after { animation-delay: .45s !important; } .stamps i:nth-child(5)::after { animation-delay: .6s !important; } .stamps i:nth-child(6)::after { animation-delay: .75s !important; } .stamps i:nth-child(7)::after { animation-delay: .9s !important; }
@keyframes stamp { to { transform: scale(1); } }
.loyal small { font-size: .8125rem; color: var(--text-2); }

.mo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; overflow: hidden; }
.mo p { position: relative; z-index: 2; font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.05 var(--display); letter-spacing: -.03em; padding: 16px 22px; background: var(--ink); border-radius: 14px; color: var(--paper) !important; }
.mo em { font-family: var(--serif); font-weight: 400; }
.mo span { position: absolute; display: block; }
.mo-a { width: 170px; height: 170px; border-radius: 50%; background: var(--copper); left: 8%; top: 12%; }
.mo-b { width: 120px; height: 120px; background: var(--paper); right: 10%; bottom: 10%; border-radius: 16px; }
.mo-c { width: 240px; height: 240px; border: 2px solid var(--copper); border-radius: 50%; right: 18%; top: -20%; }
.motion .tool-grid.play .mo-a { animation: moa 5s ease-in-out infinite alternate; }
.motion .tool-grid.play .mo-b { animation: mob 4s ease-in-out infinite alternate; }
.motion .tool-grid.play .mo-c { animation: moc 6s linear infinite alternate; }
@keyframes moa { to { transform: translate(90px, 40px) scale(1.25); } }
@keyframes mob { to { transform: translate(-110px, -50px) rotate(135deg); } }
@keyframes moc { to { transform: translate(-90px, 130px) scale(.6); } }

/* Sécurité : le titre reste visible même si l'animation d'entrée ne se lance pas */
.intro-done .x-line > span { animation: none !important; transform: none !important; }
.intro-done .x-up { animation: none !important; opacity: 1 !important; }
.nfc-phone { z-index: 2; }
@media (max-width: 899px) {
  .s-pill { font-size: .8125rem; min-height: 36px; }
  .s-clock { font-size: 2.25rem; margin-bottom: 8px; }
  .s-notif { padding: 18px 10px; }
  .n { padding: 7px 10px; margin-top: 6px; font-size: .75rem; }
  .n b { font-size: .8125rem; }
}
@media (max-width: 559px) {
  .nfc-card { left: 5%; bottom: 8%; width: 150px; height: 94px; padding: 10px; }
  .nfc-card small { font-size: .5625rem; }
  .nfc-phone { right: 7%; top: 8%; width: 104px; height: 186px; }
}

/* Chiffres */
.count-strip { position: relative; z-index: 3; background: var(--paper); padding-bottom: clamp(56px, 8vw, 110px); }
.count-strip dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.count-strip dd { margin: 0; white-space: nowrap; font: 800 clamp(2.25rem, 5.4vw, 4.5rem)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.count-strip dt { margin-top: 8px; font-size: .9375rem; color: var(--text-2); }
@media (min-width: 900px) { .count-strip dl { grid-template-columns: repeat(4, 1fr); } }

/* Traversée du mot */
.zoom { position: relative; z-index: 3; background: var(--ink); }
.zoom-stick { display: grid; place-items: center; padding-block: 72px; overflow: hidden; background: var(--ink); }
.zoom-text { font: 800 clamp(4rem, 19vw, 19rem)/1 var(--display); letter-spacing: -.06em; color: var(--copper); white-space: nowrap; }
.motion .zoom { height: 240svh; }
.motion .zoom-stick { position: sticky; top: 0; height: 100svh; padding: 0; }
.motion .zoom-text { will-change: transform; }

.marquee.alt-m { background: var(--ink); color: var(--copper); }
.t-cta { margin-top: 18px; }
.motion .phone { will-change: transform; }
.phone-wrap { perspective: 1100px; }
.motion .stack-card { transform-origin: top center; }
.g-shot:hover .g-img img { transform: translateY(-9%) !important; }

/* ---------- Refonte : téléphone à taille fixe, mise à l'échelle ---------- */
.phone-wrap { position: relative; }
.phone-fit { position: relative; z-index: 1; }
.phone-scale { width: 320px; height: 660px; transform-origin: top left; }
.phone { --h: auto; width: 320px; height: 660px; aspect-ratio: auto; padding: 0; border: 9px solid #000; outline: 1.5px solid #4a4134; border-radius: 48px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -30px rgba(201, 149, 74, .55); }
.screen { inset: 0; border-radius: 38px; }
.s-search { padding: 54px 16px 16px; }
.s-pill { min-height: 46px; padding: 8px 16px; font-size: 16px; white-space: nowrap; overflow: hidden; }
.s-count { margin: 16px 2px 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.s-rank { margin-top: 0; height: 420px; }
.s-row { height: 76px; }
.s-row::after { top: 34px; }
.s-row.me { font-size: 17px; padding-inline: 16px; }
.s-row.me small { font-size: 13px; }
.s-site { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; }
.s-url { margin: 46px 14px 12px; padding: 8px 12px; background: #2a231a; border-radius: 999px; font-size: 13px; text-align: center; color: var(--on-ink-2); }
.s-shot { height: 330px; overflow: hidden; background: #2c251b; }
.s-site .s-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform-origin: center top; }
.s-info { padding: 18px 18px 0; font-size: 14px; color: var(--on-ink-2); }
.s-info b { display: block; font: 800 24px/1.1 var(--display); letter-spacing: -.02em; color: var(--paper); margin-bottom: 4px; }
.s-call { left: 16px; right: 16px; bottom: 18px; padding: 15px; font-size: 16px; }
.s-notif { padding: 54px 14px 14px; }
.s-clock { font-size: 64px; margin-bottom: 26px; }
.n { padding: 13px 15px; margin-top: 10px; font-size: 14px; }
.n b { font-size: 15px; }
.phone-rings { position: absolute; left: 50%; top: 47%; width: 0; height: 0; pointer-events: none; }
.phone-rings i { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(201, 149, 74, .4); }
.phone-rings i:nth-child(1) { width: 480px; height: 480px; left: -240px; top: -240px; }
.phone-rings i:nth-child(2) { width: 640px; height: 640px; left: -320px; top: -320px; border-style: solid; border-color: rgba(201, 149, 74, .16); }
.phone-rings i:nth-child(3) { width: 800px; height: 800px; left: -400px; top: -400px; border-style: dotted; border-color: rgba(201, 149, 74, .22); }
.story-stick { position: relative; }
.motion .story-stick::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 72% 50%, rgba(201, 149, 74, .16), transparent 70%); pointer-events: none; }
.motion .act { overflow: visible; }
.motion .act h3 { transform: translateY(26px); opacity: 0; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .4s; }
.motion .act.on h3 { transform: none; opacity: 1; }
.motion .act-n { display: block; position: absolute; left: auto; right: 4%; top: -104px; font: 800 clamp(9rem, 19vw, 17rem)/1 var(--display); letter-spacing: -.06em; color: rgba(201, 149, 74, .13); pointer-events: none; z-index: -1; }
.story-copy { z-index: 1; }
.story-copy .eyebrow { font-size: 1rem; }
@media (max-width: 899px) {
  .motion .act-n { top: -28px; left: auto; right: 0; font-size: 7rem; }
  .phone-rings i:nth-child(n+2) { display: none; }
  .phone-rings i:nth-child(1) { width: 340px; height: 340px; left: -170px; top: -170px; }
  .motion .acts { min-height: 8.6em; }
  .s-pill { font-size: 16px; min-height: 46px; }
  .s-clock { font-size: 64px; margin-bottom: 26px; }
  .s-notif { padding: 54px 14px 14px; }
  .n { padding: 13px 15px; margin-top: 10px; font-size: 14px; }
  .n b { font-size: 15px; }
  .s-search { padding-top: 54px; }
  .screen { border-radius: 38px; }
  .phone { border-radius: 48px; }
}
@media (max-height: 620px) and (min-width: 900px) { .phone-note { display: none; } }

/* Zoom net */
.zoom-cv { display: none; }
.motion .zoom-cv { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .zoom-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; will-change: auto; }
.motion .zoom-stick { position: sticky; }

/* Galerie en profondeur */
.motion .gallery-track { perspective: 1400px; }
.motion .g-panel { transform-origin: center center; transition: none; will-change: transform, opacity; }
.g-shot { box-shadow: 0 30px 60px -30px #000; }
.g-img img { height: 100%; object-position: center top; }
.g-shot:hover .g-img img { transform: scale(1.03) !important; }
.g-n { font-weight: 700; }

/* Onglets avec pastille */
.t-tabs { position: relative; }
.t-pill { display: none; }
.motion .t-pill { display: block; position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--ink); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), width .35s, height .35s; z-index: 0; }
.motion .t-tabs button { position: relative; z-index: 1; background: transparent; }
.motion .t-tabs button:hover { background: rgba(23, 19, 14, .07); }
.motion .t-tabs button[aria-selected="true"] { background: transparent; color: var(--paper); }

/* Boutons : reflet au survol */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
@media (hover: hover) { .btn:hover::after { opacity: 1; animation: shine .75s ease; } }
@keyframes shine { to { left: 120%; } }

/* Titre du héros : lumière qui passe sur « et vous restent » */
.motion .x-title em.accent { background: linear-gradient(100deg, var(--copper) 35%, #ffe2ad 50%, var(--copper) 65%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 5s ease-in-out infinite; padding-right: .08em; }
@keyframes sheen { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.motion .x-title { will-change: transform; transition: none; }

/* Offres */
.start-label { font-weight: 700; margin-bottom: 12px; }
.start-grid { display: grid; gap: 12px; margin-bottom: clamp(56px, 8vw, 96px); }
@media (min-width: 800px) { .start-grid { grid-template-columns: repeat(3, 1fr); } }
.start { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 148px; padding: 22px; background: var(--ink); color: var(--paper); border-radius: 18px; text-decoration: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s; }
.start b { font: 700 1.375rem/1.15 var(--display); letter-spacing: -.02em; }
.start span { font-size: .9375rem; font-weight: 600; color: var(--copper); transition: color .25s; }
@media (hover: hover) { .start:hover { transform: translateY(-5px); background: var(--copper); color: var(--ink); } .start:hover span { color: var(--ink); } }
.pillar { scroll-margin-top: 96px; }
.pillar + .pillar { margin-top: clamp(64px, 9vw, 120px); }
.pillar-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); padding-bottom: clamp(20px, 3vw, 32px); margin-bottom: clamp(20px, 3vw, 32px); border-bottom: 2px solid var(--ink); }
.pillar-n { flex: none; font: 800 clamp(4rem, 9vw, 7.5rem)/.8 var(--display); letter-spacing: -.06em; color: var(--copper-deep); }
.pillar-head h3 { font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -.035em; }
.pillar-head p { margin-top: 6px; font-size: clamp(1rem, 1.4vw, 1.1875rem); color: var(--text-2); }
.bento { grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.svc h4 { margin: 18px 8px 4px; font: 700 1.375rem/1.15 var(--display); letter-spacing: -.02em; }
.svc-promise { margin-inline: 8px; color: var(--text-2); font-size: 1rem; line-height: 1.45; }
.svc-gets { margin: 14px 8px 0; display: grid; gap: 6px; font-size: .9375rem; }
.svc-gets li { position: relative; padding-left: 22px; }
.svc-gets li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--copper-deep); }
.svc-link { margin: auto 8px 0; padding-top: 16px; font-weight: 700; font-size: .9688rem; text-decoration: none; color: var(--copper-deep); }
.svc-link span { display: inline-block; transition: transform .25s; }
.svc-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-link:hover span { transform: translateX(5px); }
.svc-help { justify-content: center; align-items: flex-start; gap: 16px; padding: 26px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svc-help h4 { margin: 0; font-size: 1.875rem; }
.svc-help p { margin: 0; color: var(--on-ink-2); font-size: 1.0625rem; }

/* Cascade */
.fx .st-item { opacity: 0; translate: 0 34px; transition: opacity .7s ease var(--d, 0ms), translate .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.fx .st-item.in { opacity: 1; translate: 0 0; }
.fx .stack-card.st-item { translate: 0 0; opacity: 1; }

@media (max-width: 899px) {
  .motion .story-grid { align-content: start; padding-top: 64px; padding-bottom: 0; }
  .motion .story-stick { align-items: flex-start; }
  .phone-wrap { gap: 6px; }
  .phone-note { font-size: .75rem; }
}