/* Domaines Privilège — motion (P5)
   Classes d'animation ajoutées uniquement via motion.js.
   Sans JS / prefers-reduced-motion : contenu visible, pas d'effet. */

/* --- Ancres : défilement doux (désactivé si reduced-motion) --- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* --- Apparition sections (classe .motion-reveal posée par JS) --- */
@media (prefers-reduced-motion: no-preference) {
  .motion-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 500ms ease,
      transform 500ms ease;
  }

  .motion-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Survols boutons / cartes / liens (opacity, couleur, transform uniquement) --- */
@media (prefers-reduced-motion: no-preference) {
  a.btn,
  button.btn,
  .btn,
  a.btn-o,
  .btn-o,
  a.btn-dark,
  .btn-dark,
  a.btn-pill,
  .btn-pill,
  a.lnk,
  a.more,
  a.ulink,
  a.ofc-link,
  .card,
  .card .ft a {
    transition:
      opacity 250ms ease,
      color 250ms ease,
      background-color 250ms ease,
      border-color 250ms ease,
      box-shadow 250ms ease,
      transform 250ms ease;
  }

  a.btn:hover,
  button.btn:hover,
  .btn:hover,
  a.btn-o:hover,
  .btn-o:hover,
  a.btn-dark:hover,
  .btn-dark:hover,
  a.btn-pill:hover,
  .btn-pill:hover {
    opacity: 0.92;
  }

  a.lnk:hover,
  a.more:hover,
  a.ulink:hover,
  a.ofc-link:hover,
  .card .ft a:hover {
    opacity: 0.75;
  }

  .card:hover {
    transform: translateY(-2px);
  }
}

/* --- Panneau ☰ (.mnav) : ouverture / fermeture fluide ---
   Remplace display:none/block quand html.js-motion est posé par JS.
   Hauteur via grid 0fr→1fr. !important pour passer devant chrome.css.
   Fermé : padding/border de .mnav-in à 0 (sinon 44+52 px restent malgré 0fr). */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .mnav {
    display: grid !important;
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transition:
      grid-template-rows 450ms ease,
      opacity 350ms ease,
      visibility 350ms ease;
  }

  html.js-motion .mnav > .mnav-in {
    min-height: 0 !important;
    transition:
      padding-top 450ms ease,
      padding-bottom 450ms ease,
      border-width 450ms ease;
  }

  html.js-motion .mnav:not(.open) > .mnav-in {
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
  }

  html.js-motion .mnav.open {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  html.js-motion .mnav.open {
    max-height: calc(100vh - 76px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- FAQ details/summary : apparition douce du contenu --- */
@media (prefers-reduced-motion: no-preference) {
  .faq details > p,
  details.q > p,
  .faq details > *:not(summary) {
    transition:
      opacity 320ms ease,
      transform 320ms ease;
  }

  html.js-motion .faq details:not([open]) > p,
  html.js-motion details.q:not([open]) > p,
  html.js-motion .faq details:not([open]) > *:not(summary),
  html.js-motion details.q:not([open]) > *:not(summary) {
    opacity: 0;
    transform: translateY(8px);
  }

  html.js-motion .faq details[open] > p,
  html.js-motion details.q[open] > p,
  html.js-motion .faq details[open] > *:not(summary),
  html.js-motion details.q[open] > *:not(summary) {
    opacity: 1;
    transform: translateY(0);
  }

  html.js-motion .faq details.motion-faq-closing > p,
  html.js-motion details.q.motion-faq-closing > p,
  html.js-motion .faq details.motion-faq-closing > *:not(summary),
  html.js-motion details.q.motion-faq-closing > *:not(summary) {
    opacity: 0;
    transform: translateY(8px);
  }
}