/* ==========================================================================
   Identité de marque — même charte graphique que le groupe (direction « Synapse »).
   Wordmark texte : Bricolage en titrage, Geist en descripteur, dégradé de marque.
   ========================================================================== */

.brand { align-items: center; gap: .65rem; text-decoration: none; }

.brand__mark {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(196, 206, 255, .18), rgba(255, 184, 107, .16));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.brand__mark-icon { width: 20px; height: 20px; color: var(--peri-2); }

.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lait);
}

.brand__wordmark small {
  font-family: var(--f-text);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brume-2);
  margin-top: .32rem;
}

.brand:hover .brand__mark { border-color: var(--peri); }

/* Mention « marque du groupe » dans le pied de page */
.footer-endorse {
  margin: 1.25rem 0 0;
  font-size: var(--step--1);
  color: var(--brume-2);
}

.footer-endorse a {
  color: var(--peri-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.footer-endorse a:hover { color: var(--ambre); border-color: var(--ambre); }

/* Cartes « marques » sur le site du groupe */
.brand-card__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (max-width: 600px) {
  .brand__wordmark { font-size: 1.15rem; }
}