/**
 * Le portrait manquant — composant partagé.
 *
 * POURQUOI UNE FEUILLE À PART
 *
 * Deux écrans montrent l'absence de portrait : les cartes du Bureau sur la page
 * Association, et le cercle du président sur l'accueil. Le DESSIN est le même —
 * une tête et des épaules — mais sa géométrie ne l'est pas : un rectangle de
 * 200px de haut d'un côté, un cercle de 82px de l'autre.
 *
 * Ce qui est donc partagé ici : la plaque, le centrage, et le SVG lui-même.
 * Ce qui reste dans chaque page : les dimensions et la forme.
 *
 * Recopier l'URI de données dans les deux feuilles aurait mis le même dessin à
 * deux endroits, avec la certitude qu'un jour l'un des deux changerait seul —
 * la même raison qui a fait sortir les boutons de réseaux d'`accueil.css`.
 *
 * POURQUOI PAS `upload/default.png`
 *
 * C'est le placeholder GÉNÉRIQUE du site, celui des couvertures d'événements et
 * de galeries. Sur une rangée de cinq membres, cinq cadres photo identiques se
 * lisent comme une panne, pas comme une absence.
 */

.portrait-vide {
    background: var(--gl-grey-125);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le dessin ne doit pas déborder d'un cercle : la page qui arrondit le bloc
       compte là-dessus. */
    overflow: hidden;
}

/* DEUX ÉLÉMENTS, ET NON UN SEUL.
   Le masque peint la couleur du FOND à travers le dessin : posés sur le même
   bloc, la plaque et la silhouette sortaient de la même teinte — c'est-à-dire
   que la silhouette était invisible. La plaque est portée par le bloc, la
   silhouette par ce `::after`, chacun avec sa couleur. */
.portrait-vide::after {
    content: '';
    /* Deux tiers du plus petit côté : le rapport tient aussi bien sur le
       rectangle du Bureau que sur le cercle du président, sans avoir à chiffrer
       une taille par écran. */
    width: 62%;
    height: 62%;
    /* Gris décoratif : assez soutenu pour se détacher de la plaque, assez
       discret pour ne pas se prendre pour un portrait. Le jeton porte
       d'ailleurs la mention « décoratif uniquement ». */
    background-color: var(--gl-grey-300);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.6a4.8 4.8 0 1 0 0-9.6 4.8 4.8 0 0 0 0 9.6Zm0 2.1c-3.6 0-8.4 1.9-8.4 5.1V21h16.8v-1.2c0-3.2-4.8-5.1-8.4-5.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.6a4.8 4.8 0 1 0 0-9.6 4.8 4.8 0 0 0 0 9.6Zm0 2.1c-3.6 0-8.4 1.9-8.4 5.1V21h16.8v-1.2c0-3.2-4.8-5.1-8.4-5.1Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Sans `mask-image`, le `::after` serait un carré gris plein — pire que rien.
   Il est alors retiré, et la plaque claire reste : une zone neutre là où une
   photo manque, ce qui se lit encore correctement. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .portrait-vide::after {
        display: none;
    }
}