/* =========================================================
   Icônes SVG (remplace Font Awesome)
   Font Awesome Free 6.7.2 — https://fontawesome.com — CC BY 4.0
   ========================================================= */

/* 1. Icônes en ligne : <i><svg class="icon"><use href="#i-xxx"/></svg></i>
      La taille et la couleur viennent du <i> parent (font-size / color),
      donc vos règles existantes (.contact-social a i, :hover, etc.) continuent de marcher. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  overflow: visible;
}

/* Les deux règles ci-dessous utilisent des fichiers SVG (img/icons/) et non des data: URI,
   car votre en-tête CSP (default-src https:) bloque les images data:. */

/* 2. Coche devant chaque compétence (remplace content:"\f00c" + font-family:FontAwesome) */
.skill-list ul li::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px 0 0;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("../images/check.svg") no-repeat center / contain;
          mask: url("../images/check.svg") no-repeat center / contain;
}

/* 3. Bouton menu mobile (remplace content:"\f039" + font-family:FontAwesome) */
@media screen and (max-width: 768px) {
  .menu-link::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("../images/menu.svg") no-repeat center / contain;
            mask: url("../images/menu.svg") no-repeat center / contain;
  }
}