/* ============================================================================
   ICONES.CSS — Les icônes du site, hébergées localement
   ----------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE

   Le site chargeait Font Awesome depuis cdnjs.cloudflare.com. Chaque visiteur
   envoyait donc son adresse IP à un serveur tiers AVANT même d'avoir répondu
   au bandeau cookies — exactement ce que tu avais pris soin d'éviter en
   hébergeant tes polices en local.

   Ce fichier remplace la dépendance entière. Aucune requête externe, aucune
   police à télécharger : les 7 icônes utilisées sont dessinées en SVG et
   intégrées directement dans le CSS.

   ----------------------------------------------------------------------------
   COMMENT ÇA MARCHE

   Ton balisage existant n'a pas changé d'un caractère :

       <i class="fas fa-lock"></i>

   Le SVG sert de MASQUE : la balise est un carré de 1em rempli de
   `currentColor`, et le masque n'en laisse visible que la forme de l'icône.

   Conséquence pratique : l'icône prend automatiquement la couleur du texte
   environnant. Tes styles en place continuent donc de fonctionner tels quels,
   y compris style="color:var(--accent)" et style="font-size:0.7rem".

   ----------------------------------------------------------------------------
   AJOUTER UNE ICÔNE PLUS TARD

   1. Récupère un SVG 24x24 en silhouette pleine
   2. Remplace < par %3C, > par %3E, # par %23, et les " par des '
   3. Ajoute la classe dans la liste du sélecteur commun ci-dessous
   4. Ajoute sa règle --ico

   Attention : seules les classes listées ici affichent quelque chose. Une
   classe fa-* inconnue ne produit rien du tout — plutôt qu'un carré plein,
   ce qui serait bien plus visible.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Le socle commun à toutes les icônes
   ---------------------------------------------------------------------------- */
.fa-lock, .fa-download, .fa-expand, .fa-sign-in-alt, .fa-instagram, .fa-youtube, .fa-linkedin-in {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;                 /* ne se comprime pas dans un conteneur flex */
    vertical-align: -0.125em;       /* aligne l'icône sur la ligne de base du texte */
    background-color: currentColor; /* d'où vient la couleur dorée automatique */

    -webkit-mask-image:    var(--ico);
            mask-image:    var(--ico);
    -webkit-mask-repeat:   no-repeat;
            mask-repeat:   no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size:     contain;
            mask-size:     contain;
}

/* ----------------------------------------------------------------------------
   Les icônes, une par une
   ---------------------------------------------------------------------------- */

.fa-lock {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 a5 5 0 0 0 -5 5 v3 h2.4 V7 a2.6 2.6 0 0 1 5.2 0 v3 H17 V7 a5 5 0 0 0 -5 -5 Z M5.6 10.6 h12.8 a1.8 1.8 0 0 1 1.8 1.8 v7.8 a1.8 1.8 0 0 1 -1.8 1.8 H5.6 a1.8 1.8 0 0 1 -1.8 -1.8 v-7.8 a1.8 1.8 0 0 1 1.8 -1.8 Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.fa-download {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8 2.6 h2.4 v8.2 h3.4 L12 16.8 L7.4 10.8 h3.4 Z M3.8 18.4 h16.4 v2.6 H3.8 Z'/%3E%3C/svg%3E");
}

.fa-expand {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3 h7.4 v2.4 H5.4 v5 H3 Z M13.6 3 H21 v7.4 h-2.4 v-5 h-5 Z M3 13.6 h2.4 v5 h5 V21 H3 Z M18.6 13.6 H21 V21 h-7.4 v-2.4 h5 Z'/%3E%3C/svg%3E");
}

.fa-sign-in-alt {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 10.8 h5.6 V7.2 L21.4 12 l-5.6 4.8 v-3.6 h-5.6 Z M3.4 2.8 h7.2 v2.4 H5.8 v13.6 h4.8 v2.4 H3.4 Z'/%3E%3C/svg%3E");
}

.fa-instagram {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 2 h9.2 a5.4 5.4 0 0 1 5.4 5.4 v9.2 a5.4 5.4 0 0 1 -5.4 5.4 H7.4 a5.4 5.4 0 0 1 -5.4 -5.4 V7.4 A5.4 5.4 0 0 1 7.4 2 Z M7.4 4.2 a3.2 3.2 0 0 0 -3.2 3.2 v9.2 a3.2 3.2 0 0 0 3.2 3.2 h9.2 a3.2 3.2 0 0 0 3.2 -3.2 V7.4 a3.2 3.2 0 0 0 -3.2 -3.2 Z M12 7.3 a4.7 4.7 0 1 0 0 9.4 a4.7 4.7 0 1 0 0 -9.4 Z M12 9.5 a2.5 2.5 0 1 1 0 5 a2.5 2.5 0 1 1 0 -5 Z M17.6 5.2 a1.3 1.3 0 1 0 0 2.6 a1.3 1.3 0 1 0 0 -2.6 Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.fa-youtube {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 5.4 h17.6 a2.6 2.6 0 0 1 2.6 2.6 v8 a2.6 2.6 0 0 1 -2.6 2.6 H3.2 a2.6 2.6 0 0 1 -2.6 -2.6 v-8 a2.6 2.6 0 0 1 2.6 -2.6 Z M10 8.6 v6.8 L15.8 12 Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.fa-linkedin-in {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 2.4 a2.3 2.3 0 1 0 0 4.6 a2.3 2.3 0 1 0 0 -4.6 Z M2.7 8.6 h3.8 V21.6 H2.7 Z M9.1 8.6 h3.6 v1.9 c0.8 -1.4 2.2 -2.2 3.9 -2.2 3.1 0 4.8 2 4.8 5.5 V21.6 h-3.7 v-6.9 c0 -1.7 -0.7 -2.7 -2.1 -2.7 -1.5 0 -2.4 1 -2.4 2.8 V21.6 H9.1 Z'/%3E%3C/svg%3E");
}