/*
 * WS Banniere - le bandeau d'avis
 *
 * Une ligne par source : logo ou icone, nom, note en etoiles, texte libre.
 * Partage par Arc et Classique depuis la 1.66. Il est ne dans Arc, d'ou
 * les commentaires qui parlent de la colonne de texte : ils restent vrais.
 *
 * LES VARIABLES VIENNENT DE L'ENVELOPPE DU WIDGET, pas d'une racine de
 * banniere : c'est ce qui permet au bloc de servir partout.
 *
 * SPECIFICITE FAIBLE, comme partout ailleurs : Elementor ecrit
 * `.elementor-element-XXX .classe`, en 0-2-0, et doit gagner.
 */

.wsbn-avis{
  display:flex;
  flex-wrap:wrap;
  gap:var(--wsbn-avis-gap, 30px);
  /* Marges PROPRES aux avis, et pas des marges posees sur les blocs
     voisins : le bouton a deja son reglage de marge herite de Classique,
     et deux commandes sur la meme arete se contrediraient sans qu'on
     sache laquelle gagne.
     La marge du HAUT accepte le negatif : elle mord alors sur l'ecart
     commun de la colonne et rapproche les avis de la description. */
  margin-top:var(--wsbn-avis-haut, 0px);
  margin-bottom:var(--wsbn-avis-bas, 8px);
}

.wsbn-avis__item{
  display:flex;
  flex-direction:column;
  gap:var(--wsbn-avis-rows-gap, 5px);
}

/* Un avis peut être un lien. Le reset `a{color:inherit}` de beaucoup de
   thèmes bat une classe simple posée sur un <a> : on qualifie donc par
   `a.` pour reprendre la main sur la couleur et le soulignement. */
a.wsbn-avis__item{
  color:inherit;
  text-decoration:none;
}

a.wsbn-avis__item:hover .wsbn-avis__nom{
  color:var(--wsbn-avis-nom-hover, #4E6340);
}

.wsbn-avis__head{
  display:flex;
  align-items:center;
  gap:var(--wsbn-avis-head-gap, 7px);
}

.wsbn-avis__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Couleur DÉDIÉE : l'icône ne doit pas dépendre de la couleur du nom, sinon
     un logo de marque devient illisible dès qu'on retouche le texte. */
  color:var(--wsbn-avis-ico, #151E19);
  font-size:var(--wsbn-avis-ico-size, 17px);
}

.wsbn-avis__ico svg{
  width:1em;
  height:1em;
  fill:currentColor;
}

.wsbn-avis__nom{
  color:var(--wsbn-avis-nom, #151E19);
  font-size:13.5px;
  font-weight:800;
  line-height:1.2;
  transition:color var(--wsbn-avis-hover-speed, .3s) ease;
}

.wsbn-avis__ligne{
  display:flex;
  align-items:center;
  gap:var(--wsbn-avis-note-gap, 8px);
}

.wsbn-avis__texte{
  color:var(--wsbn-avis-texte, #6E736C);
  font-size:11.5px;
  line-height:1.3;
  white-space:nowrap;
}

/* LA NOTE. Deux rangées d'étoiles superposées : la pleine est rognée à la
   largeur de la note. Une note de 4,8/5 affiche donc 96% d'étoiles pleines,
   pas 5 étoiles arrondies vers le haut. */
.wsbn-avis__etoiles{
  position:relative;
  display:inline-block;
  line-height:0;
  flex:none;
}

.wsbn-avis__etoiles-vide,
.wsbn-avis__etoiles-plein{
  display:flex;
  gap:var(--wsbn-avis-star-gap, 2px);
  line-height:0;
}

.wsbn-avis__etoiles-plein{
  position:absolute;
  top:0;
  left:0;
  width:var(--wsbn-avis-note,100%);
  overflow:hidden;
}

.wsbn-avis__etoiles svg{
  width:var(--wsbn-avis-star-size, 14px);
  height:var(--wsbn-avis-star-size, 14px);
  flex:none;
}

.wsbn-avis__etoiles-vide svg{ fill:var(--wsbn-avis-star-vide, rgba(21,30,25,.16)); }
.wsbn-avis__etoiles-plein svg{ fill:var(--wsbn-avis-star, #F0A32E); }

/* Variante « blocs » : l'étoile est posée en creux dans un carré plein. */
.wsbn-avis__etoiles--blocs .wsbn-avis__etoiles-vide span,
.wsbn-avis__etoiles--blocs .wsbn-avis__etoiles-plein span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--wsbn-avis-star-size, 14px);
  height:var(--wsbn-avis-star-size, 14px);
  flex:none;
}

.wsbn-avis__etoiles--blocs .wsbn-avis__etoiles-vide span{ background:var(--wsbn-avis-star-vide, rgba(21,30,25,.16)); }
.wsbn-avis__etoiles--blocs .wsbn-avis__etoiles-plein span{ background:var(--wsbn-avis-star, #F0A32E); }

.wsbn-avis__etoiles--blocs svg{
  width:calc(var(--wsbn-avis-star-size, 14px) * .72);
  height:calc(var(--wsbn-avis-star-size, 14px) * .72);
  fill:#FFFFFF;
}


/* --------------------------------------------------------------------------
   SOUS 520 PX
   Le bandeau se SERRE au lieu de s'empiler : deux sources d'avis l'une
   sous l'autre mangent la hauteur utile d'un telephone. Le texte se coupe
   par des points de suspension plutot que de deborder.
   -------------------------------------------------------------------------- */

@media (max-width:520px){
  .wsbn-avis{
    flex-wrap:nowrap;
  }

  /* Sans min-width:0, un element flexible refuse de descendre sous la
     largeur de son contenu et deborde au lieu de se serrer. */
  .wsbn-avis__item,
  .wsbn-avis__ligne{
    min-width:0;
  }

  .wsbn-avis__texte{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Specificite faible assumee : si l'auteur a regle la typographie des avis
     dans le panneau, c'est SON reglage qui doit gagner, y compris ici. */
  .wsbn-avis__nom{ font-size:12.5px; }
  .wsbn-avis__texte{ font-size:10px; }
  .wsbn-avis__ico{ font-size:15px; }
}