/* AZIMUT : l'affiche de course et le panneau de piste, au lieu de l'univers du jeu vidéo.
   Big Shoulders Display pour les titres, Barlow pour lire. Le mouvement de la marque est le ressort :
   une arrivée qui dépasse, puis se pose, comme une suspension.
   Cette feuille est chargée après le style de la page : elle le précise. */
:root{
  --disp:"Big Shoulders Display","Saira Condensed",Impact,sans-serif;
  --body:"Barlow","Saira",system-ui,sans-serif;
  --ressort:cubic-bezier(.34,1.56,.64,1);
}
html{scrollbar-color:rgba(244,239,236,.28) var(--bg);scrollbar-width:thin}
body{caret-color:var(--accent-soft)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
h1,h2,h3{font-weight:800;letter-spacing:.008em}
.nav__links a{font-weight:600;letter-spacing:.11em}
.nav__cta,.btn{font-weight:700;letter-spacing:.1em}
.btn{transition:transform .5s var(--ressort),background-color .25s}
@media(hover:hover){.btn:hover{transform:translateY(-3px)}}
.btn:active{transform:translateY(1px) scale(.98)}

/* ---- Menu : plus de bandeau opaque. Un voile, et il s'efface en descendant ---- */
.nav{transition:transform .55s var(--ease)}
.nav.is-cache{transform:translateY(-120%)}
.nav__bg{height:190%;background:linear-gradient(rgba(12,14,10,.84),rgba(12,14,10,.46) 52%,rgba(12,14,10,0))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:transparent!important;pointer-events:none}
.nav--ink .nav__bg{background:linear-gradient(rgba(239,233,229,.94),rgba(239,233,229,.6) 52%,rgba(239,233,229,0))!important}

/* ---- Accueil : le titre monte au-dessus de la moto, le texte et le bouton restent en bas ---- */
.hero__content{top:0;padding-top:clamp(6rem,14.5vh,9.4rem)}
.hero__content .wrap{display:flex;flex-direction:column;height:100%}
.hero h1{font-size:clamp(3.1rem,6.3vw,6rem);line-height:.84;text-shadow:0 2px 34px rgba(5,7,11,.55)}
.hero__sub{margin-top:auto;max-width:33ch;text-shadow:0 1px 20px rgba(5,7,11,.8)}
.hero__actions{margin-top:1.4rem}
.aube-hint{display:none}
@media(max-width:860px) and (orientation:portrait){
  /* la boussole remonte sous le menu, le titre se pose juste dessous, au-dessus du guidon */
  .aube-cap{top:70px}
  .aube-hd{top:122px}
  .hero__content{padding-top:150px}
  .hero h1{font-size:clamp(2.8rem,13.6vw,4.2rem)}
}

/* ---- Manifeste : la phrase prend toute la largeur, comme une affiche ---- */
.manifeste__quote{font-weight:800;font-size:clamp(2.7rem,8.2vw,8.8rem);line-height:.88;max-width:none;letter-spacing:.004em}
.manifeste__grid h3{font-size:clamp(1.7rem,2.9vw,2.6rem)}

/* ---- Performances : cinq jauges qui montent, avec le ressort de la marque ---- */
.specs h2{font-size:clamp(2.6rem,6vw,5.6rem);max-width:13ch}
.spec-row{position:relative;padding:1.55rem 0}
.spec-row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--v,0) * 100%);background:linear-gradient(90deg,var(--accent),var(--accent-soft));transform:scaleX(0);transform-origin:left}
.js .spec-row.in::after{transform:scaleX(1);transition:transform 1.15s var(--ressort) .18s}
html:not(.js) .spec-row::after{transform:scaleX(1)}
.spec-row dt{font-size:1.0625rem;font-weight:400}
.spec-row dd{font-weight:800;font-size:clamp(2.2rem,4.8vw,4rem)}
.spec-row dd small{font-size:.4em;font-weight:600}
.specs__note{font-size:.875rem}

@media(prefers-reduced-motion:reduce){
  .nav,.btn{transition:none}
  .nav.is-cache{transform:none}
  .spec-row::after{transform:scaleX(1);transition:none}
}