/* =========================================================
   Corporate Access Capital — Habillage éditorial « grande
   institution » réservé à la page d'accueil (index.html).

   Toutes les règles ci-dessous sont soit :
   - préfixées par body.home-page (n'affecte donc que index.html,
     même quand elles retouchent une classe partagée ailleurs) ;
   - soit des classes neuves, introduites uniquement ici, qui ne
     sont référencées par aucune autre page du site.
   Aucune règle globale (.nav, .btn, .card, .footer, etc.) n'est
   modifiée : l'espace client, l'espace administrateur, les pages
   d'inscription/connexion et les pages internes restent intactes.
========================================================= */

body.home-page{
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ---------- Typographie éditoriale des grands titres ---------- */
body.home-page .hero h1,
body.home-page .hk-banner h2,
body.home-page .section-head h2,
body.home-page .cta-banner h2{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- Nav homepage : bandeau blanc sobre, façon grande banque ---------- */
/* (les autres pages gardent le nav transparent-sur-photo existant : cette règle
   ne s'applique qu'à body.home-page, donc uniquement à index.html) */
body.home-page .nav{
  position: sticky;
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 18px 0;
}
body.home-page .nav .logo{ color: var(--text); }
body.home-page .nav-links a{ color: var(--text-muted); }
body.home-page .nav-links a:hover{ color: var(--text); }
body.home-page .nav-actions > .btn-ghost{ background:#fff; color:var(--text); border-color:var(--green-dark); }
body.home-page .nav-actions > .btn-ghost:hover{ background: rgba(142,209,252,.14); }
body.home-page .nav-toggle{ color: var(--text); }

/* ---------- Hero : un bloc éditorial unique, sans mockups flottants ---------- */
body.home-page .hero{ padding: 64px 0 130px; }
body.home-page .hero-grid{
  grid-template-columns: 1fr;
  max-width: 760px;
}
/* Le nom de la banque devient le grand titre du hero, à la manière d'une
   couverture de rapport institutionnel — grand serif, pleine largeur photo */
body.home-page .hero-brand{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 6.4vw, 5rem);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 .5em;
}

/* Barre de chiffres clés — hairlines plutôt que blocs colorés */
.figures-bar{
  display:flex; flex-wrap:wrap; margin-top:56px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.18);
}
.figures-bar .figure{
  flex:1 1 140px; padding-right:28px; margin-right:28px;
  border-right:1px solid rgba(255,255,255,0.16);
}
.figures-bar .figure:last-child{ border-right:none; margin-right:0; padding-right:0; }
.figures-bar .figure b{
  display:block; font-family: var(--serif); font-weight:500;
  font-size:1.9rem; color:#fff; margin-bottom:6px;
}
.figures-bar .figure span{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,0.58);
}
@media (max-width:560px){
  .figures-bar .figure{ flex:1 1 45%; margin-bottom:20px; }
}

/* ---------- Bandeau « points de marché » — sobre, clairement illustratif ---------- */
.market-strip{
  background: var(--text);
  color:#fff;
  padding: 15px 0;
  position: relative;
  z-index: 2;
}
.market-strip .container{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.market-strip .market-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color: rgba(255,255,255,0.5);
  flex-shrink:0; white-space:nowrap;
}
.market-strip .market-items{ display:flex; gap:30px; flex-wrap:wrap; flex:1; }
.market-item{ display:flex; align-items:baseline; gap:8px; font-size:.83rem; white-space:nowrap; }
.market-item .name{ color: rgba(255,255,255,0.72); }
.market-item .value{ font-family: var(--ff-head); font-weight:600; }
.market-item .delta{ font-size:.76rem; display:inline-flex; align-items:center; gap:4px; }
.market-item .delta.up{ color: var(--green); }
.market-item .delta.down{ color:#f2a58f; }
.market-strip .market-note{
  font-size:.66rem; color: rgba(255,255,255,0.4); flex-shrink:0; margin-left:auto;
}
@media (max-width:700px){
  .market-strip .market-note{ display:none; }
}

/* ---------- Services : liste éditoriale numérotée ---------- */
.service-index{ border-top:1px solid var(--border); }
.service-row{
  display:grid; grid-template-columns: 64px 1fr 32px; align-items:center;
  gap:20px; padding: 32px 0; border-bottom:1px solid var(--border);
  transition: padding-left .3s ease;
}
.service-row:hover{ padding-left:12px; }
.service-row .num{
  font-family: var(--serif); font-size:1.5rem; color: var(--green-dark); font-weight:500;
}
.service-row h3{ font-size:1.15rem; margin:0 0 6px; }
.service-row p{ margin:0; font-size:.92rem; max-width:620px; }
.service-row .arrow{
  font-size:1.05rem; color: var(--text-dim); transition: transform .3s ease, color .3s ease;
  justify-self:end;
}
.service-row:hover .arrow{ transform: translateX(6px); color: var(--green-dark); }
@media (max-width:700px){
  .service-row{ grid-template-columns: 40px 1fr; }
  .service-row .arrow{ display:none; }
}

/* ---------- Étapes : numéros sobres, cerclés fin ---------- */
body.home-page .step .step-num{
  background:#fff; color: var(--green-dark); border:1px solid var(--border-strong);
  box-shadow:none; font-family: var(--serif); font-size:1.15rem;
}

/* ---------- Présence : coins nets, esprit institutionnel ---------- */
body.home-page .showcase-card{ border-radius: 4px; }

/* ---------- Témoignages : citations éditoriales, sans étoiles ni avatars colorés ---------- */
.quote-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
.quote-card{ border-top:2px solid var(--green); padding-top:22px; }
.quote-mark{
  font-family: var(--serif); font-size:2.6rem; line-height:1; color: var(--green);
  display:block; margin-bottom:8px;
}
.quote-card p{
  font-family: var(--serif); font-style:italic; font-size:1.04rem; color: var(--text); margin-bottom:20px;
}
.quote-user{ display:flex; align-items:center; gap:12px; }
.quote-initial{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family: var(--ff-head); font-weight:600; font-size:.82rem; color: var(--text);
}
.quote-user span{ display:block; font-size:.8rem; color: var(--text-dim); }
.quote-user b{ font-size:.92rem; }
@media (max-width:900px){ .quote-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .quote-grid{ grid-template-columns:1fr; } }