/* ==========================================================================
   LooksLabs · lookslabs.fr
   Palette : graphite, bone, amber (+ couleurs de niveau de preuve)
   ========================================================================== */

:root {
  --bg: #06080D;
  --bg-1: #0A0E16;
  --bg-2: #101623;
  --bg-3: #172031;
  --line: #1C2536;
  --line-2: #2B3649;
  --text: #F7F4EC;
  --text-2: #C8CDD7;
  --text-3: #8D96A6;
  --amber: #E9B44E;
  --amber-2: #FFD684;
  --hot: #C98A22;
  --amber-ink: #8A5F0B;
  --mint: #45D89A;
  --gold: #F2B84B;
  --sky: #86A8F4;
  --coral: #FF7466;
  --paper: #EFEDE7;
  --paper-2: #F8F6F1;
  --ink: #0B0F17;
  --ink-2: #474A50;
  --ink-3: #62656B;
  --rule: #D6D2C8;
  --proven-ink: #2C6649;
  --limited-ink: #8A5F0B;
  --theory-ink: #4A5A74;
  --myth-ink: #A23D31;
  --grad-hot: linear-gradient(100deg, #FFEDB5 0%, #F8CB62 36%, #E6A83F 68%, #C9871F 100%);
  --grad-gold-text: linear-gradient(100deg, #FFF1C7 0%, #FFD478 30%, #F0B447 60%, #D59325 100%);
  --radius: 12px;
  --radius-l: 20px;
  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 84px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (max-width: 520px) { body { font-size: 16px; } }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-stretch: 125%; letter-spacing: -0.035em; line-height: .96; }
h2 { font-size: clamp(2rem, 4.8vw, 3.5rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.2; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--amber); color: var(--ink); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }
.grad { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-3); }
.small { font-size: .9rem; }
mark.todo { background: #FFE9A8; color: #3B2A00; padding: 0 .25em; border-radius: 3px; font-weight: 600; }

/* ---------------------------------------------------------------- boutons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; overflow: hidden; isolation: isolate;
  background: var(--text); color: var(--ink); font-weight: 700; font-stretch: 110%; font-size: 1rem; line-height: 1.1;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s, color .2s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.btn:hover .ico-arrow { transform: translateX(4px); }
.btn-hot { background: var(--grad-hot); color: var(--ink); box-shadow: 0 10px 34px -10px rgba(240, 182, 72, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-hot:hover { box-shadow: 0 14px 44px -8px rgba(240, 182, 72, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-hot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
  transform: translateX(-120%); animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text-2); background: rgba(255, 255, 255, .04); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #262A31; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-price { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(20, 22, 26, .16); font-size: .9em; }
@media (prefers-reduced-motion: reduce) { .btn-hot::after { animation: none; } }

/* ---------------------------------------------------------------- étiquettes */
.tag { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .78rem; font-weight: 650; line-height: 1.3; white-space: nowrap; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.t-proven { color: var(--mint); }
.t-limited { color: var(--gold); }
.t-theory { color: var(--sky); }
.t-myth { color: var(--coral); }
.paper .t-proven, .legal-wrap .t-proven { color: var(--proven-ink); }
.paper .t-limited, .legal-wrap .t-limited { color: var(--limited-ink); }
.paper .t-theory, .legal-wrap .t-theory { color: var(--theory-ink); }
.paper .t-myth, .legal-wrap .t-myth { color: var(--myth-ink); }
.paper .tag::before { box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: .92rem; color: var(--text-2); white-space: nowrap; }
.chip .ico { width: 16px; height: 16px; color: var(--amber); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad-hot); border-radius: 2px; }

/* ---------------------------------------------------------------- progression + en-tête */
.progress-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress-top i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad-hot); box-shadow: 0 0 12px rgba(240, 182, 72, .8); }
/* bandeau défilant doré */
.topbar { position: relative; z-index: 51; overflow: hidden; background: var(--grad-hot); color: var(--ink); font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; padding-block: 8px; }
.topbar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 260% 100%; animation: sheen 5s ease-in-out infinite; pointer-events: none; }
.topbar-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.topbar-track span { display: inline-flex; align-items: center; white-space: nowrap; }
.topbar-track span::after { content: "✦"; margin-inline: 22px; font-size: .9em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .topbar-track { animation: none; } .topbar::after { animation: none; } }

/* en-tête flottant */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding-top: 10px; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; width: calc(100% - 20px); max-width: calc(var(--wrap) - 2 * var(--gutter)); padding: 0 10px 0 18px; border-radius: 18px; background: rgba(10, 14, 22, .62); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .9); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.site-header.is-scrolled .nav, .site-header.menu-open .nav { background: rgba(10, 14, 22, .9); border-color: rgba(240, 182, 72, .22); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(240, 182, 72, .06); }

/* logo LooksLabs */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex: none; }
.brand-mark { display: grid; place-items: center; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.brand:hover .brand-mark { transform: scale(1.1) rotate(-6deg); }
.brand .logo { width: 38px; height: 38px; margin: -5px -3px; flex: none; filter: drop-shadow(0 0 9px rgba(255, 214, 130, .34)); }
.logo-l { fill: #F7F4EC; }
.logo-dot { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(255, 196, 80, .95)); animation: dotpulse 2.8s ease-in-out infinite; }
@keyframes dotpulse { 50% { transform: scale(1.22); filter: drop-shadow(0 0 11px rgba(255, 205, 95, 1)); } }
.brand-sep { width: 1.5px; height: 26px; border-radius: 2px; background: linear-gradient(180deg, transparent, #F3BC52 30%, #F3BC52 70%, transparent); }
.brand-word { display: inline-flex; align-items: baseline; gap: .38em; font-size: 1.08rem; line-height: 1; letter-spacing: .19em; font-stretch: 112%; margin-right: -.19em; }
.brand-word b { font-weight: 650; background: linear-gradient(110deg, #FFFFFF 0%, #FFFFFF 42%, #FFE7A8 50%, #FFFFFF 58%, #FFFFFF 100%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s ease-in-out infinite; }
.brand-word i { font-style: normal; font-weight: 400; background: linear-gradient(110deg, #F0B447 0%, #FFD478 40%, #FFF3CF 50%, #FFD478 60%, #E0A13A 100%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s ease-in-out infinite; text-shadow: 0 0 18px rgba(255, 200, 90, .25); }
@keyframes sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.brand-lg .logo { width: 50px; height: 50px; margin: -6px -4px; }
.brand-lg .brand-word { font-size: 1.35rem; }
.brand-lg .brand-sep { height: 34px; }
@media (prefers-reduced-motion: reduce) { .logo-dot, .brand-word b, .brand-word i { animation: none; } .brand-word b, .brand-word i { background-position: 50% 0; } }
.nav-main ul { display: flex; gap: 24px; list-style: none; }
.nav-main a { text-decoration: none; color: var(--text-2); font-size: .95rem; padding: 6px 0; transition: color .15s; }
.nav-main a:hover, .nav-main a.is-active { color: var(--text); }
.nav-main a.is-active { box-shadow: 0 2px 0 var(--amber); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; padding: 0; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--text); stroke-width: 1.8; fill: none; }
.nav-toggle path { transition: transform .2s, opacity .2s; transform-origin: 12px 12px; }
.nav-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .l2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav { width: calc(100% - 20px); margin: 8px auto 0; border-radius: 18px; background: rgba(10, 14, 22, .97); border: 1px solid rgba(240, 182, 72, .18); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.mobile-nav .wrap { padding-inline: 18px; }
.mobile-nav ul { list-style: none; padding-block: 8px 22px; }
.mobile-nav li + li { border-top: 1px solid var(--line); }
.mobile-nav a { display: flex; justify-content: space-between; padding: 16px 0; text-decoration: none; font-size: 1.15rem; font-weight: 650; font-stretch: 110%; }
@media (max-width: 980px) { .nav-main { display: none; } .nav-toggle { display: inline-flex; } }
@media (min-width: 981px) { .mobile-nav { display: none !important; } }
@media (max-width: 400px) { .nav .btn-sm { padding: 0 14px; } .nav { padding-left: 14px; } .brand { gap: 9px; } .brand-word { font-size: .95rem; letter-spacing: .14em; } }
@media (max-width: 500px) { .nav { gap: 8px; padding: 0 8px 0 12px; } .nav-actions { gap: 6px; } .nav .btn-sm { padding: 0 13px; font-size: .86rem; } .nav .btn-sm .btn-price { display: none; } .brand { gap: 8px; } .brand .logo { width: 33px; height: 33px; margin: -5px -3px; } .brand-sep { height: 22px; } .brand-word { font-size: .9rem; letter-spacing: .11em; margin-right: 0; } }
@media (max-width: 350px) { .brand-sep, .brand-word i { display: none; } }

/* ---------------------------------------------------------------- sections */
section { scroll-margin-top: calc(var(--header-h) + 8px); }
.section { position: relative; padding-block: 110px; }
.section-head { max-width: 46em; margin-bottom: 52px; }
.section-head p { margin-top: 18px; color: var(--text-2); font-size: 1.1rem; max-width: 40em; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-inline: auto; }
.section-sub { margin-top: 18px; color: var(--text-2); font-size: 1.1rem; max-width: 36em; }
.center-cta { display: flex; justify-content: center; margin-top: 56px; }
.paper { background: var(--paper); color: var(--ink); color-scheme: light; }
.paper .section-head p { color: var(--ink-2); }
.paper .eyebrow { color: var(--amber-ink); }
.glow-top::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(900px, 90%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(233, 178, 79, .7), transparent); }
@media (max-width: 700px) { .section { padding-block: 76px; } .section-head { margin-bottom: 36px; } }

/* apparition au défilement : seulement si le JS tourne et que le mouvement est autorisé */
/* animation (et non transition) + propriété translate : n'interfère ni avec les transform des survols, ni avec leurs transitions */
.js-motion .reveal { opacity: 0; }
.js-motion .reveal.in { animation: reveal .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
@keyframes reveal { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-block: 56px 90px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bg::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background: radial-gradient(38% 42% at 78% 32%, rgba(236, 176, 66, .24), transparent 70%), radial-gradient(34% 36% at 12% 6%, rgba(70, 110, 255, .13), transparent 70%), radial-gradient(30% 30% at 55% 95%, rgba(236, 176, 66, .08), transparent 70%); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 30%, #000 10%, transparent 70%); }
.cursor-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; left: 0; top: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255, 208, 115, .13), transparent 60%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s; }
.hero:hover .cursor-glow { opacity: 1; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 48px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: .88rem; color: var(--text-2); margin-bottom: 26px; }
.hero-kicker b { color: var(--ink); background: var(--grad-hot); padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 750; letter-spacing: .03em; }
.hero h1 { font-size: clamp(2.45rem, 6.1vw, 4.6rem); font-stretch: 116%; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .hl { position: relative; display: inline-block; }
.hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 99px; background: var(--grad-hot); transform-origin: 0 50%; animation: grow 1s .5s cubic-bezier(.2, .8, .2, 1) both; }
.hero h1 .l2 { color: var(--text-3); }
.hero h1 .strike { background: linear-gradient(var(--coral), var(--coral)) no-repeat 0 56% / 0% .085em; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: strike .8s 1.2s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes strike { to { background-size: 100% .085em; } }
@media (min-width: 700px) { .hero h1 .strike { white-space: nowrap; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .lede { margin-top: 26px; font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--text-2); max-width: 34em; }
.hero .lede b { color: var(--text); font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: .9rem; color: var(--text-3); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .ico { width: 16px; height: 16px; color: var(--mint); }
.hero-alt { margin-top: 18px; font-size: .95rem; color: var(--text-3); }
.hero-alt a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-2); font-weight: 600; text-decoration: none; }
.hero-alt a:hover { text-decoration: underline; }
.hero-alt .ico { width: 16px; height: 16px; transition: transform .2s; }
.hero-alt a:hover .ico { transform: translateX(3px); }
@media (max-width: 960px) { .hero { padding-block: 26px 64px; } .hero-grid { grid-template-columns: 1fr; gap: 44px; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .hl::after { animation: none; } .hero h1 .strike { animation: none; background-size: 100% .085em; } }

/* carte « scan » */
.scan { position: relative; margin: 0; border-radius: 26px; padding: 22px 22px 44px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.scan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 150px; font-size: .85rem; color: var(--text-3); }
.scan-head b { color: var(--text); font-weight: 650; font-stretch: 110%; font-size: .95rem; }
.scan-live { display: inline-flex; align-items: center; gap: 7px; }
.scan-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.scan-stage { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.scan-face { position: relative; width: 150px; height: 190px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(233, 178, 79, .1), transparent 70%); }
.scan-face svg { width: 100%; height: 100%; }
.scan-face .g { stroke: var(--text-2); stroke-width: 1.3; fill: none; }
.scan-face .th { stroke: var(--amber); stroke-width: 1.3; stroke-dasharray: 4 3; fill: none; }
.scan-face .mid { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.scan-face .p { fill: var(--amber-2); animation: pop 6s infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.scan-face .p.k { fill: var(--text); }
@keyframes pop { 0%, 6% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.9); } 18%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.scan-line { position: absolute; left: 0; right: 0; height: 36px; top: -36px; background: linear-gradient(180deg, transparent, rgba(255, 203, 107, .45) 70%, rgba(255, 230, 170, .95)); border-bottom: 1px solid #FFE6AA; filter: drop-shadow(0 0 10px rgba(255, 190, 90, .8)); animation: scanline 3s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes scanline { 0% { top: -36px; } 50% { top: 100%; } 100% { top: -36px; } }
.scan-metrics { display: grid; gap: 12px; }
.metric-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-3); }
.metric-label b { color: var(--text); font-weight: 650; }
.bar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad-hot); transform-origin: 0 50%; }
.scan .bar i { animation: fillbar 6s infinite; animation-delay: var(--d, 0s); }
@keyframes fillbar { 0%, 8% { transform: scaleX(0); } 28%, 90% { transform: scaleX(var(--w, 1)); } 100% { transform: scaleX(0); } }
.scan-list { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.scan-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .9rem; animation: rowin 6s infinite; animation-delay: var(--d, 0s); }
@keyframes rowin { 0%, 5% { opacity: 0; transform: translateX(-10px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.scan-list li.crossed span:first-child { text-decoration: line-through; text-decoration-color: var(--coral); color: var(--text-3); }
.scan-foot { margin-top: 14px; font-size: .75rem; color: var(--text-3); }
.scan-float { position: absolute; z-index: 2; right: -16px; top: -26px; padding: 10px 14px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); font-size: .8rem; color: var(--text-2); animation: float 5s ease-in-out infinite; }
.scan-float b { display: block; font-size: 1.2rem; font-stretch: 120%; color: var(--text); }
.scan-float.f2 { right: auto; left: 22px; top: auto; bottom: -24px; animation-delay: -2.5s; }
.hero-grid { padding-bottom: 20px; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 420px) { .scan { padding: 16px 16px 40px; } .scan-head { padding-right: 0; } .scan-stage { grid-template-columns: 110px 1fr; gap: 14px; } .scan-face { width: 110px; height: 140px; } .scan-float { right: -4px; top: -36px; } .scan-float.f2 { left: 12px; } }
@media (prefers-reduced-motion: reduce) { .scan-line { display: none; } .scan-face .p, .scan .bar i, .scan-list li, .scan-float, .scan-live::before { animation: none; } .scan .bar i { transform: scaleX(var(--w, 1)); } }

/* ---------------------------------------------------------------- bandeau défilant */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-1); padding-block: 16px; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-1), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-1), transparent); }
.marquee-track { display: flex; width: max-content; gap: 12px; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; } .marquee-track .dup { display: none; } }

/* ---------------------------------------------------------------- le problème */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pain { position: relative; padding: 28px; border-radius: var(--radius-l); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: transform .25s, border-color .25s; }
.pain:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pain-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 116, 102, .12); color: var(--coral); margin-bottom: 20px; }
.pain-ico svg { width: 24px; height: 24px; }
.pain h3 { margin-bottom: 10px; }
.pain p { color: var(--text-2); font-size: .98rem; }
.noise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.noise span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--coral); }
.answer { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: var(--radius-l); background: linear-gradient(100deg, rgba(233, 178, 79, .16), rgba(232, 168, 58, .06)); border: 1px solid rgba(233, 178, 79, .35); }
.answer p { font-size: 1.2rem; font-weight: 600; font-stretch: 108%; max-width: 36em; }
@media (max-width: 900px) { .pains { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- quiz */
.quiz { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.quiz-card { position: relative; border-radius: 24px; padding: 30px; background: var(--bg-2); border: 1px solid var(--line-2); min-height: 440px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-3); margin-bottom: 12px; }
.quiz-back { border: 0; background: none; color: var(--text-3); padding: 4px 0; font-size: .85rem; }
.quiz-back:hover { color: var(--text); }
.quiz-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 26px; }
.quiz-bar i { display: block; height: 100%; width: 0; background: var(--grad-hot); border-radius: 3px; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.quiz-q { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 22px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font-size: 1rem; transition: transform .15s, border-color .15s, background-color .15s; }
.quiz-opt:hover { border-color: var(--amber); transform: translateX(4px); background: #232833; }
.quiz-opt .k { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); font-size: .82rem; font-weight: 700; color: var(--text-2); }
.quiz-opt.is-picked { border-color: var(--amber-2); background: rgba(233, 178, 79, .14); }
.quiz-opt.is-picked .k { background: var(--grad-hot); color: var(--ink); }
.quiz-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 18px; }
.quiz-kicker .ico { width: 18px; height: 18px; }
.quiz-intro { color: var(--text-2); margin-bottom: 26px; }
.quiz-start { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 360px; }
.quiz-note { margin-top: 16px; font-size: .8rem; color: var(--text-3); }
.quiz-step { animation: stepin .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes stepin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.quiz-result .kicker { font-size: .85rem; color: var(--text-3); }
.quiz-result .big { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 750; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.05; margin: 10px 0 14px; }
.quiz-result p { color: var(--text-2); }
.quiz-result .tag { margin-top: 14px; }
.levers { display: grid; gap: 10px; margin: 22px 0 24px; }
.lever { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; font-size: .88rem; color: var(--text-2); }
.lever .bar { margin: 0; }
.lever .bar i { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-side ul { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
.quiz-side li { display: flex; gap: 12px; color: var(--text-2); }
.quiz-side li .ico { width: 20px; height: 20px; color: var(--amber); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .quiz { grid-template-columns: 1fr; gap: 28px; } .quiz-card { padding: 22px; min-height: 0; } }
@media (max-width: 420px) { .lever { grid-template-columns: 110px 1fr; } }
@media (prefers-reduced-motion: reduce) { .quiz-step { animation: none; } }

/* ---------------------------------------------------------------- offre analyse */
.zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.zone { position: relative; padding: 22px 18px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--rule); transition: transform .25s, box-shadow .25s; }
.zone:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 24px 40px -24px rgba(20, 22, 26, .5); }
.zone-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--amber-2); margin-bottom: 16px; }
.zone-ico svg { width: 24px; height: 24px; }
.zone h3 { font-size: 1.08rem; margin-bottom: 8px; }
.zone p { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 1000px) { .zones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .zones { grid-template-columns: repeat(2, 1fr); } .zone { padding: 18px 16px; } .zones .zone:last-child { grid-column: 1 / -1; } }
.offer-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; margin-top: 28px; }
.deliver { padding: 30px; border-radius: 24px; background: var(--paper-2); border: 1px solid var(--rule); }
.deliver h3 { font-size: 1.35rem; margin-bottom: 18px; }
.deliver ol { list-style: none; counter-reset: dl; border-top: 1px solid var(--ink); }
.deliver li { counter-increment: dl; display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.deliver li::before { content: counter(dl, decimal-leading-zero); grid-row: span 2; font-weight: 750; font-stretch: 120%; color: var(--amber-ink); }
.deliver b { font-weight: 650; }
.deliver span { color: var(--ink-2); font-size: .94rem; }
.price-card { position: relative; border-radius: 26px; padding: 3px; overflow: hidden; isolation: isolate; }
.price-card::before { content: ""; position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, #FFEDB5, #E6A83F, #0B0F17 30%, #0B0F17 60%, #FFEDB5 80%, #E6A83F); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.price-inner { position: relative; height: 100%; border-radius: 23px; background: var(--ink); color: var(--text); padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.price-badge { align-self: flex-start; font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--grad-hot); padding: 5px 11px; border-radius: 999px; }
.price-inner h3 { font-size: 1.6rem; font-stretch: 118%; }
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-big { font-size: clamp(3.2rem, 8vw, 4.6rem); font-weight: 800; font-stretch: 125%; letter-spacing: -0.04em; line-height: .9; }
.price-row span { color: var(--text-3); font-size: .95rem; }
.price-row .price-big { color: var(--text); font-size: clamp(3.2rem, 8vw, 4.6rem); }
.price-eta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(69, 216, 154, .08); border: 1px solid rgba(69, 216, 154, .25); color: var(--text-2); font-size: .92rem; }
.price-eta .ico { width: 20px; height: 20px; color: var(--mint); flex: none; }
.price-eta b { color: var(--text); }
.price-list { list-style: none; display: grid; gap: 10px; }
.price-list li { display: flex; gap: 10px; color: var(--text-2); font-size: .97rem; }
.price-list .ico { width: 18px; height: 18px; color: var(--mint); flex: none; margin-top: 3px; }
.price-inner .btn { margin-top: auto; }
.price-note { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-3); text-align: center; }
.price-note .ico { width: 14px; height: 14px; flex: none; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .price-card::before { animation: none; } }

/* ---------------------------------------------------------------- avant / après */
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ba { margin: 0; }
.ba-slider { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line-2); user-select: none; -webkit-user-select: none; touch-action: pan-y; --pos: 50%; }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 16px rgba(0, 0, 0, .5); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat, var(--grad-hot); }
.ba-slider { cursor: ew-resize; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ba-slider.is-dragging .ba-handle::after { transform: scale(1.12); }
.ba-handle::after { transition: transform .15s; }
.ba-slider:has(.ba-range:focus-visible) { outline: 2px solid var(--amber-2); outline-offset: 3px; }
.ba-label { position: absolute; top: 12px; font-size: .74rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.ba-label.b { left: 12px; background: rgba(11, 12, 15, .82); color: var(--text); }
.ba-label.a { right: 12px; background: var(--grad-hot); color: var(--ink); }
.ba figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 6px 0; }
.ba figcaption b { font-size: 1.1rem; font-weight: 700; font-stretch: 112%; }
.ba figcaption span { font-size: .9rem; color: var(--text-3); }
.ba-note { margin-top: 26px; font-size: .9rem; color: var(--text-3); max-width: 60em; }
.ba-hint { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--amber-2); margin-top: 6px; }
.ba-hint .ico { width: 18px; height: 18px; }
@media (max-width: 760px) { .ba-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- vrai ou mythe */
.myths-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.myth-count { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--text-2); }
.myth-count .bar { width: 140px; margin: 0; }
.myth-count .bar i { transform: scaleX(var(--w, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.myths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1400px; }
.myth { position: relative; display: block; width: 100%; min-height: 210px; border: 0; padding: 0; background: none; color: inherit; text-align: left; font: inherit; }
/* la rotation se fait sur un élément interne : un <button> ne transmet pas la 3D à ses enfants */
.myth-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: perspective(1400px) rotateY(0deg); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.myth.is-flipped .myth-inner { transform: perspective(1400px) rotateY(180deg); }
.myth-face { position: absolute; inset: 0; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.myth-front { background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .2s; }
.myth:hover .myth-front { border-color: var(--amber); }
.myth-front { overflow: hidden; }
.myth-front::after { content: "?"; position: absolute; right: 14px; bottom: -34px; font-size: 9rem; font-weight: 800; font-stretch: 125%; line-height: 1; color: rgba(255, 255, 255, .045); transition: color .25s, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.myth:hover .myth-front::after { color: rgba(233, 178, 79, .16); transform: rotate(-8deg) scale(1.06); }
.myth-front q { font-size: 1.12rem; font-weight: 650; font-stretch: 108%; line-height: 1.3; quotes: "«\00A0" "\00A0»"; }
.myth-front small { display: inline-flex; align-items: center; gap: 8px; color: var(--amber); font-weight: 650; font-size: .85rem; }
.myth-front small .ico { width: 18px; height: 18px; flex: none; }
.myth-back { transform: rotateY(180deg); background: var(--bg-3); border: 1px solid var(--line-2); }
.myth-back p, .myth-back .txt { color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.myth-done { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(69, 216, 154, .12); color: var(--mint); font-weight: 650; font-size: .92rem; animation: popin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.myth-done .ico { width: 18px; height: 18px; }
.myth-back .tag { align-self: flex-start; font-size: .9rem; padding: 5px 12px 5px 10px; }
.myth-back.v-proven { box-shadow: inset 0 0 0 1px rgba(69, 216, 154, .5), 0 0 40px -12px rgba(69, 216, 154, .45); }
.myth-back.v-limited { box-shadow: inset 0 0 0 1px rgba(242, 184, 75, .5), 0 0 40px -12px rgba(242, 184, 75, .45); }
.myth-back.v-theory { box-shadow: inset 0 0 0 1px rgba(134, 168, 244, .5), 0 0 40px -12px rgba(134, 168, 244, .45); }
.myth-back.v-myth { box-shadow: inset 0 0 0 1px rgba(255, 116, 102, .5), 0 0 40px -12px rgba(255, 116, 102, .45); }
@media (max-width: 900px) { .myths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .myths { grid-template-columns: 1fr; } .myth { min-height: 176px; } }
@media (prefers-reduced-motion: reduce) { .myth-inner { transition: none; } }
.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.level { padding: 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.level .tag { margin-bottom: 14px; }
.level p { color: var(--text-2); font-size: .95rem; }
.gauge { display: flex; gap: 4px; margin-bottom: 16px; }
.gauge i { height: 8px; flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.level[data-n="4"] .gauge i { background: var(--mint); box-shadow: 0 0 10px rgba(69, 216, 154, .5); }
.level[data-n="3"] .gauge i:nth-child(-n+3) { background: var(--gold); }
.level[data-n="2"] .gauge i:nth-child(-n+2) { background: var(--sky); }
.level[data-n="1"] .gauge i:nth-child(1) { background: var(--coral); }
@media (max-width: 900px) { .scale { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .scale { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- comparatif */
.compare-card { border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line-2); overflow: hidden; }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .94rem; }
.compare th, .compare td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: .82rem; font-weight: 650; color: var(--text-3); letter-spacing: .02em; vertical-align: bottom; }
.compare tbody th { text-align: left; font-weight: 550; color: var(--text); }
.compare td { color: var(--text-2); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .us { background: rgba(233, 178, 79, .1); color: var(--text); font-weight: 650; }
.compare thead .us { color: var(--ink); background: var(--grad-hot); font-size: .9rem; }
.compare .ico { width: 20px; height: 20px; margin-inline: auto; }
.compare .yes { color: var(--mint); }
.compare .no { color: var(--coral); }
.compare-note { margin-top: 14px; font-size: .82rem; color: var(--text-3); }

/* ---------------------------------------------------------------- étapes */
.steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: st; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--line-2); }
.steps::after { content: ""; position: absolute; left: 0; top: 23px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad-hot); box-shadow: 0 0 12px rgba(240, 182, 72, .6); transition: transform .3s linear; }
.steps li { position: relative; counter-increment: st; padding-top: 70px; }
.steps li::before { content: counter(st); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-2); font-weight: 750; font-stretch: 120%; transition: background .3s, color .3s, box-shadow .3s; z-index: 1; }
.steps li.is-on::before { background: var(--grad-hot); color: var(--ink); border-color: transparent; box-shadow: 0 0 24px rgba(240, 182, 72, .55); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-2); font-size: .96rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before, .steps::after { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps::after { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .steps li { padding: 4px 0 0 70px; min-height: 48px; }
}

/* ---------------------------------------------------------------- accompagnement */
.coach { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.coach-list { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.coach-list li { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.coach-list li:hover { border-color: var(--line-2); transform: translateX(4px); }
.coach-list .ico { width: 22px; height: 22px; color: var(--amber); flex: none; margin-top: 2px; }
.coach-list b { display: block; margin-bottom: 2px; }
.coach-list span { color: var(--text-2); font-size: .95rem; }
.booking { position: sticky; top: calc(var(--header-h) + 20px); border-radius: 24px; padding: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); color-scheme: light; }
.booking h3 { font-size: 1.45rem; margin-bottom: 6px; }
.booking-intro { color: var(--ink-2); margin-bottom: 18px; font-size: .96rem; }
.badge-free .ico { width: 14px; height: 14px; flex: none; }
.badge-free { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--proven-ink); background: #DCEFE4; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
@media (max-width: 960px) { .coach { grid-template-columns: minmax(0, 1fr); } .booking { position: static; min-width: 0; } }

/* ---------------------------------------------------------------- formulaires (sur fond clair) */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px) { .field-row, .field-row.three { grid-template-columns: 1fr; } }
.label, .field > label { font-weight: 650; font-size: .92rem; }
.hint { font-size: .84rem; color: var(--ink-3); font-weight: 400; }
.req { color: var(--myth-ink); }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: #fff; color: var(--ink); border: 1px solid #C9C4B8; border-radius: 12px; font-size: 1rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.textarea { min-height: 110px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2314161A' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(233, 178, 79, .45); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--myth-ink); box-shadow: 0 0 0 4px rgba(162, 61, 49, .15); }
.field-error { font-size: .85rem; color: var(--myth-ink); font-weight: 550; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1px solid #C9C4B8; background: #fff; font-size: .92rem; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .12s, background-color .15s, color .15s; }
.pick:active { transform: scale(.95); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pick:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; margin: 2px 0 0; width: 20px; height: 20px; accent-color: var(--ink); }
.check a { color: var(--ink); }
.check + .field-error { margin-top: -6px; padding-left: 32px; }
.check b { color: var(--ink); font-weight: 650; }
.check-hint { margin: -8px 0 0 32px; font-size: .84rem; color: var(--ink-3); }
.check-hint.is-on { color: var(--proven-ink); font-weight: 600; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 12px; padding: 14px 16px; font-size: .94rem; }
.form-status b { display: block; margin-bottom: 2px; }
.form-status.is-error { background: #F6E3DF; color: #5E1F18; border: 1px solid #E3B7AF; }
.form-status.is-info { background: #fff; color: var(--ink-2); border: 1px solid var(--rule); }
.form-status.is-ok { background: #DCEFE4; color: #1D4631; border: 1px solid #B9D6C4; }
.form-legal { font-size: .8rem; color: var(--ink-3); }
.form-legal a { color: var(--ink-2); }
.booked { text-align: center; padding: 18px 6px 6px; }
.booked .ok { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--amber-2); animation: popin .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.booked .ok svg { width: 30px; height: 30px; }
.booked h3 { margin-bottom: 8px; }
.booked p { color: var(--ink-2); }
@keyframes popin { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------------------------------------------------------------- confidentialité */
.privacy { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.privacy li { padding: 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.privacy .ico { width: 26px; height: 26px; color: var(--mint); margin-bottom: 14px; }
.privacy b { display: block; margin-bottom: 6px; font-stretch: 108%; }
.privacy span { color: var(--text-2); font-size: .93rem; }
@media (max-width: 900px) { .privacy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .privacy { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- FAQ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font-weight: 650; font-stretch: 106%; font-size: 1.08rem; transition: color .15s; }
.faq summary:hover { color: var(--amber-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--amber-2); font-size: 1.3rem; font-weight: 400; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 4px 22px; color: var(--text-2); max-width: 44em; }
.faq-a a { color: var(--text); }

/* ---------------------------------------------------------------- CTA final */
.final { position: relative; overflow: hidden; text-align: center; }
.final::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(232, 168, 58, .22), transparent 60%); animation: breathe 5s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .7; } }
.final h2 { position: relative; font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-stretch: 125%; max-width: 12em; margin-inline: auto; }
.final p { position: relative; margin: 18px auto 0; color: var(--text-2); max-width: 34em; font-size: 1.1rem; }
.final-actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (prefers-reduced-motion: reduce) { .final::before { animation: none; } }

/* ---------------------------------------------------------------- pied de page */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-1); color: var(--text-3); padding-block: 56px 40px; font-size: .92rem; }
.foot-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.foot-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.foot-brand p { color: var(--text-2); max-width: 22em; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-cols h2 { font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; font-stretch: 100%; }
.foot-cols ul { list-style: none; display: grid; gap: 10px; }
.foot-cols a { text-decoration: none; color: var(--text); overflow-wrap: anywhere; }
.foot-cols a:hover { color: var(--amber-2); }
.foot-bottom { padding-top: 24px; display: grid; gap: 10px; }
.disclaimer { max-width: 64em; font-size: .82rem; line-height: 1.55; }
.copyright { font-size: .82rem; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > div:last-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- barre d'appel mobile */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(28, 32, 39, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8); transform: translateY(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta p { display: grid; line-height: 1.2; font-size: .9rem; }
  .sticky-cta p span { color: var(--text-3); font-size: .78rem; }
  body.has-sticky { padding-bottom: 86px; }
}

/* ---------------------------------------------------------------- page commande */
.page-hero { position: relative; padding-block: 48px 36px; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.8rem); }
.page-hero .lede { margin-top: 16px; color: var(--text-2); font-size: 1.1rem; max-width: 40em; }
.page-hero > .wrap { position: relative; z-index: 1; }
.order { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-bottom: 96px; }
.order-form { display: grid; gap: 18px; }
.panel { border-radius: 22px; padding: 26px; background: var(--paper); color: var(--ink); display: grid; gap: 16px; margin: 0; min-width: 0; color-scheme: light; }
.panel-head { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; min-width: 0; }
.panel h2 { font-size: 1.35rem; font-stretch: 112%; letter-spacing: -0.015em; }
.step-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--amber-2); font-size: .85rem; font-weight: 750; flex: none; transition: background-color .25s; }
.step-no .ico { display: none; width: 16px; height: 16px; stroke-width: 2.6; }
.panel.is-done .step-no { background: var(--proven-ink); color: #fff; animation: popin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.panel.is-done .step-no span { display: none; }
.panel.is-done .step-no .ico { display: block; }
.panel-note { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--ink-3); }
.panel-note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.order-total span { font-weight: 650; }
.order-total b { font-size: 1.9rem; font-weight: 800; font-stretch: 120%; letter-spacing: -0.02em; }
.btn-submit.is-ready { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 8px rgba(240, 182, 72, .18), 0 14px 44px -8px rgba(240, 182, 72, .9); } }
@media (prefers-reduced-motion: reduce) { .btn-submit.is-ready { animation: none; } }
.slot.is-required .slot-label small { color: var(--amber-ink); font-weight: 650; }
.panel-intro { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 520px) { .panel { padding: 20px 16px; } }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .slots { grid-template-columns: repeat(2, 1fr); } }
.slot { position: relative; min-width: 0; }
.slot input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.slot-label { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; aspect-ratio: 3 / 4; width: 100%; padding: 10px; border-radius: 12px; cursor: pointer; overflow: hidden; background: #fff; border: 1.5px dashed #BDB8AC; transition: border-color .15s, transform .15s; }
.slot-label:hover { border-color: var(--ink); transform: translateY(-2px); }
.slot input:focus-visible + .slot-label { outline: 2px solid var(--amber); outline-offset: 2px; }
.slot-label svg.pose { position: absolute; inset: 10px 10px 44px; width: calc(100% - 20px); height: calc(100% - 54px); color: #BDB8AC; }
.slot-label b { position: relative; z-index: 1; font-size: .8rem; font-weight: 650; line-height: 1.2; }
.slot-label small { position: relative; z-index: 1; font-size: .72rem; color: var(--ink-3); }
.slot-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.has-file .slot-label { border-style: solid; border-color: var(--ink); }
.slot.has-file .pose { display: none; }
.slot.has-file .slot-label::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(20, 22, 26, .8)); }
.slot.has-file .slot-label b, .slot.has-file .slot-label small { color: #fff; }
.slot.has-file .slot-label::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--proven-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 14px no-repeat; animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.slot-remove { position: absolute; top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(20, 22, 26, .82); color: #fff; display: grid; place-items: center; padding: 0; }
.slot-remove svg { width: 14px; height: 14px; }
.slots-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-2); }
.slots-meta b { color: var(--ink); }
.progress { height: 8px; border-radius: 4px; background: #E3DFD5; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.order-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.tips-card h2 { font-size: 1.1rem; }
.side-note { display: flex; gap: 10px; font-size: .85rem; color: var(--text-3); padding-inline: 4px; }
.side-note .ico { width: 18px; height: 18px; flex: none; color: var(--mint); margin-top: 1px; }
.summary { border-radius: 22px; padding: 24px; background: var(--bg-2); border: 1px solid var(--line-2); display: grid; gap: 16px; }
.summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.summary-top h2 { font-size: 1.3rem; }
.summary-top b { font-size: 2rem; font-weight: 800; font-stretch: 120%; }
.meter { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--bg-3); }
.meter-top { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-2); }
.meter-top b { color: var(--text); }
.meter .bar { margin: 0; height: 10px; border-radius: 5px; }
.meter .bar i { transform: scaleX(var(--w, 0)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); border-radius: 5px; }
.meter small { color: var(--text-3); font-size: .82rem; }
.meter.is-full .bar i { background: var(--mint); box-shadow: 0 0 14px rgba(69, 216, 154, .6); }
.meter.is-full .meter-top b, .meter.is-full small { color: var(--mint); }
.tips { list-style: none; display: grid; gap: 10px; font-size: .92rem; color: var(--text-2); }
.tips li { display: flex; gap: 10px; }
.tips .ico { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--mint); }
.tips li.no .ico { color: var(--coral); }
@media (max-width: 960px) {
  .order { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .order-side { display: contents; }
  .order-side > .summary:first-child { order: -1; }
  .order-side > * { order: 1; }
}

/* ---------------------------------------------------------------- merci / 404 */
.thanks { position: relative; padding-block: 80px 110px; text-align: center; overflow: hidden; }
.thanks .ok { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-hot); color: var(--ink); box-shadow: 0 0 60px rgba(240, 182, 72, .55); animation: popin .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.thanks .ok svg { width: 40px; height: 40px; }
.thanks h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.thanks .lede { margin: 18px auto 0; max-width: 36em; color: var(--text-2); font-size: 1.1rem; }
.thanks > .wrap, .notfound > .wrap { position: relative; z-index: 1; }
.thanks .steps { margin-top: 56px; text-align: left; }
@media (min-width: 901px) { .steps.three { grid-template-columns: repeat(3, 1fr); } }
.thanks-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }
.notfound { position: relative; overflow: hidden; padding-block: 110px; text-align: center; }
.notfound .thanks-actions { margin-top: 34px; }
.notfound .code { font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; font-stretch: 125%; line-height: .85; letter-spacing: -0.04em; }
.notfound h1 { margin-top: 14px; font-size: clamp(2rem, 4.6vw, 3rem); }
.notfound p { margin: 14px auto 0; color: var(--text-2); max-width: 32em; }

/* ---------------------------------------------------------------- pages légales (fond clair) */
.legal-hero { padding-block: 56px 40px; }
.legal-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.legal-hero p { margin-top: 14px; color: var(--text-3); font-size: .92rem; }
.legal-wrap { background: var(--paper); color: var(--ink); color-scheme: light; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; padding-block: 48px 96px; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
.legal-toc p { font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.legal-toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.legal-toc a { display: block; padding: 5px 12px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-2); font-size: .88rem; line-height: 1.35; }
.legal-toc a:hover { color: var(--ink); border-left-color: var(--amber); }
.legal-doc { max-width: 760px; min-width: 0; }
.legal-doc section + section { margin-top: 44px; }
.legal-doc h2 { font-size: 1.45rem; font-stretch: 110%; margin-bottom: 14px; letter-spacing: -0.015em; line-height: 1.15; }
.legal-doc h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: .98rem; line-height: 1.65; }
.legal-doc p + p, .legal-doc p + ul, .legal-doc ul + p, .legal-doc p + ol, .legal-doc ol + p, .legal-doc .table-scroll + p { margin-top: 12px; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25em; display: grid; gap: 6px; margin-top: 10px; }
.legal-doc strong { color: var(--ink); font-weight: 650; }
.legal-doc a { color: var(--ink); }
.legal-doc p + dl { margin-top: 14px; }
.legal-doc dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--rule); }
.legal-doc dt, .legal-doc dd { padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: .96rem; }
.legal-doc dt { font-weight: 650; color: var(--ink); padding-right: 16px; }
.legal-doc dd { color: var(--ink-2); }
@media (max-width: 620px) { .legal-doc dl { grid-template-columns: 1fr; } .legal-doc dt { border-bottom: 0; padding-bottom: 0; } }
.legal-doc .table-scroll { margin-top: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.legal-doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.legal-doc th, .legal-doc td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal-doc th { color: var(--ink-3); font-size: .8rem; }
.legal-doc td { color: var(--ink-2); }
.legal-doc tr:last-child td { border-bottom: 0; }
.encadre { margin-top: 16px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px 22px; background: #fff; }
.encadre h3 { margin-top: 0; }
.encadre p, .encadre li { font-size: .93rem; }
.form-template { margin-top: 16px; border: 1px dashed var(--ink-3); border-radius: var(--radius); padding: 22px; background: #fff; }
.form-template .blank { display: inline-block; min-width: 12em; border-bottom: 1px solid var(--ink-3); }
@media (max-width: 960px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; } .legal-toc { position: static; max-height: none; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; background: var(--paper-2); } }

/* ---------------------------------------------------------------- v3 : poussière d'or, chiffres, rapport, lumières */
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.paper .grad { background: linear-gradient(100deg, #C58A1F 0%, #E0A63C 45%, #B9791A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* bande de chiffres */
.stats { position: relative; border-block: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-1), var(--bg)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: grid; gap: 8px; align-content: start; padding: 30px 26px; border-left: 1px solid var(--line); transition: background-color .3s; }
.stat:first-child { border-left: 0; }
.stat b { font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 800; font-stretch: 125%; letter-spacing: -0.035em; line-height: 1; background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(240, 182, 72, .25)); }
.stat > span { color: var(--text-2); font-size: .93rem; max-width: 18em; }
@media (max-width: 820px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 22px 18px; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* rapport sur téléphone */
.report-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 64px; }
.phone-wrap { position: relative; display: grid; place-items: center; padding: 34px 0; }
.phone-glow { position: absolute; width: 420px; height: 420px; max-width: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(240, 182, 72, .38), rgba(240, 182, 72, .08) 45%, transparent 68%); animation: glowpulse 5s ease-in-out infinite; pointer-events: none; }
@keyframes glowpulse { 50% { transform: scale(1.1); opacity: .75; } }
@media (max-width: 960px) { .report-row { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (prefers-reduced-motion: reduce) { .phone-glow { animation: none; } }

/* carte prix en largeur */
.price-wide { margin-top: 56px; }
.price-wide .price-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 40px 44px; background: radial-gradient(80% 120% at 0% 0%, #1A2336, var(--ink) 60%); }
.pw-left { display: grid; gap: 18px; justify-items: start; }
.pw-left h3 { font-size: 1.9rem; font-stretch: 120%; }
.pw-right { display: grid; gap: 18px; }
@media (max-width: 820px) { .price-wide .price-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px; } }

/* lumière qui suit le pointeur sur les cartes */
.pain, .level, .privacy li, .coach-list li, .stat, .quiz-card { background-image: radial-gradient(420px circle at var(--mx, -600px) var(--my, -600px), rgba(240, 182, 72, .11), transparent 45%); }
.zone, .deliver { background-image: radial-gradient(380px circle at var(--mx, -600px) var(--my, -600px), rgba(217, 164, 65, .16), transparent 45%); }
.pain:hover, .level:hover, .privacy li:hover, .coach-list li:hover { border-color: rgba(240, 182, 72, .38); box-shadow: 0 24px 60px -30px rgba(240, 182, 72, .35); }
.level, .privacy li { transition: transform .25s, border-color .25s, box-shadow .25s; }
.level:hover, .privacy li:hover { transform: translateY(-4px); }

/* lumière qui fait le tour des cartes importantes */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.runner { position: relative; }
.runner::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(255, 222, 140, .95) 300deg, rgba(240, 182, 72, .5) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: runner 5.5s linear infinite; }
@keyframes runner { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .runner::after { animation: none; } }
/* .runner rend la carte « relative » : on garde le collant du bloc de réservation sur grand écran,
   et on neutralise son décalage (top) sur mobile, sinon la carte descend et se fait couper */
.booking.runner { position: sticky; }
@media (max-width: 960px) { .booking.runner { position: relative; top: auto; } }

/* le hero plus lumineux */
.hero h1 .l1 .hl { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(240, 182, 72, .35)); }
.scan { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(240, 182, 72, .35); }
.btn-hot { text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- v3 : visuel du hero et fonds */
.hero-bg { background-color: var(--bg); background-image: linear-gradient(90deg, rgba(6, 8, 13, .94) 0%, rgba(6, 8, 13, .7) 42%, rgba(6, 8, 13, .35) 100%), url("../img/visuels/fond-vagues.jpg"); background-image: linear-gradient(90deg, rgba(6, 8, 13, .94) 0%, rgba(6, 8, 13, .7) 42%, rgba(6, 8, 13, .35) 100%), image-set(url("../img/visuels/fond-vagues.webp") type("image/webp"), url("../img/visuels/fond-vagues.jpg") type("image/jpeg")); background-size: cover; background-position: center bottom; }
.hv { position: relative; margin: 0; width: 100%; max-width: 460px; justify-self: end; }
.hv-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 60px 110px -45px rgba(0, 0, 0, .95), 0 0 110px -30px rgba(240, 182, 72, .45); }
.hv-frame picture, .hv-frame img { display: block; width: 100%; height: 100%; }
.hv-frame img { object-fit: cover; transform: scale(1.02); animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.09) translate(-1.5%, -1%); } }
.hv-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(6, 8, 13, .55) 100%), linear-gradient(180deg, transparent 55%, rgba(6, 8, 13, .75) 100%); }
.hv-scan { position: absolute; left: 0; right: 0; top: -10%; height: 90px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255, 214, 130, .12) 70%, rgba(255, 230, 175, .35)); border-bottom: 1.5px solid rgba(255, 236, 190, .95); box-shadow: 0 8px 26px -4px rgba(255, 200, 100, .75); animation: hvscan 4.6s cubic-bezier(.45, 0, .55, 1) infinite; mix-blend-mode: screen; }
@keyframes hvscan { 0% { top: -14%; } 50% { top: 96%; } 100% { top: -14%; } }
.hv-label { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(6, 8, 13, .6); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .78rem; font-weight: 650; color: var(--text); }
.hv-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 1.4s infinite; }
.hv-card { position: absolute; z-index: 3; left: -44px; bottom: 30px; width: 318px; padding: 14px 16px 12px; border-radius: 18px; background: rgba(9, 12, 19, .8); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .95); }
.hv-card-t { font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 8px; }
.hv-card .scan-list { margin-top: 0; padding-top: 0; border-top: 0; gap: 9px; }
.hv-card .scan-list li { font-size: .84rem; }
.hv .scan-float { z-index: 3; right: -22px; top: 26px; }
.hv .scan-float.f2 { left: auto; right: -26px; top: 44%; bottom: auto; }
@media (max-width: 1100px) { .hv-card { left: -20px; } }
@media (max-width: 960px) { .hv { justify-self: center; max-width: 440px; } .hv-card { left: 12px; right: 12px; width: auto; bottom: 12px; } .hv .scan-float { right: -6px; } .hv .scan-float.f2 { right: -8px; top: 36%; } }
@media (max-width: 420px) { .hv .scan-float { font-size: .72rem; padding: 8px 11px; } .hv .scan-float b { font-size: 1rem; } .hv-card .scan-list li { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .hv-frame img, .hv-scan { animation: none; } .hv-scan { display: none; } }

/* hero : avant/après réel à la place du visuel IA */
.hv-real .hv-frame .ba-slider { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.hv-real .hv-frame img, .ph-real .hv-frame img { transform: none; animation: none; }
.hv-real .hv-frame::after, .ph-real .hv-frame::after { background: radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(6, 8, 13, .45) 100%); }
.hv-real .ba-label { top: 14px; font-size: .72rem; }
.hv-real .ba-label.b { left: 14px; }
.hv-real .ba-label.a { right: 14px; }
.hv-proof-tag { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(6, 8, 13, .7); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font-size: .74rem; font-weight: 650; pointer-events: none; }
.hv-proof-tag .ico { width: 14px; height: 14px; color: var(--mint); stroke-width: 2.6; }
.hv-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .84rem; color: var(--text-3); text-align: center; }
.hv-caption .ico { width: 16px; height: 16px; flex: none; color: var(--mint); stroke-width: 2.4; }
.hv-caption b { color: var(--text); font-weight: 650; }
.ph-real .ba-slider { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.ph-real .ba-label { top: 10px; font-size: .64rem; padding: 3px 8px; }
.ph-real .ba-label.b { left: 10px; }
.ph-real .ba-label.a { right: 10px; }
.ph-real .ba-handle::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; background-size: 18px, auto; }
.ph-real .hv-proof-tag { left: 10px; bottom: 10px; font-size: .66rem; padding: 4px 9px 4px 7px; }
.ph-real .hv-proof-tag .ico { width: 12px; height: 12px; }
.ph-real .scan-float { bottom: 56px; }

/* hero : preuve humaine tout en haut (avatars réels) */
.hero-proof { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 16px 6px 7px; margin-bottom: 26px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; line-height: 1.2; transition: border-color .2s, background-color .2s; }
.hero-proof:hover { border-color: rgba(243, 188, 82, .55); background: rgba(243, 188, 82, .07); }
.hp-faces { display: flex; flex: none; }
.hp-faces picture { display: block; margin-left: -9px; }
.hp-faces picture:first-child { margin-left: 0; }
.hp-faces img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #0B0F17; }
.hp-text { display: grid; gap: 2px; min-width: 0; }
.hp-text b { color: var(--text); font-size: .9rem; font-weight: 700; }
.hp-text span { color: var(--text-3); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-proof .ico-arrow { width: 16px; height: 16px; flex: none; color: var(--amber-2); transform: rotate(90deg); transition: transform .2s; }
.hero-proof:hover .ico-arrow { transform: rotate(90deg) translateX(3px); }
@media (max-width: 960px) { .hero-proof { margin-bottom: 22px; } }

/* CTA final sur fond doré */
.final { background-color: var(--bg); background-image: linear-gradient(180deg, rgba(6, 8, 13, .88), rgba(6, 8, 13, .6) 50%, rgba(6, 8, 13, .9)), url("../img/visuels/fond-final.jpg"); background-image: linear-gradient(180deg, rgba(6, 8, 13, .88), rgba(6, 8, 13, .6) 50%, rgba(6, 8, 13, .9)), image-set(url("../img/visuels/fond-final.webp") type("image/webp"), url("../img/visuels/fond-final.jpg") type("image/jpeg")); background-size: cover; background-position: center; }

/* page commande : visuel */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; }
.ph-visual { position: relative; margin: 0; width: 280px; }
.ph-visual .hv-frame { border-radius: 24px; }
.ph-visual .scan-float { right: -18px; top: auto; bottom: 22px; }
.page-hero .hero-trust { margin-top: 18px; }
@media (max-width: 860px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } .ph-visual { display: none; } }

/* accompagnement : fond doré */
.coach-section { overflow: hidden; }
.coach-bg { position: absolute; top: 0; bottom: 0; right: 0; width: min(62%, 820px); pointer-events: none; opacity: .5; background-image: url("../img/visuels/fond-final.jpg"); background-image: image-set(url("../img/visuels/fond-final.webp") type("image/webp"), url("../img/visuels/fond-final.jpg") type("image/jpeg")); background-size: cover; background-position: 85% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); mask-composite: intersect; }
.coach-section .coach { position: relative; z-index: 1; }
@media (max-width: 960px) { .coach-bg { width: 100%; opacity: .22; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 55%, transparent 90%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 55%, transparent 90%); } }

/* barre de défilement dorée */
html { scrollbar-color: #C9871F #0A0E16; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0A0E16; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FFE7A8, #E6A83F 50%, #C9871F); border-radius: 10px; border: 2px solid #0A0E16; }

/* ---------------------------------------------------------------- finitions premium */
/* grain photo très léger sur toute la page */
body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* titres qui montent mot par mot */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; }
.js-motion .split .w > span { transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 45ms + .05s); }
.js-motion .in .split .w > span, .js-motion .split.in .w > span { transform: none; }

/* soulignement doré animé dans le menu */
.nav-main a { position: relative; }
.nav-main a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad-hot); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav-main a:hover::after, .nav-main a.is-active::after { transform: scaleX(1); }
.nav-main a.is-active { box-shadow: none; }


/* ---------------------------------------------------------------- réservation d'appel : points d'entrée */
.nav-main a { white-space: nowrap; }
.nav-call { display: none; }
@media (min-width: 1200px) {
  .nav-main ul { gap: 18px; }
  .nav-call { display: inline-flex; padding: 0 16px; }
  .nav-call .ico { display: none; }
}
.btn-ghost .ico { color: var(--amber-2); }
.mobile-nav ul { padding-bottom: 10px; }
.mobile-cta { display: grid; gap: 10px; padding: 4px 0 22px; }
.mobile-nav .mobile-cta .btn { width: 100%; justify-content: center; padding: 0 22px; font-size: 1rem; }
.foot-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.center-cta { flex-wrap: wrap; gap: 12px; }
.price-alt { text-align: center; font-size: .9rem; color: var(--text-3); }
.price-alt a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-2); font-weight: 650; text-decoration: none; }
.price-alt a:hover { text-decoration: underline; }
.price-alt .ico { width: 15px; height: 15px; transition: transform .2s; }
.price-alt a:hover .ico { transform: translateX(3px); }
.call-hint p { font-size: .92rem; color: var(--text-2); }
.call-hint b { color: var(--text); }
.call-hint .btn { justify-self: start; }
@media (max-width: 760px) {
  .sticky-cta { padding: 7px; gap: 7px; }
  .sticky-cta .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: .9rem; }
  .sticky-cta .btn .ico { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------- réservation d'appel : créneaux (fond clair) */
.booking h2, .booking h3 { font-size: 1.45rem; line-height: 1.15; margin-bottom: 6px; letter-spacing: -0.01em; font-stretch: 110%; }
.slot-picker { display: grid; gap: 12px; }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slot-head .label { margin: 0; }
.slot-next { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(214, 150, 40, .45); background: linear-gradient(100deg, #FFF7E0, #FFEEC4); color: var(--ink); font: inherit; font-size: .94rem; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.slot-next:hover { transform: translateY(-1px); border-color: rgba(201, 135, 31, .8); box-shadow: 0 12px 26px -16px rgba(201, 135, 31, .9); }
.slot-next > span { flex: 1; min-width: 0; }
.slot-next .ico { width: 18px; height: 18px; flex: none; color: #C9871F; }
.slot-next .ico-arrow { width: 16px; height: 16px; color: var(--ink-2); transition: transform .2s; }
.slot-next:hover .ico-arrow { transform: translateX(3px); }
.slot-days { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 14px; margin: 0 -2px -6px; scrollbar-width: thin; scrollbar-color: #C9C4B8 transparent; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.slot-days.at-end { -webkit-mask-image: none; mask-image: none; }
.slot-days::-webkit-scrollbar { height: 6px; }
.slot-days::-webkit-scrollbar-thumb { background: #C9C4B8; border-radius: 6px; }
.slot-day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; width: 72px; padding: 9px 4px 10px; border-radius: 14px; border: 1px solid #C9C4B8; background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: transform .12s, background-color .15s, border-color .15s, box-shadow .2s; }
.slot-day:hover { border-color: var(--ink); }
.slot-day:active { transform: scale(.95); }
.slot-day .sd-w { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.slot-day .sd-d { font-size: 1.4rem; font-weight: 800; font-stretch: 115%; line-height: 1.1; }
.slot-day .sd-m { font-size: .76rem; color: var(--ink-2); }
.slot-day .sd-n { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--proven-ink); margin-top: 4px; }
.slot-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 8px 14px -10px rgba(11, 15, 23, .75); }
.slot-day[aria-pressed="true"] .sd-w, .slot-day[aria-pressed="true"] .sd-m { color: rgba(247, 244, 236, .72); }
.slot-day[aria-pressed="true"] .sd-n { color: var(--amber-2); }
.slot-skel { flex: none; width: 72px; height: 88px; border-radius: 14px; background: linear-gradient(90deg, #ECE7DB 25%, #F8F5EE 50%, #ECE7DB 75%); background-size: 200% 100%; animation: skel 1.1s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.slot-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.slot-time { min-height: 46px; border-radius: 12px; border: 1px solid #C9C4B8; background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: .96rem; font-stretch: 105%; cursor: pointer; transition: transform .12s, background-color .15s, border-color .15s, box-shadow .2s; }
.slot-time:hover { border-color: var(--ink); }
.slot-time:active { transform: scale(.95); }
.slot-time[aria-pressed="true"] { background: var(--grad-hot); border-color: transparent; box-shadow: 0 12px 24px -12px rgba(201, 135, 31, .95), inset 0 1px 0 rgba(255, 255, 255, .5); animation: slotpop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slotpop { from { transform: scale(.88); } to { transform: none; } }
.slot-day:focus-visible, .slot-time:focus-visible, .slot-next:focus-visible, .linkish:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.slot-msg { font-size: .9rem; color: var(--ink-3); min-height: 1.4em; }
.slot-msg b { color: var(--ink); }
.slot-msg.is-ok { color: var(--proven-ink); }
.slot-msg.is-error { color: var(--myth-ink); font-weight: 600; }
.linkish { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.slot-fallback { display: grid; gap: 16px; }
.slot-fallback-intro { font-size: .92rem; color: var(--ink-2); padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.slot-fallback-intro .linkish { display: inline; margin-left: 4px; }
.slot-step2 { margin-top: 6px; }
.booked-cal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.booked-cal .ico { width: 16px; height: 16px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: rgba(11, 15, 23, .06); }
.booked p b { color: var(--ink); }
.nowrap { white-space: nowrap; }
.booked .booked-mail { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; font-size: .84rem; color: var(--ink-3); }
.booked-mail .ico { width: 15px; height: 15px; color: var(--proven-ink); flex: none; }
@media (prefers-reduced-motion: reduce) { .slot-skel { animation: none; } .slot-time[aria-pressed="true"] { animation: none; } }

/* ---------------------------------------------------------------- candidature avant l'appel */
.apply-top { margin-bottom: 18px; }
.apply-progress { margin-top: 14px; }
.apply-bar { height: 6px; border-radius: 6px; background: #E3DED2; overflow: hidden; }
.apply-bar i { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--grad-hot); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.apply-count { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .82rem; color: var(--ink-3); }
.apply-count b { color: var(--ink); font-weight: 700; }
.apply-step { display: grid; gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
.apply-step + .apply-step { margin-top: 26px; }
.js-apply .apply-step + .apply-step { margin-top: 0; }
.apply-step.is-in { animation: stepin .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes stepin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.apply-step.is-back { animation: stepback .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes stepback { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.apply-legend { padding: 0; margin-bottom: 2px; font-size: 1.15rem; font-weight: 750; font-stretch: 112%; letter-spacing: -0.01em; color: var(--ink); }
.apply-age .input { max-width: 140px; }
.apply-nav { display: grid; gap: 10px; margin-top: 4px; }
.apply-nav.two { grid-template-columns: auto minmax(0, 1fr); }
.apply-nav .btn-line { padding: 0 20px; }
.apply-nav .btn { white-space: normal; }
.apply-back { justify-self: center; }
.scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.scale .pick { justify-content: center; padding: 0; min-height: 46px; border-radius: 12px; font-weight: 750; font-size: 1rem; }
.scale-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; font-size: .78rem; color: var(--ink-3); }
@media (max-width: 520px) { .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.chips-col { flex-direction: column; align-items: stretch; }
.chips-col .pick { border-radius: 14px; min-height: 50px; padding: 10px 16px; }
.textarea-sm { min-height: 84px; }
.char-count.is-ok { color: var(--proven-ink); font-weight: 600; }
fieldset.field[aria-invalid="true"] .pick { border-color: var(--myth-ink); }
.apply-ok { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; background: #DCEFE4; border: 1px solid #B9D6C4; color: #1D4631; font-size: .93rem; }
.apply-ok .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--proven-ink); }
.apply-ok b { color: #133524; }
.apply-recap { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); }
.apply-recap > span { flex: 1 1 auto; min-width: 0; }
.apply-recap b { color: var(--ink); }
.apply-recap .ico { width: 17px; height: 17px; color: var(--proven-ink); flex: none; margin-top: 2px; }
.apply-recap .linkish { flex: none; }
.apply-no { text-align: center; padding: 8px 2px 2px; }
.apply-no > div { display: grid; gap: 14px; justify-items: center; }
.apply-no-ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--amber-2); animation: popin .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.apply-no-ico .ico { width: 28px; height: 28px; }
.apply-no h2, .apply-no h3 { margin: 0; }
.apply-no p { color: var(--ink-2); max-width: 30em; }
.apply-no p b { color: var(--ink); }
.apply-no .btn-block { max-width: 380px; }
.apply-no-note { font-size: .82rem; color: var(--ink-3) !important; }
@media (prefers-reduced-motion: reduce) { .apply-step.is-in, .apply-step.is-back { animation: none; } .apply-bar i { transition: none; } }

/* carte d'appel de l'accueil */
.booking-teaser .teaser-list { list-style: none; display: grid; gap: 10px; margin: 2px 0 18px; }
.booking-teaser .teaser-list li { display: flex; align-items: center; gap: 10px; font-size: .96rem; color: var(--ink-2); }
.booking-teaser .teaser-list .ico { width: 18px; height: 18px; flex: none; color: var(--proven-ink); }
.teaser-next { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; border: 1px solid rgba(214, 150, 40, .45); background: linear-gradient(100deg, #FFF7E0, #FFEEC4); font-size: .94rem; }
.teaser-next .ico { width: 18px; height: 18px; flex: none; color: #C9871F; }
.teaser-next b { color: var(--ink); }

/* ---------------------------------------------------------------- moyens de paiement (commande) */
.pay-methods { display: grid; gap: 10px; margin-bottom: 4px; }
.pay-opt { position: relative; display: flex; gap: 14px; align-items: flex-start; font-weight: 400; padding: 16px 18px; border-radius: 16px; border: 1.5px solid #C9C4B8; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .2s, background-color .15s; }
.pay-opt:hover { border-color: var(--ink-2); }
.pay-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pay-dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #B5AFA2; background: #fff; display: grid; place-items: center; transition: border-color .15s; }
.pay-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.pay-opt:has(input:checked) { border-color: var(--ink); background: #FFFDF6; box-shadow: 0 0 0 3px rgba(233, 178, 79, .35); }
.pay-opt:has(input:checked) .pay-dot { border-color: var(--ink); }
.pay-opt:has(input:checked) .pay-dot::after { transform: scale(1); }
.pay-opt:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.pay-body { display: grid; gap: 4px; min-width: 0; }
.pay-body b { font-size: 1rem; font-weight: 700; color: var(--ink); }
.pay-body small { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.pay-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pay-marks i { font-style: normal; font-size: .72rem; font-weight: 750; letter-spacing: .02em; padding: 4px 8px; border-radius: 6px; background: #F1EEE6; border: 1px solid #DDD8CC; color: var(--ink); white-space: nowrap; }
.form-legal .ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.resume-pay { display: grid; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--paper); color: var(--ink); border: 1.5px solid rgba(233, 180, 78, .9); box-shadow: 0 0 0 4px rgba(233, 180, 78, .18), 0 24px 50px -30px rgba(0, 0, 0, .9); }
.resume-copy { display: grid; gap: 2px; }
.resume-copy span { color: var(--ink-2); font-size: .94rem; }
.resume-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* ---------------------------------------------------------------- virement (page merci) */
.iban-card { max-width: 580px; margin: 26px auto 0; padding: 4px 20px; border-radius: 20px; text-align: left; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.iban-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.iban-row:last-child { border-bottom: 0; }
.iban-row > span { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.iban-row b { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.iban-row .mono { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.iban-row.is-key b { color: var(--amber-2); }
.copy-btn { border: 1px solid var(--line-2); background: transparent; color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; transition: border-color .15s, color .15s; }
.copy-btn:hover { border-color: var(--amber); }
.copy-btn.is-done { border-color: var(--mint); color: var(--mint); }
.iban-note { max-width: 36em; margin: 16px auto 0; font-size: .88rem; color: var(--text-3); }
@media (max-width: 520px) { .iban-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .iban-row > span { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- page appel */
.call-page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-bottom: 24px; }
.call-page .booking { position: static; }
.call-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.call-side h2 { font-size: 1.2rem; }
.call-steps { list-style: none; counter-reset: cs; display: grid; gap: 16px; }
.call-steps li { counter-increment: cs; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.call-steps li::before { content: counter(cs); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-hot); color: var(--ink); font-weight: 800; font-size: .95rem; box-shadow: 0 8px 20px -8px rgba(240, 182, 72, .7); }
.call-steps span { color: var(--text-2); font-size: .92rem; }
.call-alt p { color: var(--text-2); font-size: .94rem; }
.call-alt b { color: var(--text); }
.call-faq { padding-top: 56px; }
@media (max-width: 960px) { .call-page { grid-template-columns: minmax(0, 1fr); gap: 18px; } .call-side { position: static; } }

/* ---------------------------------------------------------------- impression */
/* ---------------------------------------------------------------- accueil allégé (v. j) */
/* l'appli ou l'humain */
.section.vs-section { padding-bottom: 90px; }
.vs { max-width: 900px; margin-inline: auto; border-radius: 24px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.vs-head, .vs-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
.vs-head > span { padding: 16px 20px; font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vs-head .vs-them { color: var(--text-3); }
.vs-head .vs-us { color: var(--ink); background: var(--grad-hot); }
.vs-row { border-top: 1px solid var(--line); }
.vs-row > span { display: flex; align-items: center; gap: 9px; padding: 15px 20px; font-size: .96rem; line-height: 1.35; }
.vs-row .vs-k { color: var(--text-3); font-size: .86rem; font-weight: 650; }
.vs-row .vs-them { color: var(--text-3); }
.vs-row .vs-us { color: var(--text); font-weight: 650; background: rgba(243, 188, 82, .07); box-shadow: inset 1px 0 0 rgba(243, 188, 82, .22); }
.vs-row .vs-us .ico { width: 18px; height: 18px; flex: none; color: var(--mint); stroke-width: 2.4; }
.vs-note { text-align: center; }
@media (max-width: 640px) {
  .vs-head, .vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .vs-head .vs-k { display: none; }
  .vs-head > span { padding: 12px 14px; font-size: .7rem; }
  .vs-row .vs-k { grid-column: 1 / -1; padding: 12px 14px 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .vs-row > span { padding: 8px 14px 13px; font-size: .9rem; }
  .vs-row .vs-us { box-shadow: none; }
  .vs-row .vs-us .ico { width: 16px; height: 16px; }
}

/* les 5 zones en une ligne */
.zone-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 0; }
.zone-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); font-size: .95rem; font-weight: 650; color: var(--ink); }
.zone-chips .ico { width: 18px; height: 18px; color: var(--amber-ink); }
#analyse .report-row { margin-top: 44px; }
@media (max-width: 700px) { .zone-chips { gap: 8px; } .zone-chips li { padding: 7px 12px; font-size: .88rem; } #analyse .report-row { margin-top: 26px; gap: 26px; } .phone-wrap { padding: 14px 0; } }

/* résultats : onglets sur mobile (façon stories, tout tient sur une ligne) */
.ba-tabs { display: none; }
@media (max-width: 760px) {
  .ba-tabs:not([hidden]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -6px 0 20px; }
  .ba-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--text-3); font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ba-tab img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line-2); transition: box-shadow .2s, transform .2s; }
  .ba-tab[aria-pressed="true"] { color: var(--text); }
  .ba-tab[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber); transform: scale(1.04); }
  .ba-tab:focus-visible { outline: none; }
  .ba-tab:focus-visible img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber-2), 0 0 0 7px rgba(255, 214, 132, .35); }
  .ba-grid.is-tabbed .ba:not(.is-active) { display: none; }
  .ba-grid.is-tabbed .ba.is-active { animation: stepin .45s cubic-bezier(.2, .8, .2, 1) both; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .ba-grid.is-tabbed .ba.is-active { animation: none; } }


/* l'offre */
.section.offer-section { padding-top: 40px; }
.offer-section .price-wide { margin-top: 0; }
.price-title { font-size: 1.9rem; font-stretch: 120%; }
.price-anchor { font-size: .88rem; color: var(--text-3); margin-top: -6px; }
.offer-steps { list-style: none; counter-reset: os; display: grid; gap: 10px; width: 100%; }
.offer-steps li { counter-increment: os; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.offer-steps li::before { content: counter(os); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-hot); color: var(--ink); font-size: .82rem; font-weight: 800; }
.offer-steps b { font-size: .98rem; font-weight: 650; color: var(--text); }
.offer-steps span { font-size: .86rem; color: var(--text-3); }
@media (max-width: 700px) { .section.offer-section { padding-top: 12px; } .price-title { font-size: 1.6rem; } }

/* vrai ou mythe : 4 cartes */
.myths-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.myths-4 .myth { min-height: 236px; }
@media (max-width: 1100px) { .myths-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .myths-4 .myth { min-height: 210px; } }
@media (max-width: 560px) { .myths-4 { grid-template-columns: minmax(0, 1fr); } .myths-4 .myth { min-height: 176px; } }
.myths-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 24px; font-size: .92rem; color: var(--text-3); }
.myths-legend > span { margin-right: 4px; }

/* lien Google Meet dans la confirmation de réservation */
.meet-link { color: var(--amber-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* accompagnement et FAQ */
#accompagnement .coach { align-items: center; }
@media (max-width: 700px) { .booking-teaser { padding: 22px 18px; } .quiz-side ul { display: none; } }
.faq-more { margin-top: 22px; text-align: center; font-size: .92rem; color: var(--text-3); }
.faq-more a { color: var(--amber-2); font-weight: 650; }

/* moins de vide entre les sections sur mobile */
@media (max-width: 700px) { .section { padding-block: 60px; } .section-head { margin-bottom: 28px; } .section.vs-section { padding-bottom: 60px; } .section.offer-section { padding-top: 12px; } }

@media print {
  .site-header, .site-footer, .sticky-cta, .legal-toc, .skip-link, .progress-top { display: none !important; }
  body { background: #fff; color: #000; }
  .legal-layout { display: block; padding: 0; }
}

/* ================================================================ offre de lancement
   .l-only : affiché pendant l'offre. .lo-only : affiché après (html.launch-over, posé par prix.js). */
html:not(.launch-over) .lo-only, html.launch-over .l-only { display: none !important; }
.p-old { font-weight: 600; opacity: .55; text-decoration: line-through; text-decoration-thickness: .1em; margin-right: .12em; }
.btn-price .p-old { font-size: .86em; }
.price-big .p-old { display: inline-block; font-size: .42em; font-weight: 700; letter-spacing: -0.01em; vertical-align: .95em; margin-right: .22em; color: var(--text-3); opacity: 1; text-decoration-color: var(--coral); text-decoration-thickness: .09em; }
.summary-top b .p-old, .order-total b .p-old { font-size: .56em; font-weight: 700; vertical-align: .3em; margin-right: .25em; text-decoration-color: var(--coral); opacity: .65; }
.eyebrow .p-old { opacity: .6; }

.launch-bar { position: relative; z-index: 51; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 14px; background: var(--grad-hot); color: var(--ink); font-size: .86rem; font-weight: 650; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.launch-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 260% 100%; animation: sheen 5s ease-in-out infinite; pointer-events: none; }
.launch-bar .lb-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.launch-bar .lb-tag .ico { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.4; }
.launch-bar .lb-text { flex: none; }
.launch-bar s { opacity: .6; text-decoration-thickness: 2px; }
.launch-bar b { font-weight: 850; font-size: 1.06em; }
.launch-bar .ico-arrow { width: 16px; height: 16px; flex: none; transition: transform .2s; }
a.launch-bar:hover .ico-arrow { transform: translateX(3px); }
a.launch-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (max-width: 640px) {
  .launch-bar { gap: 8px; padding: 7px 10px; font-size: .84rem; }
  .launch-bar .lb-wide { display: none; }
}
@media (max-width: 400px) {
  .launch-bar { gap: 6px; padding: 7px 8px; }
  .launch-bar .lb-tag { letter-spacing: .05em; }
  .launch-bar .countdown { gap: 5px; padding: 3px 8px 3px 7px; font-size: .72rem; }
  .sticky-cta .p-old { display: none; }
}
@media (max-width: 350px) {
  .launch-bar .lb-word, .launch-bar .ico-arrow { display: none; }
  .sticky-cta .btn { padding: 0 8px; font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { .launch-bar::after { animation: none; } }

.countdown { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 9px; border-radius: 999px; background: var(--ink); color: var(--gold); font-size: .76rem; font-weight: 750; line-height: 1.35; white-space: nowrap; }
.countdown[hidden] { display: none; }
.countdown i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; animation: cd-pulse 1.6s ease-out infinite; }
.countdown.on-dark { background: rgba(242, 184, 75, .1); border: 1px solid rgba(242, 184, 75, .35); }
@keyframes cd-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 116, 102, .6); } 100% { box-shadow: 0 0 0 7px rgba(255, 116, 102, 0); } }
@media (prefers-reduced-motion: reduce) { .countdown i { animation: none; } }

.price-row .price-big span { font-size: inherit; color: inherit; }
.price-badge .ico { display: inline-block; width: 13px; height: 13px; margin: -2px 5px 0 0; vertical-align: middle; fill: currentColor; stroke-width: 1.4; }
.launch-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.launch-note b { color: var(--text); }
.launch-note .ico { display: inline-block; width: 15px; height: 15px; margin: -2px 6px 0 0; vertical-align: middle; color: var(--amber); fill: currentColor; stroke-width: 1.4; }
.price-inner .launch-note { margin-top: -6px; }
.summary .launch-note { padding: 12px 14px; border-radius: 14px; background: rgba(242, 184, 75, .08); border: 1px solid rgba(242, 184, 75, .28); font-size: .88rem; }
.order-total > span small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
@media print { .launch-bar, .topbar { display: none !important; } }

/* ---------------------------------------------------------------- commande en 2 temps : commande + paiement, puis photos */
.field-age { max-width: 180px; }
.field-hint { font-size: .82rem; color: var(--ink-3); }
.panel-head .hint { font-size: .88rem; font-stretch: 100%; letter-spacing: 0; }
.next-photos { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(233, 180, 78, .16); color: var(--ink-2); font-size: .9rem; }
.next-photos .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink); }
.next-photos b { color: var(--ink); }
.how-list { list-style: none; counter-reset: how; display: grid; gap: 14px; }
.how-list li { counter-increment: how; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.how-list li::before { content: counter(how); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--line-2); color: var(--text); }
.how-list b { font-size: .95rem; color: var(--text); }
.how-list span { font-size: .86rem; color: var(--text-3); }
.page-hero-slim { padding-block: 40px 28px; }
.notice-card { margin-top: 20px; display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 1.5px solid rgba(233, 180, 78, .9); max-width: 40em; }
.notice-card[hidden] { display: none; }
.notice-card span { font-size: .92rem; color: var(--ink-2); }
.notice-card a { color: var(--ink); font-weight: 600; }
.photos-cta { display: grid; justify-items: center; gap: 10px; margin-top: 26px; }
.photos-cta small { max-width: 32em; color: var(--text-2); font-size: .95rem; }
.photos-cta [hidden] { display: none; }

/* ---------------------------------------------------------------- paiement par lien WhatsApp */
.pay-wa .wa-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #25D366; color: #fff; vertical-align: -6px; }
.pay-wa .wa-badge .ico { width: 14px; height: 14px; }
.wa-steps { list-style: none; counter-reset: wa; display: grid; gap: 8px; margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #E6E1D6; }
.wa-steps li { counter-increment: wa; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
.wa-steps li::before { content: counter(wa); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: #E7F6EC; color: #1E7A43; }
.wa-steps b { color: var(--ink); font-size: inherit; }
.btn-wa { background: #25D366; color: #0B2E17; border-color: transparent; }
.btn-wa:hover { background: #2FE072; }
/* pied de page : 4 colonnes, 2 sur petit écran */
.foot-cols .foot-note { font-size: .85rem; color: var(--text-3); }
@media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }

/* Propositions : prix sur une ligne, bouton secondaire lisible sur panneau clair */
.order-total b { white-space: nowrap; flex: none; }
.panel .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 30, .28); }
.panel .btn-ghost:hover { background: rgba(20, 20, 30, .06); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 30, .5); }

/* Titres des pages légales : un mot long ne doit jamais dépasser sur les très petits écrans */
.legal-hero h1 { overflow-wrap: break-word; }
@media (max-width: 359px) { .legal-hero h1 { font-size: 1.75rem; } }

/* ================================================================ v4 : mouvement
   Trois idées. 1) Des objets en volume : la carte du hero, le téléphone, la carte de l'offre.
   2) Une lumière qui se déplace avec le défilement et le pointeur. 3) Des ressorts à la place des transitions.
   Rien ici n'est nécessaire pour lire la page : sans JavaScript ou en mouvement réduit, tout reste à plat et lisible. */
:root {
  /* ressorts. Par défaut une courbe classique ; là où le navigateur sait faire, une courbe calculée à partir d'un vrai ressort amorti. */
  --spring-soft: cubic-bezier(.2, .8, .2, 1);
  --spring-flip: cubic-bezier(.3, 1.25, .4, 1);
  --spring-snap: cubic-bezier(.2, 1.6, .4, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-soft: linear(0, 0.005 1.5%, 0.02 3%, 0.052 5%, 0.094 7%, 0.143 9%, 0.198 11%, 0.417 18.5%, 0.514 22%, 0.616 26%, 0.694 29.5%, 0.752 32.5%, 0.81 36%, 0.859 39.5%, 0.898 43%, 0.937 47.5%, 0.965 52%, 0.986 57%, 1.001 63%, 1.009 69.5%, 1.011 78%, 1.005 99.5%, 1);
    --spring-flip: linear(0, 0.008 1.5%, 0.029 3%, 0.062 4.5%, 0.119 6.5%, 0.169 8%, 0.224 9.5%, 0.479 16%, 0.591 19%, 0.693 22%, 0.782 25%, 0.856 28%, 0.917 31%, 0.964 34%, 1 37%, 1.025 40%, 1.041 43%, 1.051 46.5%, 1.054 50%, 1.049 56%, 1.019 71%, 1.006 80%, 0.998 92%, 0.997 99.5%, 1);
    --spring-snap: linear(0, 0.007 1%, 0.016 1.5%, 0.041 2.5%, 0.078 3.5%, 0.148 5%, 0.203 6%, 0.295 7.5%, 0.626 12.5%, 0.751 14.5%, 0.863 16.5%, 0.958 18.5%, 1 19.5%, 1.036 20.5%, 1.069 21.5%, 1.096 22.5%, 1.139 24.5%, 1.165 26.5%, 1.176 28%, 1.179 29.5%, 1.177 31%, 1.169 32.5%, 1.139 36%, 1.051 43.5%, 1.016 47%, 0.988 51%, 0.971 55.5%, 0.968 58.5%, 0.97 62%, 0.996 76%, 1.004 83%, 1.005 92.5%, 1.003 99.5%, 1);
  }
}

/* ---------------------------------------------------------------- d'une page à l'autre
   Le navigateur fond l'ancienne page dans la nouvelle au lieu d'afficher un écran blanc. L'en-tête ne bouge pas. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: en-tete; }
  ::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in .46s var(--spring-soft) both; }
}
@keyframes vt-out { to { opacity: 0; transform: scale(.988); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(20px); } }

/* ---------------------------------------------------------------- l'or qui prend la lumière
   Un reflet traverse les mots dorés une fois, quand le titre arrive à l'écran. */
.grad, .hero h1 .l1 .hl { background-image: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .95) 50%, transparent 57%), var(--grad-gold-text); background-size: 240% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; }
.paper .grad { background-image: linear-gradient(105deg, transparent 43%, rgba(255, 244, 214, .95) 50%, transparent 57%), linear-gradient(100deg, #C58A1F 0%, #E0A63C 45%, #B9791A 100%); background-size: 240% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; }
@keyframes gradshine { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .in .grad { animation: gradshine 1.5s .55s cubic-bezier(.45, 0, .2, 1) both; }
  .hero h1 .l1 .hl { animation: gradshine 1.5s 1.5s cubic-bezier(.45, 0, .2, 1) both; }
}

/* ---------------------------------------------------------------- hero : la carte avant/après devient un objet
   Position de départ ici ; ensuite motion.js règle l'inclinaison image par image (défilement + pointeur).
   .lux = le reflet : une petite image dessinée une fois par le script, étirée sur la carte puis déplacée.
   Le navigateur n'a rien à redessiner, et l'image pèse quelques dizaines de Ko en mémoire au lieu de plusieurs Mo. */
@media (prefers-reduced-motion: no-preference) {
  .hv-real .hv-frame { transform: perspective(1100px) rotateX(7deg) rotateY(-16deg); will-change: transform; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) { .hv-real .hv-frame { transform: perspective(1100px) rotateX(8deg); } }
.lux { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; max-width: none; pointer-events: none; will-change: transform; }
.hv-frame > .lux { z-index: 3; }

/* reflet sur la séparation avant/après : --gl (0 à 1) suit la vitesse du geste */
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 170px; margin-left: -85px; pointer-events: none; opacity: var(--gl, 0); transition: opacity .5s ease-out; background: linear-gradient(90deg, transparent, rgba(255, 240, 205, .3) 50%, transparent); }

/* ---------------------------------------------------------------- le rapport dans un téléphone en volume
   Le téléphone, c'est une face et 4 plaques unies empilées derrière elle : en tournant, on voit son épaisseur.
   Des plaques unies ne coûtent presque rien à l'affichage. --pw : largeur du téléphone, tout le reste en découle. */
.p3d { --pw: 300px; position: relative; width: var(--pw); height: calc(var(--pw) * 2.04); perspective: 1500px; perspective-origin: 50% 42%; }
.p3d-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(4deg) rotateY(-19deg) rotateZ(-3deg); will-change: transform; }
.p3d-edge { position: absolute; inset: 0; border-radius: calc(var(--pw) * .16); transform: translateZ(calc(var(--k) * -3px)); background: #232B3B; }
.p3d-edge:nth-child(2) { background: #3A4459; }
.p3d-edge:nth-child(3) { background: #66728A; }
.p3d-edge:nth-child(4) { background: #10141D; }
.p3d-face { position: absolute; inset: 0; border-radius: calc(var(--pw) * .16); padding: calc(var(--pw) * .0367); background: linear-gradient(150deg, #3A4358 0%, #121826 30%, #0B0F17 60%, #262F42 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 0 0 3.5px #05070B; }
.p3d-screen { position: relative; height: 100%; border-radius: calc(var(--pw) * .127); overflow: hidden; isolation: isolate; background: #05070B; }
/* Safari sur iPhone : force le respect des coins arrondis de l'écran quand le téléphone tourne */
@supports (-webkit-touch-callout: none) { .p3d-screen { -webkit-mask-image: -webkit-radial-gradient(white, black); } }
/* reflet fixe sur la vitre (quand la scène est vivante, c'est un reflet mobile qui le remplace) */
.p3d-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 52%, rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, .02) 68%, transparent 74%); }
.rscene.is-live .p3d-screen::after, .rscene:not(.is-live) .p3d-glass { display: none; }
.p3d-glass { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; will-change: transform; }
/* chaque page est une image à part : seules celles qui sont à l'écran sont affichées, les autres ne pèsent rien */
.p3d-strip { position: relative; height: 100%; }
.p3d-strip img { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 600 / 1067; background: #0A0E16; }
.p3d-strip img:nth-child(2) { transform: translate3d(0, calc(100% + 8px), 0); }
.p3d-strip img:nth-child(n+3) { visibility: hidden; }
.p3d-island { position: absolute; top: calc(var(--pw) * .068); left: 50%; width: calc(var(--pw) * .3); height: calc(var(--pw) * .083); margin-left: calc(var(--pw) * -.15); border-radius: 99px; background: #04060A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.p3d-shadow { position: absolute; left: 4%; right: 4%; bottom: -7%; height: 11%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(11, 15, 23, .42), transparent); filter: blur(12px); transform: translateX(25px); }
.deliver-intro { color: var(--ink-2); font-size: .98rem; margin: -6px 0 16px; max-width: 30em; }
.deliver-note { margin-top: 14px; font-size: .82rem; color: var(--ink-3); }
.deliver-bar, .deliver-step, .rs-live { display: none; }

/* la scène « vivante » : la rangée reste à l'écran pendant qu'on défile, et le défilement fait tourner les pages */
@media (min-height: 540px) {
  .rscene.is-live { height: calc(100vh - var(--header-h) + var(--steps, 5) * 46vh); margin-top: 20px; }
  #analyse .rscene.is-live .rscene-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); margin-top: 0; align-items: center; }
  .rscene.is-live .p3d { --pw: clamp(210px, (100vh - var(--header-h) - 96px) * .49, 322px); }
  .rscene.is-live .rs-live { display: inline; }
  .rscene.is-live .deliver li { position: relative; opacity: .36; cursor: pointer; transition: opacity .45s; }
  .rscene.is-live .deliver li.is-done { opacity: .8; }
  .rscene.is-live .deliver li.is-on { opacity: 1; }
  .rscene.is-live .deliver li::after { content: ""; position: absolute; left: -18px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #E0A63C, #B9791A); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--spring-soft); }
  .rscene.is-live .deliver li.is-on::after { transform: scaleY(1); }
  .rscene.is-live .deliver li.is-on::before { color: var(--ink); }
}
@media (min-height: 540px) and (max-width: 960px) {
  .rscene.is-live { height: calc(100vh - 78px + var(--steps, 5) * 44vh); height: calc(100svh - 78px + var(--steps, 5) * 44svh); margin-top: 8px; }
  #analyse .rscene.is-live .rscene-stage { display: block; top: 78px; height: calc(100vh - 78px); height: calc(100svh - 78px); overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
  .rscene.is-live .phone-wrap { position: absolute; inset: 0 0 auto; padding: 14px 0 0; }
  .rscene.is-live .p3d { --pw: min(78vw, max(300px, (100vh - 250px) * .52)); --pw: min(78vw, max(300px, (100svh - 250px) * .52)); }
  .rscene.is-live .p3d-shadow { display: none; }
  .rscene.is-live { --cap-b: 22px; }
  .rscene.is-live .deliver { position: absolute; left: 12px; right: 12px; bottom: var(--cap-b); z-index: 5; min-height: 104px; padding: 13px 16px 15px; border-radius: 18px; background: rgba(248, 246, 241, .95); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 26px 50px -18px rgba(11, 15, 23, .5), 0 0 0 1px rgba(11, 15, 23, .07); }
  .rscene.is-live .deliver-bar { display: block; height: 3px; margin-bottom: 11px; border-radius: 3px; overflow: hidden; background: rgba(11, 15, 23, .1); }
  .rscene.is-live .deliver-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C58A1F, #E0A63C); transform-origin: 0 50%; transform: scaleX(0); }
  .rscene.is-live .deliver h3 { font-size: 1.1rem; margin-bottom: 5px; }
  .rscene.is-live .deliver-intro { margin: 0; font-size: .92rem; }
  .rscene.is-live .deliver ol { border-top: 0; }
  .rscene.is-live .deliver li, .rscene.is-live .deliver li.is-done { display: none; opacity: 1; padding: 0; border: 0; cursor: default; }
  .rscene.is-live .deliver li.is-on { display: grid; animation: capin .55s var(--spring-soft) both; }
  .rscene.is-live .deliver li::after, .rscene.is-live .deliver li::before { display: none; }
  .rscene.is-live .deliver li.is-on { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rscene.is-live .rscene-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: calc(var(--cap-b, 22px) + 150px); pointer-events: none; background: linear-gradient(180deg, rgba(239, 237, 231, 0), var(--paper) 62%); }
  .rscene.is-live .deliver:not([data-state="0"]) h3, .rscene.is-live .deliver:not([data-state="0"]) .deliver-intro, .rscene.is-live .deliver-note { display: none; }
  .rscene.is-live .deliver:not([data-state="0"]) .deliver-step { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 650; color: var(--ink-3); }
}
@media (min-height: 540px) and (max-width: 760px) { .rscene.is-live { --cap-b: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* fenêtre d'ordinateur peu haute (portable 1366 x 768 avec les barres du navigateur) : la liste se resserre pour tenir à l'écran */
@media (min-width: 961px) and (min-height: 540px) and (max-height: 760px) {
  .rscene.is-live .deliver { padding: 18px 26px 16px; }
  .rscene.is-live .deliver h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .rscene.is-live .deliver-intro { font-size: .9rem; margin: 0 0 10px; }
  .rscene.is-live .deliver li { padding: 8px 0; }
  .rscene.is-live .deliver li::after { top: 8px; bottom: 8px; }
  .rscene.is-live .deliver li span { font-size: .88rem; }
  .rscene.is-live .deliver-note { display: none; }
  .rscene.is-live .p3d { --pw: clamp(200px, (100vh - var(--header-h) - 44px) * .49, 322px); }
}
/* fenêtre vraiment basse : seule la ligne en cours garde son explication */
@media (min-width: 961px) and (min-height: 540px) and (max-height: 620px) {
  .rscene.is-live .deliver li:not(.is-on) span { display: none; }
}
@keyframes capin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- l'offre : une carte qui prend la lumière, un prix qui tombe */
.price-wide .price-inner { overflow: hidden; }
.p-roll { display: inline-block; }
.price-card.is-armed .price-big .p-old { opacity: 0; }
.price-card.is-rolled .price-big .p-old { opacity: 1; transition: opacity .35s; }
.p-roll.is-landed { animation: pricepop .8s var(--spring-snap) both, priceglow 1.1s ease-out both; }
@keyframes pricepop { from { transform: scale(.8); } to { transform: none; } }
@keyframes priceglow { from { text-shadow: 0 0 34px rgba(255, 214, 132, .95); color: var(--amber-2); } to { text-shadow: 0 0 0 rgba(255, 214, 132, 0); } }

/* ---------------------------------------------------------------- vrai ou mythe : la carte se retourne comme un vrai carton */
@media (prefers-reduced-motion: no-preference) {
  .myth-inner { transition: transform .95s var(--spring-flip); }
  .myth:active .myth-inner { transition-duration: .18s; }
  .myth:not(.is-flipped):active .myth-inner { transform: perspective(1400px) rotateY(0deg) scale(.965); }
  .myth.is-flipped { animation: mythlift .7s ease-out; }
  .myth.is-flipped .myth-back .tag { animation: stamp .6s var(--spring-snap) .34s both, stampfade .18s .34s both; }
  .myth.is-flipped .myth-back::after { animation: backsheen .95s .22s ease-out both; }
}
.myth-back { overflow: hidden; }
.myth-back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .13) 50%, transparent 64%) no-repeat; background-size: 250% 100%; background-position: 100% 0; }
@keyframes mythlift { 38% { scale: 1.04; } }
@keyframes stamp { from { transform: scale(1.9) rotate(-9deg); } to { transform: none; } }
@keyframes stampfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes backsheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---------------------------------------------------------------- comparatif : les lignes se posent une à une */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .vs.reveal .vs-row { opacity: 0; }
  .js-motion .vs.reveal.in .vs-row { animation: rowup .6s var(--spring-soft) both; animation-delay: calc(.12s + var(--n, 0) * 80ms); }
  .js-motion .vs.reveal.in .vs-row .vs-us .ico { animation: tick .55s var(--spring-snap) both; animation-delay: calc(.34s + var(--n, 0) * 80ms); }
  .vs-row:nth-child(3) { --n: 1; } .vs-row:nth-child(4) { --n: 2; } .vs-row:nth-child(5) { --n: 3; } .vs-row:nth-child(6) { --n: 4; } .vs-row:nth-child(7) { --n: 5; }
}
@keyframes rowup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tick { from { transform: scale(0); } to { transform: none; } }


/* ================================================================ v5 : le thème du logo (or, pierres, losange)
   Le losange du logo devient le repère des titres de section et des séparateurs. */
.eyebrow::before { width: 9px; height: 9px; margin-inline: 3px 2px; border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 12px rgba(240, 182, 72, .5); }
.glow-top::after { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 2.5px; transform: rotate(45deg); background: var(--grad-hot); box-shadow: 0 0 0 6px var(--bg), 0 0 20px 2px rgba(240, 182, 72, .55); pointer-events: none; }

/* Emblème animé : le logo qui tourne, fondu dans le décor par un masque rond (pas de mélange de couches, c'est léger). */
.gem { display: block; width: var(--gem, 180px); aspect-ratio: 1; flex: none; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.gem video { width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
.coach-copy .gem { --gem: 196px; margin: -46px 0 -34px -46px; }
.final .gem { --gem: 230px; position: relative; margin: -52px auto -34px; }

/* Le sceau sur la carte de l'offre. */
.price-seal { position: absolute; top: 16px; right: 18px; width: 86px; height: 86px; z-index: 2; pointer-events: none; transform: rotate(9deg); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(255, 206, 110, .25)); }
@media (max-width: 820px) { .price-seal { width: 64px; height: 64px; top: 12px; right: 12px; } }

/* Accompagnement : ce qu'il comprend, puis le déroulé. */
.coach-copy .section-sub { margin-top: 16px; }
.coach-list b { color: var(--text); }
.coach-steps { margin-top: 28px; }
.coach-card .coach-list { margin-top: 0; gap: 14px; }
.coach-card .coach-list li { padding: 0; background: none; border: 0; }
.coach-card .coach-list li:hover { transform: none; }
.coach-card-note { color: var(--text-2); font-size: .9rem; }

/* Pied de page : la signature, emblème et nom en relief. */
.foot-sign { display: inline-flex; align-items: center; gap: 6px; margin: -10px 0 -6px -12px; text-decoration: none; }
.fs-mark { width: 68px; height: 68px; flex: none; filter: drop-shadow(0 0 14px rgba(255, 206, 110, .28)); }
.fs-name { width: min(62vw, 290px); height: auto; }

/* Les grands fonds décoratifs du bas de page ne se chargent qu'à l'approche (site.js pose .bg-on) : la première vue part plus vite. */
.final:not(.bg-on), .coach-bg:not(.bg-on) { background-image: none; }

/* ================================================================ refonte du 14/10/2026
   Ajoutée à la fin de la feuille : elle l'emporte sur les règles d'avant sans les réécrire.
   1) Plus aucune animation en boucle. 2) Une seule façon d'apparaître. 3) Titres plus calmes, sans texte doré en dégradé.
   4) L'appel gratuit devient le bouton principal. L'or reste la couleur des actions. */

/* ---------------------------------------------------------------- 1. rien ne tourne en boucle
   Le squelette des créneaux (.slot-skel) reste : il ne se voit que pendant un chargement. */
.btn-hot::after, .logo-dot, .brand-word b, .brand-word i, .scan-live::before, .scan-face .p, .scan-line, .scan .bar i,
.scan-list li, .scan-float, .price-card::before, .final::before, .btn-submit.is-ready, .phone-glow, .runner::after,
.hv-frame img, .hv-scan, .hv-label::before, .countdown i { animation: none !important; }
.btn-hot::after, .scan-line, .hv-scan, body::after { display: none !important; }
.brand-word b, .brand-word i { background-position: 50% 0; }
.scan .bar i { transform: scaleX(var(--w, 1)); }
.hv-frame img { transform: none; }

/* ---------------------------------------------------------------- 2. une seule façon d'apparaître
   Fondu et 8 px vers le haut, une fois, quand l'élément arrive à l'écran. */
@keyframes ll-apparait { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.js-motion .reveal.in { animation: ll-apparait .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.ba-grid .ba:nth-child(2) { --d: .06s !important; }
.ba-grid .ba:nth-child(3) { --d: .12s !important; }
.ba-grid .ba:nth-child(4) { --d: .18s !important; }

/* la carte avant/après du haut reste à plat, sans perspective */
.hv-real .hv-frame { transform: none !important; will-change: auto; }
.lux { display: none; }

/* fond du haut de page : la lueur reste, la grille part */
.hero-bg::after { display: none; }

/* ---------------------------------------------------------------- 3. titres plus calmes */
h1, h2, h3, h4 { font-stretch: 100%; font-weight: 650; letter-spacing: -0.018em; line-height: 1.1; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
.hero h1 { font-size: clamp(2.05rem, 4.4vw, 3.5rem); font-stretch: 100%; max-width: 15em; }
.final h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-stretch: 100%; max-width: 16em; }
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.thanks h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.price-title, .pw-left h3, .price-inner h3 { font-stretch: 100%; }
.price-big { font-stretch: 100%; font-weight: 700; }
.notfound .code { font-stretch: 100%; font-weight: 700; color: var(--line-2); }
.mobile-nav a { font-stretch: 100%; font-weight: 600; }
.section-head h2 { max-width: 22em; }
.section-head.center h2 { margin-inline: auto; }
.lede { max-width: 36em; }

/* plus de texte doré en dégradé : s'il en reste un (contenu ancien gardé par le cache), il s'écrit en couleur pleine */
.grad, .paper .grad, .hero h1 .l1 .hl { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; animation: none !important; }

/* ---------------------------------------------------------------- 4. boutons de l'en-tête
   L'appel gratuit (bouton doré) se voit sur toutes les largeurs ; « Commander l'analyse » à partir de 1200 px.
   Sur la commande et la page des photos, le lien vers l'appel garde sa place discrète d'avant. */
.nav-call.btn-hot { display: inline-flex; }
.nav-call.btn-hot .ico { display: none; }
.nav-order { display: none; }
@media (min-width: 1200px) { .nav-order { display: inline-flex; padding: 0 16px; } }

/* les boutons répondent au toucher */
.btn:active { transform: scale(.98); }

/* ---------------------------------------------------------------- bandeau des zones analysées (immobile) */
.facts { border-block: 1px solid var(--line); background: var(--bg-1); }
.facts-list { list-style: none; margin: 0 auto; padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; color: var(--text-2); font-size: .95rem; }
.facts-list li { position: relative; white-space: nowrap; }
.facts-list li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); translate: 0 -50%; }
@media (max-width: 700px) { .facts-list { gap: 6px 24px; padding-block: 14px; font-size: .88rem; } .facts-list li + li::before { left: -14px; } }

/* ---------------------------------------------------------------- haut de page */
.hero-actions .btn-hot .ico { color: currentColor; }
.hero-trust { gap: 8px 20px; }

/* ---------------------------------------------------------------- fonds : plus de vagues ni de poussière dorées
   Ces images faisaient « visuel généré ». On garde le fond sombre et une lueur discrète. */
.hero-bg, .final { background-image: none !important; }
.coach-bg { display: none !important; }
.final { background-color: var(--bg-1); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- carte de l'offre : un filet doré régulier au lieu du reflet tournant */
.price-card { padding: 1px; background: linear-gradient(160deg, rgba(240, 182, 72, .75), rgba(240, 182, 72, .18) 45%, rgba(240, 182, 72, .5)); }
.price-card::before { display: none; }
.price-inner { border-radius: 25px; }

/* ---------------------------------------------------------------- l'équipe (Jaysim et Nassim) */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.member { display: flex; flex-direction: column; gap: 20px; }
.member-ba { margin: 0; }
.member-body h3 { font-size: 1.55rem; }
.member-role { margin: 4px 0 0; color: var(--text-3); font-size: .95rem; }
.member-levers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.member-levers li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .85rem; color: var(--text-2); }
.member-quote { margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--amber); color: var(--text-2); font-size: 1rem; line-height: 1.6; max-width: 34em; }
.member-quote p { margin: 0; }
.team-grid .member:nth-child(2) { --d: .06s; }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ba-tabs:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.call-who { margin: 6px 0 14px; color: var(--text-2); }
.member-social { margin: 6px 0 0; font-size: .92rem; }
.member-social a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.member-social a:hover { color: var(--text); text-decoration-color: var(--amber); }
/* résultats : ce qui a le plus changé, sous le nom et la période */
.ba figcaption .member-levers { flex-basis: 100%; margin: 2px 0 0; }
.ba figcaption .member-quote { flex-basis: 100%; margin: 12px 0 0; }

/* ---------------------------------------------------------------- la méthode, en 4 étapes (15/10)
   Une vraie suite : le numéro est l'information. Filet doré qui relie les étapes, rien d'animé. */
.method-steps { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.method-step { counter-increment: etape; position: relative; padding: 0 28px 0 0; }
.method-step::before { content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber-2); font-weight: 700; font-size: 1.05rem; background: var(--bg); position: relative; z-index: 1; }
.method-step::after { content: ""; position: absolute; top: 22px; left: 44px; right: 0; height: 1px; background: linear-gradient(90deg, rgba(233, 180, 78, .55), rgba(233, 180, 78, .12)); }
.method-step:last-child::after { display: none; }
.method-step h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.method-step p { margin: 0; color: var(--text-2); line-height: 1.6; font-size: .98rem; max-width: 22em; }
.method-steps .method-step:nth-child(2) { --d: .06s; }
.method-steps .method-step:nth-child(3) { --d: .12s; }
.method-steps .method-step:nth-child(4) { --d: .18s; }
.method-note { margin: 32px 0 0; color: var(--text-3); font-size: .92rem; }
.method-note a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.method-note a:hover { color: var(--text); text-decoration-color: var(--amber); }
@media (max-width: 900px) {
  .method-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .method-step { padding: 0 0 0 64px; min-height: 44px; }
  .method-step::before { position: absolute; left: 0; top: 0; }
  .method-step::after { top: 44px; bottom: -28px; left: 22px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(233, 180, 78, .55), rgba(233, 180, 78, .12)); }
  .method-step h3 { margin-top: 9px; }
}

/* ================================================================ un peu de dopamine (15/10)
   Achraf : « c'est un peu tout noir ». L'or sert de lumière : halos chauds derrière l'équipe et les résultats,
   cartes cerclées d'or, pastilles dorées, étapes pleines. Toujours rien en boucle ; le survol soulève une carte,
   et c'est tout. */
:root { --ll-or-doux: rgba(233, 180, 78, .14); --ll-or-filet: rgba(233, 180, 78, .48); --ll-or-ombre: rgba(233, 180, 78, .42); }

/* ---- l'équipe : la section qui doit briller */
.team-section { position: relative; isolation: isolate; background:
    radial-gradient(60% 60% at 15% 0%, rgba(233, 180, 78, .24), transparent 70%),
    radial-gradient(55% 55% at 90% 100%, rgba(201, 138, 34, .2), transparent 70%),
    var(--bg-1);
  border-block: 1px solid rgba(233, 180, 78, .2); }
.member { padding: 22px 22px 26px; border-radius: 28px; border: 1px solid var(--ll-or-filet);
  background: linear-gradient(180deg, rgba(233, 180, 78, .18), rgba(233, 180, 78, .04) 45%, var(--bg-2));
  box-shadow: 0 34px 80px -46px var(--ll-or-ombre);
  transition: transform .35s var(--spring-soft), box-shadow .35s ease; }
.member:hover { transform: translateY(-4px); box-shadow: 0 44px 90px -40px rgba(233, 180, 78, .6); }
.member-ba .ba-slider, .res-vedette-ba .ba-slider { border-color: rgba(233, 180, 78, .5); box-shadow: 0 0 0 5px rgba(233, 180, 78, .07); }
.member-body h3, .res-vedette-texte h3 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.member-role { display: inline-block; margin-top: 8px; padding: 5px 13px; border-radius: 999px; background: var(--ll-or-doux); color: var(--amber-2); font-weight: 600; font-size: .88rem; }
.member-social { margin-top: 12px; }
.member-social a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, background-color .2s; }
.member-social a:hover { text-decoration: none; background: var(--ll-or-doux); box-shadow: inset 0 0 0 1px var(--ll-or-filet); }
.member-levers li { border-color: rgba(233, 180, 78, .38); background: rgba(233, 180, 78, .09); color: var(--amber-2); font-weight: 600; }
.member-quote { padding: 14px 18px; border-left: 3px solid var(--amber); border-radius: 0 16px 16px 0; background: rgba(255, 255, 255, .025); color: var(--text); }

/* ---- résultats : Asmar en grand, Kamil en retrait */
#resultats { background: radial-gradient(55% 45% at 0% 35%, rgba(233, 180, 78, .13), transparent 70%); }
.res-vedette { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 24px;
  border-radius: 28px; border: 1px solid var(--ll-or-filet);
  background: linear-gradient(120deg, rgba(233, 180, 78, .18), rgba(233, 180, 78, .04) 55%, var(--bg-2));
  box-shadow: 0 34px 80px -46px var(--ll-or-ombre); }
.res-vedette-ba { margin: 0; }
.res-vedette-texte .member-quote { font-size: 1.08rem; max-width: 30em; }
.res-second { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 560px; margin: 22px 0 0; padding: 14px;
  border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg-1); }
.res-second-ba { margin: 0; }
.res-second-ba .ba-slider { border-radius: 16px; }
.res-second-ba .ba-label { font-size: .62rem; }
.res-second-texte h3 { font-size: 1.3rem; }
@media (max-width: 860px) {
  .res-vedette { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 16px; }
  .res-second { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
  .res-second-ba .ba-label { display: none; }
}

/* ---- haut de page : la carte avant/après prend la lumière */
.hv-real .hv-frame { box-shadow: 0 50px 120px -50px rgba(233, 180, 78, .6); }

/* ---- la méthode : étapes pleines, dorées */
.method-step::before { background: var(--grad-hot); color: var(--ink); border: 0; box-shadow: 0 10px 26px -10px rgba(240, 182, 72, .8); }
.method-step::after { background: linear-gradient(90deg, rgba(233, 180, 78, .8), rgba(233, 180, 78, .15)); }
@media (max-width: 900px) { .method-step::after { background: linear-gradient(180deg, rgba(233, 180, 78, .8), rgba(233, 180, 78, .15)); } }

@media (prefers-reduced-motion: reduce) { .member { transition: none; } .member:hover { transform: none; } }