/* Mouvement : peu, lent, utile. Sortie douce façon Apple, jamais de rebond, rien qui bouge en boucle.
   Tout est coupé si le visiteur demande moins d'animation (prefers-reduced-motion). Spec : charte/mouvement.md */
:root { --sg-ease: cubic-bezier(.22, .61, .36, 1); --sg-m: 320ms; --sg-l: 720ms; interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { :root { --sg-m: 0ms; --sg-l: 0ms; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* 1. Passage d'une page à l'autre : presque invisible. Le header ne bouge pas, la bannière (même taille partout) fond d'un titre à l'autre,
        le reste de la page apparaît en fondu, sans aucun déplacement de texte. */
  @view-transition { navigation: auto; }
  .hd { view-transition-name: entete; }
  .bandeau { view-transition-name: bandeau; }
  ::view-transition-old(root) { animation: sg-sort 120ms linear both; }
  ::view-transition-new(root) { animation: sg-entre 220ms var(--sg-ease) both; }
  ::view-transition-group(entete), ::view-transition-group(bandeau) { animation-duration: 0s; }
  ::view-transition-old(bandeau) { animation: sg-sort 160ms var(--sg-ease) both; mix-blend-mode: normal; }
  ::view-transition-new(bandeau) { animation: sg-entre 200ms var(--sg-ease) 40ms both; mix-blend-mode: normal; }
  @keyframes sg-sort { to { opacity: 0; } }
  @keyframes sg-entre { from { opacity: 0; } }

  /* 2. Menu Tapis : se déroule vers le bas, puis les quatre motifs apparaissent l'un après l'autre */
  @media (min-width: 1024px) {
    .mega { display: block; visibility: hidden; pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0);
      transition: opacity 260ms var(--sg-ease) 120ms, clip-path 520ms var(--sg-ease) 120ms, visibility 0s linear 640ms; }
    .a-mega:hover .mega, .a-mega:focus-within .mega { visibility: visible; pointer-events: auto; opacity: 1; clip-path: inset(0 0 -2px 0);
      transition-delay: 40ms, 40ms, 0s; }
    .mega .motifs > *, .mega .bas { opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--sg-ease), transform 240ms var(--sg-ease); }
    .a-mega:hover .mega .motifs > *, .a-mega:focus-within .mega .motifs > *, .a-mega:hover .mega .bas, .a-mega:focus-within .mega .bas { opacity: 1; transform: none; transition-duration: 480ms, 560ms; }
    .a-mega:hover .mega .motifs > :nth-child(1), .a-mega:focus-within .mega .motifs > :nth-child(1) { transition-delay: 140ms; }
    .a-mega:hover .mega .motifs > :nth-child(2), .a-mega:focus-within .mega .motifs > :nth-child(2) { transition-delay: 200ms; }
    .a-mega:hover .mega .motifs > :nth-child(3), .a-mega:focus-within .mega .motifs > :nth-child(3) { transition-delay: 260ms; }
    .a-mega:hover .mega .motifs > :nth-child(4), .a-mega:focus-within .mega .motifs > :nth-child(4) { transition-delay: 320ms; }
    .a-mega:hover .mega .bas, .a-mega:focus-within .mega .bas { transition-delay: 380ms; }
  }

  /* 3. Soulignement du menu : il se trace de gauche à droite */
  .nav > li > a { position: relative; }
  .nav > li > a:hover, .nav > li > a[aria-current] { border-color: transparent; }
  .nav > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sg-sceau); transform: scaleX(0); transform-origin: left; transition: transform var(--sg-m) var(--sg-ease); }
  .nav > li > a:hover::after, .nav > li > a[aria-current]::after, .a-mega:focus-within > a::after { transform: scaleX(1); }

  /* 4. Tiroir du menu mobile */
  .burger[open] .tiroir { animation: sg-tiroir 380ms var(--sg-ease) both; }
  @keyframes sg-tiroir { from { opacity: 0; transform: translateY(-10px); } }

  /* 5. Cartes produit : la photo s'approche lentement sous le doigt ou la souris */
  .carte { overflow: hidden; }
  .carte img { transition: transform 900ms var(--sg-ease); }
  .carte:focus-visible { outline-offset: -3px; }
  @media (hover: hover) { .carte:hover img { transform: scale(1.035); } }

  /* 6. Boutons et questions fréquentes */
  .btn { transition: background-color var(--sg-m) var(--sg-ease), color var(--sg-m) var(--sg-ease), transform 160ms var(--sg-ease); }
  .accordeon summary::after { transition: transform var(--sg-m) var(--sg-ease); }
  @supports (interpolate-size: allow-keywords) {
    .accordeon details::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--sg-ease), content-visibility 420ms allow-discrete; }
    .accordeon details[open]::details-content { block-size: auto; }
  }

  /* 7. Apparition des cartes produit au défilement (jamais des titres ni des textes) (une seule fois, ajoutée par js/mouvement.js) */
  .mvt .rev { opacity: 0; }
  .mvt .rev.vu { opacity: 1; transform: none; transition: opacity var(--sg-l) var(--sg-ease), transform var(--sg-l) var(--sg-ease); transition-delay: calc(var(--i, 0) * 80ms); }
}