/* Vitrine (home, fonctionnalités, tarifs, légal) + page Formules in-app. */
.v-hero { position: relative; overflow: hidden; }
.v-hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, color-mix(in srgb, var(--msn-primary) 18%, transparent), transparent 62%); pointer-events: none; }
.v-hero .msn-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: center; }
@media (max-width: 991px) { .v-hero .msn-hero { grid-template-columns: 1fr; } }
.v-hero h1 { font-size: clamp(3.4rem, 10vw, 7.4rem); line-height: .86; margin-bottom: 1.2rem; }
.v-hero h1 em { display: block; font-style: normal; color: var(--msn-primary); }
.v-lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--msn-muted); max-width: 620px; }
.v-lead strong { color: var(--msn-text); }
.v-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.v-cta .btn-msn { font-size: 1.35rem; padding: .65rem 1.6rem; }
.v-pills { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.3rem; color: var(--msn-muted); font-size: .9rem; }
.v-pills span::before { content: '✓ '; color: var(--msn-primary); font-weight: 700; }

/* Affiche « style concert » du hero */
.v-poster { position: relative; aspect-ratio: 3 / 4; max-width: 420px; margin: 0 auto; border-radius: 6px; padding: 1.4rem; color: var(--msn-on-primary); background:
  radial-gradient(circle at 80% 15%, rgba(255,255,255,.45), transparent 30%),
  repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 8px, transparent 8px 16px),
  linear-gradient(160deg, #f4d35e, var(--msn-primary) 45%, var(--msn-accent)); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.2); transform: rotate(2.5deg); display: flex; flex-direction: column; }
.v-poster::after { content: ''; position: absolute; top: -10px; left: 50%; width: 90px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,255,255,.55); }
.v-poster .k { font: 700 .72rem Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.v-poster .n { font-family: var(--msn-font-h), sans-serif; font-size: clamp(3rem, 9vw, 4.6rem); line-height: .85; margin: .5rem 0; }
.v-poster .d { font-family: var(--msn-font-h), sans-serif; font-size: 1.6rem; line-height: 1; margin-top: auto; border-top: 3px solid var(--msn-on-primary); padding-top: .6rem; }
.v-poster .d small { display: block; font: 600 .78rem Inter, sans-serif; letter-spacing: .05em; }
.v-poster .stamp { position: absolute; right: 1rem; top: 42%; border: 3px solid var(--msn-on-primary); border-radius: 50%; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--msn-font-h), sans-serif; font-size: 1.05rem; line-height: .95; transform: rotate(-14deg); }
.v-phone { position: absolute; left: -12%; top: 50%; width: 46%; min-width: 170px; background: #121210; border: 2px solid #3a3a34; border-radius: var(--msn-radius-lg); padding: .8rem .7rem; color: var(--msn-text); transform: rotate(-5deg); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: .72rem; }
.v-phone b { font-family: var(--msn-font-h), sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: .03em; display: block; margin-bottom: .4rem; }
.v-bar { height: 22px; border-radius: 6px; background: var(--msn-surface-2); margin-bottom: .35rem; position: relative; overflow: hidden; display: flex; align-items: center; padding: 0 .4rem; }
.v-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--msn-primary) 70%, transparent); }
.v-bar span { position: relative; }
@media (max-width: 575px) { .v-phone { left: -2%; top: 52%; } }

/* Bande défilante de mots-clés */
.v-strip { border-block: 1px solid var(--msn-border); background: var(--msn-surface); overflow: hidden; white-space: nowrap; padding: .7rem 0; font-family: var(--msn-font-h), sans-serif; font-size: 1.4rem; letter-spacing: .06em; color: var(--msn-muted); }
.v-strip div { display: inline-block; animation: v-scroll 40s linear infinite; }
.v-strip span { margin: 0 1.2rem; } .v-strip span:nth-child(3n) { color: var(--msn-primary); }
@keyframes v-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v-strip div { animation: none; } }

.v-kicker-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.v-kicker-h h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin: 0; line-height: .95; }
.v-num { font-family: var(--msn-font-h), sans-serif; font-size: 1.1rem; color: var(--msn-on-primary); background: var(--msn-primary); border-radius: 8px; padding: .05rem .5rem; }
.v-space { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.v-space.rev > :first-child { order: 2; }
@media (max-width: 860px) { .v-space { grid-template-columns: 1fr; } .v-space.rev > :first-child { order: 0; } }
.v-space ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.v-space li { display: flex; gap: .6rem; } .v-space li i { color: var(--msn-primary); }

/* Captures stylisées */
.v-shot { background: var(--msn-surface); border: 1px solid var(--msn-border); border-radius: var(--msn-radius-lg); padding: 1rem; box-shadow: 0 24px 60px rgba(0,0,0,.4); font-size: .85rem; }
.v-shot-top { display: flex; gap: .35rem; margin-bottom: .8rem; } .v-shot-top i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a34; }
.v-shot-top i:first-child { background: #e5484d; } .v-shot-top i:nth-child(2) { background: #f0a020; } .v-shot-top i:nth-child(3) { background: #4caf6a; }
.v-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--msn-border); }
.v-row:last-child { border-bottom: 0; }
.v-cover { width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto; }
.v-dots { margin-left: auto; color: var(--msn-primary); letter-spacing: .1em; }
.v-tag { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; background: color-mix(in srgb, var(--msn-ok) 22%, transparent); color: #7fd696; }
.v-tag.w { background: color-mix(in srgb, var(--msn-warn) 22%, transparent); color: var(--msn-warn); }
.v-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: .72rem; }
.v-cal span { aspect-ratio: 1; border-radius: 6px; background: var(--msn-surface-2); display: flex; align-items: center; justify-content: center; color: var(--msn-muted); }
.v-cal .c { background: var(--msn-primary); color: var(--msn-on-primary); font-weight: 700; } .v-cal .r { background: color-mix(in srgb, var(--msn-accent) 55%, transparent); color: #fff; }
.v-vote { text-align: center; }
.v-vote .q { font-family: var(--msn-font-h), sans-serif; font-size: 1.6rem; margin-bottom: .6rem; }
.v-site { border-radius: var(--msn-radius); overflow: hidden; background: #0b0b0e; }
.v-site .h { height: 120px; background: linear-gradient(160deg, #3a2a10, #0b0b0e), #222; display: flex; align-items: flex-end; padding: .8rem; font-family: var(--msn-font-h), sans-serif; font-size: 2.2rem; line-height: .9; color: var(--msn-primary); }
.v-site .b { padding: .7rem .8rem; display: grid; gap: .4rem; }
.v-site .l { height: 9px; border-radius: 4px; background: #24242a; } .v-site .l.s { width: 60%; }
.v-map { position: relative; height: 210px; border-radius: var(--msn-radius); overflow: hidden; background:
  linear-gradient(#1c1d1a 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, #1c1d1a 1px, transparent 1px) 0 0 / 28px 28px, #141512; }
.v-map b { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--msn-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--msn-primary) 25%, transparent); }
.v-map b.o { background: var(--msn-accent); }
.v-map .card-pop { position: absolute; right: 10px; bottom: 10px; background: var(--msn-surface); border: 1px solid var(--msn-border); border-radius: var(--msn-radius); padding: .5rem .7rem; font-size: .75rem; max-width: 60%; }

/* Positionnement */
.v-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.v-duo .msn-feature h3 { margin-top: .6rem; }
.v-band { border: 1px solid color-mix(in srgb, var(--msn-primary) 40%, var(--msn-border)); border-radius: var(--msn-radius-lg); padding: clamp(1.4rem, 4vw, 2.6rem); background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--msn-primary) 12%, transparent), transparent 60%), var(--msn-surface); }

/* Témoignages */
.v-quote { background: var(--msn-surface); border: 1px solid var(--msn-border); border-radius: var(--msn-radius-lg); padding: 1.3rem; height: 100%; }
.v-quote p { font-size: 1.05rem; } .v-quote footer { color: var(--msn-muted); font-size: .85rem; }

/* Formules */
.v-toggle { display: inline-flex; border: 1px solid var(--msn-border); border-radius: 999px; padding: 4px; background: var(--msn-surface); }
.v-toggle button { border: 0; background: transparent; color: var(--msn-text); border-radius: 999px; padding: .4rem 1rem; font-weight: 600; font-size: .9rem; }
.v-toggle button.active { background: var(--msn-primary); color: var(--msn-on-primary); }
.v-plan { position: relative; background: var(--msn-surface); border: 1px solid var(--msn-border); border-radius: var(--msn-radius-lg); padding: 1.8rem 1.6rem 1.5rem; height: 100%; display: flex; flex-direction: column; }
.v-plan.pro { border-color: color-mix(in srgb, var(--msn-primary) 55%, var(--msn-border)); background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--msn-primary) 12%, transparent), transparent 60%), var(--msn-surface); }
.v-plan .msn-ribbon { align-self: flex-start; }
.v-price { font-family: var(--msn-font-h), sans-serif; font-size: 3.6rem; line-height: 1; color: var(--msn-primary); margin: .8rem 0 .1rem; }
.v-price small { font-family: var(--msn-font-b), sans-serif; font-size: .95rem; color: var(--msn-muted); }
.v-plan ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: .45rem; }
.v-plan li::before { content: '✓'; color: var(--msn-primary); font-weight: 700; margin-right: .5rem; }
.v-plan .foot { margin-top: auto; }
.v-free { border: 1px dashed var(--msn-border); border-radius: var(--msn-radius-lg); padding: 1.1rem 1.3rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.v-free .tag { font-family: var(--msn-font-h), sans-serif; font-size: 1.5rem; color: var(--msn-primary); }
.v-solo { border: 1px solid var(--msn-border); border-radius: var(--msn-radius-lg); padding: .9rem 1.2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: var(--msn-surface); }
.v-faq details { border-bottom: 1px solid var(--msn-border); padding: .9rem 0; }
.v-faq summary { cursor: pointer; font-weight: 600; }
.v-faq p { color: var(--msn-muted); margin: .6rem 0 0; }
.v-legal h2 { margin-top: 2rem; } .v-legal p, .v-legal li { color: var(--msn-muted); }
.v-legal .todo { color: var(--msn-warn); font-style: normal; font-weight: 600; }

/* Pied de page */
.v-foot { border-top: 1px solid var(--msn-border); padding: 2.5rem clamp(1rem, 4vw, 3rem) 2rem; color: var(--msn-muted); font-size: .9rem; margin-top: 3rem; }
.v-foot .grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 767px) { .v-foot .grid { grid-template-columns: 1fr 1fr; } .v-foot .grid > :first-child { grid-column: span 2; } }
.v-foot h4 { font-family: var(--msn-font-h), sans-serif; font-size: 1.15rem; color: var(--msn-text); letter-spacing: .04em; margin-bottom: .6rem; }
.v-foot a { color: var(--msn-muted); text-decoration: none; display: block; margin-bottom: .3rem; }
.v-foot a:hover { color: var(--msn-text); }
.v-foot .base { max-width: 1200px; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--msn-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; }
.v-plan > .msn-ribbon { display: inline-block; background: linear-gradient(var(--msn-primary), var(--msn-accent)); color: var(--msn-on-primary); font-family: var(--msn-font-h), sans-serif; font-size: 1.25rem; letter-spacing: .12em; padding: .1rem 1.6rem; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); }
.v-solo .btn, .v-free .badge-status { flex: 0 0 auto; }