/* Marque Carbone : lockup icône + nom (ui/brand.js), étoile ciselée posée dans le noyau bleu (ui/carbone-star.js).
   Police du nom auto-hébergée : Syncopate 700 (licence OFL), sous-ensemble latin. Rien ici ne vise la page Banque. */
@font-face {
  font-family: "Carbone Syncopate";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syncopate-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- Lockup : la tuile visible (80 % de l'image) a à peu près la hauteur des capitales ---------- */
.cb-lockup { display: inline-flex; align-items: center; gap: 0.42em; max-width: 100%; line-height: 1; vertical-align: middle; }
.cb-lockup--sm { font-size: 17px; }
.cb-lockup--md { font-size: 22px; }
.cb-lockup--lg { font-size: clamp(30px, 4.6vw, 46px); }
/* Moins de 360 px : à 30 px, le lockup (≈ 9em) déborderait de la carte d'accueil. */
@media (max-width: 359px) { .cb-lockup--lg { font-size: 26px; } }

.cb-mark { position: relative; flex: none; width: 0.98em; height: 0.98em; }
.cb-mark__img, .cb-star { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cb-star { overflow: visible; pointer-events: none; }
:root[data-theme="dark"] .cb-mark__img { filter: drop-shadow(0 0.05em 0.1em rgba(0, 0, 0, 0.45)); }

/* ---------- Nom : capitales larges, remplissage métal (sombre) ou encre (clair) ---------- */
.cb-word {
  display: block; margin-right: -0.16em; /* compense l'espacement laissé après la dernière lettre */
  font-family: "Carbone Syncopate", var(--font), sans-serif; font-size: 1em; font-style: normal; font-weight: 700;
  letter-spacing: 0.16em; line-height: 1; text-transform: none; white-space: nowrap;
  /* Centre optique : le milieu des capitales (et non de la boîte de ligne) sur le milieu de la tuile. */
  translate: 0 0.06em;
  color: #0b0d11;
  background-image: linear-gradient(180deg, #22262e 0%, #0b0d11 100%);
  /* Navigateurs récents : suit le schéma de couleurs réellement appliqué (fond sombre imposé compris). */
  background-image: linear-gradient(180deg, light-dark(#22262e, #ffffff) 0%, light-dark(#15181e, #c9ced8) 55%, light-dark(#0b0d11, #9aa1ae) 100%);
}
/* Thème sombre, ou surface toujours sombre (bandeau de la facture, barre latérale sur un fond sombre imposé : classe
   cb-on-dark posée par la vue) : métal, y compris sur les navigateurs sans light-dark(). */
:root[data-theme="dark"] .cb-word, .cb-on-dark .cb-word {
  color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, #c9ced8 55%, #9aa1ae 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cb-word { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) {
  .cb-word { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* ---------- Étoile : un temps toutes les 6 s, en continu ----------
   Chaque temps : les deux triangles tournent de 60° en sens contraires (1,68 s), se superposent à mi-course en un seul
   triangle, se ré-emboîtent, puis restent immobiles. L'ombrage des facettes est figé dans le SVG : au bout de six temps
   (36 s) chaque triangle a fait un tour complet, donc couleurs et ordre de superposition reviennent exactement au départ,
   sans saut. Seul transform est animé (le viewBox est centré sur l'origine : rotation autour du noyau). */
.cb-star__tri {
  transform-box: view-box; transform-origin: 0 0;
  animation: cb-star-up 36s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.cb-star__tri--down { animation-name: cb-star-down; }
.cb-lockup--static .cb-star__tri { animation: none; }

@keyframes cb-star-up {
  0% { transform: rotate(0deg); }
  4.667%, 16.667% { transform: rotate(-60deg); }
  21.333%, 33.333% { transform: rotate(-120deg); }
  38%, 50% { transform: rotate(-180deg); }
  54.667%, 66.667% { transform: rotate(-240deg); }
  71.333%, 83.333% { transform: rotate(-300deg); }
  88%, 100% { transform: rotate(-360deg); }
}
@keyframes cb-star-down {
  0% { transform: rotate(0deg); }
  4.667%, 16.667% { transform: rotate(60deg); }
  21.333%, 33.333% { transform: rotate(120deg); }
  38%, 50% { transform: rotate(180deg); }
  54.667%, 66.667% { transform: rotate(240deg); }
  71.333%, 83.333% { transform: rotate(300deg); }
  88%, 100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cb-star__tri { animation: none; }
}