/* ==========================================================================
   CQR — COMPOSANTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; }
.logo svg { height: 34px; width: auto; }
.site-footer .logo svg { height: 28px; }
.logo-word { fill: var(--logo-word); }
.logo-mark { fill: var(--logo-mark); stroke: var(--logo-mark); }
.logo-mark-hi { fill: var(--logo-mark-hi); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--b-1);
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(var(--blur-sm));
          backdrop-filter: blur(var(--blur-sm));
}
.site-nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--sp-5) var(--section-padding);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7);
}
.site-nav__links {
  display: flex; align-items: center; gap: var(--sp-7);
  font-size: var(--fs-small); color: var(--c-muted);
}
.site-nav__links a { transition: color var(--dur-1) var(--ease); padding-block: var(--sp-1); }
.site-nav__links a:hover { color: var(--c-text); }
.site-nav__links a[aria-current="page"] { color: var(--c-accent-text-hi); }

.lang-switch {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-faint);
  border: 1px solid var(--b-1); border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lang-switch:hover { color: var(--c-text); border-color: var(--b-3); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-nav__inner { padding-inline: var(--sp-6); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--b-1); border-radius: var(--r-full);
  }
  .nav-toggle span { display: block; width: 16px; height: 1px; background: var(--c-text); position: relative; }
  .nav-toggle span::before,
  .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--c-text); }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after  { top: 5px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

  .site-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(0,0,0,0.94);
    -webkit-backdrop-filter: blur(var(--blur-lg));
            backdrop-filter: blur(var(--blur-lg));
    border-bottom: 1px solid var(--b-1);
    padding: var(--sp-3) var(--sp-6) var(--sp-7);
    font-size: var(--fs-body);
    display: none;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { padding-block: var(--sp-5); border-bottom: 1px solid var(--b-1); }
  .site-nav__links .btn { margin-top: var(--sp-6); justify-content: center; border-bottom: 0; }
  .site-nav__links .lang-switch { align-self: flex-start; margin-top: var(--sp-6); border-bottom: 1px solid var(--b-1); }
}

/* --------------------------------------------------------------------------
   Boutons — pilule noire, liseré blanc 10 % (charte)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-7);
  border-radius: var(--r-full);
  border: 1px solid var(--b-1);
  background: var(--c-background);
  color: var(--c-text-hi);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500;
  transition: border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:hover { border-color: var(--b-3); background: var(--s-2); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--accent {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 0 var(--glow-primary);
}
.btn--accent:hover {
  background: var(--c-primary);
  border-color: var(--c-accent-text);
  box-shadow: 0 8px 32px -8px var(--glow-primary);
}
.btn--ghost { background: transparent; color: var(--c-muted); }
.btn--ghost:hover { color: var(--c-text); }
.btn--sm { padding: var(--sp-2) var(--sp-6); font-size: var(--fs-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap-lg); }

/* lien fléché */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); color: var(--c-accent-text);
  transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.arrow-link:hover { gap: var(--sp-5); color: var(--c-accent-text-hi); }

/* --------------------------------------------------------------------------
   Surface verre + coque à liseré dégradé (technique de la charte)
   -------------------------------------------------------------------------- */
.glass {
  background: var(--s-1);
  border: 1px solid var(--b-1);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(var(--blur-sm));
          backdrop-filter: blur(var(--blur-sm));
  box-shadow: var(--shadow-drop);
}

.shell {
  position: relative;
  padding: 1px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(160deg, var(--b-2), rgba(255,255,255,0.02) 40%, var(--b-1));
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
  box-shadow: var(--shadow-drop);
}
.shell > * {
  border-radius: calc(var(--r-lg) - 1px);
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(var(--blur-lg));
          backdrop-filter: blur(var(--blur-lg));
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 96px); position: relative; }
.hero__glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 100%); height: 640px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--glow-primary), rgba(0,0,0,0) 68%);
}
.hero__inner { position: relative; }
.hero .display { margin-top: var(--sp-7); }
.hero .lead { margin-top: var(--sp-8); }
.hero .btn-row { margin-top: var(--sp-9); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--b-1); border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-muted); background: var(--s-1);
}
.badge__dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-accent-text-hi);
  box-shadow: 0 0 8px var(--c-accent-text);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --------------------------------------------------------------------------
   Figure produit — cadre verre autour des captures
   -------------------------------------------------------------------------- */
.shot { margin: 0; }
.shot__frame {
  padding: var(--card-padding);
  overflow: hidden;
}
.shot__frame img {
  width: 100%; height: auto;
  border-radius: calc(var(--r-lg) - var(--card-padding) - 1px);
  border: 1px solid var(--b-1);
}
.shot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.shot__bar .eyebrow { color: var(--c-faint); }
.shot figcaption {
  margin-top: var(--sp-5);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--c-faint); max-width: var(--maxw-text);
}
.shot figcaption b { color: var(--c-muted); font-weight: 500; }

/* Sur petit écran, une grille de données de 1568px réduite à 340px est illisible.
   Le cadre défile horizontalement, l'image garde une largeur lisible.
   NB : les items de grille ont min-width:auto par défaut, ce qui les empêche de
   descendre sous la taille min-content de leur contenu — d'où le min-width:0. */
.module__shots > *, .shot, .shot .shell { min-width: 0; max-width: 100%; }

@media (max-width: 720px) {
  .shot__frame { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot__frame img { width: 680px; max-width: none; }
  .shot--pending .shot__frame { overflow-x: visible; }
  .shot__bar { position: sticky; left: 0; }
  .shot { position: relative; }
  .shot .shell::after {
    content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px;
    border-radius: 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.85));
    pointer-events: none;
  }
  .shot--pending .shell::after { display: none; }
}

/* emplacement en attente de capture */
.shot--pending .shot__frame {
  display: grid; place-items: center;
  min-height: 220px;
  border: 1px dashed var(--b-2); border-radius: calc(var(--r-lg) - 1px);
  color: var(--c-faint); font-size: var(--fs-small); text-align: center;
  padding: var(--sp-9) var(--sp-7);
}

/* --------------------------------------------------------------------------
   Grilles
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap-lg); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.section__head { margin-bottom: var(--sp-9); }
.section__head .h2 { margin-top: var(--sp-6); }
.section__head .lead { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */
.card {
  padding: var(--card-padding-lg);
  background: var(--s-1);
  border: 1px solid var(--b-1);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(var(--blur-sm));
          backdrop-filter: blur(var(--blur-sm));
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
a.card:hover, .card--hover:hover { border-color: var(--b-3); background: var(--s-2); transform: translateY(-2px); }
.card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; }
.card__text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.card__meta {
  margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--b-1);
  font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-faint);
}

/* --------------------------------------------------------------------------
   Statistiques
   -------------------------------------------------------------------------- */
.stat { padding: var(--card-padding-lg) var(--sp-7); border: 1px solid var(--b-1); border-radius: var(--r-md); background: var(--s-1); }
.stat__value {
  font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--c-accent-text-hi);
}
.stat__label { margin-top: var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Frise de processus — la séquence porte une information réelle
   -------------------------------------------------------------------------- */
.process { display: grid; gap: 1px; background: var(--b-1); border: 1px solid var(--b-1); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 901px) { .process { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.process__step { background: var(--c-background); padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.process__n { font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--c-accent-text); }
.process__t { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.process__d { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-faint); }

/* --------------------------------------------------------------------------
   Bloc module (texte + captures)
   -------------------------------------------------------------------------- */
.module { padding-block: var(--section-y); border-top: 1px solid var(--b-1); }
.module__head { display: grid; gap: var(--sp-7); margin-bottom: var(--sp-9); }
@media (min-width: 901px) { .module__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-10); align-items: start; } }
.module__title { margin-top: var(--sp-6); }
.module__shots { display: grid; gap: var(--sp-9); }

/* --------------------------------------------------------------------------
   Formule + registre de statuts (Fund Flows)
   -------------------------------------------------------------------------- */
.formula {
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  font-size: clamp(15px, 2.2vw, 22px);
  letter-spacing: 0.01em;
  color: var(--c-text);
  overflow-x: auto;
}
.formula sub { font-size: 0.62em; color: var(--c-muted); }
.formula .op { color: var(--c-accent-text); padding-inline: var(--sp-2); }

.ledger { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-small); }
.ledger caption { text-align: left; padding: var(--sp-6) var(--sp-7); color: var(--c-faint); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; }
.ledger th, .ledger td { text-align: left; padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--b-1); vertical-align: top; }
.ledger th { font-weight: 500; color: var(--c-text); width: 46%; }
.ledger td { color: var(--c-faint); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.ledger tr td.is-kept { color: var(--c-accent-text-hi); }
@media (max-width: 560px) {
  .ledger th, .ledger td { padding: var(--sp-5); }
  .ledger caption { padding: var(--sp-5); }
  .ledger th { width: 52%; }
  .formula { padding: var(--sp-8) var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Bandeau CTA
   -------------------------------------------------------------------------- */
.cta-band { position: relative; border-top: 1px solid var(--b-1); padding-block: var(--section-y); overflow: hidden; }
.cta-band__glow {
  position: absolute; bottom: -60%; left: 50%; transform: translateX(-50%);
  width: min(900px, 100%); height: 520px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--glow-tertiary), rgba(0,0,0,0) 66%);
}
.cta-band__inner { position: relative; display: grid; gap: var(--sp-8); align-items: end; }
@media (min-width: 901px) { .cta-band__inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-10); } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-card { padding: clamp(28px, 4vw, 56px); }
.contact-card__mail {
  display: inline-block; margin-top: var(--sp-7);
  font-size: clamp(20px, 3.4vw, 34px); letter-spacing: -0.02em;
  color: var(--c-accent-text-hi);
  border-bottom: 1px solid var(--b-2); padding-bottom: var(--sp-3);
  transition: border-color var(--dur-1) var(--ease);
  word-break: break-word;
}
.contact-card__mail:hover { border-color: var(--c-accent-text-hi); }
.contact-card__who { margin-top: var(--sp-8); font-size: var(--fs-small); color: var(--c-muted); }
.contact-card__who b { display: block; color: var(--c-text); font-size: var(--fs-body); font-weight: 600; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--b-1); padding-block: var(--sp-10) var(--sp-8); }
.site-footer__top { display: grid; gap: var(--sp-9); }
@media (min-width: 901px) { .site-footer__top { grid-template-columns: minmax(0,1fr) auto auto; gap: var(--sp-11); } }
.site-footer__tag { margin-top: var(--sp-6); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-faint); max-width: 34ch; }
.site-footer__col h4 { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-faint); font-weight: 500; margin-bottom: var(--sp-6); }
.site-footer__col a { display: block; font-size: var(--fs-small); line-height: 2; color: var(--c-muted); transition: color var(--dur-1) var(--ease); }
.site-footer__col a:hover { color: var(--c-text); }
.site-footer__legal {
  margin-top: var(--sp-10); padding-top: var(--sp-7); border-top: 1px solid var(--b-1);
  font-size: var(--fs-micro); line-height: 1.7; color: var(--c-faint); max-width: 96ch;
}