/* 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}
/* petit écran : pas de glissement latéral (il dépasserait la marge de 20 px et élargirait la page) */
@media (max-width:700px){html.m-on [data-anim="slide-start"],html.m-on [data-anim="slide-end"]{transform:translate3d(0,24px,0)}}

[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:var(--ombre-haute);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}

/* Les !important de ce fichier sont tous justifiés : mouvement réduit, pause des animations (pause.js, WCAG 2.2.2) et impression doivent l'emporter sur les styles que motion.js
   pose en ligne (transform, opacité, délai) et sur les états de révélation. Aucune valeur de mouvement n'est modifiée par le lot U8. */
@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}}

/* Pause des animations (pause.js pose html.m-paused) : mêmes garanties que le mouvement réduit, et tout le contenu est affiché d'emblée
   (rien ne dépend ni d'un défilement ni d'un observateur pour devenir lisible) */
html.m-paused.m-on [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
html.m-paused .entete .marque img,html.m-paused .entete .langue,html.m-paused [data-shrink] .marque img,html.m-paused [data-shrink] .langue{transform:none!important;transition:none!important}
html.m-paused [data-parallax]{translate:none!important}
html.m-paused .btn:active{transform:none}