/* GUTE AUTOS — couche « mouvement » (additive, chargée après site.css).
   Principes : uniquement transform / opacity / clip (aucun décalage de mise en page, CLS = 0) ;
   rien n'est masqué sans JavaScript ; tout est neutralisé par prefers-reduced-motion ;
   les effets liés au défilement utilisent les animations CSS pilotées par le scroll quand le navigateur les gère,
   sinon l'état final s'affiche directement. Même vocabulaire que le motif : on trace, on gare, on éclaire. */

/* ── 0. Typographie : titres équilibrés, pas de veuve dans les paragraphes ── */
h2,h3,.sec-intro,.side-h{text-wrap:balance}
.prose p,.answer p,.check-item p,.trust-item p,.hero-lead{text-wrap:pretty}
::selection{background:#C0392B;color:#fff}

/* ── 1. Transitions entre pages (fondu enchaîné, l'en-tête reste en place) ── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (prefers-reduced-motion:no-preference){
  .site-head{view-transition-name:ga-head}
  .actionbar{view-transition-name:ga-bar}
  ::view-transition-old(root){animation:mo-vt-out .16s ease both}
  ::view-transition-new(root){animation:mo-vt-in .42s cubic-bezier(.2,.7,.2,1) both}
  ::view-transition-group(ga-head),::view-transition-group(ga-bar){animation-duration:0s}
}
@keyframes mo-vt-out{to{opacity:0}}
@keyframes mo-vt-in{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:no-preference){

/* ── 2. Révélations au défilement (classes posées par motion.js, seulement sous la ligne de flottaison) ── */
.mo-r{opacity:0;transform:translateY(26px)}
.mo-r.mo-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms)}
/* la fiche « dossier » se pose comme une feuille sur la table */
.mo-r.mo-sheet{transform:translateY(46px) rotate(-2.2deg);transform-origin:20% 100%}
.mo-r.mo-sheet.mo-in{transform:none;transition-duration:.8s,1.2s}
/* titres de section : le texte monte derrière un cache (le cache est sur l'enveloppe interne, le titre reste observable) */
.mo-r.mo-title{opacity:1;transform:none}
.mo-r.mo-title>.mo-t{display:block;clip-path:inset(0 -1em 100% -1em);transform:translateY(.55em)}
.mo-r.mo-title.mo-in>.mo-t{clip-path:inset(-.2em -1em -.25em -1em);transform:none;
  transition:clip-path .95s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms),transform 1.05s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms)}
/* grands chiffres 01 / 02 / 03 */
.mo-r.mo-num{opacity:1;transform:none}
.mo-r.mo-num b{display:inline-block;clip-path:inset(0 0 100% 0);transform:translateY(.28em)}
.mo-r.mo-num.mo-in b{clip-path:inset(-.1em);transform:none;
  transition:clip-path 1s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms)}
/* prix : compteur (motion.js) + filet rouge qui se trace */
.mo-count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}

/* ── 3. Héros de l'accueil : choc, puis profondeur au pointeur et au défilement ── */
.ga-scene--hero .ga-zone{animation:mo-zone .9s steps(1,end) 1.75s backwards}
.ga-scene--hero .ga-car{animation:ga-roll 1.9s cubic-bezier(.3,.6,.2,1) .15s backwards,mo-jolt .5s cubic-bezier(.3,.7,.3,1) 2.06s}
.mo .hero-plate .ga-scene{scale:1.045;translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -7px);transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.mo .hero-plate .ga-old{translate:calc(var(--mx,0) * 9px) calc(var(--my,0) * 5px);transition:translate 1.2s cubic-bezier(.2,.7,.2,1)}
@supports (animation-timeline:scroll()){
  .hero-plate .ga-scene{animation:mo-hero-scroll linear both;animation-timeline:scroll(root);animation-range:0 720px}
}

/* ── 4. Cartes « dernières affaires » et tuiles : la zone de choc s'allume au survol ── */
.offre-card .ga-zone,.tile .ga-zone{transition:opacity .3s}
.offre-card:hover .ga-zone,.tile:hover .ga-zone{animation:mo-pulse 1.1s ease-in-out infinite}
.offre-card{transition:border-color .25s,box-shadow .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.offre-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -24px rgba(30,27,24,.55)}}

/* ── 5. Bandeau sombre « Membres fondateurs » : les véhicules se garent, le projecteur trouve le lot ── */
@supports (animation-timeline:view()){
  .auction{view-timeline-name:--ga-auc;view-timeline-axis:block}
  .ga-scene--night>g:not(.ga-bays) .ga-car{animation:mo-park linear both;animation-timeline:--ga-auc;animation-range:entry 0% cover 18%}
  .ga-scene--night>g:nth-of-type(3) .ga-car{animation-range:entry 8% cover 21%}
  .ga-scene--night>g:nth-of-type(4) .ga-car{animation-range:entry 16% cover 24%}
  .ga-scene--night>g:nth-of-type(5) .ga-car{animation-range:entry 24% cover 27%}
  .ga-scene--night>g:nth-of-type(6) .ga-car{animation-range:entry 32% cover 30%}
  .ga-scene--night>g:nth-of-type(7) .ga-car{animation-range:entry 40% cover 33%}
  .ga-scene--night .ga-spot{animation:mo-spot linear both;animation-timeline:--ga-auc;animation-range:cover 14% cover 34%}
  .ga-scene--night .is-lot .ga-zone{animation:mo-lot linear both;animation-timeline:--ga-auc;animation-range:cover 33% cover 40%}
}

/* ── 6. Pages de contenu : barre de lecture, photo qui se pose, sommaire actif ── */
@supports (animation-timeline:scroll()){
  body:has(.prose) .site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);
    transform-origin:0 50%;transform:scaleX(0);animation:mo-progress linear both;animation-timeline:scroll(root)}
  .site-head{animation:mo-head linear both;animation-timeline:scroll(root);animation-range:0 140px}
}
.hero-photo img{animation:mo-photo 1.5s cubic-bezier(.2,.7,.2,1) backwards}

/* ── 7. Questions / étapes : ouverture fluide ── */
@supports (interpolate-size:allow-keywords){
  .faq details,.proc-step details{interpolate-size:allow-keywords}
  .faq details::details-content,.proc-step details::details-content{block-size:0;overflow:clip;
    transition:block-size .38s cubic-bezier(.2,.7,.2,1),content-visibility .38s allow-discrete}
  .faq details[open]::details-content,.proc-step details[open]::details-content{block-size:auto}
}

/* ── 8. Boutons : l'encre gagne le bouton de gauche à droite ── */
.btn.btn-red{background-image:linear-gradient(var(--red-ink),var(--red-ink));background-repeat:no-repeat;background-size:0 100%;
  transition:background-size .42s cubic-bezier(.2,.7,.2,1),border-color .18s,color .18s}
.btn.btn-red:hover{background-color:var(--red);background-size:100% 100%}
.btn:active{transform:translateY(1px) scale(.985)}
}

/* sommaire actif : repère de lecture, conservé même en mouvement réduit */
.toc a.is-here{color:var(--ink);font-weight:600}
.toc a{position:relative}
.toc a.is-here::after{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:2px;background:var(--red)}
@media (max-width:1099px){.toc a.is-here::after{display:none}}

/* ── 9. Confort tactile (WCAG 2.2, cible ≥ 24 px) : liens du pied de page et du fil d'Ariane sur écran tactile ── */
@media (pointer:coarse){
  .foot-cols a,.bc a{display:inline-block;padding-block:4px;min-height:24px}
}

@keyframes mo-zone{0%{opacity:0}35%{opacity:1}50%{opacity:.25}65%{opacity:1}100%{opacity:1}}
@keyframes mo-jolt{0%{transform:none}22%{transform:translateX(-5px) rotate(-.7deg)}55%{transform:translateX(1.5px) rotate(.25deg)}100%{transform:none}}
@keyframes mo-hero-scroll{to{transform:translateY(46px) scale(1.07)}}
@keyframes mo-pulse{50%{opacity:.45}}
@keyframes mo-park{from{transform:translateX(-150px);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
@keyframes mo-spot{from{transform:translateX(-345px);opacity:0}25%{opacity:.9}to{transform:none;opacity:.9}}
@keyframes mo-lot{from{opacity:0}to{opacity:1}}
@keyframes mo-progress{to{transform:scaleX(1)}}
@keyframes mo-head{to{box-shadow:0 10px 30px -22px rgba(30,27,24,.55)}}
@keyframes mo-photo{from{transform:scale(1.09)}}