/* =====================================================================
   STORM PATRIMOINE — Styles spécifiques : ACCUEIL
   ===================================================================== */

/* HERO ------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  color: var(--white); overflow: hidden;
  padding-top: calc(var(--header-h) + var(--topbar-h));   /* le contenu reste sous la bande + l'en-tête fixes, jamais masqué */
}
.hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.08); animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(20,17,13,.92) 0%, rgba(20,17,13,.7) 45%, rgba(20,17,13,.35) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 860px; padding-block: 56px; }
.hero h1 { margin: 22px 0 26px; color: var(--white); }
.hero .lead { color: #d8d1c5; max-width: 640px; }
.hero-scroll {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 26px;   /* zone cliquable élargie, sans élargir la barre visible */
}
.hero-scroll span {
  width: 1px; height: 46px; background: rgba(255,255,255,.4); position: relative; overflow: hidden;
}
.hero-scroll span::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--gold);
  animation: scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine { 0% { top: -50%; } 100% { top: 100%; } }

/* OBJECTIFS -------------------------------------------------------- */
.objectives-grid .card { display: flex; flex-direction: column; }
.objectives-grid .card p { flex: 1; }
.card--cta { background: var(--ink); color: #cfc7b8; border-color: transparent; }
.card--cta h3 { color: var(--white); }
.card--cta p { color: #b3aa9b; }
.card--cta .card-icon { border-color: var(--gold); color: var(--gold); }
.card--cta .link-arrow { color: var(--gold-light); }

/* MÉTHODE ---------------------------------------------------------- */
.method-grid { gap: 40px; }
.method-step { position: relative; padding-top: 12px; }
.method-step h4 { margin: 8px 0 12px; }
.method-step p { font-size: .96rem; color: var(--text-soft); }
.method-step::before {
  content: ""; position: absolute; top: 26px; left: 76px; right: -40px; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.method-grid > .method-step:last-child::before { display: none; }

/* STATISTIQUES ----------------------------------------------------- */
.stats-band { position: relative; }
.stats-band::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(circle at 15% 50%, rgba(213,168,79,.16), transparent 45%);
}
.stats-band .container { position: relative; z-index: 1; }

/* GESTION DE FORTUNE (teaser) -------------------------------------- */
.fortune-teaser .split-media img { aspect-ratio: 4/5; }
.fortune-teaser .gold-list { margin: 24px 0 8px; }

/* SOLUTIONS mini --------------------------------------------------- */
.solutions-mini { display: flex; flex-wrap: wrap; gap: 14px; }
.solutions-mini .chip { transition: all .35s var(--ease); cursor: default; }
.solutions-mini .chip:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-3px); }

/* NOS PARTENAIRES (sliders de logos) ------------------------------- */
.partners .section-head { margin-bottom: clamp(24px, 3.4vw, 38px); }
.logo-cat {
  text-align: center; font-family: var(--font-body);
  font-size: .76rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dark); margin: 0 0 14px;
}
.logo-marquee + .logo-cat { margin-top: 30px; }
.logo-marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-track { display: flex; align-items: center; width: max-content; animation: logoScroll 80s linear infinite; }
.logos--reverse .logo-track { animation-direction: reverse; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 70px; padding: 0 38px;
}
.logo-item img { max-height: 56px; max-width: 150px; width: auto; object-fit: contain; transition: filter .4s var(--ease), opacity .4s var(--ease); }

/* Repli texte (tant que le PNG n'est pas déposé) */
.logo-text {
  font-family: var(--font-title); font-size: 1.35rem; white-space: nowrap;
  color: var(--text-soft); opacity: .8; transition: color .4s var(--ease), opacity .4s var(--ease);
}
.logo-item:hover .logo-text { color: var(--gold-dark); opacity: 1; }

/* Filtres au choix : ajoutez la classe voulue sur .logo-marquee */
.logos--gray  .logo-item img { filter: grayscale(1); opacity: .6; }
.logos--black .logo-item img { filter: brightness(0); opacity: .55; }
.logos--gold  .logo-item img { filter: brightness(0) saturate(100%) invert(64%) sepia(38%) saturate(680%) hue-rotate(2deg) brightness(92%) contrast(88%); opacity: .85; }
.logos--gray  .logo-item:hover img,
.logos--black .logo-item:hover img,
.logos--gold  .logo-item:hover img { filter: none; opacity: 1; }

/* Variante « cartes » : tuiles blanches uniformes.
   Rendu « colorés et grisés » : logos légèrement désaturés au repos,
   couleur complète révélée au survol de la tuile. */
.logos--cards .logo-item { height: auto; padding: 0 11px; }
.logos--cards .logo-item img {
  height: 86px; width: auto; max-height: none; max-width: none;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 22px -16px rgba(20,17,13,.4);
  filter: grayscale(1); opacity: .72;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              filter .4s var(--ease), opacity .4s var(--ease);
}
.logos--cards .logo-item:hover img {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -16px rgba(20,17,13,.45);
  filter: grayscale(0); opacity: 1;
}

@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* CITATION --------------------------------------------------------- */
.quote-section { padding-block: clamp(50px, 7vw, 90px); }

@media (max-width: 980px) {
  .method-step::before { display: none; }
}
@media (max-width: 640px) {
  .hero-inner { padding-block: 40px; }
  .hero-scroll { display: none; }
}
/* Écrans peu hauts : on masque l'indicateur pour qu'il n'empiète pas sur le contenu */
@media (max-height: 720px) {
  .hero-scroll { display: none; }
}
