/* ===========================================================================
   LE LOGO APEX StudioW — pour les pages produit
   ---------------------------------------------------------------------------
   Le logo orbital n'existait que sur l'accueil, ou il est dessine par le bloc
   <style> de la page. Les regles ci-dessous en sont la copie exacte : ce sont
   les DERNIERES definitions de chaque selecteur dans index.html, celles qui
   gagnent reellement. Toute retouche doit se faire des deux cotes, sinon
   l'accueil et les pages produit auront deux logos differents.

   Une seule difference assumee : la taille. Sur l'accueil le logo ouvre la
   page ; ici il n'est qu'un repere dans une barre de navigation, donc plus
   petit (40 px au lieu de 53).
   =========================================================================== */
.barre .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  text-decoration: none;
  letter-spacing: -1px;
}

.brand-symbol { width: 40px; height: 40px; flex: none; overflow: visible; }
.brand-symbol path { stroke: none; opacity: 1 !important; }
.brand-symbol .orbit-back    { fill: none; stroke: #ad8ad9; stroke-width: 1.4; opacity: .65 !important; }
.brand-symbol .apex-mark     { fill: url(#apex-metal); }
.brand-symbol .apex-cut      { fill: #111218; }
.brand-symbol .mountain-snow { fill: #f4eeff; }
.brand-symbol .mountain-ridge{ fill: #bca0ed; opacity: .85 !important; }
.brand-symbol .orbit-front   { fill: none; stroke: #eadcff; stroke-width: 1.5; stroke-linecap: round; }
.brand-symbol .orbit-tip     { fill: #e9dbff; }

.brand-wordmark {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 21px; line-height: 1; font-weight: 900; letter-spacing: .5px;
  color: var(--blanc);
}
.barre .logo .brand-wordmark > span {
  font-size: 13px; font-weight: 500; letter-spacing: 1.2px; color: #d6d1e3;
}
.barre .logo .brand-w { color: inherit; }

/* La barre passait a la ligne quand le logo a grossi. */
.barre { gap: 20px; }
@media (max-width: 520px) {
  .brand-symbol { width: 32px; height: 32px; }
  .brand-wordmark { font-size: 17px; }
  .barre .logo .brand-wordmark > span { font-size: 11px; }
}

/* Le logo est enveloppe dans un lien vers l'accueil : ce lien ne doit rien
   peindre lui-meme, sinon il ajoute un soulignement et une couleur rose. */
.barre .logo-lien { text-decoration: none; color: inherit; display: inline-block; }