/* ══════════════════════════════════════════════════════════════
   MIP Menuiserie · système de mouvement
   Thèse : le bois se pose, il ne rebondit pas.
   Toute arrivée décélère franchement (ease-out), toute sortie part
   vite (ease-in). Rien n'utilise l'easing par défaut du navigateur,
   qui est symétrique et donne cette impression de surface morte.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Courbes */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);      /* arrivées : décélération nette */
  --ease-glide:    cubic-bezier(.32, .72, 0, 1);     /* glissements, tiroirs, carrousels */
  --ease-in:       cubic-bezier(.4, 0, 1, 1);        /* sorties : on part vite */
  --ease-inout:    cubic-bezier(.65, 0, .35, 1);     /* aller-retour continu uniquement */

  /* Durées : la distance parcourue dicte le temps */
  --t-tap:   120ms;  /* accusé de réception au doigt */
  --t-fast:  180ms;  /* survol, couleur, bordure */
  --t-base:  260ms;  /* changement d'état courant */
  --t-slow:  420ms;  /* superposition, mise en page */
  --t-focal: 680ms;  /* entrée composée, réservée à la vitrine */

  /* Relief : deux couches, une proche et serrée, une lointaine et diffuse */
  --lift-0: 0 1px 2px rgba(15,25,35,.06), 0 2px 8px rgba(15,25,35,.05);
  --lift-1: 0 2px 4px rgba(15,25,35,.08), 0 8px 22px rgba(15,25,35,.10);
  --lift-2: 0 4px 8px rgba(15,25,35,.10), 0 18px 46px rgba(15,25,35,.16);
  --lift-vert: 0 2px 6px rgba(58,107,49,.18), 0 14px 34px rgba(58,107,49,.22);
  --lift-ambre: 0 2px 6px rgba(196,114,42,.20), 0 14px 34px rgba(196,114,42,.24);
}

/* ── Entrée au scroll ──────────────────────────────────────────
   Le flou n'est pas décoratif : il place l'élément derrière le plan
   de netteté, puis le ramène. C'est ce qui crée la profondeur que
   translateY seul ne donne pas.
   Le contenu est visible par défaut : si le script échoue, rien ne
   disparaît. C'est le script qui arme l'animation.
   L'entrée passe par une animation, pas par une transition : une fois
   jouée, elle rend la main, et le survol retrouve sa propre courbe.  */
.js-motion [data-rise]:not(.is-in):not(.is-done){ opacity:0 }

.js-motion [data-rise].is-in{
  animation:mipRise var(--t-focal) var(--ease-out) var(--rise-delay, 0ms) both;
}
@keyframes mipRise{
  from{ opacity:0; transform:translate3d(0, 22px, 0) scale(.985); filter:blur(7px) }
  to  { opacity:1; transform:none;                                 filter:blur(0) }
}

/* Variante latérale, pour ce qui entre depuis un bord */
.js-motion [data-rise="left"].is-in{ animation-name:mipRiseLeft }
.js-motion [data-rise="right"].is-in{ animation-name:mipRiseRight }
@keyframes mipRiseLeft{
  from{ opacity:0; transform:translate3d(-26px, 0, 0) scale(.99); filter:blur(6px) }
  to  { opacity:1; transform:none;                                filter:blur(0) }
}
@keyframes mipRiseRight{
  from{ opacity:0; transform:translate3d(26px, 0, 0) scale(.99); filter:blur(6px) }
  to  { opacity:1; transform:none;                               filter:blur(0) }
}

/* ── Relief des cartes ─────────────────────────────────────────
   L'ombre grandit ET s'éloigne : c'est le décollement qui se lit,
   pas le noircissement.                                          */
.mip-lift{
  box-shadow:var(--lift-0);
  transition:transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out);
}
@media(hover:hover){
  .mip-lift:hover{ transform:translateY(-4px); box-shadow:var(--lift-2) }
}
.mip-lift:active{ transform:translateY(-1px); transition-duration:var(--t-tap) }

/* ── Accusé de réception tactile ───────────────────────────────
   Sur mobile il n'y a pas de survol : l'enfoncement est le seul
   retour possible. Sortie plus lente que l'entrée, sinon ça claque. */
.btn-p, .btn-s, button, .gal-item, .real-card, .zone-tag{
  -webkit-tap-highlight-color:transparent;
}
.btn-p, .btn-s{
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out);
}
.btn-p:active, .btn-s:active{
  transform:scale(.972);
  transition-duration:var(--t-tap);
  transition-timing-function:var(--ease-in);
}
@media(hover:hover){
  .btn-p:hover{ box-shadow:var(--lift-vert) }
  .btn-s:hover{ box-shadow:var(--lift-1) }
}

/* ── Images : le zoom part du centre et décélère longuement ──── */
.gal-item img, .real-card img{
  transition:transform var(--t-slow) var(--ease-out);
}
@media(hover:hover){
  .gal-item:hover img{ transform:scale(1.055) }
}

/* ── Liens de navigation : le trait se déploie depuis la gauche ─ */
.mip-underline{ position:relative }
.mip-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-base) var(--ease-out);
}
@media(hover:hover){ .mip-underline:hover::after{ transform:scaleX(1) } }
.mip-underline:focus-visible::after{ transform:scaleX(1) }

/* ── Focus clavier : visible, et qui arrive ──────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--vert-light);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Respect de la préférence système ──────────────────────────
   On ne supprime pas le contenu, on supprime le déplacement.     */
@media(prefers-reduced-motion:reduce){
  .js-motion [data-rise]{ opacity:1!important }
  .js-motion [data-rise].is-in{ animation:none!important }
  .mip-lift:hover, .btn-p:active, .btn-s:active,
  .gal-item:hover img{ transform:none }
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}