/* ============================================================
   GABONIMMO.COM — Marque
   Emblème monolithe + nom gravé. Net à toutes les tailles,
   contrairement à une image de logo qui se dégrade en petit.

   Note : aucun <b>, <i> ni <em> dans la marque. L'en-tête vit dans
   .bar, et la feuille du site contient « .bar i { background: ... } »
   pour les barres de progression — ce qui posait un rectangle de
   couleur derrière « .COM ». Les trois parties du nom sont des span.
   ============================================================ */

.mk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  /* La marque ne doit JAMAIS se comprimer : sinon le nom est tronqué
     après « GABON » dès que la barre est chargée. C'est le menu du haut
     qui s'adapte, pas le logo. */
  flex: 0 0 auto;
  max-width: none;
  line-height: 1;
}
.mk:hover { text-decoration: none; }

/* Emblème « Sceau GI » : un carré terracotta plein, le GI creusé dedans.
   Choisi parce qu'il reste parfaitement lisible à 16 px (icône d'application,
   favicon, aperçu de partage), là où un dessin fin disparaît. */
.mk-emblem {
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 22%;
  filter: drop-shadow(0 2px 3px rgba(120, 50, 20, .22));
}

/* Sur fond sombre (pied de page), le sceau garde sa chaleur : on lui donne
   un liseré doré discret pour qu'il ne se fonde pas dans le brun. */
.mk--clair .mk-emblem {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  box-shadow: 0 0 0 1px rgba(233, 200, 146, .38);
}

/* Le nom : « GABON » à l'encre, « IMMO » et « .COM » en or. */
.mk-name {
  display: inline-flex;
  align-items: baseline;
  /* Même police que le reste du site (Inter). L'interlettrage est resserré
     pour que le nom garde sa présence de marque en capitales mêlées. */
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mk-a { color: var(--ink); }
.mk-b { color: #A87C1F; }
.mk-c { color: #A87C1F; font-size: .68em; margin-left: .06em; }

/* ---- Tailles ---- */
.mk-sm .mk-emblem { height: 32px; width: 32px; }
.mk-sm .mk-name { font-size: 1.06rem; }

.mk-md .mk-emblem { height: 38px; width: 38px; }
.mk-md .mk-name { font-size: 1.32rem; }

.mk-lg .mk-emblem { height: 74px; width: 74px; }
.mk-lg .mk-name { font-size: 2.35rem; }
.mk-lg { gap: 14px; justify-content: center; display: flex; margin: 0 auto; width: fit-content; }

/* Sur fond sombre (pied de page) : le nom passe en crème et en or clair. */
.mk--clair .mk-a { color: #FBF3E6; }
.mk--clair .mk-b { color: #E9C892; }
.mk--clair .mk-c { color: #E9C892; }

/* Téléphone : le nom reste entier sans pousser les boutons hors écran.
   On masque « .COM » (le domaine se lit dans l'adresse) plutôt que de
   tronquer le nom de la marque. */
@media (max-width: 420px) {
  .mk-md { gap: 7px; }
  .mk-md .mk-emblem { height: 32px; width: 32px; }
  .mk-md .mk-name { font-size: 1.08rem; }
  .mk-md .mk-c { display: none; }
}

/* Sur téléphone, « Créer un compte » sortait de l'écran et poussait le menu
   hamburger avec lui. On le retire de la barre : il reste accessible dans le
   menu latéral, dans le pied de page et depuis la page de connexion. */
@media (max-width: 600px) {
  .header-actions .mk-cta-compte { display: none; }
}

@media (max-width: 340px) {
  .mk-md .mk-name { font-size: 1rem; }
}

/* Page de connexion : marque centrée en grand. */
.auth-logo { display: block; margin: 0 auto 4px; max-width: 100%; height: auto; }

/* Séparateurs de la signature (remplacent les <i> d'origine). */
.logo-signature .mk-sep { color: #B98B4E; padding: 0 .14em; font-style: normal; }