/* VELOCIA : socle commun aux trois pages (accueil, modèles, essai).
   Un seul jeu de variables, un seul en-tête, un seul pied : le menu ne change plus d'une page à l'autre. */
:root{
  --noir:#07080a; --graphite:#101216; --acier:#2a2e35; --brume:#a3a8ae; --os:#ecebe6; --laser:#e8d5ad;
  --line:rgba(236,235,230,.1); --line-2:rgba(236,235,230,.24);
  --display:'Anybody',system-ui,sans-serif; --sans:'Outfit',system-ui,sans-serif; --mono:'Martian Mono',ui-monospace,monospace;
  /* le mouvement de la marque : entrées sèches, la vitesse plutôt que la douceur */
  --sec:cubic-bezier(.2,.9,.25,1); --glisse:cubic-bezier(.16,1,.3,1); --poussee:cubic-bezier(.7,0,.84,0); --traversee:cubic-bezier(.87,0,.13,1);
  --maxw:1440px; --g:clamp(20px,4.4vw,64px); --nav-h:72px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--acier) var(--noir);scrollbar-width:thin}
body{background:var(--noir);color:var(--os);font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--laser);transition:background-color .6s}
::selection{background:var(--laser);color:var(--noir)}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--laser);outline-offset:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la mono ne sert qu'aux mesures et aux relevés */
.mono{font-family:var(--mono);font-size:.75rem;font-weight:400;font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.5}
/* une phrase entière en mono garde ses minuscules : les capitales sont réservées aux étiquettes courtes */
.mono--phrase{text-transform:none;letter-spacing:.02em}
.disp{font-family:var(--display);font-weight:300;font-variation-settings:'wdth' 112;letter-spacing:-.01em;line-height:.94;text-wrap:balance}
.t1{font-size:clamp(2.6rem,5.6vw,5.75rem)}
.t2{font-size:clamp(2.1rem,4vw,4rem)}
.t3{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.08}
.texte{color:var(--brume);max-width:52ch}
.texte + .texte{margin-top:1em}

/* boutons : un trait laser traverse au survol */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font:500 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border:1px solid rgba(236,235,230,.36);color:var(--os);background:rgba(7,8,10,.28);overflow:hidden;cursor:pointer;transition:background-color .28s,border-color .28s,transform .16s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--laser);box-shadow:0 0 12px 2px rgba(232,213,173,.7);transform:translateX(-4px);opacity:0}
.btn:hover{background:rgba(236,235,230,.08);border-color:rgba(236,235,230,.6)}
.btn:hover::after{animation:laserBtn .32s linear forwards}
.btn:active{transform:scale(.98)}
.btn.plein{background:var(--os);color:var(--noir);border-color:var(--os)}
.btn.plein:hover{background:#fff;border-color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@keyframes laserBtn{0%{opacity:1;transform:translateX(-4px)}100%{opacity:1;transform:translateX(var(--bw,260px))}}
.lien{display:inline-flex;align-items:center;gap:.6em;font:500 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:14px 0;background:none;border:0;cursor:pointer;color:var(--os)}
.lien::after{content:"";width:28px;height:1px;background:var(--laser);transform-origin:left;transition:transform .32s var(--sec)}
.lien:hover::after{transform:scaleX(1.7)}

/* en-tête : transparent, il s'efface en descendant et revient dès qu'on remonte */
.tete{position:fixed;top:0;left:0;right:0;z-index:60;transition:transform .42s var(--sec)}
.tete::before{content:"";position:absolute;inset:0 0 -34px;background:linear-gradient(rgba(7,8,10,.82),rgba(7,8,10,.5) 55%,transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.tete.pose::before{opacity:1}
.tete.cache{transform:translateY(calc(-100% - 34px))}
.tete nav{position:relative;display:flex;align-items:center;height:var(--nav-h);gap:clamp(18px,3vw,44px)}
.brand{font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 150;letter-spacing:.18em;font-size:1.0625rem;line-height:1;padding:12px 0}
.navlinks{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center;margin-right:auto}
.navlinks a{position:relative;font-size:.9375rem;color:var(--brume);padding:12px 0;transition:color .25s}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--laser);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--sec)}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--os)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
.nav-cta{min-height:44px;padding:0 20px;font-size:.75rem}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;min-height:44px;padding:0 0 0 14px;font:400 .75rem var(--mono);font-stretch:80%;letter-spacing:.12em;text-transform:uppercase}

/* son : coupé par défaut, quatre barres qui dansent quand il est actif */
.son{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;background:none;border:1px solid var(--line-2);cursor:pointer;font:400 .6875rem var(--mono);font-stretch:80%;letter-spacing:.12em;text-transform:uppercase;transition:border-color .3s,color .3s}
.son:hover,.son[aria-pressed="true"]{border-color:var(--laser);color:var(--laser)}
.son__b{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.son__b i{width:2px;height:12px;background:currentColor;transform:scaleY(.25);transform-origin:bottom}
.son[aria-pressed="true"] .son__b i{animation:sonb .9s ease-in-out infinite alternate}
.son[aria-pressed="true"] .son__b i:nth-child(2){animation-delay:-.3s}.son[aria-pressed="true"] .son__b i:nth-child(3){animation-delay:-.6s}.son[aria-pressed="true"] .son__b i:nth-child(4){animation-delay:-.45s}
@keyframes sonb{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* menu plein écran (téléphone) : la nappe laser l'ouvre de gauche à droite */
.menu{position:fixed;inset:0;z-index:58;background:var(--noir);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 28px) var(--g) 32px;clip-path:inset(0 100% 0 0);visibility:hidden;transition:clip-path .5s var(--traversee),visibility 0s .5s}
.menu.ouvert{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--traversee)}
.menu::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--laser);box-shadow:0 0 18px 4px rgba(232,213,173,.55)}
.menu ul{list-style:none;display:flex;flex-direction:column}
.menu li{border-bottom:1px solid var(--line)}
.menu li a{display:block;padding:18px 0;font-family:var(--display);font-weight:300;font-variation-settings:'wdth' 112;font-size:clamp(2rem,9.4vw,3rem);line-height:1;letter-spacing:-.01em;opacity:0;transform:translateX(-18px);transition:opacity .4s var(--sec),transform .4s var(--sec)}
.menu.ouvert li a{opacity:1;transform:none;transition-delay:calc(.22s + var(--i,0) * 50ms)}
.menu li a[aria-current]{color:var(--laser)}
.menu__bas{display:flex;flex-direction:column;gap:18px}
.menu__bas .btn{width:100%}
.menu__bas p{color:var(--brume);font-size:.9375rem}

/* pied de page : le nom s'étire quand la page défile */
.pied{position:relative;background:var(--graphite);padding:clamp(64px,10vh,120px) 0 28px;overflow:hidden}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.6fr));gap:clamp(32px,5vw,80px)}
.pied__mot{max-width:30ch}
.pied__mot p{color:var(--brume);margin-top:18px}
.pied__mot .btn{margin-top:28px}
.pied h2{font:400 .75rem var(--mono);font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;color:var(--brume);margin-bottom:16px}
.pied li{list-style:none}
.pied li a{display:inline-block;padding:7px 0;color:var(--os);font-size:.9375rem;transition:color .2s}
.pied li a:hover{color:var(--laser)}
.pied__nom{display:flex;justify-content:center;margin-top:clamp(56px,9vh,110px);font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,17.4vw,17rem);line-height:.8;letter-spacing:.02em;white-space:nowrap;font-variation-settings:'wdth' var(--w,104);color:rgba(236,235,230,.09);user-select:none}
.pied__bas{margin-top:28px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;color:var(--brume);font-size:.875rem}
.pied__bas a{color:var(--os);border-bottom:1px solid var(--line-2);transition:border-color .2s}
.pied__bas a:hover{border-color:var(--laser)}

/* entrées : chaque ligne de titre est découpée par la nappe, de gauche à droite */
.js [data-coupe]{visibility:hidden}
.js [data-coupe].pret{visibility:visible}
.cl{display:block;position:relative;white-space:nowrap;clip-path:inset(-.14em 101% -.22em 0)}
.cl::after{content:"";position:absolute;top:-.06em;bottom:-.1em;left:0;width:2px;background:var(--laser);box-shadow:0 0 14px 2px rgba(232,213,173,.7);opacity:0;pointer-events:none}
.vu .cl,.cl.vu{clip-path:inset(-.14em -1% -.22em 0);transition:clip-path .52s var(--sec) calc(var(--li,0) * 80ms)}
.vu .cl::after,.cl.vu::after{animation:nappe .52s var(--sec) calc(var(--li,0) * 80ms) both}
@keyframes nappe{0%{transform:translateX(0);opacity:1}86%{opacity:1}100%{transform:translateX(var(--lw,100%));opacity:0}}
.js [data-vent]{opacity:0;transform:translateX(-14px)}
.js [data-vent].vu{opacity:1;transform:none;transition:opacity .42s var(--sec) var(--d,0s),transform .42s var(--sec) var(--d,0s)}

/* transitions entre pages (navigateurs compatibles) : la nouvelle page est découpée par la nappe laser */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .7s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:vt-cut .9s cubic-bezier(.65,0,.35,1) both}
@keyframes vt-out{to{opacity:.35;transform:scale(.985)}}
@keyframes vt-cut{from{clip-path:inset(0 100% 0 0);filter:brightness(1.6)}to{clip-path:inset(0 0 0 0);filter:none}}

@media(max-width:900px){
  .navlinks,.nav-cta{display:none}
  .burger{display:block}
  .son{margin-left:auto;padding:0 12px}
  .son ~ .burger{margin-left:0}
  .son__t{display:none}
  .pied__haut{grid-template-columns:1fr 1fr}
  .pied__mot{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s!important;animation:none!important;transition-delay:0s!important}
  .js [data-coupe]{visibility:visible}
  .cl{clip-path:none}
  .js [data-vent]{opacity:1;transform:none}
  .tete.cache{transform:none}
  .son[aria-pressed="true"] .son__b i{transform:scaleY(.7)}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}