/* ===========================================================================
   FIVERTU — LAYOUT PARTAGÉ · PIED DE PAGE (footer.css) · version 1 (novembre 2026)
   Bloc « Lumière » (lueur douce en haut à gauche, navy en bas à droite, comme
   les cartes du site ; v1.1 : sans liseré en haut), design « Lignes alignées » :
   à gauche le logo (sur la ligne des titres de colonnes), la phrase de marque,
   l'email (sur la ligne du dernier lien) ; à droite quatre colonnes de liens,
   titres en cadre cobalt (même règle que le méga menu). Les deux lignes
   légales sous le bloc, hors bordure. Zone CTA facultative en haut du bloc.
   Largeurs : > 1150 px marque | colonnes (lignes alignées) ; ≤ 1150 px la marque
   au-dessus des colonnes ; ≤ 760 px colonnes en 2 × 2 ; ≤ 640 px réglages du
   téléphone (bloc plus serré, bouton du CTA pleine largeur).
   Dépend du socle du site (tokens des deux thèmes, échelles, boutons). Se place
   après header.css, avant les styles de la page. Pas de script.
   =========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  padding: var(--sp-section) var(--pad-x) clamp(40px, 5vw, 64px);
}
.sf-in { max-width: var(--container); margin: 0 auto; }
.site-footer :where(a:not(.btn)) { color: inherit; text-decoration: none; }   /* :where : ne passe pas devant les couleurs des liens ci-dessous */
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* --- le bloc Lumière --- */
.sf-card {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 4.5vw, 72px);
  padding: var(--sp-card-lg);
  background-color: var(--process);
  background-image: var(--lum-glow);   /* v1.3 — token du socle (le thème clair le redéfinit) */
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-md);
}

/* --- la marque : logo, phrase, email --- */
.sf-brand { display: flex; flex-direction: column; align-items: flex-start; }
.sf-home { display: inline-block; border-radius: var(--radius-sm); }
.sf-logo { display: block; height: 32px; width: auto; color: var(--logo); }
.sf-tag {
  margin: 28px 0 0;
  color: var(--fg);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.sf-tag em { display: block; font-style: normal; font-weight: 400; color: var(--em-2); -webkit-text-fill-color: var(--em-2); }
.sf-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color var(--t-fast);
}
.sf-mail:hover { color: var(--accent); }
.sf-ic { flex: none; width: 16px; height: 16px; color: var(--cobalt-lt); }

/* --- les colonnes de liens --- */
.sf-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));   /* v1.2 — 1.45 (au lieu de 1.35) : « Strategic Asset Allocation » tient sur une ligne dès 1151 px */
  gap: 24px;
  padding-top: 2px;
}
.sf-h {
  display: inline-flex;
  margin: 0 0 18px;
  padding: 4px 8px;
  color: var(--mm-lbl);
  background: rgb(var(--acc-ch) / 0.06);
  border: 1px solid rgb(var(--acc-ch) / 0.45);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.sf-col li + li { margin-top: 12px; }
.sf-col a { color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.5; transition: color var(--t-fast); }
.sf-col a:hover { color: var(--fg); }

/* --- les deux lignes légales, sous le bloc --- */
.sf-legal { padding: 28px clamp(32px, 4vw, 56px) 0; color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.7; }
.sf-legal p { margin: 0; }
.sf-legal p + p { margin-top: 4px; }

/* --- zone CTA facultative (home) : en haut du bloc, sur toute sa largeur --- */
.sf-cta, .sf-sep { grid-column: 1 / -1; }
.sf-cta { padding-top: clamp(24px, 3vw, 40px); text-align: center; }
.sf-cta-title {
  margin: 0 0 24px;
  color: var(--fg);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.sf-cta-title em { font-style: normal; font-weight: 400; color: var(--em-2); -webkit-text-fill-color: var(--em-2); }   /* v1.1 — deux tons, comme les titres de section */
.sf-cta-deck {
  max-width: 660px;                  /* deux lignes sur ordinateur */
  margin: 0 auto var(--sp-block);
  color: var(--fg-3);
  font-size: var(--fs-lead);
  line-height: 1.65;
  text-wrap: balance;
}
.sf-cta-actions { display: flex; justify-content: center; }
.sf-sep { height: 1px; margin: clamp(16px, 2vw, 24px) 0 clamp(8px, 1vw, 16px); background: var(--line-soft); }

/* --- tablette et petits portables (≤ 1150 px) : la marque au-dessus, les colonnes en dessous --- */
@media (max-width: 1150px) {
  .sf-card { grid-template-columns: 1fr; }
  .sf-mail { margin-top: 0; }
}
@media (max-width: 760px) {
  .sf-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; column-gap: 20px; }   /* 2 × 2 : « Strategic Asset Allocation » ne tient plus sur une ligne en 4 colonnes */
}
@media (max-width: 640px) {
  .site-footer { padding-bottom: 36px; }
  /* colonnes à la largeur de leurs liens : « Strategic Asset Allocation » tient sur une ligne dès 390 px
     (en dessous, c'est la colonne de gauche qui passe à la ligne, jamais celle de droite) */
  .sf-cols { grid-template-columns: auto auto; justify-content: space-between; column-gap: 12px; }
  .sf-card { padding: 32px 20px; gap: 36px; }
  .sf-logo { height: 28px; }
  .sf-brand { container-type: inline-size; }
  .sf-tag { margin-top: 22px; font-size: min(24px, 6.8cqi); }   /* « Quiet discipline in a loud market. » tient sur une ligne (passe à la ligne si le visiteur élargit l'espacement du texte) */
  .sf-tag em { display: inline; }
  .sf-mail { padding-top: 22px; }
  .sf-legal { padding: 22px 0 0; }
  .sf-cta { padding-top: 8px; }
  .sf-cta-actions .btn-lg { width: 100%; justify-content: center; }
  .sf-sep { margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-mail, .sf-col a { transition: none; }
}