/* Le logo dessiné d'un commerce de /commerce (templates/_commerce_logo.html).

   Chargée par la route `vitrine` de commerce_app.py et SEULEMENT quand le
   commerce a un logo : une vitrine sans logo ne télécharge rien de plus et
   rend exactement ce que rendent les modèles.

   Chaque partie est un MASQUE : le dessin vit dans la couche alpha du PNG, la
   couleur est choisie par le gabarit. Le gabarit ne pose en ligne que des
   DONNÉES (`--vlogo-w`, `--vlogo-h`, `--vlogo-url`, `--vlogo-c`) : c'est ici
   qu'elles deviennent taille, masque et couleur. Le logo
   complet est une grille d'une seule piste `minmax(plancher, largeur)` : il
   réclame à sa barre son plancher (le nom dessiné à 10 px de haut) et pas sa
   largeur entière, il rétrécit d'un bloc entre les deux, et ses deux parties
   rétrécissent à la même proportion. Les deux bornes sont posées en ligne par
   la macro (ce sont celles de CE logo) ; les valeurs ci-dessous ne sont que
   des replis, jamais lues sur une vraie page. */

.vlogo {
  --vlogo-k: 1;
  --vlogo-p: 0px;
  --vlogo-l: auto;
  display: inline-grid;
  grid-template-columns: minmax(var(--vlogo-p), var(--vlogo-l));
  max-width: 100%;
  vertical-align: middle;
}
.vlogo-in {
  display: flex;
  align-items: center;
  gap: calc(var(--vlogo-k) * 10px);
  min-width: 0;
}
.vlogo-m {
  --vlogo-w: 0px;
  --vlogo-h: 0px;
  --vlogo-url: none;
  --vlogo-c: currentColor;
  display: block;
  min-width: 0;
  background-color: var(--vlogo-c);
  -webkit-mask-image: var(--vlogo-url); mask-image: var(--vlogo-url);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center;
}
/* Les deux parties du logo complet : leur largeur est une BASE de flex, le
   logo rétrécit d'un bloc et ses deux parties à la même proportion. */
.vlogo-in > .vlogo-m {
  flex: 0 1 calc(var(--vlogo-k, 1) * var(--vlogo-w));
  height: calc(var(--vlogo-k, 1) * var(--vlogo-h));
}
/* Une boîte de taille fixe : l'icône posée devant un nom écrit, le symbole
   seul du repli de Bold et Riso. */
.vlogo-m.vlogo-fixe { width: var(--vlogo-w); height: var(--vlogo-h); }
.vlogo-ico { flex: 0 0 auto; }
/* L'icône posée au fil d'un nom écrit (Plein Cadre : la marque est une ligne
   de texte, coupée par une ellipse). */
.vlogo-ico.vlogo-en-ligne { display: inline-block; vertical-align: -0.28em; margin-right: .4em; }

/* Un paragraphe qui ne porte que le logo (pied de page, titre de fiche) : sa
   hauteur est celle du logo, pas celle d'une ligne de texte de 52 px. */
.vlogo-bloc { line-height: 0; }
/* Le titre d'un menu au téléphone : le logo se resserre dans la place que
   lui laisse le bouton de fermeture, et ne passe jamais dessous. */
.vlogo-titre { display: flex; align-items: center; min-width: 0; overflow: hidden; line-height: 0; }
/* Plein Cadre : le bouton de fermeture porte le mot « Fermer », il laisse au
   titre 166 px sur un écran de 320 ; le logo y est posé un peu plus petit
   pour que son plancher tienne. La règle du modèle `.pc-menu-tete span`
   (nom sur une ligne, coupé par une ellipse) attrape aussi les spans du logo :
   elle les rognait au lieu de les laisser se resserrer. */
.pc-menu-tete .vlogo { --vlogo-k: .85; }
.pc-menu-tete .vlogo, .pc-menu-tete .vlogo span { overflow: visible; white-space: normal; }

/* ── L'en-tête mesuré par vitrine.js (Original, Éditorial, Plein Cadre) ──
   Le moteur commun replie la navigation quand le NOM est tronqué
   (`[data-tete-nom]`, scrollWidth > clientWidth), puis le bouton d'action
   (`is-serre-1`, puis `is-serre-2`). Un logo qui se resserrait de lui-même
   ne serait jamais « tronqué » : il tomberait à son plancher (un nom dessiné
   de 10 px) à côté d'une navigation complète. Il garde donc sa largeur
   entière tant qu'il reste quelque chose à replier, déborde de son cadre
   (`overflow: hidden`) quand il ne tient pas, et c'est ce débordement que
   vitrine.js mesure ; une fois tout replié (`is-serre-2`), il se resserre.
   Sans script (`html.js` absent), rien ne se replie : il se resserre. */
.vlogo-tete { display: flex; align-items: center; min-width: 0; overflow: hidden; line-height: 0; }
.vlogo-tete > .vlogo { display: grid; }
.js [data-tete]:not(.is-serre-2) .vlogo-tete > .vlogo { grid-template-columns: var(--vlogo-l); }

/* Plein Cadre : la marque est le lien lui-même ; sa garniture verticale de
   12 px, pensée pour une ligne de texte, ferait dépasser un logo de 42 px de
   la barre de 64 px. Sur la photo, le texte de la barre porte une ombre
   portée courte pour tenir sur un ciel clair : le logo la reçoit en filtre,
   posé sur le lien (sur l'élément masqué, l'ombre serait masquée avec lui),
   retiré quand la barre devient papier. */
.pc-marque.vlogo-tete { padding-block: 0; }
.pc-nav:not(.is-solide) .pc-marque.vlogo-tete {
  filter: drop-shadow(0 1px 2px rgba(10,9,7,.6)) drop-shadow(0 0 14px rgba(10,9,7,.4));
}
/* Le nom du pied de page, en grotesque géante, devient le logo en grand. Les
   masques sont dessinés à quatre fois leur taille : 2,2 reste net sur un écran
   dense de densité 2. */
.vlogo--geant { --vlogo-k: 2.2; }
@media (max-width: 860px) { .vlogo--geant { --vlogo-k: 1.5; } }
@media (max-width: 420px) { .vlogo--geant { --vlogo-k: 1.1; } }

/* ── Bold et Riso : le repli « symbole seul » (macro `repli`) ──
   La marque prend toute la place que lui laissent le bouton d'action et le
   menu, et elle devient un conteneur : c'est sa largeur réelle que lit la
   requête de conteneur de la macro. Le symbole n'est montré que sous le seuil,
   et il ne rétrécit pas. */
.vlogo-repli-hote { flex: 1 1 0; container: vlogo-marque / inline-size; }
.vlogo-repli-hote > .vlogo-repli { display: none; flex-shrink: 0; }
/* Bold, au-delà de 979 px : la ligne « métier · quartier » cède sa place au
   logo avant que celui-ci ne se resserre (une ellipse plutôt qu'un débord). */
.vlogo-repli-hote > .bd-sub { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Le Carnet ──
   Le rail du haut est une rangée d'étiquettes en capitales de 11 px : le logo
   y est posé plus petit, et c'est la navigation, faite pour défiler, qui lui
   laisse la place (il ne rétrécit pas). Le nom en tête de la fiche
   d'identité est un titre (52 px au plus) : le logo y est posé plus grand, et
   revient à une taille de barre sur téléphone, où la fiche passe sur une
   colonne. */
.cn-rail-brand.vlogo-marque { flex: none; }
.vlogo--rail { --vlogo-k: .8; grid-template-columns: var(--vlogo-l); }
.vlogo--fiche { --vlogo-k: 1.6; }
.cn-name.vlogo-bloc { margin-top: 10px; }
@media (max-width: 760px) {
  .vlogo--fiche { --vlogo-k: 1.2; }
}