/* Hubdiver — identité visuelle (emblème officiel PNG + wordmark) */
:root {
  --brand-navy: #0e3343;
  --brand-navy-d: #0a2835;
  --brand-cream: #f4f1e8;
}

.brand-word {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: inherit;
}
.brand-hub { font-weight: 500; }
.brand-diver { font-weight: 800; }

/* PNG officiel — ratio 629×672, jamais étiré (conteneur parent obligatoire) */
.brand-emblem-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* —— Emblème (carré crème, logo centré) —— */
.brand-emblem,
.brand .logo,
.m-nav .brand .logo,
.sf-logo-mark,
.hub-core .hub-core-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--brand-cream) !important;
  box-shadow: 0 4px 16px rgba(14, 51, 67, .14), 0 0 0 1px rgba(14, 51, 67, .07) !important;
  overflow: hidden;
  aspect-ratio: 1;
}

.brand-emblem--sm,
.brand .logo,
.m-nav .brand .logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.brand-emblem--sm .brand-emblem-img,
.brand .logo .brand-emblem-img,
.m-nav .brand .logo .brand-emblem-img {
  width: 78%;
  height: auto;
}

.brand-emblem--md {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.brand-emblem--md .brand-emblem-img { width: 80%; height: auto; }

.brand-emblem--lg {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(14, 51, 67, .2), 0 0 0 1px rgba(14, 51, 67, .08) !important;
}
.brand-emblem--lg .brand-emblem-img { width: 82%; height: auto; }

.brand-emblem--xl {
  width: 76px;
  height: 76px;
  border-radius: 18px;
}
.brand-emblem--xl .brand-emblem-img { width: 84%; height: auto; }

/* —— Lockup —— */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand-lockup-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.brand-tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(126, 232, 247, .88);
  line-height: 1.2;
}

/* —— Navigation —— */
.m-nav .brand { gap: 12px; padding: 0; }
.m-nav .brand .name .brand-word {
  font-size: 18px;
  color: var(--text);
  letter-spacing: -.03em;
}
.m-nav .brand .sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* —— Hero landing —— */
.hero-brand-lockup { margin-bottom: 20px; }
.brand-word--hero {
  font-size: clamp(26px, 3.8vw, 36px);
  color: #fff;
  line-height: 1;
}

.hero-brand-watermark {
  position: absolute;
  right: 1%;
  bottom: 4%;
  width: min(320px, 40vw);
  pointer-events: none;
  z-index: 0;
  opacity: .18;
}
.hero-brand-watermark .brand-emblem-img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

/* —— CTA —— */
.cta-brand-lockup {
  justify-content: center;
  margin: 0 auto 16px;
}
.cta-brand-lockup .brand-word { font-size: 21px; color: #fff; }

/* —— Hub radial —— */
.hub-core .hub-core-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 22px rgba(14, 51, 67, .25) !important;
}
.hub-core .hub-core-logo .brand-emblem-img { width: 82%; height: auto; max-width: 82%; max-height: 82%; }

/* —— Footer —— */
.sf-logo { flex-shrink: 0; }
.sf-logo-mark {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3) !important;
}
.sf-logo-mark .brand-emblem-img { width: 82%; height: auto; max-width: 82%; max-height: 82%; }
.sf-logo-txt .brand-word { font-size: 22px; color: #fff; }

.site-footer { position: relative; z-index: 1; clear: both; }

/* —— Filigrane pages feature —— */
.feat-hero { position: relative; overflow: hidden; }
.feat-hero::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-46%);
  width: clamp(160px, 24vw, 280px);
  aspect-ratio: 629 / 672;
  pointer-events: none;
  opacity: .14;
  background-color: var(--brand-cream);
  mask-image: url(logo-emblem.png);
  -webkit-mask-image: url(logo-emblem.png);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.feat-hero-brand { margin-bottom: 14px; }
.feat-hero-brand .brand-word { font-size: 20px; color: #fff; }

@media (max-width: 900px) {
  .hero-brand-watermark { width: min(240px, 48vw); opacity: .12; }
}

@media (max-width: 720px) {
  .m-nav .brand .sub { display: none; }
  .m-nav .brand .name .brand-word { font-size: 17px; }
  .brand-emblem--sm,
  .brand .logo,
  .m-nav .brand .logo {
    width: 42px;
    height: 42px;
  }
  .hero-brand-watermark { display: none; }
}