/* Tuiles numérotées des pages d'une rubrique et cartes de la liste des références (.sf) - docs/i4s-savoir-faire.html :
   photo de tête, ou tuile marine à l'icône de la page, numéro (ou chiffre, sigle d'une référence), titre avec l'icône,
   accroche. Toute la carte est cliquable. Cartes séparées, trois par rangée même quand il y en a moins, comme les cartes
   des actualités (décision d'Alexandre, 22/09/2026 : plus de grille collée à filets de 1 px) : même écart, même filet,
   même survol, même corps de texte, accroche limitée à cinq lignes, lien en pied de carte. */
.sf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.sf li{display:grid}
.sf a{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);color:var(--navy);
  transition:border-color .18s,box-shadow .18s}
.sf a:hover{border-color:var(--blue);box-shadow:var(--sh-2);text-decoration:none}
.sf__p{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.sf__p img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sf a:hover .sf__p img{transform:scale(1.045)}
.sf__p--t{display:grid;place-items:center;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0) 0 0/16px 16px,var(--navy)}
.sf__p--t .ic{font-size:2.6rem;color:#5CC1EC}

/* Page Implantations sans image de tête : la carte des implantations, sur le fond de sa bande de tête (aplat navy et
   camouflage en trame de points ; décision d'Alexandre, 22/09/2026) */
.sf__p--carte{position:relative;background:var(--navy)}
.sf__p--carte::before{content:"";position:absolute;inset:0;background:url("../../../images/site/trame-camouflage-1-fifnXe7.svg") center/cover no-repeat;
  opacity:.13;pointer-events:none}
.sf__p--carte img{position:relative}
.sf__n{position:absolute;left:0;bottom:0;background:var(--blue);color:#fff;font-family:var(--ui);
  font-weight:800;font-size:1.05rem;letter-spacing:-.01em;padding:10px 14px;
  font-variant-numeric:tabular-nums}
.sf__b{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,28px)}
.sf__b h3{font-size:1.14rem;letter-spacing:-.015em;line-height:1.3;display:flex;align-items:center;gap:12px}
.sf__b h3 .ic{color:var(--blue);font-size:1.05rem;flex:none}
.sf__b p{font-size:.93rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.sf__b .more{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-s)}

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