/* Bloc Étapes (.pc) - « Parcours d'un projet » de docs/i4s-savoir-faire.html : les étapes reliées par un filet, la
   première en bleu plein ; trois par ligne en tablette, en colonne sur téléphone */
.pc{list-style:none;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));position:relative}
.pc--3{--n:3}
.pc--4{--n:4}
.pc--5{--n:5}
.pc::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
.pc li{position:relative;display:grid;gap:12px;align-content:start;padding-right:clamp(12px,1.6vw,24px)}
.pc__n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;
  background:#fff;border:2px solid var(--blue);color:var(--blue);font-size:1.25rem}
.pc li:first-child .pc__n{background:var(--blue);color:#fff}
.pc__k{font-family:var(--ui);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  color:var(--blue);font-variant-numeric:tabular-nums}
.pc h3{font-size:1.02rem;letter-spacing:-.01em;line-height:1.25}
.pc p{font-size:.88rem;color:var(--body)}
.band--ice .pc__n{background:var(--wash)}
.band--ice .pc li:first-child .pc__n{background:var(--blue)}

@media (max-width:1100px){
  .pc,.pc--4,.pc--5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .pc::before{display:none}
}
@media (max-width:640px){
  .pc,.pc--3,.pc--4,.pc--5{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pc li{grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding:0 0 26px;position:relative}
  .pc li::after{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--line)}
  .pc li:last-child::after{display:none}
  .pc__n{grid-row:1/4}
}

/* Variante « frise » (.tl) - « De la confection de toiles au groupe I-4S » de docs/i4s-le-groupe.html : une année à la
   place de l'icône, la première en marine, sur une ligne de temps */
.tl{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));position:relative}
.tl--3{--n:3}
.tl--5{--n:5}
.tl--6{--n:6}
.tl::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line)}
.tl li{position:relative;padding:0 clamp(14px,2vw,32px) 0 0;display:grid;gap:12px;align-content:start}
.tl__y{position:relative;z-index:1;display:inline-flex;align-items:center;height:40px;padding:0 16px;background:var(--blue);
  color:#fff;font-family:var(--ui);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  justify-self:start}
.tl li:first-child .tl__y{background:var(--navy)}
.tl h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.3;margin-top:6px}
.tl p{font-size:.92rem;color:var(--body)}

@media (max-width:1000px){
  .tl,.tl--3,.tl--5,.tl--6{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
}
@media (max-width:640px){
  .tl,.tl--3,.tl--5,.tl--6{grid-template-columns:minmax(0,1fr)}
  .tl::before{display:none}
}