/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE « Cinétique » — la page se dévoile au défilement.
   Barre escamotable, sections alternées, apparition en CSS pur.
   Tout est neutralisé si le visiteur demande moins d'animations.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-structure="cinetique"] {
  --st-radius: 18px;
  --st-btn-radius: 100px;
}

[data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav) {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.6rem;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,32,64,.08);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
/* .scrolled est posée par les templates : on escamote la barre, elle revient
   au survol ou dès qu'on remonte. */
[data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav).scrolled { transform: translateY(-105%); }
[data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav):hover { transform: translateY(0); box-shadow: 0 8px 24px rgba(15,32,64,.12); }
[data-structure="cinetique"] [data-st="navlogo"] { margin-right: auto; }
[data-structure="cinetique"] [data-st="navtel"] { font-size: .86rem; }
[data-structure="cinetique"] [data-st="navlinks"] { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
/* Bouton à filet. Il DOIT poser sa propre couleur de texte : les templates
   donnent au CTA de la barre un texte blanc, prévu pour un fond plein, et cette
   barre-ci est claire. Sans la ligne `color`, le bouton devenait blanc sur blanc,
   donc invisible (constaté sur les sites test du 2026-09-20). */
[data-structure="cinetique"] [data-st="navcta"] {
  border-radius: 100px !important; padding: .6rem 1.4rem !important;
  background: transparent !important; border: 1.5px solid currentColor !important; font-weight: 700;
  color: var(--accent-strong, #11141a) !important; box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
[data-structure="cinetique"] [data-st="navcta"]:hover {
  background: var(--accent-strong, #11141a) !important; color: #fff !important;
}

[data-structure="cinetique"] :is([data-st="hero"],#hero) { text-align: center; padding: 5rem 1.5rem 4rem; }
[data-structure="cinetique"] [data-st="hero-title"] {
  font-size: clamp(2.1rem, 6vw, 4.4rem); line-height: 1.05; max-width: 17ch; margin-inline: auto;
}
[data-structure="cinetique"] [data-st="hero-sub"] { max-width: 54ch; margin-inline: auto; }
[data-structure="cinetique"] [data-st="hero-media"] {
  margin: 2.4rem auto 0; max-width: 840px; border-radius: var(--st-radius); overflow: hidden;
}

/* Une section sur deux change de fond et d'alignement de titre. */
[data-structure="cinetique"] [data-st="section"] { padding-block: 4.4rem; }
[data-structure="cinetique"] [data-st="section"]:nth-of-type(even) { background: rgba(15,32,64,.035); }
[data-structure="cinetique"] [data-st="section"]:nth-of-type(even) h2 { text-align: right; }
[data-structure="cinetique"] [data-st="section"]:nth-of-type(odd)  h2 { text-align: left; }

[data-structure="cinetique"] [data-st="filters"] {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem;
}
[data-structure="cinetique"] [data-st="filters"] > * {
  border-radius: 100px !important; padding: .5rem 1.2rem !important;
}
[data-structure="cinetique"] [data-st="grid"] {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem;
}
[data-structure="cinetique"] [data-st="card"] {
  border-radius: var(--st-radius); overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
[data-structure="cinetique"] [data-st="card"]:nth-child(odd) { transform: translateY(-.7rem); }
[data-structure="cinetique"] [data-st="card"]:hover { transform: translateY(-1.2rem); box-shadow: 0 18px 34px rgba(15,32,64,.14); }
[data-structure="cinetique"] [data-st="cta"] {
  border-radius: var(--st-btn-radius); padding: .95rem 2rem; font-weight: 800;
}
[data-structure="cinetique"] :is([data-st="footer"],footer#footer,footer) { padding-block: 3.4rem; }

/* Apparition au défilement, sans une ligne de JavaScript. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-structure="cinetique"] [data-st="card"] {
      animation: st-reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes st-reveal {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav).scrolled { transform: none; }
  [data-structure="cinetique"] [data-st="card"],
  [data-structure="cinetique"] [data-st="card"]:nth-child(odd) { transform: none; }
}
@media (max-width: 760px) {
  [data-structure="cinetique"] [data-st="grid"] { grid-template-columns: 1fr; }
  [data-structure="cinetique"] [data-st="section"] h2 { text-align: left !important; }
  [data-structure="cinetique"] [data-st="navtel"] { display: none; }
}

/* Barre translucide sur fond de page : on reprend la couleur d'encre du site. */
[data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav) { background: rgba(255,255,255,.88); }
[data-structure="cinetique"] :is([data-st="nav"],nav#nav,nav) a:not([data-st="navcta"]),
[data-structure="cinetique"] [data-st="navlogo"],
[data-structure="cinetique"] [data-st="navtel"] { color: #11141a !important; }
[data-structure="cinetique"] [data-st="navlogo"] span { color: var(--accent, #e63946) !important; }