/* ==========================================================================
   WS BANNIERE - LA RANGEE D'ATOUTS

   Un bloc partage : Classique l'emploie en grille, Atelier l'emploiera en
   bandeau. La seule difference entre les deux dispositions est
   `grid-auto-flow` ; tout le reste est commun, et c'est ce qui rend le
   partage possible sans condition partout.

   CHAQUE VALEUR PORTE SON REPLI LA OU ELLE EST LUE.
   Un `var()` sans valeur de secours rend la declaration entiere INVALIDE, pas
   seulement vide : la marge, l'ecart et la taille de l'icone tomberaient a
   zero d'un coup, et le bloc s'ecraserait en un filet de quelques pixels. Ce
   qui ressemble a un bloc absent.

   SPECIFICITE : on reste en 0-1-0, sauf pour les SVG.
   Elementor ecrit `.elementor-element-XXX .classe` (0-2-0) et doit toujours
   gagner. Les themes, eux, normalisent les icones avec
   `.elementor-element svg{width:1em}` en 0-1-1 : le SVG de l'icone porte donc
   la classe de son conteneur devant, pour passer en 0-2-0 et tenir.
   ========================================================================== */

.wsbn-atouts{
  display:grid;
  grid-template-columns:repeat(var(--wsbn-atouts-col, 2), minmax(0, auto));
  justify-content:start;
  column-gap:var(--wsbn-atouts-gap-x, 34px);
  row-gap:var(--wsbn-atouts-gap-y, 14px);
  margin:var(--wsbn-atouts-haut, 4px) 0 var(--wsbn-atouts-bas, 30px);
  padding:0;
  list-style:none;
}

/* La rangee : une seule ligne, quelles que soient les colonnes reglees.
   `grid-auto-flow:column` remplit en colonnes plutot qu'en lignes, et
   `grid-template-columns:none` laisse le navigateur en creer autant qu'il y a
   d'atouts. */
.wsbn-atouts--rangee{
  grid-auto-flow:column;
  grid-template-columns:none;
}

.wsbn-atouts__item{
  display:flex;
  align-items:center;
  gap:var(--wsbn-atouts-ico-gap, 12px);
  min-width:0;
}

.wsbn-atouts__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:var(--wsbn-atouts-ico, 26px);
  height:var(--wsbn-atouts-ico, 26px);
  color:var(--wsbn-atouts-ico-color, #23261F);
}

/* LA RACINE DEVANT LE SVG, ET CE N'EST PAS DECORATIF.
   Les themes posent `.elementor-element svg{width:1em}`, en 0-1-1. Sans la
   classe du conteneur devant, ce selecteur vaudrait 0-1-1 lui aussi et ne
   tiendrait que par l'ordre de chargement. Avec elle on est en 0-2-0. */
.wsbn-atouts__ico svg,
.wsbn-atouts__ico i{
  width:60%;
  height:60%;
  font-size:60%;
  display:block;
  fill:currentColor;
  color:inherit;
}

/* Sans rond, l'icone occupe toute la boite : il n'y a plus de pastille a
   l'interieur de laquelle se ranger. */
.wsbn-atouts-fond-aucun .wsbn-atouts__ico svg,
.wsbn-atouts-fond-aucun .wsbn-atouts__ico i{
  width:100%;
  height:100%;
  font-size:100%;
}

/* Les trois formes du fond. Portees par la classe de prefixe, posee par
   Elementor sur l'enveloppe du widget. */
.wsbn-atouts-fond-plein .wsbn-atouts__ico{
  background:var(--wsbn-atouts-ico-bg, #D9A441);
  border-radius:999px;
}
.wsbn-atouts-fond-contour .wsbn-atouts__ico{
  background:none;
  border-radius:999px;
  border:1.5px solid var(--wsbn-atouts-ico-bg, #D9A441);
  color:var(--wsbn-atouts-ico-bg, #D9A441);
}
.wsbn-atouts-fond-aucun .wsbn-atouts__ico{
  background:none;
  border:0;
  color:var(--wsbn-atouts-ico-bg, #D9A441);
}

.wsbn-atouts__txt{
  min-width:0;
  line-height:1.35;
  font-size:var(--wsbn-atouts-txt, 15px);
}
.wsbn-atouts__txt b{
  display:block;
  font-weight:500;
  color:var(--wsbn-atouts-txt-color, #FFFFFF);
}
.wsbn-atouts__txt span{
  display:block;
  font-size:.88em;
  color:var(--wsbn-atouts-sous-color, rgba(255,255,255,.62));
}

/* --------------------------------------------------------------------------
   SUR TELEPHONE, LA RANGEE REDEVIENT UNE GRILLE

   Mesure sur un ecran de 390 px : quatre atouts cote a cote dans une
   colonne de 175 px donnent quatre colonnes de dix-huit pixels, et le texte
   se coupe caractere par caractere.

   La grille, elle, passait deja a une colonne : c'est le reglage responsive
   du nombre de colonnes qui s'en charge, et la rangee l'ignore par
   construction. Sous 767 px elle le reprend donc, avec son defaut mobile
   de 1. Qui veut vraiment deux atouts par ligne sur un telephone met ce
   reglage a 2 : rien n'est cache.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .wsbn-atouts--rangee{
    grid-auto-flow:row;
    grid-template-columns:repeat(var(--wsbn-atouts-col, 1), minmax(0, auto));
  }
}