/* ==========================================================================
   DanseManager — site v2 (« un site qui respire »)
   S'ajoute à tokens.css (fondations : couleurs, typo, boutons, en-tête, pied).
   Règles : encre + blanc, terracotta pour l'action, aucune ombre ni dégradé,
   captures réelles de l'app (élèves fictifs), beaucoup d'air.
   ========================================================================== */

:root {
  --v2-sec: clamp(88px, 3rem + 8vw, 184px);       /* espace vertical d'une section */
  --v2-sec-s: clamp(64px, 2rem + 5vw, 120px);
  --v2-gap: clamp(40px, 1rem + 5vw, 104px);       /* texte ↔ visuel */
  --v2-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); /* 32 → 52 */
  --v2-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --shot-r: 14px;
}

/* -------------------------------------------------------------------------- base */
.v2 { overflow: clip; }
.v2-sec { padding-block: var(--v2-sec); }
.v2-sec--s { padding-block: var(--v2-sec-s); }
.v2-sec.surface-white + .v2-sec.surface-white:not(.v2-sec--top) { padding-top: 0; }
.v2 h2 { font-size: var(--v2-h2); line-height: 1.05; letter-spacing: -.03em; }
.v2 .lead { font-size: var(--v2-lead); line-height: 1.55; max-width: 34ch; }
.v2 .lead--wide { max-width: 46ch; }
.v2 .manchette { margin-bottom: 20px; }
.v2-center { text-align: center; }
.v2-center .lead, .v2-center h1, .v2-center h2 { margin-inline: auto; }
.v2-center .manchette { margin-inline: auto; }
.v2-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 36px; }
.v2-center .v2-actions { justify-content: center; }
.v2-note { margin-top: 18px; font-size: var(--fs-small); color: var(--fg-3); }
.btn--ghost-ink { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--ghost-ink:hover { --btn-bd: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.v2 .link-arrow { font-weight: 700; color: var(--link); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; }
.v2 .link-arrow::after { content: "→"; transition: transform var(--t-base) var(--ease-out); }
.v2 .link-arrow:hover::after { transform: translateX(4px); }
.v2 .link-arrow:hover { text-decoration: underline; text-underline-offset: .22em; }

/* -------------------------------------------------------------------------- captures */
.shot { border-radius: var(--shot-r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.shot__bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #F6F5F2; border-bottom: 1px solid var(--line); }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #DAD6CE; }
.shot__bar span { margin-left: 12px; font: 600 11.5px/1 var(--font-body); color: #8C887F; letter-spacing: .01em; }
.shot img { width: 100%; height: auto; }
.surface-ink .shot { border-color: rgba(255,255,255,.16); }
.surface-ink .shot__bar { background: #313137; border-color: rgba(255,255,255,.1); }
.surface-ink .shot__bar i { background: #4C4C55; }
.surface-ink .shot__bar span { color: #9A9AA2; }

.phone { width: 100%; border-radius: 34px; border: 8px solid #1C1C20; overflow: hidden; background: #fff; }
.phone img { width: 100%; height: auto; }

.compo { position: relative; padding-right: 13%; padding-bottom: 6%; }
.compo__phone { position: absolute; right: 0; bottom: 0; width: 31%; max-width: 260px; }
.compo--left { padding-right: 0; padding-left: 13%; }
.compo--left .compo__phone { right: auto; left: 0; }

.v2-cap { margin-top: 16px; font-size: 13px; color: var(--fg-3); }

/* -------------------------------------------------------------------------- héros */
.v2-hero { padding-top: clamp(56px, 2rem + 6vw, 136px); padding-bottom: 0; position: relative; }
.v2-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: var(--white); }
.v2-hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); line-height: .98; letter-spacing: -.045em; max-width: 14ch; margin-inline: auto; }
.v2-hero .lead { margin-top: 28px; max-width: 40ch; color: var(--on-ink-2); }
.v2-hero .overline { color: var(--on-ink-3); margin-bottom: 28px; display: block; }
.v2-hero h1 .overline { font-size: var(--fs-micro); line-height: 1.2; letter-spacing: var(--ls-micro); font-weight: 500; }
.v2-hero h1 .h1-main { display: block; }
.v2-hero__visual { position: relative; z-index: 1; margin-top: clamp(56px, 2rem + 5vw, 112px); perspective: 1600px; }
.v2-hero__visual .shot { transform-origin: 50% 0; }
.v2-hero .v2-note { color: var(--on-ink-3); }

.v2-pagehero { padding-top: clamp(56px, 2rem + 5vw, 120px); padding-bottom: clamp(64px, 2rem + 6vw, 136px); }
.v2-pagehero h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -.04em; max-width: 15ch; }
.v2-pagehero .lead { margin-top: 24px; color: var(--fg-2); max-width: 42ch; }
.v2-pagehero__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .v2-pagehero__grid { grid-template-columns: 5fr 7fr; gap: var(--v2-gap); } }

/* -------------------------------------------------------------------------- preuve + partenaires */
.v2-proof { padding-block: clamp(56px, 2rem + 4vw, 112px); }
.v2-proof__line { font: 700 clamp(1.375rem, 1.1rem + 1.1vw, 2rem)/1.25 var(--font-display); letter-spacing: -.02em; max-width: 26ch; margin-inline: auto; }
.v2-proof__line .num { color: var(--brand); }
.v2-logos { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px clamp(32px, 1rem + 4vw, 72px); }
.v2-logos a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; opacity: .9; transition: opacity var(--t-base); }
.v2-logos a:hover { opacity: 1; }
.v2-logos img { height: 34px; width: auto; }
.v2-logos img[src*="helloasso"] { height: 26px; }  /* taille visuelle égale aux autres logos (charte HelloAsso) */
.v2-logos .pt-word { font: 700 20px/1 var(--font-display); color: var(--ink); }

/* -------------------------------------------------------------------------- fonctionnalité (texte | visuel) */
.v2-feat { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .v2-feat { grid-template-columns: 4fr 7fr; gap: var(--v2-gap); }
  .v2-feat--rev { grid-template-columns: 7fr 4fr; }
  .v2-feat--rev > .v2-feat__text { order: 2; }
}
.v2-feat__text h2 { max-width: 13ch; }
.v2-feat__text .lead { margin-top: 24px; }
.v2-feat__visual { min-width: 0; }
.v2-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.v2-ticks li { position: relative; padding-left: 28px; color: var(--fg-2); line-height: 1.5; }
.v2-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.surface-ink .v2-ticks li::before { border-color: var(--brand-soft); }

/* -------------------------------------------------------------------------- le + : automatisations */
.v2-auto__head { max-width: 760px; margin-inline: auto; }
.v2-auto__head .lead { color: var(--on-ink-2); max-width: 44ch; }
.v2-plus { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 6px 14px 6px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font: 700 13px/1 var(--font-body); color: var(--on-ink-2); }
.v2-plus b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 15px/1 var(--font-display); }
.v2-auto__body { margin-top: clamp(56px, 2rem + 4vw, 96px); display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .v2-auto__body { grid-template-columns: 7fr 4fr; gap: var(--v2-gap); } }
.v2-toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--on-ink-line); }
.tg { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--on-ink-line); }
.tg b { display: block; font: 700 1.0625rem/1.3 var(--font-display); color: #fff; letter-spacing: -.01em; }
.tg span { display: block; margin-top: 4px; font-size: 14px; color: var(--on-ink-3); line-height: 1.45; }
.sw { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--brand); margin-top: 1px; transition: background-color .35s var(--ease-out); }
.sw::after { content: ""; position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .35s var(--ease-pop); }
.js-motion .tg:not(.is-on) .sw { background: #4A4A52; }
.js-motion .tg:not(.is-on) .sw::after { left: 3px; }

/* -------------------------------------------------------------------------- deux téléphones */
.v2-phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 40px); }
.v2-phones .phone { width: min(42vw, 280px); }
.v2-phones .phone:nth-child(2) { transform: translateY(-48px); }

/* -------------------------------------------------------------------------- étapes */
.v2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px var(--col-gap); counter-reset: st; }
@media (min-width: 900px) { .v2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-steps li { padding-top: 24px; border-top: 2px solid var(--fg); }
.v2-steps .step-num { display: block; color: var(--brand); margin-bottom: 20px; }
.v2-steps b { display: block; font: 700 1.25rem/1.25 var(--font-display); letter-spacing: -.015em; }
.v2-steps span { display: block; margin-top: 8px; color: var(--fg-2); max-width: 30ch; }

/* -------------------------------------------------------------------------- petits plus (grille) */
.v2-extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--col-gap); }
@media (min-width: 640px) { .v2-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v2-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-extras li { padding: 28px 0 32px; border-top: 1px solid var(--hair); }
.v2-extras b { display: block; font: 700 1.0625rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--fg); }
.v2-extras span { display: block; margin-top: 6px; font-size: 15px; color: var(--fg-2); line-height: 1.5; max-width: 34ch; }
.v2-extras .soon { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-ink); font: 700 11px/1.5 var(--font-body); vertical-align: 2px; }

.v2-head { margin-bottom: clamp(48px, 2rem + 3vw, 88px); }
.v2-head--split { display: grid; gap: 20px; }
@media (min-width: 1024px) { .v2-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--v2-gap); } }
.v2-head h2 { max-width: 16ch; }

/* -------------------------------------------------------------------------- prix */
.v2-plans { display: grid; gap: 20px; }
@media (min-width: 900px) { .v2-plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: clamp(28px, 1rem + 2.5vw, 48px); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; }
.plan--ink { background: var(--ink); border-color: var(--ink); color: #fff; --fg: #fff; --fg-2: var(--on-ink-2); --fg-3: var(--on-ink-3); --hair: var(--on-ink-line); }
.plan__name { font: 700 14px/1.4 var(--font-body); color: var(--fg-3); }
.plan__price { margin-top: 18px; font: 700 clamp(3.5rem, 2.4rem + 4vw, 5.5rem)/.9 var(--font-display); letter-spacing: -.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.plan__price small { font-size: .32em; letter-spacing: -.01em; margin-left: .1em; font-weight: 700; }
.plan__for { margin-top: 14px; font: 700 1.125rem/1.35 var(--font-display); color: var(--fg); }
.plan__sub { margin-top: 6px; font-size: 15px; color: var(--fg-2); }
.plan .v2-ticks { margin: 28px 0 40px; padding-top: 28px; border-top: 1px solid var(--hair); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan__badge { align-self: flex-start; margin-bottom: 20px; padding: 5px 12px; border-radius: 999px; background: var(--brand); color: #fff; font: 700 12px/1.4 var(--font-body); }
.v2-priceline { display: grid; gap: 28px; }
@media (min-width: 900px) { .v2-priceline { grid-template-columns: 1fr 1fr; gap: var(--col-gap); } }
.v2-priceline > div { padding-top: 28px; border-top: 2px solid var(--fg); }
.v2-priceline .plan__price { margin-top: 0; }

.v2-incl { display: grid; gap: 48px var(--col-gap); }
@media (min-width: 640px) { .v2-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v2-incl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-incl h3 { font-size: 1.125rem; letter-spacing: -.01em; padding-top: 20px; border-top: 2px solid var(--fg); }
.v2-incl ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.v2-incl li { color: var(--fg-2); font-size: 15px; line-height: 1.5; }

/* -------------------------------------------------------------------------- questions */
.v2-faq { max-width: 860px; margin-inline: auto; border-top: 2px solid var(--fg); }
.v2-faq details { border-bottom: 1px solid var(--hair); }
.v2-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 700 clamp(1.0625rem, 1rem + .4vw, 1.3125rem)/1.35 var(--font-display); letter-spacing: -.015em; }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg) translateY(-4px); transition: transform var(--t-base) var(--ease-out); }
.v2-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.v2-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.v2-faq .ans { padding: 0 0 28px; max-width: 64ch; color: var(--fg-2); line-height: 1.65; }

/* -------------------------------------------------------------------------- appel final */
.v2-final h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); max-width: 14ch; margin-inline: auto; letter-spacing: -.04em; }
.v2-final .lead { margin-top: 24px; color: var(--on-ink-2); }
.v2-final .v2-login { margin-top: 28px; color: var(--on-ink-3); font-size: 15px; }
.v2-final .v2-login a { color: #fff; font-weight: 700; text-underline-offset: .22em; }

/* -------------------------------------------------------------------------- mobile */
@media (max-width: 639px) {
  .shot__bar { height: 24px; padding: 0 10px; }
  .shot__bar i { width: 7px; height: 7px; }
  .shot__bar span { display: none; }
  .shot { border-radius: 10px; }
  .shot img { aspect-ratio: 5 / 4; object-fit: cover; object-position: var(--fp, 50% 0); }
  .compo .shot img { aspect-ratio: 4 / 5; }
  .compo { padding-right: 18%; }
  .compo__phone { width: 36%; }
  .phone { border-width: 5px; border-radius: 22px; }
  .v2-phones .phone:nth-child(2) { transform: translateY(-24px); }
  .v2-hero::after { height: 12%; }
}

/* -------------------------------------------------------------------------- animations (état initial, JS seulement) */
.js-motion [data-reveal], .js-motion [data-stagger] > *, .js-motion [data-hero-fade], .js-motion [data-split] { visibility: hidden; }
.js-motion [data-shot] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion [data-stagger] > *, .js-motion [data-hero-fade], .js-motion [data-split], .js-motion [data-shot] { visibility: visible; }
}
.line-mask { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

.v2-pagehero h1 .manchette { display: block; font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0; margin-bottom: 20px; }
.v2-pagehero h1 .h1-main { display: block; }

.v2-extras b a { color: inherit; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.v2-extras b a:hover { color: var(--link); }

/* aperçu d'un document téléchargeable */
.v2-doc { display: flex; justify-content: center; perspective: 1600px; }
.doc-preview { width: min(560px, 90vw); background: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; overflow: hidden; transform-origin: 50% 0; }
.doc-preview img { width: 100%; height: auto; }