/* ===== Motion layer — principes Emil Kowalski =====
   ease-out fort, UI < 300 ms, entrées éditoriales <= 700 ms,
   jamais d'échelle depuis 0, :active à .97, survols réservés aux pointeurs fins,
   mouvement coupé si prefers-reduced-motion. */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}

/* Progression de lecture : filet aube sous le header */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--arche-aube);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none;will-change:transform}

/* Hero : séquence d'entrée */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slide-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero .meta,.hero .lead,.hero .btn-arche{opacity:0;animation:rise .65s var(--ease-out) forwards;animation-delay:calc(var(--d,0)*70ms + 120ms)}
.hero .eyebrow{--d:0}
.hero .meta{--d:5}
.hero .lead{--d:6}
.hero .d-flex .btn-arche:nth-child(1){--d:7}
.hero .d-flex .btn-arche:nth-child(2){--d:8}
/* titre : mots qui montent dans un masque */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block;transform:translateY(105%);animation:word .7s var(--ease-out) forwards;animation-delay:calc(var(--k)*45ms + 220ms)}
@keyframes word{to{transform:none}}
/* panneau « À suivre » */
.upnext{opacity:0;animation:slide-in .7s var(--ease-out) forwards;animation-delay:.5s}
.upnext a{opacity:0;animation:rise .55s var(--ease-out) forwards;animation-delay:calc(var(--d,0)*70ms + 760ms)}
.upnext a:nth-of-type(1){--d:0}.upnext a:nth-of-type(2){--d:1}.upnext a:nth-of-type(3){--d:2}
/* léger parallaxe sur l'image du hero (wrapper, pas l'img animée) */
.hero-media{transform:translate3d(0,calc(var(--py,0)*1px),0);will-change:transform}

/* Pastille glissante des marques */
.brands-row{position:relative}
.chip-pill{position:absolute;left:0;top:22px;height:44px;border-radius:999px;background:var(--arche-aube);pointer-events:none;transform:translateX(var(--x,0));width:var(--w,0);transition:transform .32s var(--ease-out),width .32s var(--ease-out);opacity:0}
.chip-pill.ready{opacity:1}
.chip{position:relative;z-index:1}
.chip.on{background:transparent;border-color:transparent}
.chip.on.fallback{background:var(--arche-aube);border-color:var(--arche-aube)}

/* Cartes : lecture au survol, élévation, appui */
.th{--ring:0}
.card-v .th::after,.row-card .th::after,.rank .th::after,.pop-top::after{
  content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:var(--arche-aube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%23232323'%3E%3Cpath d='M4.6 3.2v7.6L10.8 7z'/%3E%3C/svg%3E") center/22px no-repeat;
  opacity:0;transform:scale(.9);transition:opacity .2s var(--ease-out),transform .25s var(--ease-out);pointer-events:none}
.rank .th::after{width:36px;height:36px;margin:-18px 0 0 -18px;background-size:14px}
.pop-top::after{width:72px;height:72px;margin:-36px 0 0 -36px;background-size:28px;z-index:3}
@media (hover:hover){
  .card-v:hover .th::after,.row-card:hover .th::after,.rank:hover .th::after,.pop-top:hover::after{opacity:1;transform:none}
  .card-v,.row-card{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
  .card-v:hover,.row-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(35,35,35,.06),0 22px 44px -16px rgba(35,35,35,.22)}
}
.card-v:active,.row-card:active,.rank:active,.feature:active{transform:scale(.985)}
.card-v,.row-card,.rank,.feature{transition-property:transform,box-shadow,padding-left}

/* Images : fondu à l'arrivée, sans saut de mise en page */
img.fade{opacity:0;transition:opacity .4s var(--ease-out),transform .6s var(--ease-out)}
img.fade.loaded{opacity:1}

/* Menu Marques : items en cascade */
.menu.open a{animation:rise .3s var(--ease-out) backwards;animation-delay:calc(var(--m,0)*28ms + 40ms)}

/* Compteurs : chiffres tabulaires pour éviter tout tremblement */
.big-num,.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .read-progress{display:none}
  .hero .eyebrow,.hero .meta,.hero .lead,.hero .btn-arche,.upnext,.upnext a,.hero h1 .w>span{opacity:1!important;transform:none!important;animation:none!important}
  .hero-media{transform:none!important}
  .card-v:hover,.row-card:hover{transform:none}
  img.fade{opacity:1}
}