/* Socle commun aux trois directions : fonts, remise a zero, echelle, motion.
   Ne porte AUCUNE couleur en dur. Tout vient de dwd-tokens.css. */

@font-face{font-family:"Druk Wide Bold";src:url("../fonts/DrukWideBold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"DO Sans";src:url("../fonts/DO-Sans-RegularPRO.woff2") format("woff2");font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:var(--lh-normal);
  transition:background .3s var(--ease), color .3s var(--ease);
}
img{max-width:100%;display:block}
/* L'attribut hidden doit gagner. Sans ca, un composant qui declare display:flex
   ou display:grid ecrase la feuille du navigateur et reste visible tout le temps.
   Vu en vrai le 10/09 sur le panneau de menu mobile de la direction A. */
[hidden]{display:none!important}
::selection{background:var(--amber-soft);color:var(--ink)}

/* Les chiffres sont des chiffres : Archivo, alignes, jamais bancals. */
.num,.price,.stat__n,.step__n{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Kickers et labels : DO Sans, la seule ecriture qui a une voix. */
.label{font-family:var(--hand);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--muted)}

/* Titres : minuscules, point final, Druk Wide. Le board l'exige, G1 et G2 le verifient. */
.display{font-family:var(--disp);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.01em;margin:0;text-transform:none}
.hot{color:var(--amber)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Accessibilite : on saute au contenu, et le focus se voit. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:var(--sp-3) var(--sp-4)}
.skip:focus{left:0}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* La bascule clair/sombre, presente sur les trois directions. */
.themetoggle{
  background:none;border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:var(--fs-sm);cursor:pointer;
  padding:var(--sp-2) var(--sp-3);border-radius:0;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.themetoggle:hover{border-color:var(--line-strong);background:var(--card)}

/* Motion. Rien ne bouge tant que .go n'est pas pose par l'observateur. */
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .rise{opacity:0}
.rise.go{animation:up var(--dur-slow) var(--ease) both;animation-delay:var(--rd,0ms)}
.w{--desc:.42em;display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:var(--desc);margin-bottom:calc(var(--desc) * -1)}
/* Une fois le mot arrive, plus rien n'a besoin d'etre coupe. On ROUVRE la boite :
   tant qu'elle coupe, la moindre descendante ou cedille reste a la merci des
   metriques de la fonte, et Druk Wide descend plus bas que sa boite ne le dit.
   Le creux au-dessus ne sert plus qu'a la duree de l'animation. */
.split.fini .w{overflow:visible}
.js .w>i{transform:translateY(calc(100% + var(--desc)))}
.w>i{display:inline-block;font-style:normal}
.go .w>i,.w.go>i{transition:transform .72s var(--ease);transition-delay:var(--d,0ms);transform:none}
.grow{transform-origin:left}
.js .grow{transform:scaleX(0)}
.grow.go{transition:transform .8s var(--ease);transition-delay:var(--rd,0ms);transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.go{animation:none!important;opacity:1!important}
  .w>i,.go .w>i,.w.go>i{transform:none!important;transition:none!important}
  .grow,.grow.go{transform:none!important;transition:none!important}
  body{transition:none}
}