.banniere{margin:20px 0 32px}
.banniere .carte{background:linear-gradient(135deg,#12356b,#1c5dff);color:#fff;padding:32px 24px 30px;border-radius:20px}
.banniere h1{font:800 var(--h1)/1.1 var(--titre);letter-spacing:.3px;margin:0 0 .6rem}
.banniere p{margin:.4rem 0 1rem;opacity:.96}
.banniere .actions{display:flex;gap:.7rem;flex-wrap:wrap}
main{padding-top:6px}

.indices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:8px 0 24px}
.indices .case{padding:22px;text-align:center}
.valeur{font:800 1.5rem/1 var(--texte);color:#2ac4ff;margin-top:.35rem}
.libelle{font-size:.95rem;color:#bcd0ff;margin-top:.25rem}

.grille-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 1.4rem}
.grille{display:grid}
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}

.ico{
  width:48px;height:48px;
  margin:0 auto .6rem;border-radius:14px;
  display:grid;place-items:center;}
.ico img{
  width:48px;height:48px;
  filter:invert(20%) sepia(88%) saturate(3162%) hue-rotate(220deg) brightness(100%) contrast(98%);}
:target{scroll-margin-top:92px}

@media (max-width:900px){
  .indices,.grille-cartes,.etapes{grid-template-columns:1fr}
}