/* ============================================================
   AS-ANIMATIONS.CSS — Authority Shapes
   Motion system: CSS natif + variables globales
   Stack: CSS custom properties · no lib externe
   Mobile-first · prefers-reduced-motion compliant
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. TOKENS GLOBAUX
───────────────────────────────────────────────────────────── */
:root {
  /* Easing */
  --as-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --as-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --as-gentle:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Durées */
  --as-fast:     300ms;
  --as-base:     500ms;
  --as-reveal:   700ms;
  --as-hero:     1100ms;
  --as-slow:     900ms;

  /* Stagger (appliqué via JS ou style inline) */
  --as-stagger:  60ms;

  /* Reveal offset */
  --as-lift:     22px;
  --as-lift-sm:  12px;

  /* Hover scale */
  --as-scale-card: 1.0;        /* cards: élévation uniquement, pas de scale */
  --as-scale-icon: 1.08;       /* icônes sociales */
  --as-scale-check: 1.12;      /* check marks */

  /* Hover shadows */
  --as-shadow-card:  0 12px 48px rgba(0, 0, 0, 0.28);
  --as-shadow-gold:  0 8px 32px rgba(201, 168, 130, 0.10);
  --as-shadow-none:  0 0 0 rgba(0, 0, 0, 0);

  /* Couleurs réf */
  --as-gold:         #c9a882;
  --as-gold-dim:     rgba(201, 168, 130, 0.22);
  --as-gold-mid:     rgba(201, 168, 130, 0.45);
  --as-gold-full:    rgba(201, 168, 130, 0.70);
  --as-cream:        #f0ece6;
  --as-cream-dim:    rgba(240, 236, 230, 0.35);
  --as-cream-mid:    rgba(240, 236, 230, 0.55);
  --as-cream-faint:  rgba(240, 236, 230, 0.07);
  --as-bg:           #33021f;
  --as-bg-dark:      #28011a;
}

/* ─────────────────────────────────────────────────────────────
   2. GARDE prefers-reduced-motion (priorité absolue)
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Révélation immédiate sans motion */
  .reveal,
  .reveal-card,
  .as-reveal,
  .as-reveal-left,
  .as-reveal-quote {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Watermark toujours visible */
  .as-watermark { opacity: 0.022 !important; }
}

/* ─────────────────────────────────────────────────────────────
   3. CLASSES DE RÉVÉLATION
───────────────────────────────────────────────────────────── */

/* Standard : fade + slide-up */
.as-reveal {
  opacity: 0;
  transform: translateY(var(--as-lift));
  transition:
    opacity  var(--as-reveal) var(--as-spring),
    transform var(--as-reveal) var(--as-spring);
}
.as-reveal.as-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante : slide depuis la gauche (blockquote, citations) */
.as-reveal-left {
  opacity: 0;
  transform: translateX(calc(-1 * var(--as-lift-sm)));
  transition:
    opacity  var(--as-reveal) var(--as-spring),
    transform var(--as-reveal) var(--as-spring);
}
.as-reveal-left.as-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante : card avec scale (pack cards) */
.as-reveal-card {
  opacity: 0;
  transform: translateY(var(--as-lift)) scale(0.97);
  transition:
    opacity   650ms var(--as-spring),
    transform 650ms var(--as-spring);
}
.as-reveal-card.as-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Featured card : élévation verticale post-reveal */
@media (min-width: 1025px) {
  .as-reveal-card.as-card-featured.as-visible {
    transform: translateY(-20px) scale(1);
  }
}

/* Watermark hero : fade très lent */
.as-watermark {
  opacity: 0;
  transition: opacity 1800ms ease-out 600ms;
}
.as-watermark.as-visible {
  opacity: 0.022;
}

/* ─────────────────────────────────────────────────────────────
   4. NAVBAR
───────────────────────────────────────────────────────────── */

/* Logo brand : micro-hover */
.nav-brand {
  transition: opacity var(--as-fast) var(--as-gentle);
}
.nav-brand:hover {
  opacity: 0.80;
}

/* Hamburger : border + opacity */
.nav-hamburger {
  transition:
    border-color var(--as-fast) var(--as-gentle),
    opacity      var(--as-fast) var(--as-gentle);
}
.nav-hamburger:hover {
  border-color: var(--as-cream-mid);
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────
   5. BOUTONS — états complets
───────────────────────────────────────────────────────────── */

/* btn-ghost : default → hover → active → focus */
.btn-ghost {
  position: relative;
  transition:
    border-color var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle),
    opacity      var(--as-fast) var(--as-gentle);
}
.btn-ghost:hover {
  border-color: var(--as-cream-mid);
  background: rgba(240, 236, 230, 0.05);
}
.btn-ghost:active {
  opacity: 0.75;
  transition-duration: 100ms;
}
.btn-ghost:focus-visible {
  outline: 1px solid var(--as-cream-dim);
  outline-offset: 4px;
}

/* btn-solid : fill inverse */
.btn-solid {
  transition:
    background var(--as-base) var(--as-gentle),
    color      var(--as-base) var(--as-gentle),
    opacity    var(--as-fast) var(--as-gentle);
}
.btn-solid:active {
  opacity: 0.80;
  transition-duration: 100ms;
}
.btn-solid:focus-visible {
  outline: 1px solid var(--as-cream);
  outline-offset: 4px;
}

/* btn-outline-gold */
.btn-outline-gold {
  transition:
    border-color var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle),
    color        var(--as-base) var(--as-gentle);
}
.btn-outline-gold:active {
  opacity: 0.75;
  transition-duration: 100ms;
}
.btn-outline-gold:focus-visible {
  outline: 1px solid var(--as-gold-mid);
  outline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────────
   6. GRILLES — hover sur les cellules
───────────────────────────────────────────────────────────── */

/* Cellule 2×2 (system steps) */
.grid-2x2-cell {
  transition:
    background      var(--as-base) var(--as-gentle),
    border-color    var(--as-base) var(--as-gentle);
  cursor: default;
}
.grid-2x2-cell:hover {
  background: rgba(201, 168, 130, 0.025);
  border-color: rgba(201, 168, 130, 0.18) !important;
}
/* Flèche gold dans les cellules : glisse au hover */
.grid-2x2-cell .as-arrow {
  display: inline-block;
  transition: transform var(--as-base) var(--as-spring);
}
.grid-2x2-cell:hover .as-arrow {
  transform: translateX(5px);
}

/* Cellule 4-col (outcomes) */
.grid-4col-cell {
  transition:
    background   var(--as-base) var(--as-gentle),
    border-color var(--as-base) var(--as-gentle);
  cursor: default;
}
.grid-4col-cell:hover {
  background: rgba(240, 236, 230, 0.018);
}
/* Numéro dans cellule : highlight au hover */
.grid-4col-cell .as-cell-num {
  transition: color var(--as-base) var(--as-gentle);
}
.grid-4col-cell:hover .as-cell-num {
  color: rgba(201, 168, 130, 0.55);
}

/* Cellule qualification */
.grid-qual-cell {
  transition: background var(--as-base) var(--as-gentle);
}

/* Phase cell (engine sprint) */
.phase-cell {
  transition:
    background   var(--as-base) var(--as-gentle),
    border-color var(--as-base) var(--as-gentle);
}
.phase-cell:hover {
  background: rgba(201, 168, 130, 0.022);
}

/* Deliverable cell */
.del-cell {
  transition:
    background   var(--as-base) var(--as-gentle),
    border-color var(--as-base) var(--as-gentle);
}
.del-cell:hover {
  background: rgba(240, 236, 230, 0.015);
}

/* Transform cell (before/after) */
.transform-cell {
  transition: background var(--as-base) var(--as-gentle);
}
.transform-cell:hover {
  background: rgba(201, 168, 130, 0.018);
}

/* ─────────────────────────────────────────────────────────────
   7. POSITIONING LIST (manifesto rows)
───────────────────────────────────────────────────────────── */
.as-manifesto-row {
  position: relative;
  transition:
    color        var(--as-base) var(--as-gentle),
    padding-left var(--as-base) var(--as-spring);
}
.as-manifesto-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  background: var(--as-gold);
  transition: width var(--as-base) var(--as-spring);
}
.as-manifesto-row:hover {
  color: rgba(240, 236, 230, 0.55);
  padding-left: 18px;
}
.as-manifesto-row:hover::before {
  width: 10px;
}

/* ─────────────────────────────────────────────────────────────
   8. WHY FAIL — numbered rows
───────────────────────────────────────────────────────────── */
.as-numbered-row {
  transition: background var(--as-base) var(--as-gentle);
}
.as-numbered-row:hover {
  background: rgba(240, 236, 230, 0.012);
}
.as-numbered-row .as-row-num {
  transition: color var(--as-base) var(--as-gentle);
}
.as-numbered-row:hover .as-row-num {
  color: rgba(201, 168, 130, 0.45);
}

/* ─────────────────────────────────────────────────────────────
   9. PACK CARDS (Offers)
───────────────────────────────────────────────────────────── */
#offers .offers-card {
  transition:
    border-color var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle),
    transform    var(--as-base) var(--as-spring),
    box-shadow   var(--as-base) var(--as-gentle);
}
#offers .offers-card:hover {
  border-color: rgba(201, 168, 130, 0.32);
  background: rgba(201, 168, 130, 0.038);
  transform: translateY(-3px);
  box-shadow: var(--as-shadow-gold);
}
#offers .offers-card.offers-card-featured:hover {
  border-color: rgba(201, 168, 130, 0.55);
  background: rgba(201, 168, 130, 0.06);
  transform: translateY(-3px);
  box-shadow: 0 12px 44px rgba(201, 168, 130, 0.14);
}

/* Touch : pas de translateY (évite layout shift sur scroll mobile) */
@media (hover: none) {
  #offers .offers-card:hover,
  #offers .offers-card.offers-card-featured:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Toggle chevron */
#offers .offers-toggle-chevron {
  transition: transform var(--as-base) var(--as-spring);
}
#offers .offers-toggle-chevron.open {
  transform: rotate(180deg);
}

/* CTA inline card */
#offers .offers-cta {
  transition:
    border-color var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle),
    color        var(--as-base) var(--as-gentle);
}
#offers .offers-cta:focus-visible {
  outline: 1px solid var(--as-cream-dim);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   10. INTL BLOCK — pulse d'entrée + hover
───────────────────────────────────────────────────────────── */
@keyframes as-border-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,130,0); }
  35%  { box-shadow: inset 0 0 40px 0 rgba(201,168,130,0.055),
                     0 0 24px 0 rgba(201,168,130,0.04); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,130,0); }
}
#offers .offers-intl.pulsed {
  animation: as-border-pulse 700ms var(--as-out) forwards;
}
#offers .offers-intl {
  transition:
    border-color var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle);
}
#offers .offers-intl:hover {
  border-color: rgba(201, 168, 130, 0.30);
  background: rgba(201, 168, 130, 0.035);
}

/* Stat numbers : micro-lift hover */
#offers .offers-intl .as-stat-num {
  transition: transform var(--as-fast) var(--as-spring);
}
#offers .offers-intl:hover .as-stat-num {
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   11. PRICING BLOCK (engine-sprint)
───────────────────────────────────────────────────────────── */
@keyframes as-pricing-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,130,0); }
  40%  { box-shadow: inset 0 0 48px 0 rgba(201,168,130,0.048),
                     0 0 28px 0 rgba(201,168,130,0.035); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,130,0); }
}
.pricing-block.as-pulsed {
  animation: as-pricing-reveal 700ms var(--as-out) forwards;
}

/* ─────────────────────────────────────────────────────────────
   12. FOOTER
───────────────────────────────────────────────────────────── */

/* Nav links : underline draw */
.footer-nav-link {
  position: relative;
  transition: color var(--as-fast) var(--as-gentle);
}
.footer-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(160, 144, 144, 0.4);
  transition: width var(--as-base) var(--as-spring);
}
.footer-nav-link:hover::after {
  width: 100%;
}
.footer-nav-link:hover {
  color: #a09090;
}
.footer-nav-link:focus-visible {
  outline: 1px solid var(--as-cream-dim);
  outline-offset: 3px;
}

/* Social links : scale + border */
.footer-social-link {
  transition:
    border-color var(--as-base) var(--as-gentle),
    color        var(--as-base) var(--as-gentle),
    transform    var(--as-base) var(--as-spring);
}
.footer-social-link:hover {
  border-color: rgba(240, 236, 230, 0.32);
  color: #a09090;
  transform: scale(var(--as-scale-icon));
}
@media (hover: none) {
  .footer-social-link:hover { transform: none; }
}
.footer-social-link:focus-visible {
  outline: 1px solid var(--as-cream-dim);
  outline-offset: 3px;
}

/* Legal links */
.footer-legal-link {
  position: relative;
  transition: color var(--as-fast) var(--as-gentle);
}
.footer-legal-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(181, 165, 165, 0.35);
  transition: width var(--as-base) var(--as-spring);
}
.footer-legal-link:hover::after {
  width: 100%;
}

/* Newsletter input : border bottom draw au focus */
.footer-input {
  transition: border-color var(--as-fast) var(--as-gentle);
}
.footer-input:focus {
  border-color: rgba(240, 236, 230, 0.32);
}

/* Submit button */
.footer-submit {
  transition:
    border-color var(--as-base) var(--as-gentle),
    color        var(--as-base) var(--as-gentle),
    background   var(--as-base) var(--as-gentle);
}
.footer-submit:focus-visible {
  outline: 1px solid var(--as-cream-dim);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   13. LEGAL PAGES — sections en révélation douce
───────────────────────────────────────────────────────────── */
.legal-section {
  transition:
    opacity   var(--as-reveal) var(--as-spring),
    transform var(--as-reveal) var(--as-spring);
}

/* Links dans legal */
.legal-p a {
  position: relative;
  transition: color var(--as-fast) var(--as-gentle);
}
.legal-p a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--as-gold-mid);
  transition: width var(--as-base) var(--as-spring);
}
.legal-p a:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   14. PARALLAX HERO WATERMARK (scroll-driven, géré par JS)
───────────────────────────────────────────────────────────── */
.as-parallax {
  will-change: transform;
  /* La valeur est injectée via JS : transform: translateY(Xpx)
     Factor ≤ 6% du scrollY — jamais top/left animés */
}

/* ─────────────────────────────────────────────────────────────
   15. INSIGHTS / ARTICLES hover (method.html, insights.html)
───────────────────────────────────────────────────────────── */
.as-article-row {
  transition:
    background   var(--as-base) var(--as-gentle),
    padding-left var(--as-base) var(--as-spring);
  cursor: pointer;
}
.as-article-row:hover {
  background: rgba(240, 236, 230, 0.014);
  padding-left: 8px;
}
.as-article-row .as-article-arrow {
  display: inline-block;
  transition:
    transform var(--as-base) var(--as-spring),
    color     var(--as-base) var(--as-gentle);
}
.as-article-row:hover .as-article-arrow {
  transform: translateX(6px);
  color: var(--as-gold);
}

/* ─────────────────────────────────────────────────────────────
   16. FAQ ROWS (faq.html)
───────────────────────────────────────────────────────────── */
.as-faq-row {
  transition: background var(--as-base) var(--as-gentle);
}
.as-faq-row:hover {
  background: rgba(240, 236, 230, 0.012);
}

/* ─────────────────────────────────────────────────────────────
   17. PROCESS STEPS (FinalCTA — engine-sprint)
───────────────────────────────────────────────────────────── */
.as-step-row {
  transition: background var(--as-base) var(--as-gentle);
}
.as-step-row:hover {
  background: rgba(240, 236, 230, 0.012);
}
.as-step-row .as-step-num {
  transition: color var(--as-base) var(--as-gentle);
}
.as-step-row:hover .as-step-num {
  color: rgba(201, 168, 130, 0.50);
}

/* ─────────────────────────────────────────────────────────────
   18. TRUST SIGNALS (check marks)
───────────────────────────────────────────────────────────── */
.offers-trust-check {
  display: inline-block;
  transition: transform var(--as-fast) var(--as-spring);
}
.offers-trust-signal:hover .offers-trust-check {
  transform: scale(var(--as-scale-check));
}

/* ─────────────────────────────────────────────────────────────
   19. BLOCKQUOTE / PULL QUOTE
───────────────────────────────────────────────────────────── */
.as-pull-quote {
  transition:
    border-left-color var(--as-base) var(--as-gentle),
    color             var(--as-base) var(--as-gentle);
}
.as-pull-quote:hover {
  border-left-color: rgba(240, 236, 230, 0.32);
  color: rgba(240, 236, 230, 0.75);
}

/* ─────────────────────────────────────────────────────────────
   20. UTILITAIRES
───────────────────────────────────────────────────────────── */

/* Stagger helpers (appliqués via JS ou inline) */
.as-d0  { transition-delay:   0ms; }
.as-d1  { transition-delay:  60ms; }
.as-d2  { transition-delay: 120ms; }
.as-d3  { transition-delay: 180ms; }
.as-d4  { transition-delay: 240ms; }
.as-d5  { transition-delay: 300ms; }
.as-d6  { transition-delay: 360ms; }

/* GPU hint pour éléments animés */
.as-gpu {
  will-change: transform, opacity;
}
/* Désactivé une fois l'animation terminée via JS */
.as-gpu-off {
  will-change: auto;
}