/* Bloc Liste à icônes (.li6) - « Six critères mesurés » de docs/i4s-essais.html : trois colonnes, un numéro, une
   tuile d'icône, un titre et une ligne ; un filet bleu ciel se déroule au survol */
/* Filets portés par les éléments : une rangée incomplète ne laisse pas de case grise */
.li6{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.li6 li{position:relative;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,2.4vw,32px);display:grid;gap:10px;
  align-content:start;transition:background .16s}
.li6 li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sky);
  transform:scaleX(0);transform-origin:left;transition:transform .22s}
.li6 li:hover::before{transform:scaleX(1)}
.li6 .tile{display:grid;place-items:center;width:48px;height:48px;background:var(--blue);color:#fff;font-size:1.15rem}
.li6 .tile .ic,.li6 .tile svg{width:1em;height:1em}
.li6 h3{font-size:1.08rem;letter-spacing:-.01em;margin-top:6px}
.li6 p{font-size:.92rem}
.li6__k{position:absolute;right:clamp(18px,2vw,28px);top:clamp(20px,2.2vw,30px);font-family:var(--ui);
  font-weight:800;font-size:.8rem;color:#A8C2D2;font-variant-numeric:tabular-nums}

@media (max-width:1000px){.li6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.li6{grid-template-columns:minmax(0,1fr)}}

/* Variante « cartes » (.vl) - « Des produits de qualité, et les valeurs qui vont avec » de docs/i4s-le-groupe.html :
   un paragraphe par carte, filet bleu ciel au survol */
.vl{list-style:none;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.vl--2{--n:2}
.vl li{position:relative;background:#fff;padding:clamp(24px,2.8vw,36px);display:grid;gap:12px;align-content:start;transition:background .16s}
.vl li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sky);transform:scaleX(0);
  transform-origin:left;transition:transform .22s}
.vl li:hover{background:var(--wash)}
.vl li:hover::before{transform:scaleX(1)}
.vl .tile{width:48px;height:48px;font-size:1.15rem}
.vl__k{position:absolute;right:clamp(18px,2vw,28px);top:clamp(20px,2.2vw,30px);font-family:var(--ui);font-weight:800;
  font-size:.8rem;color:#A8C2D2}
.vl h3{font-size:1.15rem;letter-spacing:-.015em;margin-top:6px}
.vl p{font-size:.95rem;line-height:1.6}

@media (max-width:1100px){.vl,.vl--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.vl,.vl--2{grid-template-columns:minmax(0,1fr)}}