/* Pontis v2 · motion.css : système de mouvement unique + révélations + en-tête + compteurs.
   Jetons (utilisés partout ; seules les boucles de chorégraphie décoratives gardent leurs durées propres) :
   courbes --ease-out / --ease-in-out / --spring ; durées --d-fast 160 / --d-base 280 / --d-slow 520 / --d-xslow 900 ms.
   Uniquement transform + opacity. motion.js se charge dans <head> SANS defer (classe html.m-on avant le premier rendu). */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:160ms;--d-base:280ms;--d-slow:520ms;--d-xslow:900ms;--mx:1}
[dir="rtl"]{--mx:-1}
[dir="ltr"]{--mx:1}

/* Révélation : l'état de départ n'existe que si le JS est actif (html.m-on) */
html.m-on [data-anim]{opacity:0;transition:opacity var(--d-xslow) var(--ease-out),transform var(--d-xslow) var(--ease-out);transition-delay:var(--m-delay,0s)}
html.m-on [data-anim="fade-up"]{transform:translate3d(0,32px,0)}
html.m-on [data-anim="scale"]{transform:scale(.94)}
html.m-on [data-anim="slide-start"]{transform:translate3d(calc(var(--mx) * -48px),0,0)}
html.m-on [data-anim="slide-end"]{transform:translate3d(calc(var(--mx) * 48px),0,0)}
html.m-on [data-anim].is-in{opacity:1;transform:none}

[data-count]{font-variant-numeric:tabular-nums;white-space:nowrap}

/* En-tête qui se resserre : logo réduit, ombre qui apparaît (transform + opacity seulement) */
.entete,[data-shrink]{--m-ox:0%}
[dir="rtl"] .entete,[dir="rtl"] [data-shrink]{--m-ox:100%}
.entete::after,[data-shrink]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;box-shadow:0 10px 28px rgba(20,22,61,.14);opacity:0;transition:opacity var(--d-base) var(--ease-out)}
.entete .marque img,[data-shrink] .marque img{transform-origin:var(--m-ox) 50%;transition:transform var(--d-base) var(--ease-out)}
.entete .langue,[data-shrink] .langue{transition:transform var(--d-base) var(--ease-out),border-color var(--d-fast),color var(--d-fast)}
.entete.is-shrunk::after,[data-shrink].is-shrunk::after{opacity:1}
.entete.is-shrunk .marque img,[data-shrink].is-shrunk .marque img{transform:scale(.8)}
.entete.is-shrunk .langue,[data-shrink].is-shrunk .langue{transform:scale(.92)}

/* Composants montés par data-motion-src : la hauteur est réservée par data-reserve (px) pour éviter tout saut */
[data-motion-src]{contain:layout style}

/* Boutons : retour doux au survol, légère compression à l'appui */
.btn{transition:transform var(--d-fast) var(--ease-out),background-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
.btn:active{transform:scale(.97)}

/* Mode faible puissance (posé par motion.js si < 40 i/s pendant 2 s) : on garde les fondus */
.m-lowpower [data-parallax]{translate:none!important}

@media (prefers-reduced-motion:reduce){
  html.m-on [data-anim]{transform:none!important;transition:opacity var(--d-slow) linear!important;transition-delay:0s!important}
  html.m-on [data-anim].is-in{opacity:1}
  .entete .marque img,.entete .langue,[data-shrink] .marque img,[data-shrink] .langue{transform:none!important;transition:none!important}
  [data-parallax]{translate:none!important}
  .btn:active{transform:none}
}
@media print{html.m-on [data-anim]{opacity:1!important;transform:none!important}}
