/* =============================================================
   V2 — Animations au scroll & infographies
   Rapatrié du design Fable (Claude Design) le 2026-07-07.
   S'ajoute à styles.css sans le modifier.
   Palette et typo : inchangées (guide Pierre Grégoire).
   Directions retenues : hero « Rideau », processus « Frise verticale ».
   ============================================================= */

/* ---------- Système de révélation ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  [data-reveal="up"] { transform: translateY(36px); }
  [data-reveal="left"] { transform: translateX(-44px); }
  [data-reveal="right"] { transform: translateX(44px); }
  [data-reveal="scale"] { transform: scale(0.94); }
  [data-reveal][data-in] { opacity: 1; transform: none; }

  /* Cascade : les enfants entrent l'un après l'autre.
     Animation (pas transition) pour ne pas interférer avec le tilt. */
  [data-reveal-cascade] > * { opacity: 0; }
  [data-reveal-cascade][data-in] > * {
    opacity: 1;
    animation: v2Up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: min(calc(var(--i, 0) * 90ms), 540ms);
  }

  /* Têtes de section : repère -> titre -> lead */
  [data-reveal="head"] { opacity: 1; transform: none; }
  [data-reveal="head"] .section-head-meta {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.8s ease 0.05s, transform 0.8s ease 0.05s;
  }
  [data-reveal="head"] .section-head-title h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s,
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
  }
  [data-reveal="head"] .lead {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s;
  }
  [data-reveal="head"][data-in] .section-head-meta,
  [data-reveal="head"][data-in] .section-head-title h2,
  [data-reveal="head"][data-in] .lead {
    opacity: 1;
    transform: none;
  }
}

@keyframes v2Up {
  from { opacity: 0; transform: translateY(26px); }
}

@media print {
  [data-reveal], [data-reveal-cascade] > *,
  [data-reveal="head"] .section-head-meta,
  [data-reveal="head"] .section-head-title h2,
  [data-reveal="head"] .lead {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- HERO : entrée chorégraphiée ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-eyebrow,
  .hero .hero-tagline,
  .hero .hero-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hero .hero-eyebrow::before {
    width: 0;
    transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s;
  }
  .hero .hero-indicators,
  .hero .hero-scroll {
    opacity: 0;
    transition: opacity 1.2s ease 1.3s;
  }
  .hero.hero-in .hero-eyebrow { opacity: 1; transform: none; transition-delay: 0.15s; }
  .hero.hero-in .hero-eyebrow::before { width: 48px; }
  .hero.hero-in .hero-tagline { opacity: 1; transform: none; transition-delay: 0.6s; }
  .hero.hero-in .hero-cta { opacity: 1; transform: none; transition-delay: 0.8s; }
  .hero.hero-in .hero-indicators,
  .hero.hero-in .hero-scroll { opacity: 1; }
  /* Le parallax JS pilote transform/opacity sur ces couches */
  .hero-slides, .hero-content { will-change: transform; }
}

/* ---------- HERO — « Rideau » : lignes masquées + rail doré ---------- */
.hero-rail {
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 124px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, transparent);
}
@media (max-width: 960px) {
  .hero-rail { bottom: 84px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-a .hl {
    display: block;
    overflow: hidden;
    /* garde les descendantes (q, p...) hors du clip une fois en place */
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
  }
  .hero-a .hl-in {
    display: block;
    transform: translateY(114%);
    transition: transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hero-a.hero-in .hl:nth-child(1) .hl-in { transform: none; transition-delay: 0.32s; }
  .hero-a.hero-in .hl:nth-child(2) .hl-in { transform: none; transition-delay: 0.5s; }
  .hero-a .hero-rail {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
  }
  .hero-a.hero-in .hero-rail {
    transform: scaleY(1);
    animation: v2RailBreath 7s ease-in-out 2s infinite;
  }
}
@keyframes v2RailBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* « Découvrir » : masqué dès la tablette (et non plus seulement sous 960px)
   pour qu'il ne chevauche jamais les boutons du hero quand le titre
   passe sur plus de lignes à largeur intermédiaire. */
@media (max-width: 1180px) {
  .hero-scroll { display: none; }
}

/* ---------- CHIFFRES : compteurs + mini-visualisations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .about-stats .stat-block {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.8s ease var(--d, 0s), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s);
  }
  .about-stats.go .stat-block { opacity: 1; transform: none; }
}
.stat-num { font-variant-numeric: tabular-nums; }
.stat-viz {
  height: 18px;
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
/* Règle graduée : 25 traits qui s'allument un à un (5e trait plus haut) */
.stat-viz-ticks i {
  display: block;
  width: 3px;
  height: 62%;
  background: var(--line-strong);
  transform: scaleY(0.5);
  transform-origin: bottom;
  transition: background 0.35s ease var(--d, 0s), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s);
}
.stat-viz-ticks i:nth-child(5n + 1) { height: 100%; }
.about-stats.go .stat-viz-ticks i {
  background: var(--gold);
  transform: scaleY(1);
}
/* 3 territoires : trois segments */
.stat-viz-ticks.blocks i { width: 30px; height: 100%; }
/* 100 % : barre qui se remplit */
.stat-viz-bar { align-items: center; }
.stat-viz-bar span {
  display: block;
  position: relative;
  height: 2px;
  width: 100%;
  max-width: 150px;
  background: var(--line);
  overflow: hidden;
}
.stat-viz-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.about-stats.go .stat-viz-bar span::after { transform: scaleX(1); }

/* =============================================================
   PROCESSUS — Frise verticale progressive
   ============================================================= */
.pa {
  position: relative;
  padding: 24px 0 56px;
}
.pa-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.pa-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 12px rgba(181, 154, 107, 0.35);
}
.pa-step {
  position: relative;
  width: 50%;
  padding: 0 72px 72px 0;
  text-align: right;
}
.pa-step.pa-right {
  margin-left: 50%;
  padding: 0 0 72px 72px;
  text-align: left;
}
.pa-step:last-of-type { padding-bottom: 24px; }
.pa-node {
  position: absolute;
  top: 30px;
  right: -7px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  background: var(--bg);
  transition: background 0.45s ease, box-shadow 0.45s ease;
  z-index: 1;
}
.pa-step.pa-right .pa-node {
  right: auto;
  left: -7px;
}
.pa-step.lit .pa-node {
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(181, 154, 107, 0.16);
}
.pa-ghost {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 84px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  opacity: 0.4;
  margin-bottom: 14px;
  transition: opacity 0.5s ease;
}
.pa-step.lit .pa-ghost { opacity: 0.85; }
.pa-step h4 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 12px;
}
.pa-step p {
  color: var(--ivory-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 40ch;
  display: inline-block;
  text-wrap: pretty;
}
.pa-cap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: var(--bg);
  font-size: 16px;
  transition: background 0.5s ease, color 0.5s ease;
}
.pa-cap.lit {
  background: var(--gold);
  color: var(--bg);
}

@media (max-width: 960px) {
  .pa-line { left: 7px; }
  .pa-step,
  .pa-step.pa-right {
    width: 100%;
    margin-left: 0;
    padding: 0 0 56px 44px;
    text-align: left;
  }
  .pa-node,
  .pa-step.pa-right .pa-node {
    left: 1px;
    right: auto;
  }
  .pa-ghost { font-size: 64px; }
  .pa-cap { left: 7px; transform: translateX(-50%); }
}

/* =============================================================
   CARTES — micro-interactions (propriétés & articles)
   ============================================================= */
.tilt-card {
  will-change: transform;
  transition: transform 0.3s ease, border-color 0.4s, box-shadow 0.4s ease;
}
.tilt-card:hover { box-shadow: var(--shadow-lg); }
.listing-card, .blog-card { position: relative; }
/* Filet doré qui balaie le haut de la carte */
.listing-card::after, .blog-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
  pointer-events: none;
}
.listing-card:hover::after, .blog-card:hover::after { transform: scaleX(1); }
/* Zoom doux de l'image de fond */
.listing-card .listing-img, .blog-card .blog-img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.listing-card:hover .listing-img,
.blog-card:hover .blog-img {
  transform: scale(1.05);
}
/* Le lien se révèle au survol */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .listing-card .listing-link, .blog-card .blog-link {
    opacity: 0.55;
    transform: translateX(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.25s, border-color 0.25s;
  }
  .listing-card:hover .listing-link, .blog-card:hover .blog-link {
    opacity: 1;
    transform: none;
  }
}
.blog-cat { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.blog-card:hover .blog-cat {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
/* Inscription pas encore active : indicateur non cliquable */
.listing-link.is-soon {
  color: var(--gold-dim);
  border-bottom: 1px dashed var(--line-strong);
  cursor: default;
}
/* Inscription vendue : badge « stamp » marine/or, distinct des badges actifs */
.listing-badge.vendu {
  background: var(--bg);
  color: var(--gold);
  border: 1px solid var(--gold);
}

/* =============================================================
   CLIENTÈLES — pictogrammes monoline dorés
   ============================================================= */
.service-icon svg {
  display: block;
  margin: 0 auto;
  color: var(--gold);
}
/* Tracé progressif des pictos quand la bande entre à l'écran */
@media (prefers-reduced-motion: no-preference) {
  .services-list .service-icon path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .services-list[data-in] .service-icon path {
    animation: v2Draw 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: calc(var(--p, 0) * 120ms + 0.35s);
  }
}
@keyframes v2Draw {
  to { stroke-dashoffset: 0; }
}