/* ===== Finitions « Apple » : typographie, matières, retours au toucher =====
   Chargé en dernier sur toutes les pages. */

/* 1. Typographie : l'interlettrage dépend de la taille (SF Pro) */
h1,.vhero h1,.page-head h1,.offers-head h1{letter-spacing:-.03em;line-height:1.02}
.vhero h1.h2l{letter-spacing:-.015em;line-height:1}
h2,.sec-head h2,.h-head h2,.h-coach-txt h2,.final h2{letter-spacing:-.028em;line-height:1.04}
h3,.pcard h2,.h-plan-top b,.tres{letter-spacing:-.018em}
.pprice b,.h-stats b,.h-plan-price strong{letter-spacing:-.035em}
.sub,.page-head p,.sec-head p{letter-spacing:-.005em}
body{-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;font-optical-sizing:auto}

/* 2. Barre de navigation : matière translucide, le contenu défile dessous */
.top,.top.scrolled,.top.over.scrolled{background:rgba(9,20,36,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.top.over:not(.scrolled){background:linear-gradient(180deg,rgba(6,16,29,.55),rgba(6,16,29,0));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.top{transition:background .3s ease,box-shadow .3s ease}

/* 3. Retour immédiat à l'appui (sur pression, pas au relâchement) */
.btn,.h-plan,.cs,.h-res-card,.sp,.t-open,.h-link,.tbtn,.sm-close,summary,.burger{touch-action:manipulation}
.btn:active{transform:scale(.97);transition:transform 100ms ease-out}
.h-plan:active,.cs:active,.h-res-card:active,.pcard:active{transform:scale(.985);transition:transform 100ms ease-out}
.sp:active{transform:scale(.98);transition:transform 100ms ease-out,flex-grow .75s cubic-bezier(.22,1,.36,1)}
.t-open:active,.h-link:active{opacity:.6;transition:opacity 80ms ease-out}

/* 4. Survols seulement avec une souris : pas d'état « collé » sur iPhone */
@media (hover:none){
  .h-plan:hover,.pcard.is-pick:hover,.pcard:hover{transform:none}
  .h-res-card:hover img,.tcard:hover .tphoto img,.h-coach-pic.in:hover img{transform:none}
  .btn:hover .arr,.h-link:hover .arr,.cs:hover .arr,.h-plan:hover .arr,.t-open:hover .arr,.h-res-card:hover .h-res-more .arr{transform:none}
  .btn-blue:hover{background:var(--blue)}
  .h-res-card:hover b::before{width:22px}
}

/* 5. Fenêtre des témoignages : la matière arrive (flou + échelle), poignée sur mobile */
.story-modal{box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.story-modal::backdrop{background:rgba(3,8,16,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
@keyframes smIn{from{opacity:0;transform:translateY(18px) scale(.96);filter:blur(6px)}}
.sm-grab{display:none}
@media (max-width:720px){
  .sm-grab{display:block;position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,255,255,.8);box-shadow:0 1px 6px rgba(0,0,0,.35);z-index:3}
  .story-modal{touch-action:pan-y}
  .story-modal.dragging{transition:none!important;animation:none!important}
}

/* 6. Apparitions au défilement : plus courtes et plus discrètes */
.js .fx{transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.1,1),transform .7s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i,0) * 70ms)}

/* 7. Accessibilité : transparence et contraste réduits */
@media (prefers-reduced-transparency:reduce){
  .top,.top.scrolled,.top.over.scrolled{background:#0a1829;-webkit-backdrop-filter:none;backdrop-filter:none}
  .story-modal::backdrop{background:rgba(3,8,16,.9);-webkit-backdrop-filter:none;backdrop-filter:none}
  .vhero .btn-line,.sm-close,.ap-photo figcaption{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,16,29,.92)}
}
@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.35);--line-2:rgba(255,255,255,.6);--muted:#c3cfdf}
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.h-plan:active,.cs:active,.h-res-card:active,.pcard:active,.sp:active{transform:none}
  @keyframes smIn{from{opacity:0}}
}