/* ============================================================================
   LA CARTE DE SORTIE D UN RAIL — « la pile »
   Composant autonome : il ne connait ni la rangee ni la vitrine. Sa largeur et sa
   hauteur viennent du rail qui l accueille (`flex` du conteneur), jamais d ici — c est
   ce qui lui permet de servir dans plusieurs carrousels.
   ============================================================================ */

.dsx{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink);color:#fff;text-decoration:none;isolation:isolate;
  -webkit-tap-highlight-color:transparent}
.dsx:focus-visible{outline:3px solid var(--volt);outline-offset:-3px}

/* ---------- LA GRILLE DE COULEURS ----------
   Les pastilles etaient d abord EMPILEES et pivotees, facon paquet de cartes qui s evente.
   Sur fond encre, quatre teintes sombres du rayon Asics (#57636E #614C49 #424735 #6E505C)
   se rejoignaient en bouillie : impossible de compter les couleurs, donc impossible de
   comprendre ce que la carte raconte. Posees en grille, espacees, cernees d un filet
   clair, l encre passe entre elles et chaque teinte se lit. */
/* `align-content:stretch` ET PAS `center` : la cellule d une vitrine fait 240 x 570, celle
   d un rail de telephone 249 x 497. A pastilles carrees, la grille flottait au milieu de
   80 px de vide en haut et en bas sur la premiere — elle avait l air posee par accident.
   En remplissant, les pastilles deviennent des rectangles qui epousent la cellule quelle
   qu elle soit : c est ce qui permet au meme composant de servir dans deux rails de
   proportions differentes sans regle par emplacement. */
.dsx-deck{position:relative;flex:1 1 auto;min-height:0;padding:18px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-content:stretch}
.dsx-deck b{display:block;min-height:0;background:var(--c);
  border:1px solid rgba(255,255,255,.16)}

/* ---------- LE PIED ----------
   Aplat PLEIN, jamais un degrade : le titre ne depend pas de ce qui se trouve derriere lui.
   Un scrim laisse la lisibilite a la merci de la teinte de la derniere pastille. */
.dsx-pied{flex:none;background:var(--ink);padding:16px 18px 20px;
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column}
.dsx-k{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
/* `word-spacing` EST NECESSAIRE : en capitales serrees Clash avale l espace et
   « Le rayon Salomon » se lit « LERAYONSALOMON ». */
.dsx-t{font-family:var(--display);text-transform:uppercase;font-size:clamp(21px,5.6vw,28px);
  line-height:.98;color:var(--volt);word-spacing:.14em;margin-top:8px}
.dsx-b{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.dsx-n{font-family:var(--body);font-size:13px;color:var(--mute)}
.dsx-b svg{flex:none;color:var(--volt);transition:transform .3s var(--ease)}
.dsx:hover .dsx-b svg,.dsx:focus-visible .dsx-b svg{transform:translateX(6px)}

/* ---------- LE REPLI, SANS GRILLE ----------
   Sous 6 couleurs. Ce n est pas une carte degradee : le compte prend la place de la grille
   et porte la promesse a sa place. Une case creuse serait pire que pas de carte du tout. */
.dsx--nu .dsx-pied{flex:1 1 auto;justify-content:flex-end;border-top:0;padding-top:22px}
.dsx--nu .dsx-gros{font-family:var(--display);color:var(--volt);line-height:.82;
  font-size:clamp(48px,15vw,86px);font-variant-numeric:tabular-nums;margin-top:auto}
.dsx--nu .dsx-t{color:#fff;font-size:clamp(19px,4.8vw,24px);margin-top:14px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}

/* ---------- L ARRIVEE ----------
   Elle se joue quand la carte ENTRE DANS LE RAIL, pas au survol : cette carte vit sur
   telephone, ou le survol n existe pas. `dsx-js` est pose par ds-home.js — sans JS, sans
   IntersectionObserver, ou si le script tombe, les pastilles sont a leur place d emblee.
   L etat par defaut est donc VISIBLE, jamais masque. */
.dsx-js .dsx-deck b{opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.55);
  transition:transform .74s var(--ease) var(--d), opacity .34s linear var(--d)}
.dsx-js .dsx.is-in .dsx-deck b{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .dsx-js .dsx-deck b{opacity:1;transform:none;transition:none}
  .dsx-b svg{transition:none}
}