/* ==========================================================================
   COUCHE « SITE » — habillage propre à CE site, hors du cœur ARTAWEB
   ==========================================================================

   Pendant CSS de config/site.php : le cœur (base, layout, components,
   sections, blog, events) doit pouvoir servir n'importe quel site ; tout ce
   qui n'a de sens que pour celui-ci vit ici.

   Chargée APRÈS les feuilles du cœur, donc prioritaire à spécificité égale.

   ⚠️  Ce fichier N'EST PAS écrasé par une mise à jour du cœur. Sur un nouveau
   site, on le vide (ou on le remplace) : rien de ce qu'il contient ne doit
   être nécessaire au fonctionnement du CMS.

   Règle d'admission : une règle a sa place ici dès qu'elle nomme un contenu
   précis — un slug de section, une page, une image. Le cœur, lui, ne connaît
   que des composants.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section « Fonctionnalités » de l'accueil : pastille ronde à cheval sur le
   bord haut de chaque carte (les visuels sont des PNG blancs détourés).

   Cette règle cible `#fonctions`, c'est-à-dire l'ANCRE d'une section — donc le
   slug d'un contenu. Elle vivait dans css/sections.css, une feuille du cœur :
   renommer la section depuis l'admin cassait la mise en page, sans que rien
   ne l'explique.
   -------------------------------------------------------------------------- */
#fonctions .block-card {
    overflow: visible;
    margin-top: 44px; /* place pour la moitié haute de la pastille qui déborde */
}
#fonctions .block-card__image {
    width: 88px;
    height: 88px;
    margin: -44px auto var(--space-md); /* -44 = moitié de la pastille au-dessus de la carte */
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
#fonctions .block-card__image img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}