/**
 * Composant — Pastille icône (nouveau design validé le 23/09/2026).
 * Markup : _composants/pastille-icone.php. Documentation : COMPOSANTS.md.
 *
 * Langage visuel commun (DESIGNS.md) :
 *   - dégradé teal des boutons pleins .verdon-cta (teal mid → teal → #143F3A) ;
 *   - ombre douce teal des cartes (0 8px 24px rgba(teal, .18)) ;
 *   - fine bordure intérieure blanche, comme sur les images des blocs.
 *
 * .pphp-titre-icone : ligne « pastille + titre » utilisée par les
 * composants texte, image-texte et carte-encart quand une icône est donnée.
 */

.pphp-pastille {
    --pphp-teal: #1F5C56;
    --pphp-teal-mid: #2D7A72;
    --pphp-teal-rgb: 31, 92, 86;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--pphp-teal);
    background-image: linear-gradient(135deg, var(--pphp-teal-mid) 0%, var(--pphp-teal) 55%, #143F3A 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(var(--pphp-teal-rgb), 0.18);
}

/* Bordure intérieure blanche (rappel .bloc-imagetexte__media-inner-border) */
.pphp-pastille::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
}

.pphp-pastille svg {
    width: 26px;
    height: 26px;
}

/* Pictogramme seul (forme « nu ») : prend la couleur du texte voisin */
.pphp-icone {
    display: inline-flex;
    flex-shrink: 0;
}

.pphp-icone svg {
    width: 20px;
    height: 20px;
}

/* =========================================================================
   Ligne pastille + titre
   ========================================================================= */
.pphp-titre-icone {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 1.5rem;
}

.pphp-titre-icone > h2,
.pphp-titre-icone > h3 {
    margin: 0 !important;
}

@media (max-width: 700px) {
    .pphp-pastille {
        width: 46px;
        height: 46px;
    }

    .pphp-pastille svg {
        width: 22px;
        height: 22px;
    }

    .pphp-titre-icone {
        gap: 14px;
        margin-bottom: 1.25rem;
    }
}