/* ============================================
   MOTION.CSS — Motion éditorial moderne 2026 (Chantier 1 — Passe 8)
   Charge sur : toutes les pages, après components.css.
   Cf. docs/chantiers/01-research.md §3 + 01-audit.md findings #26-28.

   Stratégie : progressive enhancement.
   - Tout pattern moderne (scroll-driven, view-transition, @starting-style)
     est wrappé dans @supports avec fallback gracieux.
   - Le JS IntersectionObserver (scripts.js) reste actif partout — quand
     une feature CSS la double, on désactive la classe .is-visible JS via
     @supports pour éviter le double trigger.
   ============================================ */

/* ╔══════════════════════════════════════════════
   ║ 1. SCROLL-DRIVEN REVEALS — animation-timeline: view()
   ╚══════════════════════════════════════════════ */
@supports (animation-timeline: view()) {

  /* Reveal — entrée scroll, remplace IO. */
  .reveal {
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
    /* Reset des transitions JS (.is-visible) : la timeline pilote tout. */
    opacity: initial;
    transform: initial;
    transition: none;
  }

  .reveal.is-visible {
    /* JS encore actif sur browsers sans support : ici on neutralise. */
    opacity: initial;
    transform: initial;
  }

  @keyframes reveal-fade {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Stagger — chaque enfant entre avec un délai propre à sa position. */
  .stagger > * {
    animation: stagger-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
    opacity: initial;
    transform: initial;
    transition: none;
  }

  @keyframes stagger-fade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ╔══════════════════════════════════════════════
   ║ 2. SCROLL PROGRESS — animation-timeline: scroll(root block)
   ║ Optionnel : header shrink en pure CSS (déjà JS pour fallback).
   ║ Désactivé par défaut tant que la nav JS suffit ; le hook existe.
   ╚══════════════════════════════════════════════ */
@supports (animation-timeline: scroll(root block)) {
  /* À activer en V2 quand on aura testé sur Safari ; pour l'instant on
     laisse le JS smart-header pilote. Pas de règle ici (commenté). */
}

/* ╔══════════════════════════════════════════════
   ║ 3. VIEW TRANSITIONS — cross-document (Accueil → Mariage fluide)
   ╚══════════════════════════════════════════════ */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  /* Noms persistants pour les éléments stables d'une page à l'autre. */
  .nav-logo {
    view-transition-name: site-logo;
  }

  .site-nav {
    view-transition-name: site-nav;
  }

  .footer-new {
    view-transition-name: site-footer;
  }

  /* Pseudo-éléments view-transition : easings et durées luxe. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-smooth);
    animation-timing-function: var(--ease-editorial);
  }

  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) {
    animation-duration: var(--duration-grand);
    animation-timing-function: var(--ease-entrance);
  }
}

/* ╔══════════════════════════════════════════════
   ║ 4. @starting-style — état initial pour transitions enter
   ║ S'applique aux popovers/dialogs (Passe 3 a déjà préparé back-to-top).
   ╚══════════════════════════════════════════════ */
@supports (transition-behavior: allow-discrete) {
  [popover],
  dialog[open],
  dialog.is-open {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-swift) var(--ease-editorial),
                transform var(--duration-swift) var(--ease-editorial),
                overlay var(--duration-swift) var(--ease-editorial) allow-discrete,
                display var(--duration-swift) var(--ease-editorial) allow-discrete;
  }

  [popover]:not(:popover-open),
  dialog:not([open]) {
    opacity: 0;
    transform: translateY(-8px);
  }

  @starting-style {
    [popover]:popover-open,
    dialog[open] {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

/* ╔══════════════════════════════════════════════
   ║ 5. Reduced motion + reduced data
   ╚══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .reveal,
    .stagger > * {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) {
    animation-duration: 0.001s;
  }
}

/* prefers-reduced-data : sur connexions avares, on coupe les anims luxe. */
@media (prefers-reduced-data: reduce) {
  .reveal,
  .stagger > * {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ╔══════════════════════════════════════════════
   ║ 6. Hover-on-touchable — micro-interaction adaptive
   ║ Désactive les hover-scale / parallax sur écrans tactiles
   ║ pour éviter le "sticky hover" (état figé après tap).
   ╚══════════════════════════════════════════════ */
@media (hover: none) {
  .particuliers-hub-card:hover .particuliers-hub-card__media img,
  .particuliers-hub-card:focus-within .particuliers-hub-card__media img {
    transform: none;
  }
}

/* ╔══════════════════════════════════════════════
   ║ 7. Safe areas iOS (Chantier 1 Passe 9)
   ║ viewport-fit=cover déclaré dans <head> — on consomme env() ici.
   ╚══════════════════════════════════════════════ */
@supports (padding: max(0px, env(safe-area-inset-bottom))) {
  .footer-bottom__inner {
    padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
  }

  .site-nav__panel-body {
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  }

  .section--immersion {
    padding-left: max(clamp(24px, 5vw, 80px), env(safe-area-inset-left));
    padding-right: max(clamp(24px, 5vw, 80px), env(safe-area-inset-right));
  }

  .container {
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
  }
}

/* ╔══════════════════════════════════════════════
   ║ 7b. Cross-browser fallbacks explicites (Chantier 1 Passe 10)
   ║ Récapitulatif des wrappers @supports — chaque feature moderne y a
   ║ son fallback identifié. Les règles "à fallback gracieux" sont en
   ║ progressive enhancement ailleurs ; ici on liste pour traçabilité.
   ║
   ║ - oklch() et color-mix(in oklch, ...) : Baseline 2023, pas de fallback
   ║   requis pour le périmètre Interop 2026 (Chrome 111+, FF 113+, Safari
   ║   16.2+). Les navigateurs antérieurs reçoivent un rendu sans couleur
   ║   (texte/border restent), acceptable pour V1.
   ║ - animation-timeline: view() : @supports déclaré §1 ; fallback = JS IO
   ║   (scripts.js) avec classes .is-visible.
   ║ - view-transition : @supports déclaré §3 ; fallback = navigation
   ║   classique (flash blanc accepté en V1 sur Safari/FF).
   ║ - @starting-style + transition-behavior allow-discrete : @supports
   ║   déclaré §4 ; fallback = transition immédiate sans état initial.
   ║ - content-visibility: auto : @supports déclaré §8 ; fallback = render
   ║   normal (perf moindre mais rendu identique).
   ║ - env(safe-area-inset-*) : @supports déclaré §7 ; fallback = padding
   ║   standard sans tenir compte du notch (acceptable hors iOS).
   ║ - backdrop-filter : -webkit-backdrop-filter ajouté dans components.css
   ║   pour Safari iOS legacy ; fallback final = background opaque 95%.
   ║ - dvh/svh : @supports not (height: 1svh) déclaré dans hub-event.css ;
   ║   le sed migration vh→svh ne casse pas car Safari 15.4+ et Chrome 108+
   ║   supportent dvh/svh.
   ╚══════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════
   ║ 8. content-visibility — perf perçue (Chantier 1 + extension Chantier 3 PERF-6)
   ║ Sections below-fold lourdes : skip render hors viewport.
   ║ Ne s'applique JAMAIS au-dessus de la ligne de flottaison.
   ║
   ║ Chantier 3 PERF-6 :
   ║  - Migration `contain-intrinsic-size: auto 600px` -> `contain-intrinsic-block-size: auto Xpx`
   ║    affinée par typologie de section (le `auto` keyword fait que le browser memorise
   ║    la taille observee apres premier render, evitant le scrollbar jump).
   ║  - Extension a 6 sections below-fold non couvertes : .method, .signature, .geo-break,
   ║    .expertises (Accueil) + .hub-event__cta, .hub-geo__cta, .landing__cta (CTA bas pages SEO).
   ║
   ║ Limites Safari : `content-visibility: auto` casse find-in-page < Safari 17.
   ║ Acceptable en 2026 (Safari 18 GA Sep 2025, Safari 26 actuel).
   ╚══════════════════════════════════════════════ */
@supports (content-visibility: auto) {
  /* Section signature — typiquement ~400-600px hauteur.
     ⚠ .footer-hubs / .footer-bottom retirés : avec content-visibility:auto,
     Chrome saute le recalcul de style des sous-arbres hors viewport — les
     couleurs du footer restaient figées sur l'état AVANT l'application des
     CSS déférés (liens légaux rendus teal 1.9:1 au lieu de blanc 0.66,
     vérifié via CDP getMatchedStyles vs getComputedStyle). Le gain c-v sur
     ~500px de footer ne vaut pas ce bug de contraste.
     ⚠ .hub-event__cta / .hub-geo__cta / .landing__cta retirés pour la même
     raison (juillet 2026) : le bouton ghost du CTA teal était audité
     teal-sur-teal 1.28:1 (Lighthouse a11y 96 sur Mon approche) alors que le
     CSS réel le rend crème. Une section de conversion ne doit jamais geler
     ses styles ; le gain sur ~500px ne vaut pas le risque. */
  .home-signature,
  .home-geo-break {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 500px;
  }

  /* Sections methode / liste / FAQ — typiquement ~600-900px. */
  .faq-list,
  .hub-event__methode,
  .home-method,
  .home-expertises {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 700px;
  }

  /* Sections maillage / matrice / temoignages / ancrage — typiquement ~800-1200px. */
  .home-testimonial-carousel,
  .hub-event__maillage,
  .hub-geo__matrice,
  .landing__maillage,
  .home-anchorage,
  .home-evenements {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 1000px;
  }
}