/* motion.css — surcharges de mouvement (chargé après toutes les autres feuilles).
   Easing maison : var(--lent) = cubic-bezier(.16,1,.3,1). Tout est coupé sous prefers-reduced-motion. */

:root { --d-micro: .2s; --d-btn: .55s; --d-ui: .45s; }
@media (pointer: coarse) { :root { --d-btn: .35s; --d-ui: .3s; } }

/* ---------- global ---------- */
a, button { transition-property: color, background-color, border-color, opacity, transform; transition-duration: .3s; transition-timing-function: var(--lent); }
:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; border-radius: 1px; }
.btn:focus-visible { outline-offset: 3px; }
::selection { background: var(--oro); color: var(--tinta); }
html { scrollbar-width: thin; scrollbar-color: rgba(18, 18, 18, .35) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(18, 18, 18, .3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--oro); }

/* ---------- boutons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--d-btn) var(--lent), color var(--d-btn) var(--lent), border-color var(--d-btn) var(--lent), transform var(--d-micro) var(--lent); will-change: transform; }
.btn:active { transform: scale(.98); }
[data-magnetic].btn:active { transform: scale(.98) translate(var(--mx, 0), var(--my, 0)); }
.btn__txt { position: relative; display: block; overflow: hidden; padding: .12em 0; margin: -.12em 0; }
.btn__l { display: block; transition: transform var(--d-btn) var(--lent); will-change: transform; }
.btn__l--double { position: absolute; inset: 0; padding: .12em 0; transform: translateY(115%); }
.btn__fleche { display: inline-block; font-family: var(--display); font-size: 1.25em; line-height: 0; letter-spacing: 0; max-width: 0; margin-left: -.75em; opacity: 0; transform: translateX(-.4em); transition: max-width var(--d-btn) var(--lent), margin-left var(--d-btn) var(--lent), opacity var(--d-btn) var(--lent), transform var(--d-btn) var(--lent); overflow: hidden; white-space: nowrap; }

/* plein : fond d'or qui monte, texte en double couche */
.btn--plein::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--oro); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--d-btn) var(--lent); will-change: transform; }
.btn--plein.btn--creme::before { background: var(--oro-clair); }
.btn--plein:hover, .btn--plein.btn--creme:hover { background: var(--tinta); border-color: var(--tinta); color: var(--tinta); transition-delay: 0s, .12s, 0s; }
.btn--plein.btn--creme:hover { background: var(--papel); border-color: var(--papel); }
.btn--plein.is-added, .btn--plein.is-added:hover, .btn--plein.is-loading { background: var(--tinta); border-color: var(--oro); color: var(--tinta); }
.btn--plein.is-added::before, .btn--plein.is-loading::before { transform: scaleY(1); }
.btn.btn--plein.is-loading, .btn.btn--plein.is-loading:hover { color: var(--papel); transition: none; }
.btn.btn--plein.btn--creme.is-loading, .btn.btn--plein.btn--creme.is-loading:hover { color: var(--tinta); }
.btn--plein.is-loading::before { transform: scaleY(0); }

/* fantôme : bordure dessinée depuis les coins, puis fond encre */
.btn--fantome { --btn-trait: var(--tinta); --btn-inverse: var(--papel); border-color: rgba(18, 18, 18, .35); transition: background-color .35s var(--lent) .22s, color .35s var(--lent) .22s, border-color var(--d-btn) var(--lent), transform var(--d-micro) var(--lent); }
.btn--fantome.btn--clair { --btn-trait: var(--papel); --btn-inverse: var(--tinta); border-color: rgba(246, 241, 234, .45); }
.btn--fantome::before, .btn--fantome::after { content: ''; position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; border: 0 solid var(--btn-trait); transition: width var(--d-btn) var(--lent), height var(--d-btn) var(--lent), opacity .01s linear var(--d-btn); }
.btn--fantome::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.btn--fantome::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.btn--fantome:hover { background: var(--btn-trait); color: var(--btn-inverse); border-color: var(--btn-trait); }
.btn--fantome:hover::before, .btn--fantome:hover::after { width: calc(100% + 2px); height: calc(100% + 2px); opacity: 1; transition: width var(--d-btn) var(--lent), height var(--d-btn) var(--lent), opacity .01s linear; }

/* survol : glissement du texte, flèche */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__l { transform: translateY(-115%); }
  .btn:hover .btn__l--double { transform: translateY(0); }
  .btn:hover .btn__fleche { max-width: 1.5em; margin-left: 0; opacity: 1; transform: translateX(0); }
  .btn--plein:hover::before { transform: scaleY(1); }
  .btn.is-added .btn__l, .btn.is-loading .btn__l { transform: none; }
}

/* chargement : trait d'or qui court ; ajouté : coche dessinée */
.btn.is-loading, .lien.is-loading { pointer-events: none; }
.btn__chargeur { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.btn__chargeur::after { content: ''; position: absolute; inset: 0; background: var(--oro); transform: translateX(-100%); animation: btn-trait .5s var(--lent) infinite; }
@keyframes btn-trait { to { transform: translateX(100%); } }
.lien .btn__chargeur { bottom: calc((44px - 1.4 * var(--fs-libelle)) / 2 - .25em); height: 1px; }
.btn__coche { display: inline-block; width: 1.1em; height: 1.1em; margin-left: .5em; vertical-align: -.2em; }
.btn__coche path { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: coche .5s var(--lent) .05s forwards; }
@keyframes coche { to { stroke-dashoffset: 0; } }
.btn.is-added, .btn.is-added:hover { color: var(--tinta); }

/* ---------- liens soulignés : sort à droite, se redessine depuis la gauche ---------- */
@media (hover: hover) and (pointer: fine) {
  .lien--souligne:hover::after { transform: scaleX(1); transform-origin: left; animation: trait-redessine .9s var(--lent) both; }
  @keyframes trait-redessine {
    0% { transform: scaleX(1); transform-origin: right; }
    45% { transform: scaleX(0); transform-origin: right; }
    46% { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
  }
  .entete__liste a::after { height: 1px; background: var(--oro); }
  .carte__nom a { background-image: linear-gradient(var(--oro), var(--oro)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size .55s var(--lent), color .3s; }
  .carte:hover .carte__nom a, .carte__nom a:hover { background-size: 100% 1px; }
}

/* ---------- en-tête : masquage, progression ---------- */
.entete { transition: background-color .5s var(--lent), box-shadow .5s var(--lent), color .3s, transform var(--d-ui) var(--lent); will-change: transform; }
.entete.is-hidden { transform: translateY(-100%); }
.progression { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 2; }
.entete.is-scrolled .progression { opacity: 1; }
.entete__compte { display: inline-block; will-change: transform; }

/* ---------- remonter ---------- */
.remonter { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 120; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--trait-fort); background: rgba(246, 241, 234, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--tinta); font-family: var(--display); font-size: 1.1rem; line-height: 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--lent), transform .45s var(--lent), visibility 0s linear .45s, border-color .3s, color .3s; }
.remonter.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.remonter:hover { border-color: var(--oro); color: var(--oro); }
.remonter svg { width: 16px; height: 16px; }
.toasts:not(:empty) ~ .remonter { bottom: max(1.25rem, env(safe-area-inset-bottom)); }

/* ---------- toast panier ---------- */
.toasts { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(5rem, calc(env(safe-area-inset-bottom) + 5rem)); z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; pointer-events: none; max-width: min(100% - 2rem, 24rem); }
.toast { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; width: min(100vw - 2rem, 24rem); padding: .75rem; background: var(--papel); color: var(--tinta); border: 1px solid var(--trait); box-shadow: 0 18px 50px rgba(18, 18, 18, .14); pointer-events: auto; opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.toast__img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--arena); display: block; }
.toast__nom { display: block; font-family: var(--display); font-size: 1.0625rem; line-height: 1.2; }
.toast__prix { display: block; font-size: .8125rem; color: var(--mute); margin-top: .15rem; }
.toast__lien { display: inline-block; margin-top: .4rem; font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); min-height: 0; padding: 0; position: relative; }
.toast__lien::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.25em; height: 1px; background: var(--oro); transform: scaleX(1); transform-origin: left; transition: transform .5s var(--lent); }
.toast__lien:hover { color: var(--oro); }
.toast__fermer { width: 32px; height: 32px; display: grid; place-items: center; color: var(--mute); align-self: start; }
.toast__fermer:hover { color: var(--tinta); }
.toast__fermer svg { width: 12px; height: 12px; }
.toast__barre { grid-column: 1 / -1; height: 1px; background: var(--oro); transform-origin: left; transform: scaleX(1); margin: .25rem -.75rem -.75rem; }
@media (max-width: 639px) { .toasts { left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); max-width: none; align-items: stretch; bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 4.5rem)); } .toast { width: auto; } }

/* ---------- cartes ---------- */
.carte__img { transition: opacity .7s var(--lent), transform 1.2s var(--lent); }
.carte__cadre { transition: transform var(--d-micro) var(--lent); }
@media (hover: hover) and (pointer: fine) {
  .carte:hover .carte__img--base { transform: scale(1.06); }
  .carte:hover .carte__img--survol { transform: scale(1.06); }
  .carte__actions { transform: translateY(8px); opacity: 0; transition: transform .55s var(--lent), opacity .55s var(--lent); }
  .carte:hover .carte__actions, .carte:focus-within .carte__actions { transform: none; opacity: 1; }
  .carte__coeur { transform: translateY(8px); }
  .carte:hover .carte__coeur, .carte:focus-within .carte__coeur { opacity: 1; transform: none; }
  .carte__coeur[aria-pressed="true"] { transform: none; }
}
@media (hover: none) {
  .carte__actions { opacity: 1; transform: none; }
  .carte:active .carte__cadre { transform: scale(.985); }
}
.carte__coeur svg { transition: transform .5s var(--lent); }
.carte__coeur[aria-pressed="true"] svg { animation: coeur-rebond .55s var(--lent); }
.carte__coeur[aria-pressed="true"] svg path { fill: currentColor; }
@keyframes coeur-rebond { 0% { transform: scale(.7); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- accordéons ---------- */
.accordeon__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--lent); }
.accordeon__corps > div { overflow: hidden; min-height: 0; }
.accordeon[open] .accordeon__corps { grid-template-rows: 1fr; }
.accordeon__corps > div > :first-child { transform: translateY(6px); opacity: 0; transition: transform .5s var(--lent) .1s, opacity .5s var(--lent) .1s; }
.accordeon[open] .accordeon__corps > div > :first-child { transform: none; opacity: 1; }
.accordeon summary::after, .faq__item summary::after { transition: transform .5s var(--lent); }

/* ---------- champs ---------- */
.champ input, .champ textarea, .news__input { background-image: linear-gradient(var(--oro), var(--oro)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: border-color .3s, box-shadow .3s, background-color .3s, background-size .55s var(--lent); }
.champ input:focus, .champ textarea:focus, .news__input:focus { background-color: #fff; background-image: linear-gradient(var(--oro), var(--oro)); background-size: 100% 2px; box-shadow: none; border-color: var(--trait-fort); }
.champ:focus-within label { color: var(--oro); transition: color .3s; }

/* ---------- marquee : géré par GSAP (ralenti au survol) ---------- */
.marquee.is-gsap .marquee__piste { animation: none; }

/* ---------- recherche ---------- */
.resultat { will-change: transform, opacity; }

/* ---------- curseur : états ---------- */
.curseur.is-add, .curseur.is-drag, .curseur.is-close { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.curseur.is-add .curseur__mot, .curseur.is-drag .curseur__mot, .curseur.is-close .curseur__mot { opacity: 1; transition-delay: .15s; }
.curseur.is-drag .curseur__mot, .curseur.is-close .curseur__mot { font-style: normal; font-size: 1.25rem; }

/* ---------- mobile : pas de filtres animés, transitions courtes ---------- */
@media (pointer: coarse) {
  .btn__l, .btn__fleche, .carte__img { will-change: auto; }
  .remonter { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--papel); }
}

/* ---------- reduced motion : tout visible, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after, .btn__l, .btn__fleche, .lien--souligne::after, .carte__img, .carte__actions, .carte__coeur, .entete, .progression, .remonter, .toast, .accordeon__corps, .accordeon__corps > div > :first-child, .champ input, .champ textarea, .news__input { transition: none !important; animation: none !important; }
  .btn:hover .btn__l { transform: none; }
  .btn:hover .btn__l--double { transform: translateY(115%); }
  .btn--plein:hover { background: var(--oro); }
  .btn--plein::before { display: none; }
  .carte__actions, .carte__coeur { opacity: 1; transform: none; }
  .toast { opacity: 1; transform: none; }
  .btn__coche path { stroke-dashoffset: 0; }
  .entete.is-hidden { transform: none; }
}