/* ═══ Effets inspirés de SmoothUI (smoothui.dev), recodés en CSS/JS léger ═══
   Chargé sur toutes les pages. Tout respecte prefers-reduced-motion. */

/* ─── 1. CHIFFRES ANIMÉS (façon Number Flow) ─────────────────────────────── */
.nf { display: inline-flex; align-items: baseline; white-space: nowrap; }
.nf-col {
  display: inline-block; position: relative; overflow: hidden;
  height: 1.1em; line-height: 1.1em; vertical-align: bottom;
  /* léger fondu haut/bas pour l'effet de rouleau */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.nf-reel {
  display: flex; flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(0.22, 1.25, 0.36, 1);
}
.nf-reel span { height: 1.1em; line-height: 1.1em; text-align: center; }
.nf-static { display: inline-block; }
.nf-reel span::before, .nf-static::before { content: attr(data-d); }
.nf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nf { position: relative; }
/* le footer met toutes ses <span> en petit : les chiffres gardent la taille du nombre */
.ft-kpi .nf, .ft-kpi .nf span { font-size: inherit !important; color: inherit !important; letter-spacing: normal !important; }
.ft-kpi .nf { display: inline-flex; }

/* ─── 2. LOGOS PARTENAIRES DÉFILANTS (façon Logo Cloud) ──────────────────── */
.lc { padding: 4.5rem 0 2.5rem; background: var(--noir, #15101F); position: relative; z-index: 2; }
.lc-head { text-align: center; margin-bottom: 2.25rem; padding: 0 1.5rem; }
.lc-head p {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--or, #B8956A);
}
.lc-viewport {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.lc-track { display: flex; gap: 1.25rem; width: max-content; animation: lc-scroll 38s linear infinite; }
.lc-viewport:hover .lc-track { animation-play-state: paused; }
@keyframes lc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lc-item {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  height: 4.5rem; min-width: 12rem; padding: 0 2rem; border-radius: 1rem;
  border: 1px solid rgba(212,204,216,0.12); background: rgba(42,29,68,0.35);
  text-decoration: none; color: var(--nacre, #E0D8E8);
  transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
.lc-item:hover { border-color: rgba(184,149,106,0.55); background: rgba(42,29,68,0.6); transform: translateY(-3px); }
.lc-item img { max-height: 2.1rem; width: auto; max-width: 11rem; filter: brightness(0) invert(0.9); opacity: 0.85; transition: filter 0.35s ease, opacity 0.35s ease; }
.lc-item:hover img { filter: none; opacity: 1; }
/* logo sur fond blanc (Cabis) : inversé puis fusionné pour faire disparaître le fond */
.lc-item img.lc-knock { filter: grayscale(1) invert(1) brightness(1.1); mix-blend-mode: screen; }
.lc-item:hover img.lc-knock { filter: none; mix-blend-mode: normal; }
.lc-item.has-img:hover { background: #fff; }
.lc-word { font-family: 'Marcellus', serif; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

/* ─── 3. FAQ ANIMÉE (accordéon) ──────────────────────────────────────────── */
.faq { margin-top: 3rem; border-top: 1px solid var(--trait, rgba(212,204,216,0.12)); }
.faq-item { border-bottom: 1px solid var(--trait, rgba(212,204,216,0.12)); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.6rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--nacre, #E0D8E8); font-family: 'Playfair Display', serif; font-size: clamp(1.1rem, 2vw, 1.35rem);
}
.faq-q:hover { color: var(--accent, #A78BFA); }
.faq-q:focus-visible { outline: 2px solid var(--accent, #A78BFA); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; position: relative;
  border: 1px solid rgba(184,149,106,0.5); transition: transform 0.5s cubic-bezier(0.22, 1.25, 0.36, 1), background 0.3s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 0.75rem; height: 1px; background: var(--or, #B8956A);
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.4s ease; }
.faq-item.open .faq-icon { transform: rotate(180deg); background: rgba(184,149,106,0.12); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  color: var(--texte, rgba(224,216,232,0.75)); font-size: 0.98rem; max-width: 46rem; padding-bottom: 1.6rem;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease 0.1s, transform 0.5s ease 0.1s;
}
.faq-item.open .faq-a p { opacity: 1; transform: none; }

/* ─── 3. BARRE DE PROGRESSION DE LECTURE ─────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, rgba(184,149,106,0.4), #B8956A 60%, #E4C79C);
  box-shadow: 0 0 10px rgba(184,149,106,0.55);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ─── 4. TEXTE RÉVÉLÉ AU DÉFILEMENT ──────────────────────────────────────── */
.rv-ready .rv-word { opacity: 0.16; transition: opacity 0.25s linear; }

/* ─── 5. BOUTONS MAGNÉTIQUES ─────────────────────────────────────────────── */
.magnetic { transition: translate 0.45s cubic-bezier(0.22, 1.25, 0.36, 1), transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, color 0.3s ease !important; }

/* ─── 6. FLÈCHES ENTRE LES ÉTAPES ────────────────────────────────────────── */
.steps-box { position: relative; }
.steps-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.steps-line { fill: none; stroke: #B8956A; stroke-width: 1.5; stroke-linecap: round; opacity: 0.85; transition: stroke-dashoffset 1s cubic-bezier(0.6, 0, 0.3, 1); }
.steps-head { fill: none; stroke: #B8956A; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s ease; }
.steps-drawn .steps-head { opacity: 0.85; }

/* ─── 7. GALERIE QUI S'AGRANDIT AU SURVOL (façon Hover Expand) ───────────── */
/* Sur mobile et tablette, les rangées s'effacent : la mosaïque d'origine reste. */
.hx-row { display: contents; }
@media (min-width: 901px) and (hover: hover) {
  .mgal { columns: auto; display: flex; flex-direction: column; gap: 0.85rem; }
  .hx-row { display: flex; gap: 0.85rem; height: clamp(18rem, 30vw, 24rem); }
  .hx-row figure { flex: 1 1 0; min-width: 0; height: 100%; margin: 0 !important; transition: flex 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
  .hx-row figure img { width: 100%; height: 100%; object-fit: cover; }
  .hx-row figure:hover { flex: 2.8 1 0; }
}

/* ─── 8. CARTES AVEC REFLET DORÉ ─────────────────────────────────────────── */
.glow { isolation: isolate; }
.card.glow { position: relative; }
.glow-layer {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(22rem circle at var(--gx, 50%) var(--gy, 50%), rgba(184,149,106,0.13), transparent 60%);
}
.glow-layer::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(16rem circle at var(--gx, 50%) var(--gy, 50%), rgba(228,199,156,0.75), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glow:hover .glow-layer { opacity: 1; }
.glow > :not(.glow-layer) { position: relative; z-index: 1; }

/* ─── 9. LISERÉ LUMINEUX (façon Border Beam) ─────────────────────────────── */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--beam), transparent 0deg, transparent 290deg, rgba(184,149,106,0.15) 315deg, #E4C79C 345deg, #fff 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 7s linear infinite;
}
@keyframes beam-spin { to { --beam: 360deg; } }

/* ─── 10. FORMULAIRE EN ÉTAPES ───────────────────────────────────────────── */
.f-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.stepped .f-step[hidden] { display: none; }
.stepped .f-step.active { animation: f-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes f-in { from { opacity: 0; transform: translateX(var(--from, 24px)); } to { opacity: 1; transform: none; } }
.f-progress { margin-bottom: 2rem; }
.f-progress-labels { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.85rem; }
.f-progress-labels span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(212,204,216,0.4); transition: color 0.4s ease;
}
.f-progress-labels b {
  display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1px solid rgba(212,204,216,0.25); font-weight: 400; font-size: 0.62rem; letter-spacing: 0;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.f-progress-labels span.on { color: rgba(224,216,232,0.85); }
.f-progress-labels span.on b { border-color: #B8956A; color: #B8956A; }
.f-progress-labels span.now b { background: #B8956A; color: #15101F; transform: scale(1.1); }
.f-progress-track { height: 2px; border-radius: 2px; background: rgba(212,204,216,0.12); overflow: hidden; }
.f-progress-fill { height: 100%; background: linear-gradient(90deg, #B8956A, #A78BFA); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.f-nav { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.f-nav .f-submit, .f-nav .f-next { flex: 1; width: auto; }
.f-next {
  background: var(--accent, #A78BFA); color: var(--noir, #15101F); border: 0; border-radius: 100px; cursor: pointer;
  padding: 1rem 1.5rem; font-family: 'Sora', sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em;
}
.f-back {
  background: none; border: 0; cursor: pointer; padding: 0.75rem 0.25rem; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(212,204,216,0.6); transition: color 0.3s ease;
}
.f-back:hover { color: var(--accent, #A78BFA); }
.f-nav [hidden] { display: none !important; }
@media (max-width: 560px) { .f-progress-labels span { font-size: 0; gap: 0; } .f-progress-labels span.now { font-size: 0.58rem; gap: 0.4rem; } }

/* ─── 11. AVATARS DES MEMBRES ────────────────────────────────────────────── */
.av-group { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; text-decoration: none; color: inherit; }
.av-stack { display: flex; flex-shrink: 0; }
.av-stack img, .av-more {
  width: 2.85rem; height: 2.85rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--violet, #2A1D44); margin-left: -0.8rem; background: var(--abyssal, #1C1529);
  opacity: 0; transform: translateX(-10px) scale(0.6);
  transition: transform 0.6s cubic-bezier(0.22, 1.5, 0.36, 1), opacity 0.4s ease, margin 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.av-stack > :first-child { margin-left: 0; }
.av-more { display: inline-flex; align-items: center; justify-content: center; color: #B8956A; font-family: 'Playfair Display', serif; font-size: 1.3rem; border-color: rgba(184,149,106,0.6); }
.av-group.in .av-stack > * { opacity: 1; transform: none; }
.av-group.in .av-stack > :nth-child(2) { transition-delay: 0.07s; } .av-group.in .av-stack > :nth-child(3) { transition-delay: 0.14s; }
.av-group.in .av-stack > :nth-child(4) { transition-delay: 0.21s; } .av-group.in .av-stack > :nth-child(5) { transition-delay: 0.28s; }
.av-group.in .av-stack > :nth-child(6) { transition-delay: 0.35s; }
.av-group:hover .av-stack > :not(:first-child) { margin-left: -0.35rem; transition-delay: 0s; }
.av-text { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88rem; color: var(--nacre, #E0D8E8); line-height: 1.35; }
.av-link { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #B8956A; }
.av-group:hover .av-link { color: var(--accent, #A78BFA); }

/* ─── 12. AFTERMOVIE EN POP-UP ───────────────────────────────────────────── */
.vm-open {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; cursor: pointer;
  background: rgba(42,29,68,0.5); border: 1px solid rgba(184,149,106,0.45); border-radius: 100px; padding: 0.55rem 1.4rem 0.55rem 0.55rem;
  color: var(--nacre, #E0D8E8); font-family: 'Sora', sans-serif; font-size: 0.82rem; letter-spacing: 0.06em;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.vm-open:hover { border-color: #B8956A; background: rgba(184,149,106,0.12); transform: translateY(-2px); }
.vm-open[hidden] { display: none; }
.vm-play { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #B8956A; position: relative; }
.vm-play::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #15101F; }
.vm { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; }
.vm.open { opacity: 1; }
.vm::backdrop { background: rgba(10,7,16,0.88); backdrop-filter: blur(10px); }
.vm-box { width: min(92vw, 1100px); aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; background: #000; transform: scale(0.94); transition: transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1); box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8); }
.vm.open .vm-box { transform: none; }
.vm-box iframe, .vm-box video { width: 100%; height: 100%; border: 0; display: block; }
.vm-close { position: fixed; top: 1.25rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(224,216,232,0.3); background: rgba(21,16,31,0.6); color: #E0D8E8; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vm-close:hover { border-color: #B8956A; color: #B8956A; }

@media (prefers-reduced-motion: reduce) {
  .nf-reel, .faq-a, .faq-a p, .faq-icon, .faq-icon::after { transition: none !important; }
  .beam::before { animation: none; }
  .stepped .f-step.active { animation: none; }
  .steps-line, .hx-row figure, .av-stack img, .av-more, .vm, .vm-box { transition: none !important; }
  .lc-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .lc-track [aria-hidden="true"] { display: none; }
  .lc-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* les flèches partent de la fin du numéro, pas du bord de la colonne */
.process-num[data-step-anchor] { display: inline-block; }