/* AppartSocial · site public (accueil, connexion, commande, pages légales).
   S'appuie sur jn.css (système « Surligneur ») : couleurs, boutons, champs,
   animations. Bascule téléphone à 900 px. */

@media (min-width: 901px) { .only-m { display: none !important; } }
@media (max-width: 900px) { .only-d { display: none !important; } }

.d { font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.m { font-family: var(--jn-font-mono); }
.jn-eyebrow { margin: 0; }
.jn-eyebrow--dark { color: #B9BDC9; }
.jn-eyebrow--dark::before { background: var(--jn-lime); }
.sec-title { margin: 0; font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(38px, 4.6vw, 60px); }
.sec-head { display: flex; flex-direction: column; gap: 18px; }
.band-white { background: var(--jn-surface); border-top: 1px solid #E4E6EB; border-bottom: 1px solid #E4E6EB; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: var(--jn-r-pill); font-size: 13.5px; font-weight: 500; }
.pill--ok { background: var(--jn-cobalt-soft); color: var(--jn-cobalt-ink); }
.pill--warn { background: var(--jn-amber-soft); color: var(--jn-amber-ink); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.check { list-style: none; margin: 0; padding: 0; }
.check li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--jn-line-2); }
.check li:first-child { border-top: 0; }
.check .jn-ic { color: var(--jn-cobalt); margin-top: 3px; }
.kw { background: var(--jn-lime); border-radius: 3px; padding: 0 3px; color: var(--jn-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kx { text-decoration: underline wavy var(--jn-amber) 2px; text-underline-offset: 4px; color: #fff; }

/* ── En-tête public ─────────────────────────────────────────────────────── */

.jn-header { position: sticky; top: 0; z-index: 40; background: rgba(242,243,245,.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(17,19,24,.07); }
.jn-header__in { height: 72px; display: flex; align-items: center; gap: 28px; }
.jn-header--simple .jn-header__in { gap: 16px; }
.jn-nav { display: flex; gap: 22px; margin-left: 18px; }
.jn-nav a { color: var(--jn-ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 4px; position: relative; }
.jn-nav a::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; background: var(--jn-cobalt); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.jn-nav a:hover { color: var(--jn-ink); }
.jn-nav a:hover::after { transform: scaleX(1); }
.jn-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.jn-header__actions .jn-btn { min-height: 44px; }
.jn-header__note { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1 var(--jn-font-mono); color: var(--jn-ink-3); }
.jn-header__note .jn-ic { width: 16px; height: 16px; }
.jn-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--jn-ink-3); text-decoration: none; font-size: 15px; font-weight: 500; }
.jn-back:hover { color: var(--jn-ink); }
.jn-back .jn-ic { transition: transform .25s var(--jn-ease); }
.jn-back:hover .jn-ic { transform: translateX(-3px); }
.jn-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--jn-btn-line); background: #fff; align-items: center; justify-content: center; cursor: pointer; color: var(--jn-ink); padding: 0; flex: none; }
.jn-burger .ic-fermer { display: none; }
.jn-burger[aria-expanded="true"] .ic-ouvrir { display: none; }
.jn-burger[aria-expanded="true"] .ic-fermer { display: block; }
.jn-mnav { display: flex; flex-direction: column; padding-bottom: 20px; animation: jn-drop .3s var(--jn-ease) both; }
.jn-mnav a.jn-mnav__lien { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid #E4E6EB; color: var(--jn-ink); text-decoration: none; font: 600 22px/1 var(--jn-font-display); letter-spacing: -.02em; }
.jn-mnav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
@keyframes jn-drop { from { opacity: 0; transform: translateY(-10px); } }

@media (max-width: 900px) {
  .jn-header { background: rgba(242,243,245,.9); }
  .jn-header__in { height: 64px; gap: 10px; }
  .jn-nav { display: none; }
  .jn-burger { display: inline-flex; }
  .jn-header__actions { gap: 8px; }
  .jn-header__actions .jn-btn--ghost.jn-header__connexion { display: none; }
  .jn-header__actions .jn-btn--primary { padding: 0 14px; font-size: 15px; }
  .jn-header .jn-logo svg { width: 26px; height: 26px; }
  .jn-header .jn-logo__nom { font-size: 21px; }
  .jn-connecte .jn-header__cta { display: none; }
}
@media (min-width: 901px) { .jn-mnav { display: none !important; } }

/* ── Pied de page ───────────────────────────────────────────────────────── */

.jn-footer { background: var(--jn-dark); color: var(--jn-on-dark-2); }
.jn-footer a { color: var(--jn-on-dark-2); text-decoration: none; }
.jn-footer a:hover { color: #fff; text-decoration: underline; }
.jn-footer--overlap { margin-top: -120px; padding-top: 168px; }
.jn-footer__in { padding-top: 40px; padding-bottom: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.jn-footer--overlap .jn-footer__in { padding-top: 0; }
.jn-footer__brand { display: flex; align-items: center; gap: 10px; }
.jn-footer__brand .jn-logo { color: #fff; }
.jn-footer__brand .jn-logo:hover { text-decoration: none; }
.jn-footer__brand .jn-logo__nom { font-size: 20px; }
.jn-footer__mail { margin-left: 14px; }
.jn-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14.5px; }
.jn-footer__editeur { margin: 0; border-top: 1px solid var(--jn-dark-line); padding-top: 18px; padding-bottom: 28px; font: 400 12px/1.5 var(--jn-font-mono); color: var(--jn-on-dark-3); }
@media (max-width: 900px) {
  .jn-footer--overlap { margin-top: -90px; padding-top: 130px; }
  .jn-footer__in { flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 28px; }
  .jn-footer__brand { flex-direction: column; align-items: flex-start; gap: 22px; }
  .jn-footer__mail { margin-left: 0; font-size: 15px; }
  .jn-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; width: 100%; }
  .jn-footer__nav a { min-height: 44px; display: flex; align-items: center; }
}

/* ── Accueil : haut de page ─────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero__grille { position: absolute; inset: 0; background-image: linear-gradient(rgba(17,19,24,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.045) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%); pointer-events: none; }
.hero__in { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 112px; }
.hero__txt { display: flex; flex-direction: column; gap: 28px; max-width: 590px; }
.hero h1 { margin: 0; font-family: var(--jn-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(46px, 6.4vw, 84px); text-wrap: balance; }
.hero__lede { margin: 0; font-size: 19px; line-height: 1.6; color: #3C404B; max-width: 540px; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cta .jn-btn { min-height: 54px; padding: 0 26px; font-size: 17px; }
.hero__note { margin: 0; font: 400 13.5px/1.5 var(--jn-font-mono); color: var(--jn-ink-4); display: flex; align-items: center; gap: 10px; }
.hero__note .jn-ic { width: 16px; height: 16px; color: var(--jn-cobalt); }

/* Le CV d'exemple qui se compose */
.demo { position: relative; height: 660px; }
.demo__feuille { position: absolute; top: 18px; left: 50%; width: 446px; height: 631px; margin-left: -190px; padding: 34px 34px 28px; background: #fff; border-radius: 6px; box-shadow: var(--jn-shadow-a4); transform: rotate(1.2deg); transform-origin: top right; }
.demo__nom { font-family: var(--jn-font-display); font-size: 25px; font-weight: 750; letter-spacing: -.03em; line-height: 1.04; }
.demo__titre { font-size: 11px; font-weight: 600; color: var(--jn-cobalt); margin-top: 5px; }
.demo__contact { font: 400 8px/1.4 var(--jn-font-mono); color: var(--jn-ink-4); margin-top: 6px; }
.cvh { font: 700 7.5px/1 var(--jn-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jn-cobalt); border-bottom: 1px solid #E3E5EA; padding-bottom: 4px; margin: 10px 0 6px; }
.cvp { margin: 0; font-size: 8.6px; line-height: 1.5; color: var(--jn-ink-2); }
.cvp b { font-weight: 650; }
.cvb { margin: 0; padding: 0 0 0 10px; font-size: 8.4px; line-height: 1.5; color: var(--jn-ink-2); position: relative; }
.cvb::before { content: ''; position: absolute; left: 1px; top: 6px; width: 4px; height: 1.5px; background: var(--jn-ink); }
.demo__poste { display: flex; justify-content: space-between; font-size: 9.2px; font-weight: 650; margin-bottom: 3px; }
.demo__poste span + span { font-weight: 500; color: var(--jn-ink-4); }
.demo__poste--2 { margin: 7px 0 3px; }
.demo__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.demo__tags span { font-size: 8px; padding: 2px 6px; border-radius: 4px; background: #F0F1F4; }
.demo__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; font-size: 8px; color: var(--jn-ink-2); }
.demo__trio .cvh { margin-top: 0; }
.demo__champ { position: absolute; left: 0; top: 214px; width: 300px; z-index: 2; }
.demo__champ-carte { background: #fff; border: 1px solid var(--jn-line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 24px 48px -24px rgba(17,19,24,.35); display: flex; flex-direction: column; gap: 8px; }
.demo__champ-lab { font-size: 12.5px; font-weight: 600; color: var(--jn-ink-3); }
.demo__champ-val { font: 400 13px/1.4 var(--jn-font-mono); border: 1.5px solid var(--jn-cobalt); border-radius: 10px; padding: 11px 12px; box-shadow: 0 0 0 4px rgba(43,68,240,.13); white-space: nowrap; overflow: hidden; }
.demo__direct { position: absolute; right: 6px; top: 0; z-index: 3; }
.demo__direct .pill { background: var(--jn-ink); color: #fff; padding: 8px 14px; font-size: 13px; box-shadow: 0 12px 24px -12px rgba(17,19,24,.6); }
.demo__pdf { position: absolute; right: 0; bottom: 40px; z-index: 3; }
.demo__pdf-carte { background: #fff; border: 1px solid var(--jn-line); border-radius: 18px; padding: 12px 16px 12px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 24px 40px -22px rgba(17,19,24,.45); }
.demo__pdf-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--jn-cobalt); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.demo__pdf-txt { display: flex; flex-direction: column; gap: 2px; }
.demo__pdf-txt b { font-size: 14px; }
.demo__pdf-txt span { font: 400 11.5px/1.3 var(--jn-font-mono); color: var(--jn-ink-4); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--jn-lime); position: relative; display: block; flex: none; }
.live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--jn-lime); animation: jn-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }

/* Animations du haut de page */
.hl { background-image: linear-gradient(var(--jn-lime), var(--jn-lime)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 38%; animation: jn-hl 1.1s .5s cubic-bezier(.65,0,.25,1) forwards; }
.w { opacity: 0; animation: hero-w .7s cubic-bezier(.2,.75,.2,1) both; }
@keyframes hero-w { from { opacity: 0; transform: translateY(5px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.t1{animation-delay:.35s}.t2{animation-delay:3.15s}.t3{animation-delay:3.35s}.t4{animation-delay:3.55s}.t5{animation-delay:3.75s}.t6{animation-delay:3.95s}.t7{animation-delay:4.15s}.t8{animation-delay:4.35s}.t9{animation-delay:4.5s}.t10{animation-delay:4.65s}.t11{animation-delay:4.85s}.t12{animation-delay:5s}.t13{animation-delay:5.15s}.t14{animation-delay:5.35s}.t15{animation-delay:5.5s}.t16{animation-delay:5.65s}.t17{animation-delay:5.85s}.t18{animation-delay:6s}.t19{animation-delay:6.2s}
.typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: jn-type 2.1s steps(27, end) .9s forwards; }
.caret { display: inline-block; width: 2px; height: 1.15em; background: var(--jn-cobalt); vertical-align: -3px; margin-left: 1px; animation: jn-blink 1s steps(1) infinite; }
.float { animation: jn-float 7s ease-in-out infinite; }
.float2 { animation: jn-float 8s ease-in-out -3s infinite; }
.pop { opacity: 0; animation: hero-pop .6s cubic-bezier(.2,1.4,.4,1) 6.6s forwards; }
@keyframes hero-pop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero__grille { background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 75%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 50% 75%, #000 30%, transparent 75%); }
  .hero__in { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding-top: 40px; padding-bottom: 56px; }
  .hero__txt { gap: 22px; max-width: none; }
  .hero h1 { font-size: 44px; text-wrap: wrap; }
  .hero__lede { font-size: 17px; }
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .jn-btn { min-height: 52px; font-size: 16px; padding: 0 20px; }
  .hero__note { font-size: 12.5px; }
  .hero__note .jn-ic { display: none; }
  .demo { height: 470px; margin-top: 10px; max-width: 420px; width: 100%; margin-inline-start: auto; margin-inline-end: auto; }
  .demo__feuille { left: auto; right: 0; top: 14px; margin-left: 0; transform: rotate(1.4deg) scale(.65); }
  .demo__champ { top: 196px; width: 236px; }
  .demo__champ-carte { padding: 12px 14px; gap: 6px; box-shadow: 0 22px 40px -22px rgba(17,19,24,.4); border-radius: 16px; }
  .demo__champ-lab { font-size: 11.5px; }
  .demo__champ-val { font-size: 11px; padding: 9px 8px; border-radius: 9px; box-shadow: 0 0 0 3px rgba(43,68,240,.13); }
  .demo__direct { right: auto; left: 8px; }
  .demo__direct .pill { padding: 7px 12px; font-size: 12px; }
  .demo__pdf { right: 8px; bottom: 0; }
  .demo__pdf-carte { padding: 10px 14px 10px 10px; gap: 10px; border-radius: 16px; }
  .demo__pdf-ico { width: 34px; height: 34px; border-radius: 9px; }
  .demo__pdf-ico .jn-ic { width: 16px; height: 16px; }
  .demo__pdf-txt b { font-size: 12.5px; }
  .demo__pdf-txt span { font-size: 10.5px; }
}

/* ── Accueil : méthode ──────────────────────────────────────────────────── */

.methode__in { padding-top: 112px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 64px; }
.methode__tete { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; align-items: end; }
.methode__lede { margin: 0; font-size: 19px; color: #3C404B; max-width: 470px; text-wrap: pretty; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.etape { padding: 28px; display: flex; flex-direction: column; gap: 18px; background: #F7F8FA; border: 1px solid var(--jn-line); border-radius: 18px; transition: transform var(--jn-mid) var(--jn-ease), box-shadow var(--jn-mid), border-color var(--jn-mid); }
.etape:hover { transform: translateY(-4px); box-shadow: var(--jn-shadow-card-hover); border-color: #C9CEDA; }
.etape__n { align-self: flex-start; font: 600 13px/1 var(--jn-font-mono); color: var(--jn-cobalt); background: var(--jn-cobalt-soft); border-radius: 8px; padding: 7px 9px; }
.etape__corps { display: flex; flex-direction: column; gap: 18px; }
.etape h3 { margin: 0; font-family: var(--jn-font-display); font-weight: 700; font-size: 27px; letter-spacing: -.025em; line-height: 1.04; }
.etape p { margin: 0; color: var(--jn-ink-3); }
.etape__visuel { margin-top: auto; padding: 16px; background: #fff; border-radius: 12px; border: 1px solid #E4E6EB; }
.etape__visuel--champs { display: flex; flex-direction: column; gap: 8px; }
.etape__visuel--champs .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.etape__visuel--champs .duo span { height: 34px; border-radius: 8px; border: 1px solid #DDE0E6; font-size: 13px; display: flex; align-items: center; padding: 0 10px; }
.etape__import { height: 40px; border-radius: 8px; border: 1.5px dashed #9AA3FF; background: #F3F5FF; color: var(--jn-cobalt-ink); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; }
.etape__import .jn-ic { width: 15px; height: 15px; }
.etape__visuel--modeles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.etape__visuel--modeles span { aspect-ratio: 1/1.414; border-radius: 4px; border: 1px solid var(--jn-line); }
.etape__visuel--modeles .m1 { background: linear-gradient(#111318 0 18%, #fff 18%); }
.etape__visuel--modeles .m2 { border: 0; outline: 2px solid var(--jn-cobalt); outline-offset: 2px; background: linear-gradient(90deg, #2B44F0 0 30%, #fff 30%); }
.etape__visuel--modeles .m3 { background: repeating-linear-gradient(#fff 0 9px, #E6E8EC 9px 11px); }
.etape__visuel--modeles .m4 { background: linear-gradient(#7A1F33 0 22%, #fff 22%); }
.etape__visuel--fichiers { display: flex; flex-direction: column; gap: 8px; }
.etape__visuel--fichiers span { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--jn-surface-2); overflow: hidden; white-space: nowrap; }
.etape__visuel--fichiers span:first-child { background: #F3F5FF; }
.etape__visuel--fichiers b { font: 500 11px/1 var(--jn-font-mono); color: #fff; border-radius: 5px; padding: 3px 6px; background: var(--jn-ink); }
.etape__visuel--fichiers span:first-child b { background: var(--jn-cobalt); }

@media (max-width: 900px) {
  .methode__in { padding-top: 64px; padding-bottom: 68px; gap: 18px; }
  .methode__tete { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .methode__tete .sec-title { font-size: 36px; }
  .methode__lede { font-size: 16.5px; }
  .etapes { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
  .etape { flex-direction: row; gap: 16px; padding: 0 0 30px; background: none; border: 0; border-radius: 0; position: relative; }
  .etape:hover { transform: none; box-shadow: none; }
  .etape:last-child { padding-bottom: 0; }
  .etape:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: repeating-linear-gradient(#C5CCFF 0 6px, transparent 6px 11px); }
  .etape__n { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; background: var(--jn-cobalt); font-size: 12.5px; box-shadow: 0 0 0 6px #fff; position: relative; z-index: 1; }
  .etape__corps { gap: 6px; padding-top: 5px; }
  .etape h3 { font-size: 22px; letter-spacing: -.02em; }
  .etape p { font-size: 15.5px; }
  .etape__visuel { display: none; }
}

/* ── Accueil : comparaison avec une annonce ─────────────────────────────── */

.annonce { background: var(--jn-dark); color: #fff; position: relative; overflow: hidden; }
.annonce__in { padding-top: 116px; padding-bottom: 124px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 64px; align-items: center; }
.annonce__txt { display: flex; flex-direction: column; gap: 22px; max-width: 500px; }
.annonce__txt p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--jn-on-dark-2); text-wrap: pretty; }
.annonce__legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--jn-on-dark-2); }
.annonce__legende span { display: flex; align-items: center; gap: 8px; }
.annonce__legende .kw, .annonce__legende .kx { font-weight: 600; }
.annonce__demo { display: flex; flex-direction: column; gap: 16px; }
.annonce__collee { background: var(--jn-dark-2); border: 1px solid var(--jn-dark-line); border-radius: 18px; padding: 26px 28px; }
.annonce__lab { font: 400 12px/1 var(--jn-font-mono); color: var(--jn-on-dark-3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }
.annonce__collee p { margin: 0; font-size: 17px; line-height: 1.9; color: var(--jn-on-dark); }
.score { background: #fff; color: var(--jn-ink); border-radius: 18px; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.score__anneau { position: relative; width: 104px; height: 104px; flex: none; }
.score__anneau svg { display: block; width: 100%; height: 100%; }
.score__arc { stroke-dasharray: 276.5; stroke-dashoffset: 99.5; }
.score__val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score__val b { font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; font-size: 32px; line-height: 1; }
.score__val span { font: 400 11px/1.3 var(--jn-font-mono); color: var(--jn-ink-4); }
.score__tete { display: flex; flex-direction: column; }
.score__tete b, .score__tete span { display: block; }
.score__tete b { font-size: 16px; }
.score__tete span { font: 400 12px/1.4 var(--jn-font-mono); color: var(--jn-ink-4); }
.score__listes { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.score__lab { font-size: 13px; font-weight: 600; color: var(--jn-ink-3); margin-bottom: 6px; }
@supports (animation-timeline: view()) {
  .score__arc { animation: score-arc linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  @keyframes score-arc { from { stroke-dashoffset: 276.5; } to { stroke-dashoffset: 99.5; } }
}

@media (max-width: 900px) {
  .annonce__in { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 64px; padding-bottom: 68px; }
  .annonce__txt { gap: 18px; max-width: none; }
  .annonce__txt .sec-title { font-size: 36px; }
  .annonce__txt p { font-size: 16.5px; }
  .annonce__legende { display: none; }
  .annonce__demo { margin-top: 8px; }
  .annonce__collee { padding: 20px; border-radius: 16px; }
  .annonce__lab { font-size: 11px; margin-bottom: 10px; }
  .annonce__collee p { font-size: 15.5px; line-height: 1.95; }
  .score { padding: 20px; border-radius: 16px; gap: 16px; }
  .score__anneau { width: 76px; height: 76px; }
  .score__val b { font-size: 24px; }
  .score__val span { display: none; }
  .score__listes { grid-column: 1 / -1; }
  .score__lab { display: none; }
  .score .pill { min-height: 28px; padding: 3px 10px; font-size: 13px; }
}

/* ── Accueil : modèles ──────────────────────────────────────────────────── */

.modeles__in { padding-top: 116px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 44px; }
.modeles__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.modeles__tete .sec-head { max-width: 640px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtres .jn-chip { transition: background .2s, color .2s, border-color .2s; }
.filtres .jn-chip:hover { border-color: var(--jn-ink); }
.filtres .jn-chip .n { font: 400 12px/1 var(--jn-font-mono); opacity: .65; }
.galerie { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 20px; min-height: 200px; }
.modele { margin: 0; display: flex; flex-direction: column; gap: 12px; animation: modele-in .5s var(--jn-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes modele-in { from { opacity: 0; transform: translateY(10px); } }
.modele__vignette { aspect-ratio: 1 / 1.414; background: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(17,19,24,.06), 0 10px 24px -14px rgba(17,19,24,.3), 0 0 0 1px rgba(17,19,24,.05); overflow: hidden; position: relative; transition: transform .4s var(--jn-ease), box-shadow .4s; }
.modele:hover .modele__vignette { transform: translateY(-8px) rotate(-.8deg); box-shadow: 0 2px 4px rgba(17,19,24,.06), 0 26px 44px -18px rgba(17,19,24,.4), 0 0 0 2px var(--jn-cobalt); }
.modele__vignette .cv { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.modele__vignette.is-vide { background: linear-gradient(90deg, #E6E8ED 0%, #F3F4F6 40%, #E6E8ED 80%); background-size: 220% 100%; animation: jn-shimmer 1.4s linear infinite; }
.modele figcaption { display: flex; flex-direction: column; gap: 7px; }
.modele__nom { font-weight: 600; font-size: 15px; line-height: 1.3; }
.etiq { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 1.25; padding: 4px 8px; border-radius: 7px; align-self: flex-start; }
.etiq .jn-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.etiq--ok { background: var(--jn-cobalt-soft); color: var(--jn-cobalt-ink); }
.etiq--wa { background: var(--jn-amber-soft); color: var(--jn-amber-ink); }
.galerie__msg { grid-column: 1 / -1; margin: 0; color: var(--jn-ink-3); }
.modeles__defile { margin: 0; font: 400 12px/1.4 var(--jn-font-mono); color: var(--jn-ink-4); align-items: center; gap: 8px; }
.modeles__defile .jn-ic { width: 15px; height: 15px; }
@media (max-width: 1100px) { .galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

@media (max-width: 900px) {
  .modeles__in { padding-top: 64px; padding-bottom: 46px; gap: 18px; }
  .modeles__tete { flex-direction: column; align-items: stretch; gap: 18px; }
  .modeles__tete .sec-title { font-size: 36px; }
  .filtres, .galerie { margin: 0 calc(-1 * var(--jn-gutter)); padding-left: var(--jn-gutter); padding-right: var(--jn-gutter); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtres::-webkit-scrollbar, .galerie::-webkit-scrollbar { display: none; }
  .filtres { padding-top: 0; padding-bottom: 4px; }
  .filtres .jn-chip { white-space: nowrap; flex: none; }
  .galerie { display: flex; gap: 14px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--jn-gutter); padding-top: 6px; padding-bottom: 22px; min-height: 0; }
  .modele { flex: 0 0 152px; scroll-snap-align: start; gap: 10px; animation-name: modele-in-m; }
  @keyframes modele-in-m { from { opacity: 0; transform: translateX(12px); } }
  .modele:hover .modele__vignette { transform: none; }
  .modele__nom { font-size: 14.5px; }
  .etiq { font-size: 11.5px; padding: 4px 7px; }
  .etiq .jn-ic { width: 12px; height: 12px; }
  .modeles__defile { display: flex !important; }
}

/* ── Accueil : tarifs ───────────────────────────────────────────────────── */

.tarifs__in { padding-top: 116px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: start; }
.tarifs__txt { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.tarifs__txt p { margin: 0; font-size: 18px; color: #3C404B; text-wrap: pretty; }
.offre { background: #fff; border: 1px solid var(--jn-line); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(17,19,24,.35); }
.offre__haut { background: var(--jn-dark); color: #fff; padding: 34px 36px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.offre__prix { display: flex; align-items: flex-start; gap: 6px; }
.offre__prix .montant { font-family: var(--jn-font-display); font-size: 88px; font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.offre__prix .devise { font-family: var(--jn-font-display); font-weight: 700; font-size: 34px; margin-top: 6px; line-height: 1; }
.offre__duree { margin: 14px 0 0; font-size: 17px; color: #D9DCE3; }
.offre__unique { background: var(--jn-lime); color: var(--jn-ink); font-weight: 600; }
.offre__corps { padding: 30px 36px 34px; display: flex; flex-direction: column; gap: 22px; }
.offre__corps > p { margin: 0; font-weight: 600; }
.offre__lab { font: 400 12px/1 var(--jn-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--jn-ink-4); margin-bottom: 4px; }
.offre__cta { min-height: 56px; font-size: 17px; }
.offre__liens { display: flex; justify-content: center; gap: 22px; font-size: 14px; }

@media (max-width: 900px) {
  .tarifs__in { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 64px; padding-bottom: 68px; }
  .tarifs__txt { gap: 18px; max-width: none; }
  .tarifs__txt .sec-title { font-size: 36px; }
  .tarifs__txt p { font-size: 16.5px; }
  .offre { border-radius: 22px; margin-top: 8px; box-shadow: 0 26px 50px -34px rgba(17,19,24,.4); }
  .offre__haut { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .offre__unique { order: -1; }
  .offre__prix .montant { font-size: 72px; }
  .offre__prix .devise { font-size: 28px; margin-top: 4px; }
  .offre__duree { margin-top: 12px; font-size: 16px; }
  .offre__corps { padding: 22px; gap: 18px; }
  .offre__corps .check li { padding: 11px 0; font-size: 15px; }
  .offre__cta { min-height: 52px; font-size: 16px; }
  .offre__liens { gap: 20px; }
}

/* ── Accueil : questions ────────────────────────────────────────────────── */

.faq__in { padding-top: 116px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 48px 72px; align-items: start; }
.faq__tete { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.faq__plus { margin: 0; color: var(--jn-ink-3); }
.faq__liste { grid-column: span 2; min-width: 0; }
details.q { border-top: 1px solid #DDE0E6; }
details.q:last-of-type { border-bottom: 1px solid #DDE0E6; }
details.q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 4px; font: 600 20px/1.3 var(--jn-font-display); letter-spacing: -.015em; transition: color .2s; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary:hover { color: var(--jn-cobalt); }
details.q .plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jn-btn-line); display: flex; align-items: center; justify-content: center; flex: none; color: var(--jn-ink); transition: transform .3s, background .3s, border-color .3s, color .3s; }
details.q[open] .plus { transform: rotate(45deg); background: var(--jn-ink); color: #fff; border-color: var(--jn-ink); }
details.q p { margin: 0; padding: 0 64px 26px 4px; color: var(--jn-ink-3); font-size: 16.5px; max-width: 760px; }
details.q[open] p { animation: faq-r .35s ease both; }
@keyframes faq-r { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 900px) {
  .faq__in { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding-top: 64px; padding-bottom: 64px; }
  .faq__tete { display: contents; }
  .faq__tete .sec-title { font-size: 36px; }
  .faq__liste { order: 3; }
  .faq__plus { order: 4; font-size: 15px; }
  details.q summary { gap: 16px; min-height: 64px; padding: 16px 0; font-size: 17.5px; letter-spacing: -.01em; }
  details.q .plus { width: 34px; height: 34px; }
  details.q p { padding: 0 0 20px; font-size: 15.5px; }
}

/* ── Accueil : bandeau final ────────────────────────────────────────────── */

.final { padding: 0 20px 24px; position: relative; z-index: 1; }
.final__boite { max-width: 1240px; margin: 0 auto; background: var(--jn-cobalt); color: #fff; border-radius: 32px; padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 80px); position: relative; overflow: hidden; }
.final__anneau { position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; border: 56px solid rgba(212,245,60,.9); animation: final-tourne 18s linear infinite; }
@keyframes final-tourne { to { transform: rotate(360deg) scale(1.04); } }
.final__txt { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.final h2 { margin: 0; font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(36px, 4.8vw, 62px); text-wrap: balance; }
.final p { margin: 0; font-size: 19px; color: #E4E8FF; max-width: 600px; }
.final .jn-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
.final .jn-btn--lime:hover { transform: translateY(-2px); }
.final .jn-btn--lime:hover .jn-ic--fleche { transform: translateX(3px); }

@media (max-width: 900px) {
  .final { padding: 0 var(--jn-gutter) 20px; }
  .final__boite { border-radius: 24px; padding: 40px 24px; }
  .final__anneau { right: -70px; top: -70px; width: 190px; height: 190px; border-width: 36px; }
  .final__txt { gap: 18px; }
  .final h2 { font-size: 32px; max-width: 290px; text-wrap: wrap; }
  .final p { font-size: 16px; }
  .final .jn-btn { width: 100%; min-height: 52px; font-size: 16px; }
}

/* Barre collée en bas (téléphone) */
.barre-acces { display: none; }
@media (max-width: 900px) {
  .barre-acces { display: flex; position: sticky; bottom: 0; z-index: 25; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--jn-line); align-items: center; gap: 12px; }
  .barre-acces__prix { display: flex; flex-direction: column; line-height: 1.2; padding-left: 6px; }
  .barre-acces__prix b { font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; font-size: 20px; }
  .barre-acces__prix span { font: 400 11px/1.3 var(--jn-font-mono); color: var(--jn-ink-4); }
  .barre-acces .jn-btn { margin-inline-start: auto; min-height: 48px; padding: 0 18px; }
}

/* Apparition douce au défilement */
@supports (animation-timeline: view()) {
  .rv { animation: jn-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}

/* ── Connexion / inscription ────────────────────────────────────────────── */

.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px) 40px; }
.auth__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth__haut .jn-logo__nom { font-size: 22px; }
.auth__centre { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.auth__boite { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 28px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #E6E8ED; border-radius: 14px; padding: 4px; position: relative; }
.seg button { min-height: 44px; border: 0; background: transparent; border-radius: 10px; font: 600 15px/1 var(--jn-font-body); color: var(--jn-ink-3); cursor: pointer; position: relative; z-index: 1; transition: color .25s; }
.seg button[aria-selected="true"] { color: var(--jn-ink); }
.seg__curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(17,19,24,.14); transition: transform .4s var(--jn-ease); }
.seg[data-mode="login"] .seg__curseur { transform: translateX(100%); }
.auth__titre { display: flex; flex-direction: column; gap: 10px; }
.auth__titre.is-anim { animation: auth-in .45s var(--jn-ease) both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px); } }
.auth__titre h1 { margin: 0; font-family: var(--jn-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: 44px; }
.auth__titre p { margin: 0; font-size: 17px; color: var(--jn-ink-3); }
.auth__form { display: flex; flex-direction: column; gap: 20px; }
.auth__form .jn-label { font-size: 14.5px; }
.auth__form .jn-field { gap: 8px; }
.auth__form .jn-input { height: 54px; border-radius: 12px; border-color: var(--jn-btn-line); padding: 0 16px; }
.auth__form .jn-input:focus { border-color: var(--jn-cobalt); }
.auth__form .jn-input.is-invalid { border-color: var(--jn-danger); }
.mdp { position: relative; }
.mdp .jn-input { padding-right: 56px; }
.mdp__oeil { position: absolute; right: 6px; top: 6px; width: 42px; height: 42px; border-radius: 9px; border: 0; background: transparent; color: var(--jn-ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mdp__oeil:hover { background: #F0F1F4; color: var(--jn-ink); }
.mdp__oeil .ic-cache { display: none; }
.mdp__oeil[aria-pressed="true"] .ic-voir { display: none; }
.mdp__oeil[aria-pressed="true"] .ic-cache { display: block; }
.auth__aide { font-size: 13.5px; color: var(--jn-ink-4); }
.auth__form .jn-btn { width: 100%; min-height: 54px; font-size: 16.5px; }
.auth__bascule { margin: 0; text-align: center; color: var(--jn-ink-3); font-size: 15px; }
.auth__bascule a { font-weight: 600; }
.auth__cote { flex: 1 1 480px; min-width: 0; background: var(--jn-dark); color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(24px, 5vw, 72px); }
.auth__grille { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.auth__feuille { position: absolute; right: -40px; top: 70px; width: 230px; height: 325px; transform: rotate(8deg); background: var(--jn-dark-2); border: 1px solid var(--jn-dark-line); border-radius: 8px; padding: 26px 22px; display: flex; flex-direction: column; gap: 7px; opacity: .9; }
.auth__feuille span { display: block; height: 4px; border-radius: 3px; background: var(--jn-dark-line); }
.auth__feuille .l1 { height: 10px; width: 62%; background: #3A3F4B; }
.auth__feuille .l2 { height: 5px; width: 40%; background: var(--jn-cobalt); margin-bottom: 10px; }
.auth__feuille .hl1 { background: var(--jn-lime); }
.auth__feuille .scan { position: absolute; left: -8%; right: -8%; height: 2px; background: var(--jn-lime); box-shadow: 0 0 18px 4px rgba(212,245,60,.45); animation: auth-scan 4.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes auth-scan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }
.auth__arg { position: relative; max-width: 500px; display: flex; flex-direction: column; gap: 32px; }
.auth__arg h2 { margin: 0; font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(34px, 3.6vw, 48px); }
.auth__points { list-style: none; margin: 0; padding: 0; }
.auth__points li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); color: var(--jn-on-dark); font-size: 16.5px; }
.auth__points li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.auth__points .m { color: var(--jn-lime); font-size: 13px; padding-top: 3px; }
.auth__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.auth__legal a { color: var(--jn-on-dark-2); }
.auth__legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .auth { flex-direction: column; flex-wrap: nowrap; }
  .auth__main { flex: none; padding: 0; }
  .auth__haut { height: 64px; padding: 0 12px 0 20px; }
  .auth__haut .jn-logo svg { width: 26px; height: 26px; }
  .auth__haut .jn-logo__nom { font-size: 21px; }
  .auth__haut .jn-back { font-size: 14.5px; padding: 0 8px; gap: 6px; }
  .auth__centre { padding: 20px 20px 40px; display: block; }
  .auth__boite { max-width: none; gap: 24px; }
  .auth__titre { gap: 8px; }
  .auth__titre h1 { font-size: 36px; }
  .auth__titre p { font-size: 16px; }
  .auth__form { gap: 18px; }
  .auth__cote { flex: none; margin: auto 12px 12px; border-radius: 22px; padding: 28px 22px 18px; justify-content: flex-start; }
  .auth__grille { background-size: 24px 24px; }
  .auth__feuille { display: none; }
  .auth__arg { gap: 18px; max-width: none; }
  .auth__arg h2 { font-size: 27px; }
  .auth__points li { padding: 14px 0; font-size: 15.5px; gap: 12px; }
  .auth__points li:last-child { border-bottom: 0; }
  .auth__legal { gap: 0 18px; font-size: 13.5px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; }
  .auth__legal a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Commande ───────────────────────────────────────────────────────────── */

.cmd-header { border-bottom: 1px solid var(--jn-line); background: var(--jn-paper); }
.cmd-header .jn-header__in { max-width: 1180px; }
.cmd { max-width: 1180px; margin: 0 auto; padding: 36px 32px 72px; }
.cmd__cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-top: 18px; }
.cmd__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cmd__intro { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.cmd__intro h1 { margin: 0; font-family: var(--jn-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(42px, 5vw, 64px); }
.cmd__intro p { margin: 0; font-size: 18px; color: #3C404B; text-wrap: pretty; }
.billet { position: relative; background: var(--jn-dark); color: #fff; border-radius: 20px; overflow: hidden; }
.billet__haut { padding: 30px 32px 34px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-start; }
.billet__produit { display: flex; flex-direction: column; gap: 8px; }
.billet__lab { font: 400 12px/1 var(--jn-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--jn-lime); }
.billet h2 { margin: 0; font-family: var(--jn-font-display); font-weight: 700; font-size: 30px; letter-spacing: -.025em; line-height: 1.1; }
.billet__prix { display: flex; align-items: flex-start; gap: 4px; }
.billet__prix .montant { font-family: var(--jn-font-display); font-size: 54px; font-weight: 800; letter-spacing: -.035em; line-height: .9; }
.billet__prix .devise { font-family: var(--jn-font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.billet__perfo { position: relative; height: 0; border-top: 2px dashed rgba(255,255,255,.18); margin: 0 26px; }
.billet__perfo::before, .billet__perfo::after { content: ''; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--jn-paper); }
.billet__perfo::before { left: -39px; }
.billet__perfo::after { right: -39px; }
.billet__bas { padding: 30px 32px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.billet__cle { display: flex; flex-direction: column; gap: 6px; }
.billet__cle span:first-child { font-size: 14px; color: #B9BDC9; }
.billet__flou { font: 500 30px/1.2 var(--jn-font-mono); letter-spacing: .12em; color: #fff; filter: blur(5px); opacity: .75; -webkit-user-select: none; user-select: none; }
.billet__duree { font: 400 13px/1.3 var(--jn-font-mono); color: #B9BDC9; border: 1px solid rgba(255,255,255,.18); border-radius: var(--jn-r-pill); padding: 8px 14px; }
.billet__reflet { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 70%) no-repeat; background-size: 220% 100%; animation: billet-reflet 2.6s ease-in-out infinite; }
@keyframes billet-reflet { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.cmd__compris { padding: 26px 30px; }
.cmd__lab { font: 400 12px/1 var(--jn-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--jn-ink-4); margin-bottom: 4px; }
.cmd__compris .check { columns: 2 280px; column-gap: 36px; }
.cmd__compris .check li { padding: 11px 0; font-size: 15.5px; break-inside: avoid; }
.cmd__unique { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--jn-cobalt-soft); color: #1A2A9E; }
.cmd__unique .jn-ic { margin-top: 3px; }
.cmd__unique p { margin: 0; font-size: 15.5px; }
.cmd__aside { flex: 1 1 380px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.cmd__carte { padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 60px -40px rgba(17,19,24,.4); border-radius: 20px; animation: jn-pop-in .45s var(--jn-ease) both; }
.cmd__total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--jn-line-2); }
.cmd__total span:first-child { font-weight: 600; }
.cmd__total .d { font-size: 30px; }
.case { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; border: 1.5px solid var(--jn-line); background: #fff; cursor: pointer; transition: border-color .2s, background .2s; font-size: 15px; line-height: 1.5; }
.case:hover { border-color: #B7BDCA; }
.case:has(input:checked) { border-color: var(--jn-cobalt); background: var(--jn-cobalt-tint); }
.case .jn-check { margin-top: 1px; }
.case .jn-check:checked::before { animation: case-rebond .4s var(--jn-ease-pop); }
@keyframes case-rebond { 0% { transform: rotate(-45deg) scale(0); } 60% { transform: rotate(-45deg) scale(1.3); } 100% { transform: rotate(-45deg) scale(1); } }
.case strong { font-weight: 600; }
.cmd__payer { width: 100%; min-height: 54px; font-size: 16.5px; }
.cmd__indice { margin: -4px 0 0; text-align: center; font-size: 13.5px; color: var(--jn-ink-4); }
.cmd__secu { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--jn-ink-3); line-height: 1.5; }
.cmd__secu .jn-ic { width: 16px; height: 16px; margin-top: 2px; }
.cmd__etat { padding: 28px; display: flex; flex-direction: column; gap: 16px; border-radius: 20px; animation: jn-pop-in .45s var(--jn-ease) both; }
.cmd__etat-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--jn-cobalt-soft); color: var(--jn-cobalt); display: flex; align-items: center; justify-content: center; }
.cmd__etat-ico .jn-ic { width: 22px; height: 22px; }
.cmd__etat h2 { margin: 0; font-family: var(--jn-font-display); font-weight: 700; font-size: 28px; letter-spacing: -.025em; line-height: 1.1; }
.cmd__etat p { margin: 0; color: var(--jn-ink-3); }
.cmd__etat-actions { display: flex; flex-direction: column; gap: 10px; }
.cmd__etat-actions .petit { margin: 6px 0 0; font-size: 13.5px; color: var(--jn-ink-4); text-align: center; }
.cmd__liens { padding: 20px 24px 10px; border-radius: 20px; }
.cmd__liens a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--jn-ink); text-decoration: none; border-top: 1px solid var(--jn-line-2); font-size: 15px; }
.cmd__liens a:hover { color: var(--jn-cobalt); }
.cmd__liens a .jn-ic { transition: transform .25s var(--jn-ease); }
.cmd__liens a:hover .jn-ic { transform: translateX(3px); }
.cmd__liens .cmd__lab { padding-bottom: 8px; margin: 0; }

@media (max-width: 900px) {
  .cmd-header .jn-header__in { height: 64px; }
  .cmd { padding: 14px 20px 48px; }
  .cmd__cols { flex-direction: column; flex-wrap: nowrap; gap: 18px; margin-top: 8px; }
  .cmd__main, .cmd__aside { flex: none; width: 100%; max-width: none; gap: 18px; }
  .cmd__aside { position: static; }
  .cmd__intro h1 { font-size: 40px; }
  .cmd__intro p { font-size: 16px; }
  .billet__haut { flex-direction: column; gap: 10px; padding: 24px 20px 22px; }
  .billet h2 { font-size: 24px; }
  .billet__prix .montant { font-size: 46px; }
  .billet__perfo { margin: 0 20px; }
  .billet__perfo::before { left: -33px; }
  .billet__perfo::after { right: -33px; }
  .billet__bas { padding: 22px 20px 24px; gap: 14px; }
  .billet__flou { font-size: 24px; }
  .cmd__compris { padding: 22px 20px; }
  .cmd__compris .check { columns: 1; }
  .cmd__compris .check li { font-size: 15px; }
  .cmd__unique { padding: 16px; }
  .cmd__unique p { font-size: 15px; }
  .cmd__carte { background: none; border: 0; padding: 0; box-shadow: none; animation: none; gap: 14px; }
  .cmd__carte .case { order: 1; }
  .cmd__total { order: 2; border-bottom: 0; padding: 6px 2px 0; }
  .cmd__carte #erreur { order: 3; }
  .cmd__payer { order: 4; }
  .cmd__indice { order: 5; margin-top: -2px; }
  .cmd__secu { order: 6; }
  .cmd__liens { padding: 18px 20px 8px; }
}

/* ── Pages légales ──────────────────────────────────────────────────────── */

.legal-page { max-width: 1240px; margin: 0 auto; padding: 48px 32px 96px; }
.onglets { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: #E6E8ED; border-radius: 14px; }
.onglets a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px; color: var(--jn-ink-3); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s, color .2s; white-space: nowrap; }
.onglets a:hover { color: var(--jn-ink); }
.onglets a[aria-current="page"] { background: #fff; color: var(--jn-ink); box-shadow: 0 1px 3px rgba(17,19,24,.12); }
.legal-tete { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; max-width: 820px; animation: jn-pop-in .45s var(--jn-ease) both; }
.legal-tete .jn-eyebrow { color: var(--jn-cobalt); letter-spacing: .08em; }
.legal-tete .jn-eyebrow::before { display: none; }
.legal-tete h1 { margin: 0; font-family: var(--jn-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(42px, 5.4vw, 72px); text-wrap: balance; }
.legal-tete .maj { margin: 0; font: 400 13.5px/1.5 var(--jn-font-mono); color: var(--jn-ink-4); }
.legal-cols { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; margin-top: 48px; }
.legal-cote { flex: 0 1 290px; min-width: 240px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; }
.legal-cote > details > summary { list-style: none; cursor: default; font: 400 12px/1 var(--jn-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--jn-ink-4); padding: 0 12px 10px; pointer-events: none; }
.legal-cote > details > summary::-webkit-details-marker { display: none; }
.legal-cote > details > summary .jn-ic { display: none; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: som; }
.sommaire li { counter-increment: som; }
.sommaire a { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 10px; color: var(--jn-ink-3); text-decoration: none; font-size: 14.5px; line-height: 1.4; border-left: 2px solid transparent; transition: background .2s, color .2s; }
.sommaire a::before { content: counter(som, decimal-leading-zero); font: 400 12px/1 var(--jn-font-mono); color: var(--jn-placeholder); flex: none; }
.sommaire a:hover { background: #fff; color: var(--jn-ink); }
.sommaire a.is-actif { color: var(--jn-ink); background: #fff; border-left-color: var(--jn-cobalt); font-weight: 600; }
.sommaire > p { display: none; }
.legal-haut { display: inline-flex; align-items: center; gap: 8px; margin: 18px 12px 0; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.legal-haut .jn-ic { width: 16px; height: 16px; }
.legal { flex: 1 1 560px; min-width: 0; background: #fff; border: 1px solid var(--jn-line); border-radius: 24px; padding: 48px clamp(24px, 5vw, 64px); }
.legal > :first-child { margin-top: 0; }
.legal h2 { font: 700 30px/1.15 var(--jn-font-display); letter-spacing: -.025em; margin: 40px 0 16px; padding-top: 40px; border-top: 1px solid var(--jn-line); scroll-margin-top: 96px; text-wrap: balance; }
.legal > h2:first-of-type { border-top: 0; padding-top: 8px; margin-top: 8px; }
.legal .legal-intro + h2 { border-top: 1px solid var(--jn-line); padding-top: 40px; margin-top: 32px; }
.legal h3 { font: 600 19px/1.3 var(--jn-font-body); margin: 26px 0 8px; }
.legal h4 { font: 600 16.5px/1.35 var(--jn-font-body); margin: 20px 0 6px; }
.legal p, .legal li, .legal dd { font-size: 17px; line-height: 1.75; color: var(--jn-ink-2); }
.legal p { margin: 0 0 14px; max-width: 68ch; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; }
.legal li { margin: 0 0 4px; }
.legal li::marker { color: var(--jn-ink-4); }
.legal strong { font-weight: 650; color: var(--jn-ink); }
.legal a { text-underline-offset: 2px; }
.legal .mono, .legal code { font-family: var(--jn-font-mono); font-size: .9em; background: var(--jn-surface-2); border-radius: 5px; padding: 1px 5px; }
.legal .identite { margin: 6px 0 18px; padding: 6px 22px; border-radius: 16px; background: var(--jn-surface-2); border: 1px solid var(--jn-line-2); }
.legal .identite dl { margin: 0; }
.legal .identite dl > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 24px; padding: 12px 0; border-top: 1px solid var(--jn-line); }
.legal .identite dl > div:first-child { border-top: 0; }
.legal .identite dt { font: 400 12px/1.6 var(--jn-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--jn-ink-4); padding-top: 3px; }
.legal .identite dd { margin: 0; font-size: 16px; line-height: 1.6; }
.legal .encadre { margin: 8px 0 20px; padding: 20px 22px; border-radius: 16px; border: 1px solid transparent; }
.legal .encadre > :last-child { margin-bottom: 0; }
.legal .encadre p { font-size: 16px; line-height: 1.7; }
.legal .encadre--info { background: var(--jn-cobalt-tint); border-color: #DCE1FF; }
.legal .encadre--info strong { color: #1A2A9E; }
.legal .encadre--attention { background: var(--jn-amber-soft); border-color: #F6DDB8; }
.legal .encadre--attention strong { color: var(--jn-amber-ink); }
.legal .table-scroll { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--jn-line); border-radius: 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal th, .legal td { text-align: start; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--jn-line); }
.legal thead th { border-top: 0; background: var(--jn-surface-2); font: 600 13px/1.4 var(--jn-font-body); color: var(--jn-ink-2); }
.legal td { color: var(--jn-ink-2); }
.legal-question { margin-top: 32px; padding: 22px 24px; border-radius: 16px; background: var(--jn-surface-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.legal-question span { font-size: 15.5px; }
.legal-question .jn-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.legal-bas-m { display: none; }
.legal-connexion-m { color: var(--jn-cobalt); font-weight: 600; font-size: 15px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }

@media (max-width: 900px) {
  .legal-page { padding: 20px 20px 40px; }
  .onglets { display: flex; flex-wrap: nowrap; overflow-x: auto; background: none; padding: 0; gap: 8px; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a { min-height: 44px; border-radius: var(--jn-r-pill); border: 1px solid var(--jn-btn-line); background: #fff; padding: 0 16px; font-size: 14.5px; color: var(--jn-ink); flex: none; }
  .onglets a[aria-current="page"] { background: var(--jn-ink); color: #fff; border-color: var(--jn-ink); box-shadow: none; }
  .legal-tete { margin-top: 28px; gap: 10px; }
  .legal-tete h1 { font-size: 36px; }
  .legal-tete .maj { font-size: 12.5px; }
  .legal-cols { flex-direction: column; flex-wrap: nowrap; gap: 20px; margin-top: 24px; }
  .legal-cote { flex: none; width: 100%; min-width: 0; position: static; max-height: none; overflow: visible; }
  .legal-cote > details { background: #fff; border: 1px solid var(--jn-line); border-radius: 16px; }
  .legal-cote > details > summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; font: 600 16px/1 var(--jn-font-body); letter-spacing: 0; text-transform: none; color: var(--jn-ink); }
  .legal-cote > details > summary .jn-ic { display: block; transition: transform .3s; }
  .legal-cote > details[open] > summary .jn-ic { transform: rotate(180deg); }
  .legal-cote .sommaire { padding: 0 8px 10px; }
  .legal-cote .legal-haut { display: none; }
  .legal { flex: none; width: 100%; border-radius: 20px; padding: 28px 20px; }
  .legal h2 { font-size: 23px; padding-top: 30px; margin-top: 30px; }
  .legal h3 { font-size: 17.5px; }
  .legal p, .legal li { font-size: 16px; line-height: 1.7; }
  .legal .identite { padding: 4px 16px; }
  .legal .identite dl > div { grid-template-columns: 1fr; gap: 2px; }
  .legal .identite dd { font-size: 15.5px; }
  .legal .encadre { padding: 16px; }
  .legal .encadre p { font-size: 15.5px; }
  .legal-question { display: none; }
  .legal-bas-m { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; text-align: center; color: var(--jn-ink-3); font-size: 15px; }
  .legal-bas-m .legal-haut { margin: 0; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .w, .pop, .typed, .hl, .modele, .rv, .float, .float2, .billet__reflet, .final__anneau, .auth__feuille .scan, .auth__titre.is-anim, .jn-mnav, .legal-tete, .cmd__carte, .cmd__etat, details.q[open] p { animation: none !important; opacity: 1 !important; clip-path: none !important; }
  .typed { width: 27ch; }
  .hl { background-size: 100% 38%; }
  .live::after { display: none; }
  .score__arc { animation: none !important; }
  .auth__feuille .scan { top: 50%; }
}