/* Mouvements TRNR, posés par-dessus le rendu validé du 4 octobre.
   On n'anime que `opacity` et les propriétés indépendantes `translate` / `scale` :
   les `transform` existants (italiques penchés, échelles des scènes) restent intacts.
   Une seule lecture à chaque apparition, aucune boucle, aucun rebond. */
:root{--trnr-ease:cubic-bezier(.22,1,.36,1)}
@keyframes trnr-rise{from{opacity:0;translate:0 var(--rise,18px)}to{opacity:1;translate:0 0}}
@keyframes trnr-fade{from{opacity:0}to{opacity:1}}
@keyframes trnr-settle{from{opacity:0;scale:1.035}to{opacity:1;scale:1}}

/* Programmes : le grand nom, puis le personnage qui se pose, puis le texte.
   Rejoué à chaque changement d'onglet (la scène repasse de masquée à affichée).
   Ralenti d'environ 15 % à la demande de Franck (05/10 : « très légèrement »). */
.native-scene[data-ready=true] :is(.prime-wordmark,.alpha-wordmark,.street-wordmark,.pmt-wordmark,.tabata-wordmark,.circuit-wordmark){--rise:22px;animation:trnr-rise 1150ms var(--trnr-ease) both}
.native-scene[data-ready=true]::before{animation:trnr-fade 1600ms ease-out 230ms both}
.native-scene[data-ready=true] :is(.prime-duo,.refreshed-character,.tabata-subject){--rise:26px;animation:trnr-rise 1250ms var(--trnr-ease) 140ms both}
.native-scene[data-ready=true] :is(.prime-grounding,.character-ground,.tabata-grounding){animation:trnr-fade 1030ms ease-out 440ms both}
.native-scene[data-ready=true] .scene-kicker{animation:trnr-rise 920ms var(--trnr-ease) 300ms both}
.native-scene[data-ready=true] .scene-title>span:first-child{animation:trnr-rise 920ms var(--trnr-ease) 370ms both}
.native-scene[data-ready=true] .scene-title>span:nth-child(2){animation:trnr-rise 920ms var(--trnr-ease) 460ms both}
.native-scene[data-ready=true] :is(.prime-description,.alpha-description,.street-description,.pmt-description,.tabata-description,.circuit-description){animation:trnr-rise 920ms var(--trnr-ease) 550ms both}
.native-scene[data-ready=true] :is(.prime-rule,.alpha-rule,.alpha-frequency){animation:trnr-rise 920ms var(--trnr-ease) 620ms both}
.native-scene[data-ready=true] .programme-explore{animation:trnr-rise 920ms var(--trnr-ease) 690ms both}
/* Sur téléphone, le bouton « Découvrir » est hors de la scène : motion.js le fait arriver avec elle, au même moment
   que sur ordinateur, au lieu de changer d'un coup. */
.mobile-discovery.waiting{opacity:0}
.mobile-discovery.arrive{animation:trnr-rise 920ms var(--trnr-ease) 690ms both}

/* Accueil : l'image se pose, puis la phrase. Attend que l'image soit décodée (motion.js). */
html.motion .home-scene:not([data-ready]) :is(.home-team-scene>img,.home-intro h2>*,.home-intro p,.home-availability){opacity:0}
/* La scène sort de l'ombre depuis le sol (retenu par Franck le 05/10, avec le miroir et le halo) :
   un voile de la couleur du fond, deux fois plus haut que la scène, opaque en haut et transparent en bas,
   couvre tout puis remonte et sort. Il remplace l'ancienne apparition de l'image. */
html.motion .home-team-scene>.stage{position:absolute;left:0;right:0;top:0;height:220%;pointer-events:none;z-index:2;
 background:linear-gradient(to bottom,#14171c 0%,#14171c 45%,rgba(20,23,28,0) 72%)}
html.motion .home-scene[data-ready] .home-team-scene>.stage{animation:trnr-lever 1900ms cubic-bezier(.33,1,.68,1) 150ms both}
@keyframes trnr-lever{from{translate:0 0}to{translate:0 -100%}}

/* Sol miroir (sans mouvement) : l'image retournée autour de la ligne du sol (712 px sur 1 024), dont on ne
   garde que la bande juste au-dessus (pieds, bas des lettres), qui s'efface en s'éloignant. La scène
   s'agrandit vers le bas pour lui laisser de la place. */
.home-team-scene{aspect-ratio:1536/975!important;-webkit-mask-image:linear-gradient(to bottom,transparent,black 8%,black 84%,transparent);mask-image:linear-gradient(to bottom,transparent,black 8%,black 84%,transparent)}
.home-team-scene>img.mirror{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none;
 transform-origin:50% 69.53%;transform:scaleY(-1);opacity:.3;animation:none!important;filter:blur(1.2px) saturate(.85);
 -webkit-mask-image:linear-gradient(to bottom,transparent 52%,rgba(0,0,0,.4) 62%,#000 69.4%,transparent 69.6%);
 mask-image:linear-gradient(to bottom,transparent 52%,rgba(0,0,0,.4) 62%,#000 69.4%,transparent 69.6%)}
/* Halo (sans mouvement) : lumière d'ambiance très douce derrière chaque statue, dans la couleur de son programme.
   Baissé d'un cran sur les personnages à la demande de Franck (05/10). */
/* Positions en % de la scène agrandie (975 px de haut sur l'image d'origine). */
.home-team-scene>.halo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
 background:
  radial-gradient(ellipse 15% 29.6% at 14% 57.5%,rgba(224,90,71,.25),transparent 70%),
  radial-gradient(ellipse 13% 38.4% at 21% 33.1%,rgba(198,160,82,.25),transparent 70%),
  radial-gradient(ellipse 13% 38.4% at 37% 33.1%,rgba(237,230,214,.16),transparent 70%),
  radial-gradient(ellipse 15% 38.4% at 60% 33.1%,rgba(86,204,242,.22),transparent 70%),
  radial-gradient(ellipse 12% 29.6% at 77% 36.6%,rgba(155,81,224,.25),transparent 70%),
  radial-gradient(ellipse 12% 38.4% at 90% 34.9%,rgba(72,214,139,.22),transparent 70%)}
/* Le halo se reflète aussi, très faiblement, dans le sol verni (demande de Franck : « vraiment très très léger ») :
   sous chaque statue, une trace aplatie de sa couleur, juste sous la ligne du sol (73 % de la scène). */
.home-team-scene>.halo::after{content:"";position:absolute;inset:0;
 background:
  radial-gradient(ellipse 14% 6% at 14% 77%,rgba(224,90,71,.30),transparent 70%),
  radial-gradient(ellipse 12% 6% at 21% 76%,rgba(198,160,82,.30),transparent 70%),
  radial-gradient(ellipse 12% 6% at 37% 76%,rgba(237,230,214,.18),transparent 70%),
  radial-gradient(ellipse 14% 6% at 60% 76%,rgba(86,204,242,.28),transparent 70%),
  radial-gradient(ellipse 11% 5% at 77% 75%,rgba(155,81,224,.30),transparent 70%),
  radial-gradient(ellipse 11% 6% at 90% 76%,rgba(72,214,139,.28),transparent 70%)}
@media(prefers-reduced-motion:reduce){html.motion .home-team-scene>.stage{display:none}}
html.motion .home-scene[data-ready] .home-intro h2>span{animation:trnr-rise 900ms var(--trnr-ease) 350ms both}
html.motion .home-scene[data-ready] .home-intro h2>em{animation:trnr-rise 900ms var(--trnr-ease) 450ms both}
html.motion .home-scene[data-ready] .home-intro p{animation:trnr-rise 900ms var(--trnr-ease) 560ms both}
html.motion .home-scene[data-ready] .home-availability{animation:trnr-fade 900ms ease-out 700ms both}
/* Date de sortie, en or, sous « Bientôt sur iPhone et Apple Watch » (demande de Franck, 05/10).
   Même lettrage que « PREND UNE AUTRE DIMENSION », en petit. */
.home-sortie{display:block;margin-top:10px;font-family:'TRNR Accent',sans-serif;font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.1;
 letter-spacing:-.01em;text-transform:uppercase;color:#c6a052;transform:skewX(-11deg) scaleX(.86);transform-origin:center}
html.motion .home-scene:not([data-ready]) .home-sortie{opacity:0}
html.motion .home-scene[data-ready] .home-sortie{animation:trnr-fade 900ms ease-out 800ms both}

/* Onglets : une seule pastille, en goutte de verre (Liquid Glass d'iOS 26, retenu par Franck le 05/10).
   Version allégée choisie par Franck (« A ») : un voile clair, un fin liseré de lumière en haut, une ombre très
   douce, sans contour ; motion.js l'étire et la reforme comme un liquide.
   Le vrai effet de loupe (déformation de ce qui est derrière) n'existe que dans Chrome : on ne s'en sert pas. */
.tabs.has-pill{position:relative}
.tabs.has-pill::before{content:"";position:absolute;left:0;top:0;width:var(--pill-w,0);height:var(--pill-h,0);
 translate:var(--pill-x,0) var(--pill-y,0);scale:var(--pill-sx,1) var(--pill-sy,1);border-radius:999px;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 8px rgba(0,0,0,.18)}
.tabs.has-pill button{position:relative;z-index:1;transition:color 300ms ease,scale 120ms ease-out}
.tabs.has-pill button[aria-pressed=true]{background:transparent;color:#fff}
@media(prefers-reduced-transparency:reduce){.tabs.has-pill::before{background:#3a424c}}
@media(prefers-contrast:more){.tabs.has-pill::before{background:#f3f3ef;box-shadow:none}.tabs.has-pill button[aria-pressed=true]{color:#171c22}}
/* « Être prévenu » en haut à droite : bouton doré « Relief », le même que « Découvrir » et les boutons de l'app
   (choix 1 de Franck, 05/10 : la pilule de verre, gris sur gris, ne se voyait pas). Relief = liseré de lumière en
   haut, arête sombre en bas, ombre portée noire. Jamais de lueur autour (refusé : « années 80 »). */
.site-header .signup-link{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border-radius:12px;text-decoration:none;
 background:#c6a052;color:#171c22;font:italic 900 12.5px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:-.2px;text-transform:uppercase;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.18),0 4px 6px rgba(0,0,0,.35);
 transition:scale 120ms ease-out,box-shadow 120ms ease-out;-webkit-tap-highlight-color:transparent}
.site-header .signup-link:active{scale:.97;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.18),0 2px 3px rgba(0,0,0,.35)}
.site-header .signup-link:focus-visible{outline:2px solid #c6a052;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.site-header .signup-link:active{scale:none}}
/* Glisser d'un programme à l'autre : le doigt horizontal est pour nous, le vertical reste au navigateur ;
   le geste à deux doigts du trackpad ne doit pas déclencher le retour en arrière de Safari. */
.frame{touch-action:pan-y}
/* Pendant le glissement, c'est le cadre entier qui se déplace : il est rogné aux bords de la page, sans défilement horizontal. */
main{overflow-x:clip}
html,body{overscroll-behavior-x:none}
.tabs.has-pill button:active{scale:.96}

html{scroll-behavior:smooth}

/* Réduire les animations : fondus seuls, sans déplacement ni glissement. */
@media(prefers-reduced-motion:reduce){
@keyframes trnr-rise{from{opacity:0}to{opacity:1}}
@keyframes trnr-settle{from{opacity:0}to{opacity:1}}
.tabs.has-pill button:active{scale:none}
html{scroll-behavior:auto}
}

/* Version téléphone (retours de Franck, 05/10).
   Barre d'onglets : on glisse toujours au doigt, mais la barre de défilement grise n'apparaît plus. */
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
/* Bouton « Découvrir » : il prenait toute la largeur de l'écran ; largeur naturelle, centré. */
.mobile-discovery:not([hidden]){width:max-content!important;max-width:calc(100% - 48px)!important;margin:12px auto 32px!important}
/* Pied de page : « © 2026 » à côté du logo, comme sur les pages des programmes (la phrase « Votre
   entraînement, à votre rythme » est retirée). Sur téléphone, il restait rejeté sous les liens. */
@media(max-width:650px){.site-footer p{order:0;flex-basis:auto}}
/* Onglets de programme sur téléphone : le bloc « scène + bouton Découvrir » est centré verticalement entre les
   onglets et le pied de page (retour de Franck : tout le vide s'accumulait sous le bouton). */
@media(max-width:650px){html.native-entry main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}}