/* --------------------------------------------------------------------------
   La marque FPRO : le signe, le mot, la ligne.

   Cette feuille n'est chargee que par les pages de fpro.fr. Les sites clients
   emploient la meme classe .marque pour le nom de leur commerce, avec les
   regles de base.css : il ne faut rien changer la-bas, d'ou le modificateur
   .marque--fpro qui n'existe que sur la vitrine.

   Le signe est une fenetre de navigateur dont la barre de titre sert de barre
   haute au F. C'est pour cette raison que le F n'a que deux barres dessinees :
   la troisieme est la barre de la fenetre. Ses couleurs sont ecrites en dur
   dans le SVG, et non prises dans la palette : un logo ne change pas de
   couleur avec le theme de la page, sinon ce n'est plus un logo.
   -------------------------------------------------------------------------- */

.marque--fpro {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 11px;
  align-items: center;
}

.marque__signe {
  grid-row: 1 / span 2;
  display: block;
  width: 32px;
  height: 32px;
}

.marque__mot {
  align-self: end;
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: .015em;
  line-height: 1;
}

.marque__ligne {
  align-self: start;
  margin-top: 3px;
  font-family: var(--corps);
  font-weight: 400;
  font-size: .77rem;
  line-height: 1;
  color: var(--encre-2);
}

/* Sous 430 px la ligne disparait : sur un telephone, la barre doit garder le
   bouton entier, et « FPRO » avec le signe suffit a nommer la maison.
   La grille retombe alors sur une rangee, ou le mot se recentre. */
@media (max-width: 429px) {
  .marque--fpro { column-gap: 9px; }
  .marque--fpro .marque__ligne { display: none; }
  .marque--fpro .marque__mot { align-self: center; }
  .marque--fpro .marque__signe { grid-row: 1; width: 28px; height: 28px; }
}